Share redesign split into internal external sections #49653

thlehmann-ionos · 2024-12-04T18:04:46Z

Work in progress (WIP)

Resolves: Improve layout of sharing sidebar #48925

Summary

Splitting shares into two sections: internal shares and external shares.

TODO

Confirm/check whether the deprecated projects feature (Projects rework to automatic "Related resources" #28320) can be dropped?
Differentiation of <SharingInput> (new component or making it configurable)
Styling
Limit list length and "show all"

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)

Primarily to move it out of the way for changes in the source location. The feature was deprecated in version 25 (nextcloud#28320), five versions ago. Refs: nextcloud#48925

According to screen designs. * Elements and lists reordered * Headlines and separators introduced Intermediate step: components need to be dissolved in the following commits. Refs: nextcloud#48925

…are section Allow share creation in the newly differentiated share section. Intermediate change: to preserve functionality; this needs to be differentiated with the next commits. Refs: nextcloud#48925

…ringTab According to nextcloud#48925 screen designs we've to split this into 1. Link (creation) and 2. List (of created share links) Intermediate step. Refs: nextcloud#48925

nfebe

A few comments after a quick glance.

Please include before and after screenshots in the PR description for @nextcloud/designers

Before	After
shot b4	shot after

nfebe · 2024-12-05T18:01:56Z

apps/files_sharing/src/views/SharingTab.vue

+			<!-- will move _into_ the dropdown component -->
+			<div style="border-top: 1px dotted grey;"></div>
+
+			<!-- internal link copy -->
+			<SharingEntryInternal :file-info="fileInfo" />
+
+			<div style="border-top: 1px dotted grey;"></div>
+			<!-- will move _into_ the dropdown component -->


Suggested change



<div style="border-top: 1px dotted grey;"></div>



<SharingEntryInternal :file-info="fileInfo" />

<div style="border-top: 1px dotted grey;"></div>





<div class"divider"></div>



<SharingEntryInternal :file-info="fileInfo" />

<div class"divider"></div>



So we should avoid inline styling, even if we plan to move into component.

nfebe · 2024-12-05T18:04:47Z

apps/files_sharing/src/views/SharingTab.vue

+				@add:share="addShare" />
+			<!-- ***** DISSOLVED OUT FROM ShareLinkList ***** -->
+
+			<!-- TODO: component must either be configurable or diffentiated into two -->


The component serves both uses cases now, so it should be configurable via props

nfebe · 2024-12-05T18:08:31Z

apps/files_sharing/src/views/SharingTab.vue

@@ -142,6 +192,7 @@ export default {
 			showSharingDetailsView: false,
 			shareDetailsData: {},
 			returnFocusElement: null,
+			canLinkShare: getCapabilities().files_sharing.public.enabled,


Following from above....

Suggested change

canLinkShare: getCapabilities().files_sharing.public.enabled,

The information is already in this.config.isPublicShareAllowed or config.isPublicShareAllowed for the template

nfebe · 2024-12-05T18:09:34Z

apps/files_sharing/src/views/SharingTab.vue

@@ -105,11 +149,15 @@ import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
 import SharingDetailsTab from './SharingDetailsTab.vue'
+import { getCapabilities } from '@nextcloud/capabilities'


Suggested change

import { getCapabilities } from '@nextcloud/capabilities'

See : apps/files_sharing/src/services/ConfigService.ts

It is available in the data object as config: new Config(),

…endations() out I like to reach the goals, but the new state show's how entangled the code is. Let's me think about this change - I might park or drop this commit. Otherwise: let's discuss. == Goal * Make suggestion/recommendation code reusable * Have it as separate module * to reduce LOC of SharingInput * to make the extracted function easier testable == Notable changes Apart from obvious moving code: 1. this.externalResults is actually OCA.Sharing.ShareSearch.state.results This is now directly referenced. 2. the "lookup" parameter to getSuggestions() was never passed and internally defaulted The parameter was therefor removed. == Findings This reveals a bit of a mess: 1. the filter function depends heavily on the Vue context 2. the formatting of API results for UI display is mixed with combining data 3. external results (OCA.Sharing.ShareSearch.state) are already formatted == Refactoring left-overs 1. existingSharesFilter() depends on reshare, linkShares, shares from the Vue object I'd like to keep this function independant from Vue actually, but stop here to not go deeper into a refactoring rabbit hole. Marked as TODO. 2. Separation of data fetching and data combining from formatting.

This reverts commit a9507ea.

…etRecommendations() out" The attempted refactoring helped understanding the dependencies, but is partly the wrong direction. The formatter functions should be moved out, the recommendations and suggestion functions however, ould need to be differentiated in too many details that duplicating small aspects of code would be better than having too many conditions. This reverts commit 642d623.

…nk into SharingTab' -- Fix broken dissolve

shareWith is below used _trimmed_ to index the field of the shareWith-to-type mapping; thus, create the key trimmed too. Why trimming is done here is questionable though. Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

flat() is speaking Support is good: https://caniuse.com/array-flat Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

Encapsulate the share type differntiation/grouping in one module. Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

…aringInput Code copied from SharingInput.vue Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

Inspired (initially copied) from SearchInput, implemented to search only for external (remote) sharees. WIP: changes and further TODOs mentioned in the comments at the beginning of the file Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

Replace >SearchInput> by <ExternalShareeSearch>, which is implemented more specifically to search for external sharees Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

Change SharingInput to search for internal share types only. * Lookup was removed because we don't want to lookup users for internal shares * The global lookup entry is no longer added to the end of the list for the same reason * Share types are limited to internal shares * Placeholder texts are adapted Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

github-actions · 2024-12-19T02:02:57Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

nfebe · 2025-01-20T17:50:07Z

Thanks for getting this started! As discussed, Nextcloud will now take over this PR. Since it's from an external branch, I’m closing it and have created a new PR based on an internal branch: nextcloud/server#49653

thlehmann-ionos added 3 commits December 5, 2024 15:41

refactor(files_sharing): move deprecated projects component

3ebab0d

Primarily to move it out of the way for changes in the source location. The feature was deprecated in version 25 (nextcloud#28320), five versions ago. Refs: nextcloud#48925

refactor(files_sharing): split internal/external share (relayout)

e63c9c0

According to screen designs. * Elements and lists reordered * Headlines and separators introduced Intermediate step: components need to be dissolved in the following commits. Refs: nextcloud#48925

refactor(files_sharing): add another user search input in external sh…

5df6fb2

…are section Allow share creation in the newly differentiated share section. Intermediate change: to preserve functionality; this needs to be differentiated with the next commits. Refs: nextcloud#48925

sorbaugh requested review from nfebe and skjnldsv December 5, 2024 15:03

thlehmann-ionos force-pushed the tl/dev/48925-share-redesign-split-into-internal-external-sections branch from 4c9ad79 to aa8bd5e Compare December 5, 2024 15:12

thlehmann-ionos changed the base branch from stable30 to master December 5, 2024 15:19

thlehmann-ionos added 2 commits December 5, 2024 19:11

refactor(files_sharing): dissolve component SharingEntryLink into Sha…

0a721a3

…ringTab According to nextcloud#48925 screen designs we've to split this into 1. Link (creation) and 2. List (of created share links) Intermediate step. Refs: nextcloud#48925

[DROP] Recompile for files_sharing changes

2fb95df

nfebe requested changes Dec 5, 2024

View reviewed changes

thlehmann-ionos added 2 commits December 5, 2024 19:42

[DROP] Recompile for files_sharing changes

a9507ea

thlehmann-ionos force-pushed the tl/dev/48925-share-redesign-split-into-internal-external-sections branch from aa8bd5e to 0a9c37a Compare December 5, 2024 18:42

thlehmann-ionos added 12 commits December 6, 2024 20:59

Revert "[DROP] Recompile for files_sharing changes"

b4f6b1d

This reverts commit a9507ea.

AMEND TO: 'refactor(files_sharing): dissolve component SharingEntryLi…

818af87

…nk into SharingTab' -- Fix broken dissolve

chore(files_sharing): replace reduce() by flat()

4ac858c

flat() is speaking Support is good: https://caniuse.com/array-flat Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

refactor(files_sharing): add ShareTypes module

ecd31c2

Encapsulate the share type differntiation/grouping in one module. Refs: nextcloud#48925 Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

[WIP] refactor(files_sharing): extract formatForMultiselect() from Sh…

0ba6f7b

…aringInput Code copied from SharingInput.vue Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

[WIP] feat(files_sharing): use external sharee search

ac8a857

Replace >SearchInput> by <ExternalShareeSearch>, which is implemented more specifically to search for external sharees Signed-off-by: Thomas Lehmann <t.lehmann@strato.de>

[DROP] Recompile for files_sharing changes

e42d673

[WIP] Note: work in progress

01ec6d0

thlehmann-ionos force-pushed the tl/dev/48925-share-redesign-split-into-internal-external-sections branch from 0a9c37a to 01ec6d0 Compare December 6, 2024 20:37

github-actions bot added the feedback-requested label Dec 19, 2024

nfebe mentioned this pull request Jan 20, 2025

refactor: Sharing sidebar UI redesign #50282

Merged

8 tasks

nfebe closed this Jan 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Share redesign split into internal external sections #49653

Share redesign split into internal external sections #49653

thlehmann-ionos commented Dec 4, 2024 •

edited

Loading

nfebe left a comment

nfebe Dec 5, 2024

nfebe Dec 5, 2024

nfebe Dec 5, 2024

nfebe Dec 5, 2024

github-actions bot commented Dec 19, 2024

nfebe commented Jan 20, 2025

Share redesign split into internal external sections #49653

Share redesign split into internal external sections #49653

Conversation

thlehmann-ionos commented Dec 4, 2024 • edited Loading

Work in progress (WIP)

Summary

TODO

Checklist

nfebe left a comment

Choose a reason for hiding this comment

nfebe Dec 5, 2024

Choose a reason for hiding this comment

nfebe Dec 5, 2024

Choose a reason for hiding this comment

nfebe Dec 5, 2024

Choose a reason for hiding this comment

nfebe Dec 5, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 19, 2024

nfebe commented Jan 20, 2025

thlehmann-ionos commented Dec 4, 2024 •

edited

Loading