Disable share role and share drop buttons when resource is locked

owncloud · Feb 26, 2024 · ab2a7eb · ab2a7eb
1 parent f0ecc83
commit ab2a7eb
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 19 deletions.
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,8 +1,15 @@
 <template>
   <span class="oc-flex oc-flex-middle">
-    <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
-      <oc-icon name="more-2" />
-    </oc-button>
+    <div v-oc-tooltip="dropButtonTooltip">
+      <oc-button
+        :id="editShareBtnId"
+        class="collaborator-edit-dropdown-options-btn"
+        appearance="raw"
+        :disabled="isLocked"
+      >
+        <oc-icon name="more-2" />
+      </oc-button>
+    </div>
     <oc-drop
       ref="expirationDateDrop"
       :toggle="'#' + editShareBtnId"
@@ -123,6 +130,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -142,6 +153,14 @@ export default defineComponent({
       emit('setDenyShare', value)
     }
 
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return language.$gettext('Resource is temporary locked, unable to manage share')
+      }
+
+      return ''
+    })
+
     const dateExpire = computed(() =>
       formatRelativeDateFromDateTime(
         DateTime.fromJSDate(props.expirationDate).endOf('day'),
@@ -154,6 +173,7 @@ export default defineComponent({
       resource: inject<Ref<Resource>>('resource'),
       toggleShareDenied,
       dateExpire,
+      dropButtonTooltip,
       userExpirationDate: capabilityRefs.sharingUserExpireDate,
       groupExpirationDate: capabilityRefs.sharingGroupExpireDate
     }

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
@@ -58,6 +58,7 @@
                   :existing-permissions="share.customPermissions"
                   :existing-role="share.role"
                   :allow-share-permission="hasResharing || isAnySpaceShareType"
+                  :is-locked="isLocked"
                   class="files-collaborators-collaborator-role"
                   mode="edit"
                   @option-change="shareRoleChanged"
@@ -108,6 +109,7 @@
           :share-category="shareCategory"
           :can-edit-or-delete="canEditOrDelete"
           :is-share-denied="isShareDenied"
+          :is-locked="resource.locked"
           :deniable="deniable"
           @expiration-date-changed="shareExpirationChanged"
           @remove-share="removeShare"
@@ -182,6 +184,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['onDelete', 'onSetDeny'],
@@ -526,13 +532,15 @@ export default defineComponent({
     margin-left: var(--oc-space-medium);
   }
 }
+
 .files-collaborators-collaborator-expiration {
   margin-top: 5px;
 }
 
 .files-collaborators-collaborator-navigation {
   justify-content: end;
 }
+
 .files-collaborators-collaborator-role {
   max-width: 100%;
 }

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -5,19 +5,23 @@
       <span v-if="!existingRole" v-text="inviteLabel" />
       <span v-else>{{ $gettext(selectedRole.label) }}</span>
     </span>
-    <oc-button
-      v-else
-      :id="roleButtonId"
-      class="files-recipient-role-select-btn"
-      appearance="raw"
-      gap-size="none"
-      :aria-label="mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')"
-    >
-      <oc-icon v-if="showIcon" :name="selectedRole.icon" class="oc-mr-s" />
-      <span v-if="!existingRole" class="oc-text-truncate" v-text="inviteLabel" />
-      <span v-else class="oc-text-truncate" v-text="$gettext(selectedRole.label)" />
-      <oc-icon name="arrow-down-s" />
-    </oc-button>
+    <div v-else v-oc-tooltip="dropButtonTooltip">
+      <oc-button
+        :id="roleButtonId"
+        class="files-recipient-role-select-btn"
+        appearance="raw"
+        gap-size="none"
+        :disabled="isLocked"
+        :aria-label="
+          mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')
+        "
+      >
+        <oc-icon v-if="showIcon" :name="selectedRole.icon" class="oc-mr-s" />
+        <span v-if="!existingRole" class="oc-text-truncate" v-text="inviteLabel" />
+        <span v-else class="oc-text-truncate" v-text="$gettext(selectedRole.label)" />
+        <oc-icon name="arrow-down-s" />
+      </oc-button>
+    </div>
     <oc-drop
       v-if="availableRoles.length > 1"
       ref="rolesDrop"
@@ -124,10 +128,11 @@ import {
   SpacePeopleShareRoles
 } from '@ownclouders/web-client/src/helpers/share'
 import * as uuid from 'uuid'
-import { defineComponent, inject, PropType, ComponentPublicInstance } from 'vue'
+import { defineComponent, inject, PropType, ComponentPublicInstance, computed } from 'vue'
 import { useAbility, useUserStore, useCapabilityStore } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client'
 import { OcDrop } from 'design-system/src/components'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'RoleDropdown',
@@ -160,20 +165,33 @@ export default defineComponent({
     showIcon: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['optionChange'],
-  setup() {
+  setup(props) {
     const capabilityStore = useCapabilityStore()
     const capabilityRefs = storeToRefs(capabilityStore)
     const ability = useAbility()
     const userStore = useUserStore()
+    const { $gettext } = useGettext()
 
     const { user } = storeToRefs(userStore)
 
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return $gettext('Resource is temporary locked, unable to manage share')
+      }
+
+      return ''
+    })
     return {
       ability,
       user,
+      dropButtonTooltip,
       resource: inject<Resource>('resource'),
       incomingParentShare: inject<Share>('incomingParentShare'),
       hasRoleCustomPermissions: capabilityRefs.sharingAllowCustom,
@@ -398,6 +416,7 @@ export default defineComponent({
         &:first-child {
           margin-top: 0;
         }
+
         &:last-child {
           margin-bottom: 0;
         }
@@ -415,6 +434,7 @@ export default defineComponent({
       }
     }
   }
+
   &-role-select-btn {
     max-width: 100%;
   }

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -38,6 +38,7 @@
             :modifiable="isShareModifiable(collaborator)"
             :is-share-denied="isShareDenied(collaborator)"
             :shared-parent-route="getSharedParentRoute(collaborator)"
+            :is-locked="resource.locked"
             @on-delete="$_ocCollaborators_deleteShare_trigger"
             @on-set-deny="setDenyShare"
           />

diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -8,7 +8,8 @@
         class="file_info__icon oc-mr-s"
       />
       <div class="file_info__body oc-text-overflow">
-        <h3 data-testid="files-info-name" class="oc-font-semibold">
+        <h3 data-testid="files-info-name" class="oc-font-semibold oc-flex oc-flex-center">
+          <oc-icon v-if="resource.locked" class="oc-mr-xs" name="lock" size="small" />
           <resource-name
             :name="resource.name"
             :extension="resource.extension"