feat: support a as component type in actions (#11502)

* feat: support a as component type in actions
owncloud · Sep 3, 2024 · 289f0eb · 289f0eb
1 parent 4fdcbc8
commit 289f0eb
Show file tree

Hide file tree

Showing 62 changed files with 59 additions and 81 deletions.
diff --git a/changelog/unreleased/enhancement-action-a-tags b/changelog/unreleased/enhancement-action-a-tags
@@ -0,0 +1,5 @@
+Enhancement: Support a tags in actions
+
+We've added support for `a` tags in actions. This allows developers to create action extensions for e.g. opening file-specific URLs from the context menu.
+
+https://github.com/owncloud/web/pull/11502
diff --git a/docs/extension-system/extension-types/actions.md b/docs/extension-system/extension-types/actions.md
@@ -36,9 +36,9 @@ The most important configuration options are:
 - `icon` - The icon to be displayed, can be picked from https://owncloud.design/#/Design%20Tokens/IconList
 - `name` - The name of the action (not displayed in the UI)
 - `label` - The text to be displayed
-- `route` - The string/route to navigate to, if the nav item should be a `<router-link>`
-- `handler` - The action to perform upon click, if the nav item should be a `<button>`
-- `componentType` - Either `'button'` or `'router-link'`, depending on whether the action should be a link or button
+- `route` - The string/route to navigate to. The nav item will be a `<router-link>` tag.
+- `href` - The URL to navigate to. The nav item will be a `<a>`tag.
+- `handler` - The action to perform upon click. The nav item will be a `<button>` tag.
 - `isVisible` - Determines whether the action is displayed to the user
 
 Please check the [`Action` type](https://github.com/owncloud/web/blob/236c185540fc6758dc7bd84985c8834fa4145530/packages/web-pkg/src/composables/actions/types.ts#L6) for a full list of configuration options.
@@ -58,7 +58,6 @@ export const useDownloadFilesExtension = () => {
  action: {
  name: 'download-files',
  icon: 'download',
- componentType: 'button',
  class: 'oc-files-actions-download-files',
  label: () => $gettext('Download'),
  isVisible: ({ space, resources }) => {

diff --git a/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts b/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts
@@ -38,7 +38,6 @@ export const useGeneralActionsResetLogo = () => {
  return ability.can('update-all', 'Logo')
  },
  handler,
- componentType: 'button',
  class: 'oc-general-actions-reset-logo-trigger'
  }
  ])

diff --git a/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts b/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts
@@ -57,7 +57,6 @@ export const useGeneralActionsUploadLogo = ({ imageInput }: { imageInput: VNodeR
  handler: () => {
  unref(imageInput).click()
  },
- componentType: 'button',
  class: 'oc-general-actions-upload-logo-trigger'
  }
  ])

diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts
@@ -11,7 +11,6 @@ export const useGroupActionsCreateGroup = () => {
  {
  name: 'create-group',
  icon: 'add',
- componentType: 'button',
  class: 'oc-groups-actions-create-group',
  label: () => $gettext('New group'),
  isVisible: () => true,

diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts
@@ -114,7 +114,6 @@ export const useGroupActionsDelete = () => {
  isVisible: ({ resources }) => {
  return !!resources.length && !resources.some((r) => r.groupTypes?.includes('ReadOnly'))
  },
- componentType: 'button',
  class: 'oc-groups-actions-delete-trigger'
  }
  ])

diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
@@ -16,7 +16,6 @@ export const useGroupActionsEdit = () => {
  isVisible: ({ resources }) => {
  return resources.length === 1 && !resources[0].groupTypes?.includes('ReadOnly')
  },
- componentType: 'button',
  class: 'oc-groups-actions-edit-trigger'
  }
  ])

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts
@@ -32,7 +32,6 @@ export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> })
  {
  name: 'add-to-groups',
  icon: 'add',
- componentType: 'button',
  class: 'oc-users-actions-add-to-groups-trigger',
  label: () => $gettext('Add to groups'),
  isVisible: ({ resources }) => {

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts
@@ -13,7 +13,6 @@ export const useUserActionsCreateUser = () => {
  {
  name: 'create-user',
  icon: 'add',
- componentType: 'button',
  class: 'oc-users-actions-create-user',
  label: () => $gettext('New user'),
  isVisible: () => !capabilityStore.graphUsersCreateDisabled,

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts
@@ -116,7 +116,6 @@ export const useUserActionsDelete = () => {
  isVisible: ({ resources }) => {
  return !!resources.length && !capabilityStore.graphUsersDeleteDisabled
  },
- componentType: 'button',
  class: 'oc-users-actions-delete-trigger'
  }
  ])

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts
@@ -16,7 +16,6 @@ export const useUserActionsEdit = () => {
  isVisible: ({ resources }) => {
  return resources.length === 1
  },
- componentType: 'button',
  class: 'oc-users-actions-edit-trigger'
  }
  ])

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts
@@ -30,7 +30,6 @@ export const useUserActionsEditLogin = () => {
  {
  name: 'edit-login',
  icon: 'login-circle',
- componentType: 'button',
  class: 'oc-users-actions-edit-login-trigger',
  label: () => $gettext('Edit login'),
  isVisible: ({ resources }) => {

diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts
@@ -96,7 +96,6 @@ export const useUserActionsEditQuota = () => {
 
  return ability.can('set-quota-all', 'Drive')
  },
- componentType: 'button',
  class: 'oc-users-actions-edit-quota-trigger'
  }
  ])

