Skip to content
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

Change form actions to fetch for submit review box #25219

Merged
merged 33 commits into from
Jun 14, 2023

Conversation

HesterG
Copy link
Contributor

@HesterG HesterG commented Jun 13, 2023

Co-author: @wxiaoguang

Close #25096

The way to fix it in this PR is to change form submit to fetch using formData, and add flags to avoid post repeatedly.
Should be able to apply to more forms that have the same issue after this PR.

After:

Untitled.mov

Update: screenshots from /devtest

image

image

image

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 13, 2023
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Jun 13, 2023
@HesterG HesterG added the topic/ui Change the appearance of the Gitea UI label Jun 13, 2023
@wxiaoguang
Copy link
Contributor

It looks like a specialized patch for the "review" form.

I think it should be a general approach: if a form submit button is marked as using "fetch", then submit the form by fetch, instead of writing magic code like "data-type" or manually constructing the request body.

@HesterG
Copy link
Contributor Author

HesterG commented Jun 13, 2023

It looks like a specialized patch for the "review" form.

I think it should be a general approach: if a form submit button is marked as using "fetch", then submit the form by fetch, instead of writing magic code like "data-type" or manually constructing the request body.

Then maybe revert back to form submit but add a submit event listener? I am not sure how to make a POST fetch a general approach because every post may need different data as body

@wxiaoguang
Copy link
Contributor

var data = new FormData(theFormElement)

@HesterG
Copy link
Contributor Author

HesterG commented Jun 13, 2023

var data = new FormData(theFormElement)

I will check this, thanks.

@pull-request-size pull-request-size bot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Jun 13, 2023
@wxiaoguang wxiaoguang self-assigned this Jun 13, 2023
@wxiaoguang
Copy link
Contributor

wxiaoguang commented Jun 14, 2023

Almost done from my side. There are many details. Here are the screenshots

image


image


image

@wxiaoguang wxiaoguang removed the pr/wip This PR is not ready for review label Jun 14, 2023
@HesterG
Copy link
Contributor Author

HesterG commented Jun 14, 2023

Updated description.

@GiteaBot 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 Jun 14, 2023
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jun 14, 2023
@lunny lunny merged commit a43ea22 into go-gitea:main Jun 14, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jun 14, 2023
@HesterG HesterG deleted the change-actions-fetch branch June 14, 2023 08:02
Comment on lines +6 to +9
const {role, content, onHide: optsOnHide, onDestroy: optsOnDestroy, onShow: optOnShow} = opts;
delete opts.onHide;
delete opts.onDestroy;
delete opts.onShow;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand this code.
First, you declare these three parameters, but then you delete them again?
And below, you execute them if present?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise, the ...opts, below would overwrite the createTippy's onXxx

Copy link
Member

@silverwind silverwind Jun 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mutating function args is bad, please avoid in the future. In this case, you could just create a new object with object destructuring syntax:

const {onHide, onShow, onDestroy, ...other} = opts;

Now other holds all opts besides those three and does not mutate the args.

Copy link
Contributor

@wxiaoguang wxiaoguang Jun 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not see any problem for doing this in JS. Because in JS nothing no object is really immutable, the caller should create new objects for each call.

And, introducing other makes the code unclear for when to use opts or when to use other.

But if you prefer, I can take it in #25253 by the way.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the caller should, but in case you have no control over the caller, it's better to not mutate to not intruduce bugs in the caller. The only safe mutations are for primitive types like string, but I'd argue for clarity it's better to not even mutate those.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might consider enabling https://eslint.org/docs/latest/rules/no-param-reassign for this.

@silverwind
Copy link
Member

This was definitely merged too fast.

@wxiaoguang
Copy link
Contributor

This was definitely merged too fast.

Yup, sometimes too fast, sometimes too slow.

zjjhot added a commit to zjjhot/gitea that referenced this pull request Jun 15, 2023
* upstream/main: (31 commits)
  Show OAuth2 errors to end users (go-gitea#25261)
  [skip ci] Updated translations via Crowdin
  Fix index generation parallelly failure (go-gitea#25235)
  Fix variable in template (go-gitea#25267)
  Add template linting via djlint (go-gitea#25212)
  Fix edit OAuth application width (go-gitea#25262)
  Use flex to align SVG and text (go-gitea#25163)
  GitHub Actions enhancements for frontend (go-gitea#25150)
  Add missing `v` in migrations.go (go-gitea#25252)
  Change form actions to fetch for submit review box (go-gitea#25219)
  Fix panic when migrating a repo from GitHub with issues (go-gitea#25246)
  Fix description of drop custom_labels migration (go-gitea#25243)
  Fix all possible setting error related storages and added some tests (go-gitea#23911)
  [skip ci] Updated translations via Crowdin
  Revert overflow: overlay (revert go-gitea#21850) (go-gitea#25231)
  Support changing labels of Actions runner without re-registration (go-gitea#24806)
  Improve AJAX link and modal confirm dialog (go-gitea#25210)
  Use inline SVG for built-in OAuth providers (go-gitea#25171)
  Disable `Create column` button while the column name is empty  (go-gitea#25192)
  Fix profile render when the README.md size is larger than 1024 bytes (go-gitea#25131)
  ...
lunny pushed a commit that referenced this pull request Jun 19, 2023
1. Add "batch delete" button for selected issues, close #22273
2. Address the review in
#25219 (comment)
lunny pushed a commit that referenced this pull request Jun 19, 2023
Fix regressions from #25219:

Math before and after:
<img width="630" alt="Screenshot 2023-06-18 at 16 00 52"
src="https://github.com/go-gitea/gitea/assets/115237/f2a01e4b-31ca-407c-8fc3-f0aec569b48e">
<img width="680" alt="Screenshot 2023-06-18 at 16 03 44"
src="https://github.com/go-gitea/gitea/assets/115237/faab8e39-f088-45ab-b460-15fc3654c99d">

Mermain before and after:
<img width="810" alt="Screenshot 2023-06-18 at 15 58 56"
src="https://github.com/go-gitea/gitea/assets/115237/d8c24e81-4702-4e17-b791-7dffe090c068">
<img width="786" alt="Screenshot 2023-06-18 at 15 58 37"
src="https://github.com/go-gitea/gitea/assets/115237/3a268e10-c071-410d-a66e-8c4427d1d61c">
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Sep 12, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Debouncing for Approve Button Clicks in Gitea Pull Requests
6 participants