From 68b2438f49b8782167ed45a386677a4235ca48dc Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 31 Jan 2023 12:09:51 +0100
Subject: [PATCH] Fix cancelling custom permissions

---
 .../bugfix-cancel-custom-permissions          |   6 +
 .../Shares/Collaborators/RoleDropdown.vue     |  29 +-
 .../Shares/Collaborators/RoleDropdown.spec.ts | 313 +++++---------
 .../__snapshots__/RoleDropdown.spec.ts.snap   | 384 +++---------------
 4 files changed, 173 insertions(+), 559 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-cancel-custom-permissions

diff --git a/changelog/unreleased/bugfix-cancel-custom-permissions b/changelog/unreleased/bugfix-cancel-custom-permissions
new file mode 100644
index 00000000000..09b20cabb75
--- /dev/null
+++ b/changelog/unreleased/bugfix-cancel-custom-permissions
@@ -0,0 +1,6 @@
+Bugfix: Cancel custom permissions
+
+We've fixed a bug where cancelling the custom permissions on a share would remove all permissions.
+
+https://github.com/owncloud/web/pull/8340
+https://github.com/owncloud/web/issues/8335
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
index 348e0d67a0a..d14fbd96753 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -87,13 +87,14 @@
       >
         <oc-button
           size="small"
+          class="files-recipient-custom-permissions-drop-cancel"
           @click="cancelCustomPermissions"
           v-text="$gettext('Cancel')"
         /><oc-button
           size="small"
           variation="primary"
           appearance="filled"
-          class="oc-ml-s"
+          class="files-recipient-custom-permissions-drop-confirm oc-ml-s"
           @click="confirmCustomPermissions"
           v-text="$gettext('Apply')"
         />
@@ -103,7 +104,6 @@
 </template>
 
 <script lang="ts">