diff --git a/...es/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts b/...es/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
@@ -32,7 +32,6 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
  {
  name: 'remove-users-from-groups',
  icon: 'subtract',
- componentType: 'button',
  class: 'oc-users-actions-remove-from-groups-trigger',
  label: () => $gettext('Remove from groups'),
  isVisible: ({ resources }) => {

diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -24,7 +24,6 @@ export const useAppActionsDownload = () => {
  isVisible: () => {
  return true
  },
- componentType: 'button',
  appearance: 'outline'
  }
 

diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
@@ -118,7 +118,6 @@ export const useSpaceActionsUploadImage = ({ spaceImageInput }: { spaceImageInpu
 
  return resources[0].canEditImage({ user: userStore.user })
  },
- componentType: 'button',
  class: 'oc-files-actions-upload-space-image-trigger'
  }
  ])

diff --git a/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts
@@ -21,28 +21,24 @@ const fileActions: Record<string, ActionWithSelector> = {
  copy: mock<ActionWithSelector>({
  handler: vi.fn(),
  label: () => 'Copy',
- componentType: 'button',
  class: 'oc-files-actions-copy-trigger',
  selector: '.oc-files-actions-copy-trigger'
  }),
  move: mock<ActionWithSelector>({
  handler: vi.fn(),
  label: () => 'Move',
- componentType: 'button',
  class: 'oc-files-actions-move-trigger',
  selector: '.oc-files-actions-move-trigger'
  }),
  download: mock<ActionWithSelector>({
  handler: vi.fn(),
  label: () => 'Download',
- componentType: 'button',
  class: 'oc-files-actions-download-file-trigger',
  selector: '.oc-files-actions-download-file-trigger'
  }),
  'text-editor': mock<ActionWithSelector>({
  handler: vi.fn(),
  label: () => 'Open in Text Editor',
- componentType: 'button',
  class: 'oc-files-actions-text-editor-trigger',
  selector: '.oc-files-actions-text-editor-trigger'
  })

diff --git a/packages/web-app-importer/src/extensions.ts b/packages/web-app-importer/src/extensions.ts
@@ -147,7 +147,6 @@ export const extensions = ({ applicationConfig }: ApplicationSetupOptions) => {
  },
  isDisabled: () => !!Object.keys(uppyService.getCurrentUploads()).length,
  disabledTooltip: () => $gettext('Please wait until all imports have finished'),
- componentType: 'button',
  class: 'oc-files-actions-import'
  }
  }

diff --git a/packages/web-app-ocm/src/extensions.ts b/packages/web-app-ocm/src/extensions.ts
@@ -69,7 +69,6 @@ export const extensions = (appInfo: ApplicationInformation) => {
  resources[0]?.storageId?.startsWith(OCM_PROVIDER_ID)
  )
  },
- componentType: 'button',
  class: 'oc-files-actions-open-file-remote'
  }
  },

diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -448,13 +448,10 @@ export default defineComponent({
  disabledTooltip: () => '',
  isVisible: () => unref(isEditor),
  isDisabled: () => isReadOnly.value || !isDirty.value,
- componentType: 'button',
  icon: 'save',
  id: 'app-save-action',
  label: () => 'Save',
- handler: () => {
- save()
- }
+ handler: save
  }
  ]
  })

diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -2,7 +2,7 @@
  <li v-oc-tooltip="componentProps.disabled ? action.disabledTooltip?.(actionOptions) : ''">
  <oc-button
  v-oc-tooltip="showTooltip || action.hideLabel ? action.label(actionOptions) : ''"
- :type="action.componentType"
+ :type="componentType"
  v-bind="componentProps"
  :class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
  :aria-label="componentProps.disabled ? action.disabledTooltip?.(actionOptions) : ''"
