Refactor branch/tag selector to Vue SFC #23421

wxiaoguang · 2023-03-11T11:52:19Z

There were many bad smells in old code. This PR only moves the code into Vue SFC, doesn't touch the unrelated logic.

update: after 5f23218 , there should be no usage of the vue-rumtime-compiler anymore (hopefully), so I think this PR could close #19851

web_src/js/svg.js

web_src/js/components/RepoBranchTagSelector.vue

delvh

😒

wxiaoguang · 2023-03-13T09:42:47Z

Thank you. The code is quite old and complex, I do not want to change too much 😂

wxiaoguang · 2023-03-13T09:56:14Z

More details of this component:

Old code has too many problems:

// TODO: fix this anti-pattern: side-effects-in-computed-properties, it's really fragile, it would cause problems sooner or later ...
The using of jQuery: $().val(), $.trigger(), etc. jQuery shouldn't be used in Vue ....

In the future, we could rewrite this component to make it clear, then we would have enough time to do a full test of it.

So, it's better to leave the code rewriting together at the time, then we do not need to spend twice time on full-test.

codecov-commenter · 2023-03-14T04:03:42Z

Codecov Report

Merging #23421 (41f24bc) into main (d56bb74) will increase coverage by 47.18%.
The diff coverage is n/a.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff            @@
##           main   #23421       +/-   ##
=========================================
+ Coverage      0   47.18%   +47.18%     
=========================================
  Files         0     1153     +1153     
  Lines         0   152151   +152151     
=========================================
+ Hits          0    71798    +71798     
- Misses        0    71874    +71874     
- Partials      0     8479     +8479

see 1153 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

# Conflicts: # web_src/js/components/RepoBranchTagDropdown.js # web_src/js/svg.js

…be a warning in console log

wxiaoguang · 2023-03-14T06:21:41Z

Some details about the changes after 2 LGTM:

5f23218
- fix a bug in code, the size should be integer type
- generate svg by function, instead of template: avoid using vue runtime compiler, then Gitea works with disabled unsafe-eval CSP.
3c698d2
- declare vue config explicitly (the same as the default before), otherwise there will be a warning in console log

They don't affect the reviewed logic.

