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.

Sign up for GitHub

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

Jump to bottom

Hide show more btn in file-tree list if no more data #24983

Closed
wants to merge 4 commits into from
Closed

Hide show more btn in file-tree list if no more data #24983

wants to merge 4 commits into from

Conversation

sillyguodong
Copy link
Contributor

@sillyguodong sillyguodong commented May 29, 2023 •
edited
Loading

fix #24938
Click show more btn in file-tree list:

Screen.Recording.2023-05-29.at.18.22.00.mov

Click show more btn in file list:

Screen.Recording.2023-05-29.at.18.56.17.mov

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label May 29, 2023
@pull-request-size pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label May 29, 2023
delvh
delvh previously approved these changes May 29, 2023
View reviewed changes
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels May 29, 2023
@delvh delvh added type/bug lgtm/need 1 This PR needs approval from one additional maintainer to be merged. topic/ui Change the appearance of the Gitea UI and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels May 29, 2023
@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 May 29, 2023
@sillyguodong sillyguodong changed the title Hide show more btn in file list if no more data Hide show more btn in file-tree list if no more data May 29, 2023
@silverwind
Copy link
Member

Lint fails:

/home/runner/work/gitea/gitea/web_src/js/components/DiffFileTree.vue
  97:7  error  Unexpected side effect in "fileTree" computed property  vue/no-side-effects-in-computed-properties

wxiaoguang
wxiaoguang requested changes May 29, 2023
View reviewed changes
web_src/js/components/DiffFileTree.vue
@@ -94,6 +94,7 @@ export default {
// Merge folders with just a folder as children in order to
// reduce the depth of our tree.
mergeChildIfOnlyOneDir(result);
this.isIncomplete = pageData.diffFileInfo.isIncomplete;
Copy link
Contributor

Choose a reason for hiding this comment

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

Do not change value in a computed function. It breaks the reactive system

Copy link
Member

Choose a reason for hiding this comment

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

Is it a use case for a store?

Copy link
Contributor

@wxiaoguang wxiaoguang May 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Yup (not sure how to answer by yes or no, so see details)

For best practice: https://vuejs.org/guide/essentials/computed.html#best-practices

For "store": I think the page data should be passed by a store, this diff page has been broken for many times.

@GiteaBot GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. labels May 29, 2023
@pull-request-size pull-request-size bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels May 29, 2023
wxiaoguang
wxiaoguang reviewed May 29, 2023
View reviewed changes
web_src/js/components/DiffFileTree.vue Outdated
Comment on lines 36 to 44
computed: {
hasMore: {
get() {
return this.isIncomplete;
},
set(newValue) {
this.isIncomplete = newValue;
}
},
Copy link
Contributor

@wxiaoguang wxiaoguang May 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

What are you doing here .....

Why a "computed" property should be "set"?

Although Vue documents says writable-computed , but I do not think it is our case .....

Copy link
Contributor

@wxiaoguang wxiaoguang May 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

The key point of the problem here, it's not about "updating isIncomplete in computed property by tricks", the root problem is:

When the pageData.diffFileInfo changes, it needs to "notify" the Vue component to update its data/properties.

The computed property doesn't need to update anything, it should just provide the computed (read-only) result (Vue says: "Getters should be side-effect free ​")

To make the Vue component could be notified by changed pageData.diffFileInfo, either:

  1. Send an event to the Vue component after pageData.diffFileInfo is re-loaded, then Vue component re-read the pageData.diffFileInfo to its internal reactive data/properties
  2. Use "store" for pageData.diffFileInfo, then any change on pageData.diffFileInfo will trigger the Vue's reactive system to sync the values.

I think "store" is the best practice here.

@delvh delvh dismissed their stale review May 29, 2023 15:09

PR has valid open comments and changed completely in the meantime

@sillyguodong
Revert "use computed"
6f4f52c 
This reverts commit 35422ca.
@pull-request-size pull-request-size bot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels May 29, 2023
@sebastian-sauer
Copy link
Contributor

In #24956 I'm currently converting / trying to use the store from box.tmpl (to mark viewed files).

If my solution for the store and box.tmpl is ok, then the show more button will work again, as this incomplete property is stored in the store, too.

@wxiaoguang wxiaoguang mentioned this pull request May 30, 2023
Merged
@wxiaoguang
Copy link
Contributor

-> Refactor diffFileInfo / DiffTreeStore #24998

lunny pushed a commit that referenced this pull request May 30, 2023
@wxiaoguang
Refactor diffFileInfo / DiffTreeStore (#24998)
ee99cf6 
Follow  #21012, #22399

Replace #24983, fix #24938

Help #24956

Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".

Screenshot: these two buttons both work. After complete loading, the UI
is also right.

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/cc6310fd-7f27-45ea-ab4f-24952a87b421)


![image](https://github.com/go-gitea/gitea/assets/2114189/4c11dd67-ac03-4568-8541-91204d27a4e3)


![image](https://github.com/go-gitea/gitea/assets/2114189/38a22cec-41be-41e6-a209-f347b7a4c1de)

</details>
@lunny
Copy link
Member

lunny commented May 30, 2023

replaced by #24998

@lunny lunny closed this May 30, 2023
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Aug 28, 2023
@sillyguodong sillyguodong deleted the bugfix/issue_24938 branch February 29, 2024 03:30
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@wxiaoguang wxiaoguang wxiaoguang requested changes

@silverwind silverwind silverwind left review comments

@lunny lunny lunny approved these changes

@delvh delvh delvh left review comments

Assignees
No one assigned
Labels
lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Show More button remains in file-list after expanding
7 participants
@sillyguodong @silverwind @sebastian-sauer @wxiaoguang @lunny @delvh @GiteaBot