refactor: move quick actions into injection context

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -2,15 +2,13 @@
   <div v-if="!isEmbedModeEnabled" class="oc-flex">
     <oc-button
       v-for="action in filteredActions"
-      :key="action.label($gettext)"
-      v-oc-tooltip="action.label($gettext)"
-      :aria-label="action.label($gettext)"
+      :key="action.label()"
+      v-oc-tooltip="action.label()"
+      :aria-label="action.label()"
       appearance="raw"
       class="oc-mr-xs quick-action-button oc-p-xs"
       :class="`files-quick-action-${action.id}`"
-      @click="
-        action.handler({ ability, clientService, passwordPolicyService, item, language, store })
-      "
+      @click="action.handler({ space, resources: [item] })"
     >
       <oc-icon :name="action.icon" fill-type="line" />
     </oc-button>
@@ -19,47 +17,36 @@
 
 <script lang="ts">
 import pickBy from 'lodash-es/pickBy'
-import { computed, defineComponent } from 'vue'
-import {
-  useAbility,
-  useClientService,
-  useEmbedMode,
-  usePasswordPolicyService,
-  useStore
-} from '@ownclouders/web-pkg'
-import { useGettext } from 'vue3-gettext'
+import { computed, defineComponent, PropType } from 'vue'
+import { FileAction, useEmbedMode } from '@ownclouders/web-pkg'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 export default defineComponent({
   name: 'QuickActions',
-
   props: {
     actions: {
-      type: Object,
+      type: Object as PropType<FileAction[]>,
       required: true
     },
     item: {
-      type: Object,
+      type: Object as PropType<Resource>,
       required: true
+    },
+    space: {
+      type: Object as PropType<SpaceResource>,
+      default: undefined
     }
   },
   setup(props) {
-    const store = useStore()
-    const ability = useAbility()
-    const clientService = useClientService()
-    const passwordPolicyService = usePasswordPolicyService()
-    const language = useGettext()
     const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
     const filteredActions = computed(() =>
-      pickBy(props.actions, (action) => action.displayed(props.item, store, ability) === true)
+      pickBy(props.actions, (action) =>
+        action.isEnabled({ space: props.space, resources: [props.item] })
+      )
     )
 
     return {
-      ability,
-      clientService,
-      passwordPolicyService,
-      store,
-      language,
       filteredActions,
       isEmbedModeEnabled
     }

packages/web-app-files/src/composables/actions/index.ts

@@ -1 +1,2 @@
 export * from './spaces'
+export * from './useQuickActions'

packages/web-app-files/src/composables/actions/useQuickActions.ts

@@ -0,0 +1,54 @@
+import { Ref, computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import {
+  eventBus,
+  SideBarEventTopics,
+  copyQuicklink,
+  FileAction,
+  useStore,
+  useAbility,
+  usePasswordPolicyService,
+  useClientService,
+  useCanShare
+} from '@ownclouders/web-pkg'
+
+export const useQuickActions = (): Ref<Record<string, FileAction>> => {
+  const store = useStore()
+  const ability = useAbility()
+  const passwordPolicyService = usePasswordPolicyService()
+  const { canShare } = useCanShare()
+  const clientService = useClientService()
+  const language = useGettext()
+  const { $gettext } = language
+
+  return computed(() => ({
+    collaborators: {
+      name: 'quick-action-collaborators',
+      id: 'collaborators',
+      componentType: 'button',
+      label: () => $gettext('Add people'),
+      icon: 'user-add',
+      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing#peopleShares'),
+      isEnabled: ({ resources }) => canShare(resources[0])
+    },
+    quicklink: {
+      name: 'quick-action-quicklink',
+      id: 'quicklink',
+      componentType: 'button',
+      label: () => $gettext('Copy link'),
+      icon: 'link',
+      handler: async ({ resources }) => {
+        console.log(22, passwordPolicyService)
+        await copyQuicklink({
+          ability,
+          passwordPolicyService,
+          clientService,
+          language,
+          resource: resources[0],
+          store
+        })
+      },
+      isEnabled: ({ resources }) => canShare(resources[0])
+    }
+  }))
+}

packages/web-app-files/src/index.ts

@@ -8,7 +8,7 @@ import SpaceDriveResolver from './views/spaces/DriveResolver.vue'
 import SpaceProjects from './views/spaces/Projects.vue'
 import TrashOverview from './views/trash/Overview.vue'
 import translations from '../l10n/translations.json'
-import { defineWebApplication, quickActions } from '@ownclouders/web-pkg'
+import { defineWebApplication } from '@ownclouders/web-pkg'
 import store from './store'
 import { extensions } from './extensions'
 import fileSideBars from './fileSideBars'
@@ -22,6 +22,8 @@ import {
   isPersonalSpaceResource,
   isShareSpaceResource
 } from '@ownclouders/web-client/src/helpers'
+import { unref } from 'vue'
+import { useQuickActions } from './composables'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -129,6 +131,8 @@ export const navItems = (context): AppNavigationItem[] => {
 
 export default defineWebApplication({
   setup(args) {
+    const quickActions = useQuickActions()
+
     return {
       appInfo,
       store,
@@ -151,7 +155,7 @@ export default defineWebApplication({
         }
       }),
       navItems,
-      quickActions,
+      quickActions: unref(quickActions),
       translations,
       extensions: extensions(args)
     }

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -126,6 +126,7 @@
               <quick-actions
                 :class="resource.preview"
                 class="oc-visible@s"
+                :space="space"
                 :item="resource"
                 :actions="app.quickActions"
               />

packages/web-pkg/src/composables/actions/files/useFileActionsCreateQuicklink.ts

@@ -1,4 +1,3 @@
-import quickActions, { canShare } from '../../../quickActions'
 import { copyQuicklink } from '../../../helpers/share'
 import { ShareStatus } from '@ownclouders/web-client/src/helpers/share'
 
@@ -12,6 +11,7 @@ import { useGettext } from 'vue3-gettext'
 import { Store } from 'vuex'
 import { FileAction, FileActionOptions } from '../types'
 import { usePasswordPolicyService } from '../../passwordPolicyService'
+import { useCanShare } from '../../shares'
 
 export const useFileActionsCreateQuickLink = ({
   store
@@ -25,6 +25,7 @@ export const useFileActionsCreateQuickLink = ({
   const ability = useAbility()
   const clientService = useClientService()
   const passwordPolicyService = usePasswordPolicyService()
+  const { canShare } = useCanShare()
 
   const handler = async ({ space, resources }: FileActionOptions) => {
     const [resource] = resources
@@ -43,8 +44,7 @@ export const useFileActionsCreateQuickLink = ({
   const actions = computed((): FileAction[] => [
     {
       name: 'create-quicklink',
-      icon: quickActions.quicklink.icon,
-      iconFillType: quickActions.quicklink.iconFillType,
+      icon: 'link',
       label: () => $gettext('Copy link'),
       handler,
       isEnabled: ({ resources }) => {
@@ -56,7 +56,7 @@ export const useFileActionsCreateQuickLink = ({
             return false
           }
         }
-        return canShare(resources[0], store, ability)
+        return canShare(resources[0])
       },
       componentType: 'button',
       class: 'oc-files-actions-create-quicklink-trigger'

packages/web-pkg/src/composables/actions/files/useFileActionsShowShares.ts

@@ -1,4 +1,3 @@
-import quickActions, { canShare } from '../../../quickActions'
 import { isLocationSharesActive, isLocationTrashActive } from '../../../router'
 import { ShareStatus } from '@ownclouders/web-client/src/helpers/share'
 import { eventBus } from '../../../services'
@@ -10,14 +9,14 @@ import { useRouter } from '../../router'
 import { useStore } from '../../store'
 import { Store } from 'vuex'
 import { FileAction, FileActionOptions } from '../types'
-import { useAbility } from '../../ability'
+import { useCanShare } from '../../shares'
 
 export const useFileActionsShowShares = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
-  const ability = useAbility()
   const { $gettext } = useGettext()
   const isFilesAppActive = useIsFilesAppActive()
+  const { canShare } = useCanShare()
 
   const handler = ({ resources }: FileActionOptions) => {
     store.commit('Files/SET_FILE_SELECTION', resources)
@@ -27,8 +26,7 @@ export const useFileActionsShowShares = ({ store }: { store?: Store<any> } = {})
   const actions = computed((): FileAction[] => [
     {
       name: 'show-shares',
-      icon: quickActions.collaborators.icon,
-      iconFillType: quickActions.collaborators.iconFillType,
+      icon: 'user-add',
       label: () => $gettext('Share'),
       handler,
       isEnabled: ({ resources }) => {
@@ -48,7 +46,7 @@ export const useFileActionsShowShares = ({ store }: { store?: Store<any> } = {})
             return false
           }
         }
-        return canShare(resources[0], store, ability)
+        return canShare(resources[0])
       },
       componentType: 'button',
       class: 'oc-files-actions-show-shares-trigger'

packages/web-pkg/src/composables/index.ts

@@ -28,6 +28,7 @@ export * from './scrollTo'
 export * from './search'
 export * from './selection'
 export * from './service'
+export * from './shares'
 export * from './sideBar'
 export * from './sort'
 export * from './spaces'

packages/web-pkg/src/composables/shares/index.ts

@@ -0,0 +1 @@
+export * from './useCanShare'

packages/web-pkg/src/composables/shares/useCanShare.ts

@@ -0,0 +1,21 @@
+import { Resource } from '@ownclouders/web-client'
+import { useStore } from '../store'
+import { useAbility } from '../ability'
+
+export const useCanShare = () => {
+  const store = useStore()
+  const ability = useAbility()
+
+  const canShare = (item: Resource) => {
+    const { capabilities } = store.state.user
+    if (!capabilities.files_sharing || !capabilities.files_sharing.api_enabled) {
+      return false
+    }
+    if (item.isReceivedShare() && !capabilities.files_sharing.resharing) {
+      return false
+    }
+    return item.canShare({ ability })
+  }
+
+  return { canShare }
+}

packages/web-pkg/src/helpers/share/link.ts

@@ -12,7 +12,6 @@ import { Ability } from '@ownclouders/web-client/src/helpers/resource/types'
 import { Resource } from '@ownclouders/web-client'
 import { Language } from 'vue3-gettext'
 import { unref } from 'vue'
-import { showQuickLinkPasswordModal } from '../../quickActions'
 import { getLocaleFromLanguage } from '../locale'
 import { PublicExpirationCapability } from '@ownclouders/web-client/src/ocs/capabilities'
 
@@ -30,6 +29,30 @@ export interface CopyQuickLink extends CreateQuicklink {
   passwordPolicyService: PasswordPolicyService
 }
 
+export function showQuickLinkPasswordModal({ $gettext, store, passwordPolicyService }, onConfirm) {
+  const modal = {
+    variation: 'passive',
+    title: $gettext('Set password'),
+    cancelText: $gettext('Cancel'),
+    confirmText: $gettext('Set'),
+    hasInput: true,
+    inputDescription: $gettext('Passwords for links are required.'),
+    inputPasswordPolicy: passwordPolicyService.getPolicy(),
+    inputGeneratePasswordMethod: () => passwordPolicyService.generatePassword(),
+    inputLabel: $gettext('Password'),
+    inputType: 'password',
+    onInput: () => store.dispatch('setModalInputErrorMessage', ''),
+    onPasswordChallengeCompleted: () => store.dispatch('setModalConfirmButtonDisabled', false),
+    onPasswordChallengeFailed: () => store.dispatch('setModalConfirmButtonDisabled', true),
+    onCancel: () => store.dispatch('hideModal'),
+    onConfirm: async (password) => {
+      onConfirm(password)
+    }
+  }
+
+  return store.dispatch('createModal', modal)
+}
+
 // doCopy creates the requested link and copies the url to the clipboard,
 // the copy action uses the clipboard // clipboardItem api to work around the webkit limitations.
 //

packages/web-pkg/src/index.ts

@@ -7,8 +7,6 @@ export * from './errors'
 export * from './helpers'
 export * from './http'
 export * from './observer'
-export { default as quickActions } from './quickActions'
-export * from './quickActions'
 export * from './router'
 export * from './services'
 export * from './types'