From 4617080bef38bafcdf6d94694a84f23aa3f1a960 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <info@hirt.cz>
Date: Tue, 28 Jan 2025 10:19:22 +0100
Subject: [PATCH] feat(password-protected-folders): add permissions dropdown

Show public link permissions dropdown in the create folder modal.
---
 ...t-password-protected-folder-permissions.md |  6 +++++
 .../src/components/CreateFolderModal.vue      | 27 ++++++++++++++++---
 .../src/composables/useCreateFileHandler.ts   |  6 +++--
 .../unit/components/CreateFolderModal.spec.ts |  9 +++++--
 .../composables/useCreateFileHandler.spec.ts  |  3 ++-
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-password-protected-folder-permissions.md

diff --git a/changelog/unreleased/enhancement-password-protected-folder-permissions.md b/changelog/unreleased/enhancement-password-protected-folder-permissions.md
new file mode 100644
index 00000000000..a361d771ac1
--- /dev/null
+++ b/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
diff --git a/packages/web-app-password-protected-folders/src/components/CreateFolderModal.vue b/packages/web-app-password-protected-folders/src/components/CreateFolderModal.vue
index 34fbffd85fe..e7faf94dd99 100644
--- a/packages/web-app-password-protected-folders/src/components/CreateFolderModal.vue
+++ b/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)
diff --git a/packages/web-app-password-protected-folders/src/composables/useCreateFileHandler.ts b/packages/web-app-password-protected-folders/src/composables/useCreateFileHandler.ts
index 7b9855d8867..ec268cbbec4 100644
--- a/packages/web-app-password-protected-folders/src/composables/useCreateFileHandler.ts
+++ b/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')
diff --git a/packages/web-app-password-protected-folders/tests/unit/components/CreateFolderModal.spec.ts b/packages/web-app-password-protected-folders/tests/unit/components/CreateFolderModal.spec.ts
index 1fb846da1f5..84f264f557c 100644
--- a/packages/web-app-password-protected-folders/tests/unit/components/CreateFolderModal.spec.ts
+++ b/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,9 +25,11 @@ 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()
 
@@ -33,7 +37,8 @@ describe('CreateFolderModal', () => {
       fileName: 'name',
       password: 'password',
       space: currentSpace,
-      currentFolder
+      currentFolder,
+      type: SharingLinkType.Edit
     })
   })
 
diff --git a/packages/web-app-password-protected-folders/tests/unit/composables/useCreateFileHandler.spec.ts b/packages/web-app-password-protected-folders/tests/unit/composables/useCreateFileHandler.spec.ts
index 70ad4b0150b..25090505b1f 100644
--- a/packages/web-app-password-protected-folders/tests/unit/composables/useCreateFileHandler.spec.ts
+++ b/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, {