feat: show modal when creating links in embed mode

Adds a modal that pops up after clicking "Share links" in embed mode where the user can specify the props of the link(s) they want to create: password, role, name. It also changes the behavior so there will be always new links created instead of re-using existing links.
owncloud · Nov 30, 2023 · 95ced20 · 95ced20
1 parent b0adcdf
commit 95ced20
Show file tree

Hide file tree

Showing 16 changed files with 935 additions and 189 deletions.
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -52,6 +52,7 @@ export default defineComponent({
      **/
     // eslint-disable-next-line vue/require-prop-types
     modelValue: {
+      type: [String, Number, Boolean, Object],
       required: false,
       default: false
     },
@@ -127,7 +128,7 @@ export default defineComponent({
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  border: 1px solid var(--oc-color-input-border);
+  border: 1px solid var(--oc-color-swatch-brand-default);
   border-radius: 50%;
   box-sizing: border-box;
   background-color: var(--oc-color-input-bg);
@@ -148,7 +149,7 @@ export default defineComponent({
   }
 
   &:checked {
-    background-color: var(--oc-color-swatch-brand-default);
+    background-color: var(--oc-color-background-highlight);
   }
 
   &.oc-radio-s {

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -491,7 +491,7 @@ export default defineComponent({
         return tooltip
       }
       if (!this.createFileActionsAvailable) {
-        return this.$gettext('Create a new folder')
+        return this.$gettext('New folder')
       }
       return this.$gettext('Create new files or folders')
     },

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -9,8 +9,10 @@
       data-testid="button-share"
       variation="inverse"
       appearance="filled"
-      :disabled="areSelectActionsDisabled || !canCreatePublicLinks"
-      @click="sharePublicLinks"
+      :disabled="
+        areSelectActionsDisabled || !createLinkAction.isEnabled({ resources: selectedFiles, space })
+      "
+      @click="createLinkAction.handler({ resources: selectedFiles, space })"
       >{{ $gettext('Share links') }}</oc-button
     >
     <oc-button
@@ -25,30 +27,25 @@
 </template>
 
 <script lang="ts">
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import {
-  createQuicklink,
-  getDefaultLinkPermissions,
-  showQuickLinkPasswordModal,
+  FileAction,
   useAbility,
-  useClientService,
   useEmbedMode,
-  usePasswordPolicyService,
+  useFileActionsCreateLink,
   useStore
 } from '@ownclouders/web-pkg'
-import { Resource } from '@ownclouders/web-client'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
-import { SharePermissionBit } from '@ownclouders/web-client/src/helpers'
 
 export default {
   setup() {
     const store = useStore()
     const ability = useAbility()
-    const clientService = useClientService()
-    const passwordPolicyService = usePasswordPolicyService()
     const language = useGettext()
     const { isLocationPicker, postMessage } = useEmbedMode()
 
+    const space = computed<SpaceResource>(() => store.getters['runtime/spaces/currentSpace'])
     const selectedFiles = computed<Resource[]>(() => {
       if (isLocationPicker.value) {
         return [store.getters['Files/currentFolder']]
@@ -57,6 +54,9 @@ export default {
       return store.getters['Files/selectedFiles']
     })
 
+    const { actions: createLinkActions } = useFileActionsCreateLink({ store })
+    const createLinkAction = computed<FileAction>(() => unref(createLinkActions)[0])
+
     const areSelectActionsDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
 
     const canCreatePublicLinks = computed<boolean>(() => ability.can('create-all', 'PublicLink'))
@@ -76,74 +76,16 @@ export default {
       postMessage<null>('owncloud-embed:cancel', null)
     }
 
-    const emitShare = (links: string[]): void => {
-      if (!canCreatePublicLinks.value) return
-
-      postMessage<string[]>('owncloud-embed:share', links)
-    }
-
-    const sharePublicLinks = async (): Promise<string[]> => {
-      if (!canCreatePublicLinks.value) return
-
-      try {
-        const passwordEnforced: boolean =
-          store.getters.capabilities?.files_sharing?.public?.password?.enforced_for?.read_only ===
-          true
-
-        const permissions = getDefaultLinkPermissions({ ability, store })
-
-        if (passwordEnforced && permissions > SharePermissionBit.Internal) {
-          showQuickLinkPasswordModal(
-            { store, $gettext: language.$gettext, passwordPolicyService },
-            async (password) => {
-              const links: string[] = await Promise.all(
-                selectedFiles.value.map(
-                  async (resource) =>
-                    (
-                      await createQuicklink({
-                        ability,
-                        resource,
-                        clientService,
-                        language,
-                        store,
-                        password
-                      })
-                    ).url
-                )
-              )
-
-              emitShare(links)
-            }
-          )
-
-          return
-        }
-
-        const links: string[] = await Promise.all(
-          selectedFiles.value.map(
-            async (resource) =>
-              (await createQuicklink({ ability, resource, clientService, language, store })).url
-          )
-        )
-
-        emitShare(links)
-      } catch (error) {
-        console.error(error)
-        store.dispatch('showErrorMessage', {
-          title: language.$gettext('Sharing links failed...'),
-          error
-        })
-      }
-    }
-
     return {
+      selectedFiles,
       areSelectActionsDisabled,
       canCreatePublicLinks,
       isLocationPicker,
       selectLabel,
-      sharePublicLinks,
       emitCancel,
-      emitSelect
+      emitSelect,
+      space,
+      createLinkAction
     }
   }
 }

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -18,16 +18,16 @@
           <oc-button
             v-if="isEmbedModeEnabled"
             key="new-folder-btn"
-            v-oc-tooltip="limitedScreenSpace ? $gettext('Create a new folder') : ''"
+            v-oc-tooltip="limitedScreenSpace ? $gettext('New folder') : ''"
             data-testid="btn-new-folder"
-            :aria-label="$gettext('Create a new folder')"
+            :aria-label="$gettext('New folder')"
             appearance="filled"
             variation="primary"
             :disabled="!canUpload"
             @click="createNewFolderAction"
           >
             <oc-icon name="add" />
-            <span v-if="!limitedScreenSpace" v-text="$gettext('Create a new folder')" />
+            <span v-if="!limitedScreenSpace" v-text="$gettext('New folder')" />
           </oc-button>
 
           <create-and-upload

diff --git a/...ges/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/...ges/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`CreateAndUpload component action buttons should show and be enabled if
 
 <div class="create-and-upload-actions oc-flex-inline oc-mr-s">
   <span>
-    <button aria-label="Create a new folder" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-folder-btn" type="button">
+    <button aria-label="New folder" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-folder-btn" type="button">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="resource-type-folder" size="medium" type="span" variation="passive"></oc-icon-stub>