-import { mapState } from 'vuex'
 import get from 'lodash-es/get'
 import RoleItem from '../Shared/RoleItem.vue'
 import {
@@ -149,6 +149,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['optionChange'],
   setup() {
     const store = useStore()
     return {
@@ -164,8 +165,6 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapState('Files', ['sharesTree']),
-
     roleButtonId() {
       if (this.domSelector) {
         return `files-collaborators-role-button-${this.domSelector}-${uuid.v4()}`
@@ -181,9 +180,8 @@ export default defineComponent({
       } else if (this.selectedRole.permissions().includes(SharePermissions.denied)) {
         return this.$gettext('Deny access')
       } else {
-        return this.$gettextInterpolate(this.$gettext('Invite as %{ name }'), {
-          name: this.$gettext(this.selectedRole.inlineLabel) || ''
-        })
+        const name = this.$gettext(this.selectedRole.inlineLabel) || ''
+        return this.$gettext('Invite as %{ name }', { name })
       }
     },
     customPermissionsRole() {
@@ -217,10 +215,12 @@ export default defineComponent({
     },
     resourceIsSpace() {
       return this.resource.type === 'space'
+    },
+    defaultCustomPermissions() {
+      return [...this.selectedRole.permissions(this.allowSharePermission)]
     }
   },
 
-  emits: ['optionChange'],
   created() {
     this.applyRoleAndPermissions()
   },
@@ -230,7 +230,6 @@ export default defineComponent({
   },
 
   mounted() {
-    this.applyRoleAndPermissions()
     window.addEventListener('keydown', this.cycleRoles)
   },
 
@@ -249,11 +248,9 @@ export default defineComponent({
         )[0]
       }
 
-      if (this.selectedRole.hasCustomPermissions) {
-        this.customPermissions = this.existingPermissions
-      } else {
-        this.customPermissions = [...this.selectedRole.permissions(this.allowSharePermission)]
-      }
+      this.customPermissions = this.selectedRole.hasCustomPermissions
+        ? this.existingPermissions
+        : this.defaultCustomPermissions
     },
 
     publishChange() {
@@ -293,7 +290,9 @@ export default defineComponent({
     },
 
     cancelCustomPermissions() {
-      this.customPermissions = this.existingPermissions
+      this.customPermissions = this.existingPermissions.length
+        ? this.existingPermissions
+        : this.defaultCustomPermissions
       this.$refs.customPermissionsDrop.hide()
       this.$refs.rolesDrop.show()
     },
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
index 8004f9de8c0..d529606a827 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
@@ -1,5 +1,5 @@
 import RoleDropdown from 'web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue'
-import { PeopleShareRoles, SharePermissions, ShareTypes } from 'web-client/src/helpers/share'
+import { PeopleShareRoles, SharePermissions } from 'web-client/src/helpers/share'
 import {
   createStore,
   defaultPlugins,
@@ -11,230 +11,121 @@ import { mock } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 
 const selectors = {
-  button: '.files-recipient-role-select-btn',
-  roles: '.files-recipient-role-drop-list',
+  recipientRoleBtn: '.files-recipient-role-select-btn',
+  roleButton: '.files-recipient-role-drop-btn',
   roleButtonPrefix: '#files-recipient-role-drop-btn-',
-  customPermissionsDrop: '.files-recipient-custom-permissions-drop'
+  collaboratorsPermissionPrefix: '#files-collaborators-permission-',
+  customPermissionsDrop: '.files-recipient-custom-permissions-drop',
+  cancelCustomPermissionsBtn: '.files-recipient-custom-permissions-drop-cancel',
+  confirmCustomPermissionsBtn: '.files-recipient-custom-permissions-drop-confirm'
 }
 
-// needs differentiation between file and folder type?
 describe('RoleDropdown', () => {
-  describe('for file shares', () => {
-    afterEach(() => {
-      jest.clearAllMocks()
-    })
-
-    describe('when no existing role is present', () => {
-      it.each(['folder', 'file'])(
-        'renders a button with invite text if no existing role given for resource type %s',
-        (type) => {
-          const { wrapper } = getMountedWrapper({
-            mountType: shallowMount,
-            existingRole: undefined,
-            resourceType: type
-          })
-          expect(wrapper.html()).toMatchSnapshot()
-        }
-      )
-      it.each(['folder', 'file'])(
-        'displays a dropdown with all available roles on button click for resource type %s',
-        async (type) => {
-          const isFolder = type === 'folder'
-          const { wrapper } = getMountedWrapper({ resourceType: type })
-          const button = wrapper.find(selectors.button)
-          await button.trigger('click')
-
-          expect(wrapper.find(selectors.roles).isVisible()).toBeTruthy()
-          for (const role of PeopleShareRoles.list(isFolder)) {
-            expect(wrapper.find(selectors.roleButtonPrefix + role.name).exists()).toBeTruthy()
-          }
-        }
-      )
-      describe('custom permissions', () => {
-        it.each(['folder', 'file'])(
-          'opens custom permissions drop when custom permissions item in the roles gets selected for resource type %s',
-          async (type) => {
-            const isFolder = type === 'folder'
-            const { wrapper } = getMountedWrapper({ resourceType: type })
-            const customPermissionsDrop = wrapper.findComponent<any>(
-              selectors.customPermissionsDrop
-            )
-            const showHideMock = jest.fn()
-            ;(customPermissionsDrop.vm as any).show = showHideMock
-            ;(wrapper.vm.$refs.rolesDrop as any).tippy = { hide: showHideMock }
-
-            await wrapper
-              .find(selectors.roleButtonPrefix + PeopleShareRoles.custom(isFolder).name)
-              .trigger('click')
-
-            expect(showHideMock).toHaveBeenCalled()
-          }
-        )
+  it.each(['folder', 'file'])(
+    'renders a button with invite text if no existing role given for resource type %s',
+    (type) => {
+      const { wrapper } = getWrapper({ mountType: shallowMount, resourceType: type })
+      expect(wrapper.html()).toMatchSnapshot()
+    }
+  )
+  it.each(['folder', 'file'])(
+    'renders a button with existing role if given for resource type %s',
+    (type) => {
+      const { wrapper } = getWrapper({
+        mountType: shallowMount,
+        existingRole: PeopleShareRoles.list(type === 'folder')[0]
       })
-
-      //   it.each(['update', 'create', 'delete', 'share'])(
-      //     'displays custom permission %s in the custom permissions drop',
-      //     (permission) => {
-      //       const {wrapper} = getWrapper()
-      //       expect(
-      //         wrapper.find(`[data-testid="files-collaborators-permission-${permission}"]`).exists()
-      //       ).toBeTruthy()
-      //     }
-      //   )
-      //   it('closes custom permissions drop when they are confirmed', async () => {
-      //     const {wrapper} = getWrapper()
-      //     const permissionsDrop = wrapper.find('[data-testid="files-recipient-custom-permissions-drop"]')
-
-      //     permissionsDrop.vm.hide = jest.fn()
-
-      //     await wrapper
-      //       .find('[data-testid="files-recipient-custom-permissions-drop-confirm"]')
-      //       .trigger('click')
-
-      //     expect(permissionsDrop.vm.hide).toHaveBeenCalled()
-      //   })
-
-      //   it('opens role drop when custom permissions drop is cancelled', async () => {
-      //     const {wrapper} = getWrapper()
-      //     const rolesDrop = wrapper.find('[data-testid="files-recipient-roles-drop"]')
-      //     const permissionsDrop = wrapper.find('[data-testid="files-recipient-custom-permissions-drop"]')
-
-      //     rolesDrop.vm.show = jest.fn()
-      //     permissionsDrop.vm.hide = jest.fn()
-
-      //     await wrapper
-      //       .find('[data-testid="files-recipient-custom-permissions-drop-cancel"]')
-      //       .trigger('click')
-
-      //     expect(permissionsDrop.vm.hide).toHaveBeenCalled()
-      //     expect(rolesDrop.vm.show).toHaveBeenCalled()
-      //   })
-      it.todo('emits an event upon role selection')
+      expect(wrapper.html()).toMatchSnapshot()
+    }
+  )
+  it('does not render a button if only one role is available', () => {
+    const { wrapper } = getWrapper({
+      mountType: shallowMount,
+      canShare: true,
+      incomingParentShare: {}
     })
-    describe('custom permissions', () => {
-      it.each([
-        SharePermissions.read.bit + SharePermissions.share.bit,
-        SharePermissions.read.bit +
-          SharePermissions.share.bit +
-          SharePermissions.update.bit +
-          SharePermissions.create.bit,
-        SharePermissions.read.bit + SharePermissions.share.bit + SharePermissions.delete.bit
-      ])("inherits the parents share's permissions: %s", (sharePermissions) => {
-        const { wrapper } = getMountedWrapper({
-          mountType: shallowMount,
-          existingRole: PeopleShareRoles.list(true)[0],
-          isReceivedShare: true,
-          sharesTree: {
-            '/testfolder': [
-              {
-                permissions: sharePermissions,
-                shareType: ShareTypes.user.value
-              }
-            ]
-          }
-        })
-        expect(wrapper.html()).toMatchSnapshot()
-      })
+    expect(wrapper.find(selectors.recipientRoleBtn).exists()).toBeFalsy()
+  })
+  it('emits "optionChange"-event on role click', async () => {
+    const { wrapper } = getWrapper()
+    ;(wrapper.vm.$refs.rolesDrop as any).tippy = { hide: jest.fn() }
+    await wrapper.find(selectors.roleButton).trigger('click')
+    expect(wrapper.emitted('optionChange')).toBeTruthy()
+  })
+  describe('custom permissions', () => {
+    it.each(['folder', 'file'])(
+      'opens custom permissions drop when custom permissions item in the roles gets selected for resource type %s',
+      async (type) => {
+        const isFolder = type === 'folder'
+        const { wrapper } = getWrapper({ resourceType: type })
+        const customPermissionsDrop = wrapper.findComponent<any>(selectors.customPermissionsDrop)
+        const showHideMock = jest.fn()
+        ;(customPermissionsDrop.vm as any).show = showHideMock
+        ;(wrapper.vm.$refs.rolesDrop as any).tippy = { hide: showHideMock }
+
+        await wrapper
+          .find(selectors.roleButtonPrefix + PeopleShareRoles.custom(isFolder).name)
+          .trigger('click')
+
+        expect(showHideMock).toHaveBeenCalled()
+      }
+    )
+    it('can be cancelled and restored', async () => {
+      const { wrapper } = getWrapper()
+      const showRoleDropMock = jest.fn()
+      const hideCustomPermissionsDropMock = jest.fn()
+      ;(wrapper.vm.$refs.rolesDrop as any).show = showRoleDropMock
+      ;(wrapper.vm.$refs.customPermissionsDrop as any).hide = hideCustomPermissionsDropMock
+      await wrapper.find(selectors.cancelCustomPermissionsBtn).trigger('click')
+
+      expect(showRoleDropMock).toHaveBeenCalled()
+      expect(hideCustomPermissionsDropMock).toHaveBeenCalled()
+      expect(wrapper.vm.customPermissions).toEqual(wrapper.vm.defaultCustomPermissions)
     })
-    describe('when an existing role is present', () => {
-      it.each(['folder', 'file'])(
-        'renders a button with existing role if given for resource type %s',
-        (type) => {
-          const { wrapper } = getMountedWrapper({
-            mountType: shallowMount,
-            existingRole: PeopleShareRoles.list(type === 'folder')[0]
-          })
-          expect(wrapper.html()).toMatchSnapshot()
-        }
-      )
-      it('does not render a button if only one role is available', () => {
-        const { wrapper } = getMountedWrapper({
-          mountType: shallowMount,
-          existingRole: PeopleShareRoles.list(true)[0],
-          isReceivedShare: true,
-          sharesTree: {
-            '/testfolder': [
-              {
-                permissions: SharePermissions.read.bit,
-                shareType: ShareTypes.user.value
-              }
-            ]
-          }
-        })
-        expect(wrapper.html()).toMatchSnapshot()
+    it('can be confirmed', async () => {
+      const { wrapper } = getWrapper()
+      const hideCustomPermissionsDropMock = jest.fn()
+      ;(wrapper.vm.$refs.customPermissionsDrop as any).hide = hideCustomPermissionsDropMock
+      await wrapper.find(selectors.confirmCustomPermissionsBtn).trigger('click')
+
+      expect(hideCustomPermissionsDropMock).toHaveBeenCalled()
+      expect(wrapper.emitted('optionChange')).toBeTruthy()
+    })
+    it.each([
+      { permissions: [SharePermissions.read, SharePermissions.share] },
+      { permissions: [SharePermissions.read, SharePermissions.share, SharePermissions.delete] },
+      {
+        permissions: [
+          SharePermissions.read,
+          SharePermissions.update,
+          SharePermissions.share,
+          SharePermissions.delete
+        ]
+      }
+    ])("inherits the parents share's permissions: %s", ({ permissions }) => {
+      const { wrapper } = getWrapper({
+        mountType: shallowMount,
+        canShare: true,
+        incomingParentShare: { permissions: permissions.reduce((a, b) => a + b.bit, 0) }
       })
-      it.todo(
-        'displays a dropdown with viewer, editor and custom permissions if no custom permissions had been selected'
-      )
-      it.todo('displays a dropdown with custom permissions if they already were selected')
-      //   it('opens custom permissions drop when custom permissions item in the roles is selected', async () => {
-      //     const {wrapper} = getWrapper()
-      //     const advancedPermissionsDrop = wrapper.find(
-      //       '[data-testid="files-recipient-custom-permissions-drop"]'
-      //     )
-      //     const showHideMock = jest.fn()
-      //     advancedPermissionsDrop.vm.show = showHideMock
-      //     wrapper.vm.$refs.rolesDrop.tippy = { hide: showHideMock }
-
-      //     await wrapper
-      //       .find('[data-testid="files-recipient-role-drop-btn-advancedRole"]')
-      //       .trigger('click')
-
-      //     expect(showHideMock).toHaveBeenCalledTimes(2)
-      //   })
-      //   it.each(['update', 'create', 'delete', 'share'])(
-      //     'displays custom permission %s in the custom permissions drop',
-      //     (permission) => {
-      //       const {wrapper} = getWrapper()
-      //       expect(
-      //         wrapper.find(`[data-testid="files-collaborators-permission-${permission}"]`).exists()
-      //       ).toBeTruthy()
-      //     }
-      //   )
-      //   it('closes custom permissions drop when they are confirmed', async () => {
-      //     const {wrapper} = getWrapper()
-      //     const permissionsDrop = wrapper.find('[data-testid="files-recipient-custom-permissions-drop"]')
 
-      //     permissionsDrop.vm.hide = jest.fn()
-
-      //     await wrapper
-      //       .find('[data-testid="files-recipient-custom-permissions-drop-confirm"]')
-      //       .trigger('click')
-
-      //     expect(permissionsDrop.vm.hide).toHaveBeenCalled()
-      //   })
-
-      //   it('opens role drop when custom permissions drop is cancelled', async () => {
-      //     const {wrapper} = getWrapper()
-      //     const rolesDrop = wrapper.find('[data-testid="files-recipient-roles-drop"]')
-      //     const permissionsDrop = wrapper.find('[data-testid="files-recipient-custom-permissions-drop"]')
-
-      //     rolesDrop.vm.show = jest.fn()
-      //     permissionsDrop.vm.hide = jest.fn()
-
-      //     await wrapper
-      //       .find('[data-testid="files-recipient-custom-permissions-drop-cancel"]')
-      //       .trigger('click')
-
-      //     expect(permissionsDrop.vm.hide).toHaveBeenCalled()
-      //     expect(rolesDrop.vm.show).toHaveBeenCalled()
-      //   })
-      it.todo('emits an event upon role selection')
+      for (const permission of permissions) {
+        expect(
+          wrapper.find(`${selectors.collaboratorsPermissionPrefix}${permission.key}`).exists()
+        ).toBeTruthy()
+      }
     })
   })
 })
 
-function getMountedWrapper({
+function getWrapper({
   mountType = mount,
   existingRole = null,
-  shareId = null,
   resourceType = 'folder',
-  sharesTree = {},
-  isReceivedShare = false
+  canShare = false,
+  incomingParentShare = null
 } = {}) {
-  const storeOptions = defaultStoreMockOptions
-  storeOptions.modules.Files.state.sharesTree = sharesTree
-  const store = createStore(storeOptions)
+  const store = createStore(defaultStoreMockOptions)
   return {
     wrapper: mountType(RoleDropdown, {
       props: {
@@ -243,18 +134,16 @@ function getMountedWrapper({
           extension: resourceType === 'folder' ? '' : 'jpg',
           type: resourceType,
           isFolder: resourceType === 'folder',
-          isReceivedShare: () => isReceivedShare
+          canShare: () => canShare
         }),
         existingRole,
-        shareId,
         allowSharePermission: true
       },
       global: {
         plugins: [...defaultPlugins(), store],
         renderStubDefaultSlot: true,
-        stubs: { 'oc-button': true, 'oc-icon': true },
         provide: {
-          incomingParentShare: {}
+          incomingParentShare
         }
       }
     })
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
index 19d74ceb336..0eaa8c5b62a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RoleDropdown for file shares custom permissions inherits the parents share's permissions: 17 1`] = `
+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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
+  <oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
     <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
+    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-13" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
+  <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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -31,9 +31,9 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -43,7 +43,7 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
       </li>
     </oc-list-stub>
   </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-14" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
+  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-8" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
     <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
     <oc-list-stub raw="false">
       <li class="oc-my-s oc-px-m">
@@ -63,36 +63,36 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
       </li>
     </oc-list-stub>
     <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
+      <oc-button-stub appearance="outline" class="files-recipient-custom-permissions-drop-cancel" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+      <oc-button-stub appearance="filled" class="files-recipient-custom-permissions-drop-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="primary">Apply</oc-button-stub>
     </div>
   </oc-drop-stub>
 </span>
 `;
 
-exports[`RoleDropdown for file shares custom permissions inherits the parents share's permissions: 23 1`] = `
+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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
+  <oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
     <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
+    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-15" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
+  <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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -101,9 +101,9 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -113,7 +113,7 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
       </li>
     </oc-list-stub>
   </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-16" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
+  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-6" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
     <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
     <oc-list-stub raw="false">
       <li class="oc-my-s oc-px-m">
@@ -133,316 +133,36 @@ exports[`RoleDropdown for file shares custom permissions inherits the parents sh
       </li>
     </oc-list-stub>
     <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
+      <oc-button-stub appearance="outline" class="files-recipient-custom-permissions-drop-cancel" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+      <oc-button-stub appearance="filled" class="files-recipient-custom-permissions-drop-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="primary">Apply</oc-button-stub>
     </div>
   </oc-drop-stub>
 </span>
 `;
 
-exports[`RoleDropdown for file shares custom permissions inherits the parents share's permissions: 25 1`] = `
+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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
-    <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
-  </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-17" 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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-18" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
-    <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
-    <oc-list-stub raw="false">
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="true" hidelabel="false" id="files-collaborators-permission-read" label="Read" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-update" label="Edit" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-create" label="Create" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-delete" label="Delete" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-share" label="Share" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-    </oc-list-stub>
-    <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
-    </div>
-  </oc-drop-stub>
-</span>
-`;
-
-exports[`RoleDropdown for file shares when an existing role is present does not render a button if only one role is available 1`] = `
-<span class="oc-flex oc-flex-middle">
-  <oc-button-stub appearance="raw" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
-    <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
-  </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-23" 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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-24" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
-    <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
-    <oc-list-stub raw="false">
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="true" hidelabel="false" id="files-collaborators-permission-read" label="Read" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-update" label="Edit" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-create" label="Create" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-delete" label="Delete" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-share" label="Share" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-    </oc-list-stub>
-    <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
-    </div>
-  </oc-drop-stub>
-</span>
-`;
-
-exports[`RoleDropdown for file shares when an existing role is present 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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
-    <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
-  </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-21" 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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-22" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
-    <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
-    <oc-list-stub raw="false">
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="true" hidelabel="false" id="files-collaborators-permission-read" label="Read" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-update" label="Edit" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-create" label="Create" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-delete" label="Delete" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-share" label="Share" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-    </oc-list-stub>
-    <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
-    </div>
-  </oc-drop-stub>
-</span>
-`;
-
-exports[`RoleDropdown for file shares when an existing role is present 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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
-    <span>Viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
-  </oc-button-stub>
-  <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-19" 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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-      <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
-          <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
-            <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
-          </span>
-          <span class="oc-flex">
-            <!--v-if-->
-          </span>
-        </oc-button-stub>
-      </li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <oc-drop-stub class="files-recipient-custom-permissions-drop" closeonclick="false" dropid="oc-drop-20" isnested="false" mode="manual" paddingsize="remove" position="bottom-start" target="#files-collaborators-role-button-new" toggle="">
-    <h4 class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s">Custom permissions</h4>
-    <oc-list-stub raw="false">
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="true" hidelabel="false" id="files-collaborators-permission-read" label="Read" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-update" label="Edit" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-create" label="Create" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-delete" label="Delete" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-      <li class="oc-my-s oc-px-m">
-        <oc-checkbox-stub class="oc-mr-xs files-collaborators-permission-checkbox" disabled="false" hidelabel="false" id="files-collaborators-permission-share" label="Share" modelvalue="[object Object],[object Object]" option="[object Object]" outline="false" size="large"></oc-checkbox-stub>
-      </li>
-    </oc-list-stub>
-    <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
-    </div>
-  </oc-drop-stub>
-</span>
-`;
-
-exports[`RoleDropdown for file shares when no existing role is present 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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
+  <oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
     <span>Invite as viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
+    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
   <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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -451,9 +171,9 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -477,36 +197,36 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
       </li>
     </oc-list-stub>
     <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
+      <oc-button-stub appearance="outline" class="files-recipient-custom-permissions-drop-cancel" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+      <oc-button-stub appearance="filled" class="files-recipient-custom-permissions-drop-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="primary">Apply</oc-button-stub>
     </div>
   </oc-drop-stub>
 </span>
 `;
 
-exports[`RoleDropdown for file shares when no existing role is present renders a button with invite text if no existing role given for resource type folder 1`] = `
+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" class="files-recipient-role-select-btn" gap-size="none" id="files-collaborators-role-button-new">
+  <oc-button-stub appearance="raw" class="files-recipient-role-select-btn" disabled="false" gapsize="none" id="files-collaborators-role-button-new" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
     <span>Invite as viewer</span>
-    <oc-icon-stub name="arrow-down-s"></oc-icon-stub>
+    <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
   <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>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" id="files-recipient-role-drop-btn-viewer" justify-content="space-between" variation="inverse">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="eye"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub name="check"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-editor" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="pencil"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -515,9 +235,9 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" id="files-recipient-role-drop-btn-custom" justify-content="space-between" variation="passive">
+        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub class="oc-pl-s oc-pr-m" name="settings-3"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -547,8 +267,8 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
       </li>
     </oc-list-stub>
     <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns oc-px-m oc-py-s oc-mt-m oc-rounded-bottom">
-      <oc-button-stub size="small">Cancel</oc-button-stub>
-      <oc-button-stub appearance="filled" class="oc-ml-s" size="small" variation="primary">Apply</oc-button-stub>
+      <oc-button-stub appearance="outline" class="files-recipient-custom-permissions-drop-cancel" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+      <oc-button-stub appearance="filled" class="files-recipient-custom-permissions-drop-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="small" submit="button" type="button" variation="primary">Apply</oc-button-stub>
     </div>
   </oc-drop-stub>
 </span>