feat: move permanent link to top right of sharing sidebar panel

owncloud · Sep 20, 2024 · b2c9a1e · b2c9a1e
1 parent fdbd5b1
commit b2c9a1e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 59 deletions.
diff --git a/packages/web-app-files/src/components/Shares/CopyPrivateLink.vue b/packages/web-app-files/src/components/Shares/CopyPrivateLink.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="oc-flex oc-flex-middle">
-    <oc-button gap-size="none" appearance="raw" @click="copyLinkToClipboard">
-      <oc-icon size="small" :name="copied ? 'checkbox-circle' : 'file-copy'" />
+    <oc-button v-oc-tooltip="tooltip" gap-size="none" appearance="raw" @click="copyLinkToClipboard">
+      <oc-icon size="small" :name="copied ? 'checkbox-circle' : 'file-copy'" fill-type="line" />
       <span class="oc-ml-xs" v-text="$gettext('Permanent link')"
     /></oc-button>
-    <oc-contextual-helper class="oc-ml-xs" :text="helperText" :title="$gettext('Permanent link')" />
   </div>
 </template>
 
@@ -35,13 +34,13 @@ export default defineComponent({
       })
     }
 
-    const helperText = computed(() => {
+    const tooltip = computed(() => {
       return $gettext(
         'Copy the link to point your team to this item. Works only for people with existing access.'
       )
     })
 
-    return { copied, helperText, copyLinkToClipboard }
+    return { copied, tooltip, copyLinkToClipboard }
   }
 })
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -1,6 +1,6 @@
 <template>
-  <span class="oc-flex oc-flex-middle">
-    <div v-oc-tooltip="dropButtonTooltip">
+  <div class="oc-flex oc-flex-middle">
+    <div v-oc-tooltip="dropButtonTooltip" class="oc-flex">
       <oc-button
         :id="editShareBtnId"
         class="collaborator-edit-dropdown-options-btn"
@@ -75,7 +75,7 @@
         </li>
       </oc-list>
     </oc-drop>
-  </span>
+  </div>
 </template>
 
 <script lang="ts">

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -36,7 +36,7 @@
           </template>
         </div>
         <div class="files-collaborators-collaborator-name-wrapper oc-pl-s">
-          <div v-oc-tooltip="shareDisplayNameTooltip" class="oc-text-truncate">
+          <div class="oc-text-truncate">
             <span
               aria-hidden="true"
               class="files-collaborators-collaborator-name"