* giteaofficial/main: (33 commits) Bump webpack from 5.75.0 to 5.76.0 (go-gitea#23484) Replace Less with CSS (go-gitea#23481) Fix 'View File' button in code search (go-gitea#23478) Use `gitea/test_env` image instead of `golang` (go-gitea#23455) Skip DB tests duplicate runs on push to branches (go-gitea#23476) Update app.example.ini (go-gitea#23480) [skip ci] Updated translations via Crowdin Fix due date being wrong on issue list (go-gitea#23475) test_env: hardcode major go version in use (go-gitea#23464) Push option bonus for PTC docs (go-gitea#23473) Lint Markdown pass Push to create docs (go-gitea#23458) Convert GitHub event on actions and fix some pull_request events. (go-gitea#23037) Remove wrongly added column on migration test fixtures (go-gitea#23456) Refactor branch/tag selector to Vue SFC (go-gitea#23421) add admin API email endpoints (go-gitea#22792) add user rename endpoint to admin api (go-gitea#22789) Add workflow error notification in ui (go-gitea#23404) Make branches list page operations remember current page (go-gitea#23420) fix markdown lint issue (go-gitea#23457) ...

silverwind · 2023-03-15T18:22:04Z

generate svg by function, instead of template: avoid using vue runtime compiler, then Gitea works with disabled unsafe-eval CSP.

Does that mean we can drop the @vue/compiler-sfc dependency? Is that the runtime compiler or is it something else?

wxiaoguang · 2023-03-16T01:32:40Z

According to Vue document, the runtime compiler could be tree-shaked but I haven't confirmed it and haven't tested how @vue/compiler-sfc affectes the packing. According to https://github.com/vuejs/core/tree/main/packages/compiler-sfc :

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/compiler-sfc. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the main vue/compiler-sfc deep import instead.

There were still some unclear points to me, so I chose to keep them as before. 😂

If you have ideas about how to continue to improve, feel free to do it and I'd like to learn more.

wxiaoguang force-pushed the refactor-branch-selector branch from 2e6814b to cbbab48 Compare March 11, 2023 11:53

wxiaoguang mentioned this pull request Mar 11, 2023

Refactor branch/tag selector dropdown (first step) #23394

Merged

lunny added topic/ui Change the appearance of the Gitea UI type/refactoring Existing code has been cleaned up. There should be no new functionality. labels Mar 11, 2023

wxiaoguang force-pushed the refactor-branch-selector branch 2 times, most recently from 53bf4c3 to 0e20b2a Compare March 11, 2023 12:30

refactor

7553c9a

wxiaoguang force-pushed the refactor-branch-selector branch from 0e20b2a to 7553c9a Compare March 11, 2023 12:53

wxiaoguang mentioned this pull request Mar 12, 2023

Branch selector disappear immediately (Uncaught EvalError: 'unsafe-eval' is not an allowed) #19851

Closed

lunny added this to the 1.20.0 milestone Mar 12, 2023

lunny approved these changes Mar 12, 2023

View reviewed changes

GiteaBot added the lgtm/need 1 This PR needs approval from one additional maintainer to be merged. label Mar 12, 2023

HesterG approved these changes Mar 13, 2023

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 13, 2023

lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 13, 2023

delvh reviewed Mar 13, 2023

View reviewed changes

delvh approved these changes Mar 13, 2023

View reviewed changes

This was referenced Mar 13, 2023

Refactor dashboard repo list to Vue SFC #23405

Merged

Fix aria.js bugs: incorrect role element problem, mobile focus problem, tippy problem #23450

Merged

wxiaoguang added 2 commits March 14, 2023 11:07

Merge branch 'main' into refactor-branch-selector

f660109

move svg icon to make conflict resolving easier

e725377

Merge branch 'main' into refactor-branch-selector

744c8c6

# Conflicts: # web_src/js/components/RepoBranchTagDropdown.js # web_src/js/svg.js

wxiaoguang force-pushed the refactor-branch-selector branch from 7b6bb1c to 9f0fa2a Compare March 14, 2023 05:38

avoid using vue runtime compiler

5f23218

wxiaoguang force-pushed the refactor-branch-selector branch from 9f0fa2a to 5f23218 Compare March 14, 2023 05:41

declare vue config explicitly (as the default), otherwise there will …

3c698d2

…be a warning in console log

lunny and others added 2 commits March 14, 2023 15:27

Merge branch 'main' into refactor-branch-selector

d43f435

Merge branch 'main' into refactor-branch-selector

41f24bc

lafriks approved these changes Mar 14, 2023

View reviewed changes

lunny merged commit ac8d71f into go-gitea:main Mar 14, 2023

lunny removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 14, 2023

wxiaoguang deleted the refactor-branch-selector branch March 14, 2023 09:51

wxiaoguang mentioned this pull request Mar 19, 2023

Use a general approach to show tooltip, fix temporary tooltip bug #23574

Merged

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor branch/tag selector to Vue SFC #23421

Refactor branch/tag selector to Vue SFC #23421

wxiaoguang commented Mar 11, 2023 •

edited

Loading

delvh left a comment

wxiaoguang commented Mar 13, 2023

wxiaoguang commented Mar 13, 2023 •

edited

Loading

codecov-commenter commented Mar 14, 2023 •

edited

Loading

wxiaoguang commented Mar 14, 2023 •

edited

Loading

silverwind commented Mar 15, 2023 •

edited

Loading

wxiaoguang commented Mar 16, 2023

Refactor branch/tag selector to Vue SFC #23421

Refactor branch/tag selector to Vue SFC #23421

Conversation

wxiaoguang commented Mar 11, 2023 • edited Loading

delvh left a comment

Choose a reason for hiding this comment

wxiaoguang commented Mar 13, 2023

wxiaoguang commented Mar 13, 2023 • edited Loading

codecov-commenter commented Mar 14, 2023 • edited Loading

Codecov Report

wxiaoguang commented Mar 14, 2023 • edited Loading

silverwind commented Mar 15, 2023 • edited Loading

wxiaoguang commented Mar 16, 2023

wxiaoguang commented Mar 11, 2023 •

edited

Loading

wxiaoguang commented Mar 13, 2023 •

edited

Loading

codecov-commenter commented Mar 14, 2023 •

edited

Loading

wxiaoguang commented Mar 14, 2023 •

edited

Loading

silverwind commented Mar 15, 2023 •

edited

Loading