Disable share role and share drop buttons when resource is locked

changelog/unreleased/bugfix-indicate-shares-not-managable-due-to-file-locking

@@ -0,0 +1,7 @@
+Bugfix: Indicate shares that are not manageable due to file locking
+
+We indicate shares that are not manageable when a resource is locked, so the user doesn't run into errors,
+while trying to delete or update a share.
+
+https://github.com/owncloud/web/pull/10514
+https://github.com/owncloud/web/issues/10507

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"
@@ -119,6 +126,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -136,6 +147,14 @@ export default defineComponent({
       emit('setDenyShare', value)
     }
 
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return language.$gettext('Resource is temporarily locked, unable to manage share')
+      }
+
+      return ''
+    })
+
     const dateExpire = computed(() =>
       formatRelativeDateFromDateTime(
         DateTime.fromJSDate(props.expirationDate).endOf('day'),
@@ -147,7 +166,8 @@ export default defineComponent({
       configurationManager,
       resource: inject<Ref<Resource>>('resource'),
       toggleShareDenied,
-      dateExpire
+      dateExpire,
+      dropButtonTooltip
     }
   },
   data: function () {

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="isLocked"
           :deniable="deniable"
           @expiration-date-changed="shareExpirationChanged"
           @remove-share="removeShare"
@@ -179,6 +181,10 @@ export default defineComponent({
     deniable: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['onDelete', 'onSetDeny'],
@@ -509,13 +515,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%;
 }

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"
@@ -120,7 +124,7 @@ 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,
   useCapabilityFilesSharingAllowCustomPermissions,
@@ -130,6 +134,7 @@ import {
 import { Resource } from '@ownclouders/web-client'
 import { OcDrop } from 'design-system/src/components'
 import { mapGetters } from 'vuex'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'RoleDropdown',
@@ -162,14 +167,29 @@ export default defineComponent({
     showIcon: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['optionChange'],
-  setup() {
+  setup(props) {
     const store = useStore()
     const ability = useAbility()
+    const { $gettext } = useGettext()
+
+    const dropButtonTooltip = computed(() => {
+      if (props.isLocked) {
+        return $gettext('Resource is temporarily locked, unable to manage share')
+      }
+
+      return ''
+    })
+
     return {
       ability,
+      dropButtonTooltip,
       resource: inject<Resource>('resource'),
       incomingParentShare: inject<Share>('incomingParentShare'),
       hasRoleCustomPermissions: useCapabilityFilesSharingAllowCustomPermissions(store),

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"
           />

packages/web-app-files/src/views/FilesDrop.vue

@@ -25,7 +25,7 @@
           </h2>
           <p class="oc-rm-m oc-m-rm" v-text="errorMessage" />
         </div>
-        <div class="oc-flex oc-flex-center oc-width-1-1" v-else>
+        <div v-else class="oc-flex oc-flex-center oc-width-1-1">
           <p
             id="files-drop-info-message"
             class="oc-m-rm oc-pt-xl oc-text-small"

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -12,7 +12,8 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
           <!--v-if-->
         </span>
         <div class="file_info__body oc-text-overflow">
-          <h3 class="oc-font-semibold">
+          <h3 class="oc-font-semibold oc-flex oc-flex-center">
+            <!--v-if-->
             <span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg">
               <span class="oc-resource-basename oc-text-break">image.jpg</span>
               <!--v-if-->

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap

@@ -14,7 +14,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
         </div>
         <div>
           <div class="oc-flex oc-flex-nowrap oc-flex-middle">
-            <role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]" mode="edit" showicon="false"></role-dropdown-stub>
+            <role-dropdown-stub allowsharepermission="true" class="files-collaborators-collaborator-role" domselector="asdf" existingpermissions="" existingrole="[object Object]" islocked="false" mode="edit" showicon="false"></role-dropdown-stub>
           </div>
         </div>
       </div>
@@ -28,7 +28,7 @@ exports[`Collaborator ListItem component share inheritance indicators show when
         </router-link-stub>
       </div>
       <!--v-if-->
-      <edit-dropdown-stub caneditordelete="true" class="files-collaborators-collaborator-edit" deniable="false" id="edit-drop-down-00000000-0000-0000-0000-000000000000" issharedenied="false" sharecategory="user"></edit-dropdown-stub>
+      <edit-dropdown-stub caneditordelete="true" class="files-collaborators-collaborator-edit" deniable="false" id="edit-drop-down-00000000-0000-0000-0000-000000000000" islocked="false" issharedenied="false" sharecategory="user"></edit-dropdown-stub>
       <oc-info-drop-stub class="share-access-details-drop" list="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" mode="manual" target="#edit-drop-down-00000000-0000-0000-0000-000000000000" title="Access details"></oc-info-drop-stub>
     </div>
   </div>

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap

@@ -2,11 +2,13 @@
 
 exports[`RoleDropdown renders a button with existing role if given for resource type file 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-7" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -73,11 +75,13 @@ exports[`RoleDropdown renders a button with existing role if given for resource
 
 exports[`RoleDropdown renders a button with existing role if given for resource type folder 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-5" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -144,11 +148,13 @@ exports[`RoleDropdown renders a button with existing role if given for resource
 
 exports[`RoleDropdown renders a button with invite text if no existing role given for resource type file 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-3" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
@@ -209,11 +215,13 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
 
 exports[`RoleDropdown renders a button with invite text if no existing role given for resource type folder 1`] = `
 <span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
-    <!--v-if-->
-    <span class="oc-text-truncate">Can view</span>
-    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
-  </oc-button-stub>
+  <div>
+    <oc-button-stub appearance="raw" arialabel="Select permission" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
+      <!--v-if-->
+      <span class="oc-text-truncate">Can view</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+    </oc-button-stub>
+  </div>
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-1" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>

packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap

@@ -13,16 +13,16 @@ exports[`FileShares collaborators list renders sharedWithLabel and sharee list 1
   <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]"></portal-target>
   <ul aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" id="files-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="true" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]"></portal-target>
   </ul>
@@ -46,18 +46,18 @@ exports[`FileShares current space loads space members if a space is given and th
   <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.top" slot-props="[object Object]"></portal-target>
   <ul aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-mb-l" id="files-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="[Function]" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <portal-target multiple="true" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]"></portal-target>
   </ul>
   <!--v-if-->
   <h4 class="oc-text-bold oc-my-s">Space members</h4>
   <ul aria-label="Space members" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm" id="space-collaborators-list">
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub deniable="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
+      <collaborator-list-item-stub deniable="false" islocked="false" issharedenied="false" modifiable="false" resourcename="[Function]" share="[object Object]"></collaborator-list-item-stub>
     </li>
   </ul>
   <!--v-if-->