feat(password-protected-folders): add permissions dropdown

changelog/unreleased/enhancement-password-protected-folder-permissions.md

@@ -0,0 +1,6 @@
+Enhancement: Password protected folder permissions
+
+We've added the permissions dropdown into the create password protected folder dialog. Users can now decide what permissions they would like to add to the folder. Permissions are matching folder public link permissions.
+
+https://github.com/owncloud/web/pull/12141
+https://github.com/owncloud/web/issues/12039

packages/web-app-password-protected-folders/src/components/CreateFolderModal.vue

@@ -12,12 +12,28 @@
       :label="$gettext('Password')"
       class="oc-mt-s"
     />
+
+    <div class="oc-flex oc-flex-middle oc-mt-m">
+      <oc-icon class="oc-mr-s" :name="selectedTypeIcon" fill-type="line" />
+      <link-role-dropdown
+        id="input-folder-permissions"
+        v-model="formData.selectedType"
+        :available-link-type-options="availableLinkTypes"
+      />
+    </div>
+
     <input type="submit" class="oc-hidden" />
   </form>
 </template>
 
 <script lang="ts" setup>
-import { useMessages, useResourcesStore, useSpacesStore } from '@ownclouders/web-pkg'
+import {
+  LinkRoleDropdown,
+  useLinkTypes,
+  useMessages,
+  useResourcesStore,
+  useSpacesStore
+} from '@ownclouders/web-pkg'
 import { computed, reactive, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useCreateFileHandler } from '../composables/useCreateFileHandler'
@@ -32,13 +48,17 @@ const { showErrorMessage } = useMessages()
 const { createFileHandler } = useCreateFileHandler()
 const { currentFolder } = useResourcesStore()
 const { currentSpace } = useSpacesStore()
+const { defaultLinkType, getAvailableLinkTypes, getLinkRoleByType } = useLinkTypes()
 
 const formData = reactive({
   folderName: '',
-  password: ''
+  password: '',
+  selectedType: unref(defaultLinkType)
 })
 
 const isFormValid = computed(() => formData.folderName !== '' && formData.password !== '')
+const availableLinkTypes = computed(() => getAvailableLinkTypes({ isFolder: true }))
+const selectedTypeIcon = computed(() => getLinkRoleByType(formData.selectedType).icon)
 
 const onConfirm = async () => {
   if (!unref(isFormValid)) {
@@ -50,7 +70,8 @@ const onConfirm = async () => {
       fileName: formData.folderName,
       currentFolder: unref(currentFolder),
       space: unref(currentSpace),
-      password: formData.password
+      password: formData.password,
+      type: formData.selectedType
     })
   } catch (error) {
     console.error(error)

packages/web-app-password-protected-folders/src/composables/useCreateFileHandler.ts

@@ -12,12 +12,14 @@ export const useCreateFileHandler = () => {
     fileName,
     space,
     currentFolder,
-    password
+    password,
+    type
   }: {
     fileName: string
     space: SpaceResource
     currentFolder: Resource
     password: string
+    type: SharingLinkType
   }) => {
     if (fileName === '') {
       return
@@ -32,7 +34,7 @@ export const useCreateFileHandler = () => {
       clientService,
       space,
       resource: folder,
-      options: { password, type: SharingLinkType.Edit }
+      options: { password, type }
     })
 
     const path = urlJoin(currentFolder.path, fileName + '.psec')

packages/web-app-password-protected-folders/tests/unit/components/CreateFolderModal.spec.ts

@@ -4,6 +4,7 @@ import { useCreateFileHandler } from '../../../src/composables/useCreateFileHand
 import { mock } from 'vitest-mock-extended'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { VueWrapper } from '@vue/test-utils'
+import { SharingLinkType } from '@ownclouders/web-client/graph/generated'
 
 vi.mock('../../../src/composables/useCreateFileHandler', () => ({
   useCreateFileHandler: vi.fn().mockReturnValue({ createFileHandler: vi.fn() })
@@ -14,7 +15,8 @@ const currentSpace = mock<SpaceResource>()
 
 const SELECTORS = Object.freeze({
   inputFolderName: '#input-folder-name',
-  inputFolderPassword: '#input-folder-password'
+  inputFolderPassword: '#input-folder-password',
+  inputFolderPermissions: '#input-folder-permissions'
 })
 
 describe('CreateFolderModal', () => {
@@ -23,17 +25,20 @@ describe('CreateFolderModal', () => {
 
     const folderNameInput = wrapper.findComponent(SELECTORS.inputFolderName) as VueWrapper
     const passwordInput = wrapper.findComponent(SELECTORS.inputFolderPassword) as VueWrapper
+    const permissionsInput = wrapper.findComponent(SELECTORS.inputFolderPermissions) as VueWrapper
 
     folderNameInput.vm.$emit('update:modelValue', 'name')
     passwordInput.vm.$emit('update:modelValue', 'password')
+    permissionsInput.vm.$emit('update:modelValue', SharingLinkType.Edit)
 
     wrapper.vm.onConfirm()
 
     expect(useCreateFileHandler().createFileHandler).toHaveBeenCalledWith({
       fileName: 'name',
       password: 'password',
       space: currentSpace,
-      currentFolder
+      currentFolder,
+      type: SharingLinkType.Edit
     })
   })
 

packages/web-app-password-protected-folders/tests/unit/composables/useCreateFileHandler.spec.ts

@@ -19,7 +19,8 @@ describe('createFileHandler', () => {
           fileName: 'protected',
           space,
           currentFolder,
-          password: 'Pass$123'
+          password: 'Pass$123',
+          type: SharingLinkType.Edit
         })
 
         expect(mocks.$clientService.webdav.createFolder).toHaveBeenCalledWith(space, {