@@ -99,6 +99,23 @@ export default defineComponent({
  const configStore = useConfigStore()
  const { options } = storeToRefs(configStore)
 
+ const componentType = computed<string>(() => {
+ if (Object.hasOwn(props.action, 'handler')) {
+ return 'button'
+ }
+ if (Object.hasOwn(props.action, 'route')) {
+ return 'router-link'
+ }
+ if (Object.hasOwn(props.action, 'href')) {
+ return 'a'
+ }
+ console.warn(
+ 'ActionMenuItem: No handler, route or href callback found in action',
+ props.action
+ )
+ return 'button'
+ })
+
  const componentProps = computed(() => {
  const properties = {
  appearance: props.action.appearance || props.appearance,
@@ -109,15 +126,18 @@ export default defineComponent({
  ...(props.action.id && { id: props.action.id })
  }
 
- if (props.action.componentType === 'router-link' && props.action.route) {
- return {
- ...properties,
- to: props.action.route(props.actionOptions),
+ return {
+ ...properties,
+ ...(unref(componentType) === 'router-link' && {
+ to: props.action.route(props.actionOptions)
+ }),
+ ...(unref(componentType) === 'a' && {
+ href: props.action.href(props.actionOptions)
+ }),
+ ...(['router-link', 'a'].includes(unref(componentType)) && {
  target: options.value.cernFeatures ? '_blank' : '_self'
- }
+ })
  }
-
- return properties
  })
 
  const isMacOs = computed(() => {
@@ -133,6 +153,7 @@ export default defineComponent({
  })
 
  return {
+ componentType,
  componentProps,
  openInNewTabHint
  }
@@ -142,7 +163,7 @@ export default defineComponent({
  return this.action.icon && /^https?:\/\//i.test(this.action.icon)
  },
  componentListeners() {
- if (typeof this.action.handler !== 'function' || this.action.componentType !== 'button') {
+ if (typeof this.action.handler !== 'function') {
  return {}
  }
 

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActions.ts b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
@@ -113,7 +113,6 @@ export const useFileActions = () => {
  iconFillType: appInfo.iconFillType
  }),
  img: appInfo.img,
- componentType: 'router-link',
  route: ({ space, resources }) => {
  return getEditorRoute({
  appFileExtension: fileExtension,

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCopy.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCopy.ts
@@ -91,7 +91,6 @@ export const useFileActionsCopy = () => {
  // a user always has their home dir with write access
  return true
  },
- componentType: 'button',
  class: 'oc-files-actions-copy-trigger'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCopyQuicklink.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCopyQuicklink.ts
@@ -72,7 +72,6 @@ export const useFileActionsCopyQuickLink = () => {
 
  return canShare({ space, resource: resources[0] })
  },
- componentType: 'button',
  class: 'oc-files-actions-copy-quicklink-trigger'
  }
  ])

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts
@@ -153,7 +153,6 @@ export const useFileActionsCreateLink = ({
  return $gettext('Create links')
  },
  isVisible,
- componentType: 'button',
  class: 'oc-files-actions-create-links'
  },
  {
@@ -164,7 +163,6 @@ export const useFileActionsCreateLink = ({
  return $gettext('Create links')
  },
  isVisible,
- componentType: 'button',
  class: 'oc-files-actions-create-quick-links'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
@@ -181,7 +181,6 @@ export const useFileActionsCreateNewFile = ({ space }: { space?: Ref<SpaceResour
  isVisible: () => {
  return unref(currentFolder)?.canUpload({ user: userStore.user })
  },
- componentType: 'button',
  class: 'oc-files-actions-create-new-file',
  ext: appFileExtension.extension,
  isExternal: appFileExtension.app?.startsWith('external-')

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts
@@ -128,7 +128,6 @@ export const useFileActionsCreateNewFolder = ({ space }: { space?: Ref<SpaceReso
  isVisible: () => {
  return unref(currentFolder)?.canCreate()
  },
- componentType: 'button',
  class: 'oc-files-actions-create-new-folder'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
@@ -31,7 +31,6 @@ export const useFileActionsCreateNewShortcut = ({ space }: { space: Ref<SpaceRes
  isVisible: () => {
  return unref(currentFolder)?.canCreate()
  },
- componentType: 'button',
  class: 'oc-files-actions-create-new-shortcut'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts
@@ -131,7 +131,6 @@ export const useFileActionsCreateSpaceFromResource = () => {
 
  return true
  },
- componentType: 'button',
  class: 'oc-files-actions-create-space-from-resource-trigger'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsDelete.ts
@@ -80,7 +80,6 @@ export const useFileActionsDelete = () => {
  })
  return !deleteDisabled
  },
- componentType: 'button',
  class: 'oc-files-actions-delete-trigger'
  },
  {
@@ -106,7 +105,6 @@ export const useFileActionsDelete = () => {
 
  return resources.length > 0
  },
- componentType: 'button',
  class: 'oc-files-actions-delete-permanent-trigger'
  }
  ])

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsDisableSync.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsDisableSync.ts
@@ -101,7 +101,6 @@ export const useFileActionsDisableSync = () => {
 
  return resources.some((resource) => resource.syncEnabled)
  },
- componentType: 'button',
  class: 'oc-files-actions-disable-sync-trigger'
  }
  ])

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsDownloadArchive.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsDownloadArchive.ts
@@ -137,7 +137,6 @@ export const useFileActionsDownloadArchive = () => {
  })
  return !downloadDisabled
  },
- componentType: 'button',
  class: 'oc-files-actions-download-archive-trigger'
  }
  ]

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsDownloadFile.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsDownloadFile.ts
@@ -52,7 +52,6 @@ export const useFileActionsDownloadFile = () => {
  }
  return resources[0].canDownload()
  },
- componentType: 'button',
  class: 'oc-files-actions-download-file-trigger'
  }
  ])

diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
@@ -80,7 +80,6 @@ export const useFileActionsEmptyTrashBin = () => {
  isDisabled: () => {
  return resourcesStore.activeResources.length === 0
  },
- componentType: 'button',
  class: 'oc-files-actions-empty-trash-bin-trigger',
  variation: 'danger',
  appearance: 'filled'