@@ -313,10 +313,6 @@ export default defineComponent({
       return this.share.sharedWith.displayName
     },
 
-    shareDisplayNameTooltip() {
-      return this.shareDisplayName
-    },
-
     screenreaderShareDisplayName() {
       const context = {
         displayName: this.share.sharedWith.displayName

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -1,12 +1,15 @@
 <template>
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-    <div class="oc-flex">
-      <h3 v-translate class="oc-text-bold oc-text-medium oc-m-rm">Share with people</h3>
-      <oc-contextual-helper
-        v-if="helpersEnabled"
-        class="oc-pl-xs"
-        v-bind="inviteCollaboratorHelp"
-      />
+    <div class="oc-flex oc-flex-between oc-flex-middle">
+      <div class="oc-flex">
+        <h3 v-translate class="oc-text-bold oc-text-medium oc-m-rm">Share with people</h3>
+        <oc-contextual-helper
+          v-if="helpersEnabled"
+          class="oc-pl-xs"
+          v-bind="inviteCollaboratorHelp"
+        />
+      </div>
+      <copy-private-link :resource="resource" />
     </div>
     <invite-collaborator-form
       v-if="canShare({ resource, space })"
@@ -22,7 +25,6 @@
     <template v-if="hasSharees">
       <div id="files-collaborators-headline" class="oc-flex oc-flex-middle oc-flex-between">
         <h4 class="oc-text-bold oc-my-rm" v-text="sharedWithLabel" />
-        <copy-private-link v-if="filesPrivateLinks" :resource="resource" />
       </div>
       <portal-target
         name="app.files.sidebar.sharing.shared-with.top"
@@ -67,7 +69,6 @@
     <template v-if="showSpaceMembers">
       <div class="oc-flex oc-flex-middle oc-flex-between">
         <h4 class="oc-text-bold oc-my-s" v-text="spaceMemberLabel" />
-        <copy-private-link v-if="filesPrivateLinks && !hasSharees" :resource="resource" />
       </div>
       <ul
         id="space-collaborators-list"

diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -5,6 +5,7 @@
         <h3 v-translate class="oc-text-bold oc-text-medium oc-m-rm">Add members</h3>
         <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="spaceAddMemberHelp" />
       </div>
+      <copy-private-link :resource="resource" />
     </div>
     <invite-collaborator-form
       v-if="canShare({ space: resource, resource })"
@@ -31,7 +32,6 @@
             <oc-icon name="search" fill-type="line" size="small" />
           </oc-button>
         </div>
-        <copy-private-link v-if="filesPrivateLinks" :resource="resource" />
       </div>
       <div
         class="oc-flex oc-flex-between space-members-filter-container"
@@ -83,7 +83,6 @@ import {
   createLocationSpaces,
   isLocationSpacesActive,
   useCanShare,
-  useCapabilityStore,
   useConfigStore,
   useMessages,
   useModals,
@@ -120,8 +119,6 @@ export default defineComponent({
     const { graphRoles } = storeToRefs(sharesStore)
     const spacesStore = useSpacesStore()
     const { upsertSpace, getSpaceMembers } = spacesStore
-    const capabilityStore = useCapabilityStore()
-    const { filesPrivateLinks } = storeToRefs(capabilityStore)
 
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
@@ -148,7 +145,6 @@ export default defineComponent({
       upsertSpace,
       canShare,
       markInstance,
-      filesPrivateLinks,
       graphRoles,
       filterTerm,
       isFilterOpen,

diff --git a/...ges/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/...ges/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -4,27 +4,5 @@ exports[`CopyPrivateLink > should render a button 1`] = `
 "<div class="oc-flex oc-flex-middle"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-ml-xs">Permanent link</span>
-  </button>
-  <div class="oc-contextual-helper oc-ml-xs"><button type="button" aria-label="Show more information" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="oc-contextual-helper-1-button">
-      <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-    </button>
-    <div id="oc-contextual-helper-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-1-1 oc-info-drop">
-      <div class="oc-card oc-card-body oc-background-secondary oc-p-m">
-        <div class="info-drop-content">
-          <div class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
-            <h4 class="oc-m-rm info-title">Permanent link</h4> <button type="button" aria-label="Close" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
-              <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m oc-icon-inherit"><!----></span>
-            </button>
-          </div>
-          <p class="info-text">Copy the link to point your team to this item. Works only for people with existing access.</p>
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>"
+  </button></div>"
 `;
diff --git a/.../web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/.../web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -2,14 +2,16 @@
 
 exports[`FileShares > collaborators list > renders sharedWithLabel and sharee list 1`] = `
 "<div data-v-5d17c3fa="" id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <div data-v-5d17c3fa="" class="oc-flex">
-    <h3 data-v-5d17c3fa="" class="oc-text-bold oc-text-medium oc-m-rm" data-msgid="Share with people" data-current-language="en">Share with people</h3>
-    <oc-contextual-helper-stub data-v-5d17c3fa="" title="Share with people" text="Use the input field to search for users and groups. Select them to share the item." list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" endtext="" readmorelink="https://doc.owncloud.com/go?to=webui-users-sharing" class="oc-pl-xs"></oc-contextual-helper-stub>
+  <div data-v-5d17c3fa="" class="oc-flex oc-flex-between oc-flex-middle">
+    <div data-v-5d17c3fa="" class="oc-flex">
+      <h3 data-v-5d17c3fa="" class="oc-text-bold oc-text-medium oc-m-rm" data-msgid="Share with people" data-current-language="en">Share with people</h3>
+      <oc-contextual-helper-stub data-v-5d17c3fa="" title="Share with people" text="Use the input field to search for users and groups. Select them to share the item." list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" endtext="" readmorelink="https://doc.owncloud.com/go?to=webui-users-sharing" class="oc-pl-xs"></oc-contextual-helper-stub>
+    </div>
+    <copy-private-link-stub data-v-5d17c3fa="" resource="undefined"></copy-private-link-stub>
   </div>
   <invite-collaborator-form-stub data-v-5d17c3fa="" savebuttonlabel="Share" invitelabel="" class="oc-my-s"></invite-collaborator-form-stub>
   <div data-v-5d17c3fa="" id="files-collaborators-headline" class="oc-flex oc-flex-middle oc-flex-between">
     <h4 data-v-5d17c3fa="" class="oc-text-bold oc-my-rm">Shared with</h4>
-    <!--v-if-->
   </div>
   <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]" multiple="true"></portal-target>
   <ul data-v-5d17c3fa="" id="files-collaborators-list" class="oc-list oc-list-divider oc-m-rm" aria-label="Share receivers">
@@ -37,14 +39,16 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
 
 exports[`FileShares > current space > loads space members if a space is given and the current user is member 1`] = `
 "<div data-v-5d17c3fa="" id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <div data-v-5d17c3fa="" class="oc-flex">
-    <h3 data-v-5d17c3fa="" class="oc-text-bold oc-text-medium oc-m-rm" data-msgid="Share with people" data-current-language="en">Share with people</h3>
-    <oc-contextual-helper-stub data-v-5d17c3fa="" title="Share with people" text="Use the input field to search for users and groups. Select them to share the item." list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" endtext="" readmorelink="https://doc.owncloud.com/go?to=webui-users-sharing" class="oc-pl-xs"></oc-contextual-helper-stub>
+  <div data-v-5d17c3fa="" class="oc-flex oc-flex-between oc-flex-middle">
+    <div data-v-5d17c3fa="" class="oc-flex">
+      <h3 data-v-5d17c3fa="" class="oc-text-bold oc-text-medium oc-m-rm" data-msgid="Share with people" data-current-language="en">Share with people</h3>
+      <oc-contextual-helper-stub data-v-5d17c3fa="" title="Share with people" text="Use the input field to search for users and groups. Select them to share the item." list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" endtext="" readmorelink="https://doc.owncloud.com/go?to=webui-users-sharing" class="oc-pl-xs"></oc-contextual-helper-stub>
+    </div>
+    <copy-private-link-stub data-v-5d17c3fa="" resource="undefined"></copy-private-link-stub>
   </div>
   <invite-collaborator-form-stub data-v-5d17c3fa="" savebuttonlabel="Share" invitelabel="" class="oc-my-s"></invite-collaborator-form-stub>
   <div data-v-5d17c3fa="" id="files-collaborators-headline" class="oc-flex oc-flex-middle oc-flex-between">
     <h4 data-v-5d17c3fa="" class="oc-text-bold oc-my-rm">Shared with</h4>
-    <!--v-if-->
   </div>
   <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]" multiple="true"></portal-target>
   <ul data-v-5d17c3fa="" id="files-collaborators-list" class="oc-list oc-list-divider oc-mb-l" aria-label="Share receivers">
@@ -56,7 +60,6 @@ exports[`FileShares > current space > loads space members if a space is given an
   <!--v-if-->
   <div data-v-5d17c3fa="" class="oc-flex oc-flex-middle oc-flex-between">
     <h4 data-v-5d17c3fa="" class="oc-text-bold oc-my-s">Space members</h4>
-    <!--v-if-->
   </div>
   <ul data-v-5d17c3fa="" id="space-collaborators-list" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" aria-label="Space members">
     <li data-v-5d17c3fa="">