-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove jQuery .attr
from the common admin functions
#30115
Remove jQuery .attr
from the common admin functions
#30115
Conversation
- Switched from jQuery `attr` to plain javascript `getAttribute` and `setAttribute` - Tested most of the functions and they work as before Signed-off-by: Yarden Shoham <git@yardenshoham.com>
@lunny just enable auto-merge next time please. A lot of useless CI runs otherwise. |
* main: (106 commits) Relax generic package filename restrictions (go-gitea#30135) Remove jQuery class from the common admin functions (go-gitea#30137) Remove jQuery class from the reaction selector (go-gitea#30138) Forbid jQuery `.attr` (go-gitea#30116) Refactor render (go-gitea#30136) Fix: Organization Interface Display Issue (go-gitea#30133) Remove jQuery `.attr` from the Fomantic dropdowns (go-gitea#30114) Remove jQuery `.attr` from the common admin functions (go-gitea#30115) Remove jQuery from the create/rename branch modals (except Fomantic) (go-gitea#30109) Remove fomantic label module (go-gitea#30081) Fix bug for markdown rendering of blockquote (go-gitea#30130) Fix: The interface is broken when modifying code comments under mobile devices (go-gitea#30125) When the title in the issue has a value, set the text cursor at the end of the text. (go-gitea#30090) Load attachments for code comments (go-gitea#30124) Upgrade fabric to 6.0.0-beta20 (go-gitea#30121) Fix click handler in job-step-summary (go-gitea#30122) Put an edit file button on pull request files to allow a quick operation (go-gitea#29697) Remove jQuery `.attr` from the Fomantic modal cancel buttons (go-gitea#30113) Remove jQuery `.attr` from the code comments (go-gitea#30112) Remove jQuery calls that have no effect on `showElem` and `hideElem` (go-gitea#30110) ...
* origin/main: (108 commits) Fix table alignment classes (go-gitea#30144) Add default board to new projects, remove uncategorized pseudo-board (go-gitea#29874) Fix loading spinner on ContextPopup (go-gitea#30145) Fix download buttons on branches page (go-gitea#30147) Relax generic package filename restrictions (go-gitea#30135) Remove jQuery class from the common admin functions (go-gitea#30137) Remove jQuery class from the reaction selector (go-gitea#30138) Forbid jQuery `.attr` (go-gitea#30116) Refactor render (go-gitea#30136) Fix: Organization Interface Display Issue (go-gitea#30133) Remove jQuery `.attr` from the Fomantic dropdowns (go-gitea#30114) Remove jQuery `.attr` from the common admin functions (go-gitea#30115) Remove jQuery from the create/rename branch modals (except Fomantic) (go-gitea#30109) Remove fomantic label module (go-gitea#30081) Fix bug for markdown rendering of blockquote (go-gitea#30130) Fix: The interface is broken when modifying code comments under mobile devices (go-gitea#30125) When the title in the issue has a value, set the text cursor at the end of the text. (go-gitea#30090) Load attachments for code comments (go-gitea#30124) Upgrade fabric to 6.0.0-beta20 (go-gitea#30121) Fix click handler in job-step-summary (go-gitea#30122) ...
* giteaofficial/main: (63 commits) Apply to become a maintainer (go-gitea#30151) Refactor markdown render (go-gitea#30139) Drag-and-drop improvements for projects and issue pins (go-gitea#29875) Fix table alignment classes (go-gitea#30144) Add default board to new projects, remove uncategorized pseudo-board (go-gitea#29874) Fix loading spinner on ContextPopup (go-gitea#30145) Fix download buttons on branches page (go-gitea#30147) Relax generic package filename restrictions (go-gitea#30135) Remove jQuery class from the common admin functions (go-gitea#30137) Remove jQuery class from the reaction selector (go-gitea#30138) Forbid jQuery `.attr` (go-gitea#30116) Refactor render (go-gitea#30136) Fix: Organization Interface Display Issue (go-gitea#30133) Remove jQuery `.attr` from the Fomantic dropdowns (go-gitea#30114) Remove jQuery `.attr` from the common admin functions (go-gitea#30115) Remove jQuery from the create/rename branch modals (except Fomantic) (go-gitea#30109) Remove fomantic label module (go-gitea#30081) Fix bug for markdown rendering of blockquote (go-gitea#30130) Fix: The interface is broken when modifying code comments under mobile devices (go-gitea#30125) When the title in the issue has a value, set the text cursor at the end of the text. (go-gitea#30090) ... # Conflicts: # templates/user/dashboard/issues.tmpl
Fix #30434, regression from #30115. I also removed the date insertion into the modal which was also broken since that date was switched to `absolute-date` because I see no real purpose to putting that date into the modal. Result: <img width="1038" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/aa2eb8b4-73dc-4d98-9b80-3f276f89d9e5">
Fix go-gitea#30434, regression from go-gitea#30115. I also removed the date insertion into the modal which was also broken since that date was switched to `absolute-date` because I see no real purpose to putting that date into the modal. Result: <img width="1038" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/aa2eb8b4-73dc-4d98-9b80-3f276f89d9e5">
Backport #30450 by @silverwind Fix #30434, regression from #30115. I also removed the date insertion into the modal which was also broken since that date was switched to `absolute-date` because I see no real purpose to putting that date into the modal. Result: <img width="1038" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/aa2eb8b4-73dc-4d98-9b80-3f276f89d9e5"> Co-authored-by: silverwind <me@silverwind.io>
Fix go-gitea/gitea#30434, regression from go-gitea/gitea#30115. I also removed the date insertion into the modal which was also broken since that date was switched to `absolute-date` because I see no real purpose to putting that date into the modal. Result: <img width="1038" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/aa2eb8b4-73dc-4d98-9b80-3f276f89d9e5"> (cherry picked from commit 8fd8978b4934865c2b041216e84e923ad574a4c7)
Backport #30450 by @silverwind Fix go-gitea/gitea#30434, regression from go-gitea/gitea#30115. I also removed the date insertion into the modal which was also broken since that date was switched to `absolute-date` because I see no real purpose to putting that date into the modal. Result: <img width="1038" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/aa2eb8b4-73dc-4d98-9b80-3f276f89d9e5"> Co-authored-by: silverwind <me@silverwind.io> (cherry picked from commit fd2184e2343842e158f5b12e3d2e5b88effea2fd)
showElem('.open_id_connect_auto_discovery_url'); | ||
break; | ||
default: | ||
if ($(`#${provider}_customURLSettings`).data('required')) { | ||
$('#oauth2_use_custom_url').attr('checked', 'checked'); | ||
if (document.getElementById(`#${provider}_customURLSettings`)?.getAttribute('data-required')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change is wrong (#31244)
I would suggest to avoid using getElementById
but only use queryXxx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch. I think getElementById
may have been used for performance, but as I now see it the difference is neglible: https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/
So I agree to refactor all getElementById
to querySelector
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And one more thing, we can't just do simple search&replace to refactor the legacy code. Actually there is not only one regression.
There are 2 more regressions here.
- One is
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
because the element may not exist. - Another one is
if (el.getAttribute())
is also wrong (seel below)
Every line of refactored & changed code should be fully tested.
<a data-x="false">aaa</a>
const v1 = $('a')[0].getAttribute('data-x');
const v2 = $('a').data('x');
console.log(v1 ? 'yes' : 'no');
console.log(v2 ? 'yes' : 'no');
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more thought: if a page is quite complex and difficult to maintain (for example .... this "auth edit" page), it's better to refactor and rewrite it, instead of replacing legacy function calls. A fully rewritten page could be clearer and more correct than replacing the functions in the legacy code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, we need to be aware of .data
's "Every attempt is made to convert the attribute's string value to a JavaScript value" behaviour. It already came up.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PS: I'm pretty sure document.querySelector('a').getAttribute
wouldn't fly in Typescript because Typescript knows the querySelector can return null so would raise a type error, at least in strict mode.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would suggest to avoid using getElementById but only use queryXxx
We could enable https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md which will be around 180 occurences currently, but I'm not sure if it's really worth it.
-> Fix admin oauth2 custom URL settings #31246 |
As per #30115 (comment), prefer `querySelector` by enabling [`unicorn/prefer-query-selector`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md) and autofixing all except 10 issues. According to [this](https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/), querySelector may be faster as well, so it's a win-win. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
attr
to plain javascriptgetAttribute
andsetAttribute