feat: folder editor apps

packages/design-system/src/styles/defaults.css

@@ -15,6 +15,7 @@
   --oc-color-icon-jupyter: rgb(243, 119, 38);
   --oc-color-icon-markdown: rgb(75, 100, 137);
   --oc-color-icon-medical: rgb(9, 132, 219);
+  --oc-color-icon-notes: rgb(244, 187, 68);
   --oc-color-icon-pdf: rgb(236, 13, 71);
   --oc-color-icon-presentation: rgb(238, 107, 59);
   --oc-color-icon-root: rgb(0, 187, 219);

packages/web-app-external/src/extensions/createFromTemplate.ts

@@ -121,7 +121,7 @@ export const useActionExtensionCreateFromTemplate = (
   }
   return {
     id: 'com.github.opencloud-eu.web.external.action.create-from-template',
-    extensionPointIds: ['global.files.context-actions', 'global.files.default-actions'],
+    extensionPointIds: ['global.files.context-actions'],
     type: 'action',
     action
   }

packages/web-app-files/src/components/SideBar/Actions/FileActions.vue

@@ -19,9 +19,9 @@ const space = inject<Ref<SpaceResource>>('space')
 const resources = computed(() => {
   return [unref(resource)]
 })
-const { getAllAvailableActions } = useFileActions()
+const { getAllOpenWithActions } = useFileActions()
 const actions = computed(() => {
-  return getAllAvailableActions({
+  return getAllOpenWithActions({
     space: unref(space),
     resources: unref(resources)
   })

packages/web-app-files/src/composables/extensions/useFileActions.ts

@@ -4,11 +4,7 @@ import {
   useFileActionsOpenShortcut,
   useFileActionsShowShares
 } from '@opencloud-eu/web-pkg'
-import {
-  contextActionsExtensionPoint,
-  defaultActionsExtensionPoint,
-  quickActionsExtensionPoint
-} from '../../extensionPoints'
+import { contextActionsExtensionPoint, quickActionsExtensionPoint } from '../../extensionPoints'
 import { unref } from 'vue'
 
 export const useFileActions = (): ActionExtension[] => {
@@ -19,7 +15,7 @@ export const useFileActions = (): ActionExtension[] => {
   return [
     {
       id: 'com.github.opencloud-eu.web.files.context-action.open-shortcut',
-      extensionPointIds: [contextActionsExtensionPoint.id, defaultActionsExtensionPoint.id],
+      extensionPointIds: [contextActionsExtensionPoint.id],
       type: 'action',
       action: unref(openShortcutActions)[0]
     },

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

@@ -31,11 +31,6 @@ export const contextActionsExtensionPoint: ExtensionPoint<ActionExtension> = {
   extensionType: 'action',
   multiple: true
 }
-export const defaultActionsExtensionPoint: ExtensionPoint<ActionExtension> = {
-  id: 'global.files.default-actions',
-  extensionType: 'action',
-  multiple: true
-}
 export const fileSideBarExtensionPoint: ExtensionPoint<SidebarPanelExtension<any, any, any>> = {
   id: 'global.files.sidebar',
   extensionType: 'sidebarPanel',
@@ -92,7 +87,6 @@ export const extensionPoints = () => {
       trashQuickActionsExtensionPoint,
       batchActionsExtensionPoint,
       contextActionsExtensionPoint,
-      defaultActionsExtensionPoint,
       fileSideBarExtensionPoint,
       folderViewsFolderExtensionPoint,
       folderViewsFavoritesExtensionPoint,

packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts

@@ -50,7 +50,7 @@ describe('FileActions', () => {
       it('renders action handlers as clickable elements', async () => {
         vi.mocked(useFileActions).mockImplementation(() =>
           mock<ReturnType<typeof useFileActions>>({
-            getAllAvailableActions: () => Object.values(fileActions)
+            getAllOpenWithActions: () => Object.values(fileActions)
           })
         )
 

packages/web-client/src/helpers/resource/functions.ts

@@ -47,9 +47,6 @@ export const extractNameWithoutExtension = (resource?: Resource): string => {
 
 export const extractExtensionFromFile = (resource: Resource): string => {
   const name = resource.name
-  if (resource.type === 'directory' || resource.isFolder) {
-    return ''
-  }
 
   const parts = name.split('.')
   if (parts.length > 2) {
@@ -142,7 +139,7 @@ export function buildResource(
     parentFolderId: resource.props[DavProperty.FileParent],
     mimeType: resource.props[DavProperty.MimeType],
     name,
-    extension: isFolder ? '' : extension,
+    extension,
     path: resourcePath,
     webDavPath: resource.filename,
     type: isFolder ? 'folder' : resource.type,

packages/web-pkg/src/apps/types.ts

@@ -57,6 +57,7 @@ export type AppConfigObject = Record<string, any>
 export interface ApplicationFileExtension {
   app?: string
   extension?: string
+  type?: 'file' | 'folder'
   createFileHandler?: (arg: {
     fileName: string
     space: SpaceResource

packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue

@@ -20,14 +20,14 @@
         data-testid="action-img"
         :src="action.img"
         alt=""
-        class="oc-icon oc-icon-m"
+        class="oc-icon oc-icon-m w-[22px]"
       />
       <oc-image
         v-else-if="hasExternalImageIcon"
         data-testid="action-img"
         :src="actionIcon"
         alt=""
-        class="oc-icon oc-icon-m"
+        class="oc-icon oc-icon-m w-[22px]"
       />
       <oc-icon
         v-else-if="actionIcon"
@@ -41,7 +41,7 @@
         class="oc-files-context-action-label flex flex-col"
         data-testid="action-label"
       >
-        <span v-text="action.label(actionOptions)" />
+        <span class="text-left" v-text="action.label(actionOptions)" />
       </span>
       <span
         v-if="action.shortcut && shortcutHint"

packages/web-pkg/src/components/FilesList/ContextActions.vue

@@ -20,7 +20,7 @@ import {
   useFileActionsEnableSync,
   useFileActionsFavorite,
   useFileActionsMove,
-  useFileActionsNavigate,
+  useFileActionsOpenWithDefault,
   useFileActionsPaste,
   useFileActionsRename,
   useFileActionsRestore,
@@ -43,9 +43,10 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { editorActions, defaultEditorActions } = useFileActions()
+    const { getAllOpenWithActions } = useFileActions()
     const { $gettext } = useGettext()
 
+    const { actions: openWithDefaultActions } = useFileActionsOpenWithDefault()
     const { actions: enableSyncActions } = useFileActionsEnableSync()
     const { actions: hideShareActions } = useFileActionsToggleHideShare()
     const { actions: copyActions } = useFileActionsCopy()
@@ -56,7 +57,6 @@ export default defineComponent({
     const { actions: downloadFileActions } = useFileActionsDownloadFile()
     const { actions: favoriteActions } = useFileActionsFavorite()
     const { actions: moveActions } = useFileActionsMove()
-    const { actions: navigateActions } = useFileActionsNavigate()
     const { actions: pasteActions } = useFileActionsPaste()
     const { actions: renameActions } = useFileActionsRename()
     const { actions: restoreActions } = useFileActionsRestore()
@@ -109,16 +109,13 @@ export default defineComponent({
     )
 
     const menuItemsContext = computed(() => {
-      return [...unref(navigateActions), ...unref(defaultEditorActions)]
+      return unref(openWithDefaultActions)
         .filter((item) => item.isVisible(unref(actionOptions)))
         .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
     })
 
     const menuItemsContextDrop = computed(() => {
-      return [
-        ...unref(editorActions),
-        ...unref(extensionsContextActions).filter((a) => a.category === 'context')
-      ]
+      return getAllOpenWithActions({ ...unref(actionOptions), omitSystemActions: true })
         .filter((item) => item.isVisible(unref(actionOptions)))
         .sort((x, y) => Number(y.hasPriority) - Number(x.hasPriority))
     })

packages/web-pkg/src/components/FilesList/ResourceIcon.vue

@@ -8,26 +8,29 @@
       'oc-resource-icon',
       'inline-flex',
       'items-center',
-      { 'opacity-80 grayscale': isDisabledSpace, '[&_svg]:h-[70%]': !isSpace && !isFolder }
+      {
+        'opacity-80 grayscale': hasDisabledSpaceIcon,
+        '[&_svg]:h-[70%]': !hasSpaceIcon && !hasFolderIcon
+      }
     ]"
   />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, unref } from 'vue'
+<script setup lang="ts">
+import { computed, inject, unref } from 'vue'
 import {
   isPersonalSpaceResource,
   isProjectSpaceResource,
   Resource,
   SpaceResource
 } from '@opencloud-eu/web-client'
-import { AVAILABLE_SIZES, SizeType } from '@opencloud-eu/design-system/helpers'
+import { SizeType } from '@opencloud-eu/design-system/helpers'
 import {
   createDefaultFileIconMapping,
   IconType,
   ResourceIconMapping,
   resourceIconMappingInjectionKey
-} from '../../helpers/resource/icon'
+} from '../../helpers'
 
 const defaultFolderIcon: IconType = {
   name: 'resource-type-folder',
@@ -56,87 +59,60 @@ const defaultFallbackIcon: IconType = {
 
 const defaultFileIconMapping = createDefaultFileIconMapping()
 
-export default defineComponent({
-  name: 'ResourceIcon',
-  props: {
-    /**
-     * The resource to be displayed
-     */
-    resource: {
-      type: Object as PropType<Resource | SpaceResource>,
-      required: true
-    },
-    /**
-     * The size of the icon. Defaults to large.
-     * `xsmall, small, medium, large, xlarge, xxlarge`
-     */
-    size: {
-      type: String as PropType<SizeType>,
-      default: 'large',
-      validator: (value: string): boolean => {
-        return AVAILABLE_SIZES.some((e) => e === value)
-      }
-    }
-  },
-  setup(props) {
-    const iconMappingInjection = inject<ResourceIconMapping>(resourceIconMappingInjectionKey)
-
-    const isFolder = computed(() => {
-      // fallback is necessary since
-      // sometimes resources without a type
-      // but with `isFolder` are being passed
-      return props.resource.type === 'folder' || props.resource.isFolder
-    })
-
-    const isSpace = computed(() => {
-      return props.resource.type === 'space'
-    })
-
-    const isDisabledSpace = computed(() => {
-      return isProjectSpaceResource(props.resource) && props.resource.disabled === true
-    })
-
-    const isPersonalSpace = computed(() => {
-      return isPersonalSpaceResource(props.resource)
-    })
-    const extension = computed(() => {
-      return props.resource.extension?.toLowerCase()
-    })
-    const mimeType = computed(() => {
-      return props.resource.mimeType?.toLowerCase()
-    })
-
-    const icon = computed((): IconType => {
-      if (unref(isPersonalSpace)) {
-        return defaultPersonalSpaceIcon
-      }
-      if (unref(isDisabledSpace)) {
-        return defaultSpaceIconDisabled
-      }
-      if (unref(isSpace)) {
-        return defaultSpaceIcon
-      }
-      if (unref(isFolder)) {
-        return defaultFolderIcon
-      }
+const { resource, size = 'large' } = defineProps<{
+  resource: Resource | SpaceResource
+  size?: SizeType
+}>()
 
-      const icon =
-        defaultFileIconMapping[unref(extension)] ||
-        iconMappingInjection?.mimeType[unref(mimeType)] ||
-        iconMappingInjection?.extension[unref(extension)]
+const iconMappingInjection = inject<ResourceIconMapping>(resourceIconMappingInjectionKey)
 
-      return {
-        ...defaultFallbackIcon,
-        ...icon
-      }
-    })
-
-    return {
-      icon,
-      isSpace,
-      isFolder,
-      isDisabledSpace
-    }
+const hasFolderIcon = computed(() => {
+  if (!!resource.extension) {
+    return false
+  }
+  return resource.type === 'folder' || resource.isFolder
+})
+
+const hasSpaceIcon = computed(() => {
+  return resource.type === 'space'
+})
+
+const hasDisabledSpaceIcon = computed(() => {
+  return isProjectSpaceResource(resource) && resource.disabled === true
+})
+
+const hasPersonalSpaceIcon = computed(() => {
+  return isPersonalSpaceResource(resource)
+})
+const extension = computed(() => {
+  return resource.extension?.toLowerCase()
+})
+const mimeType = computed(() => {
+  return resource.mimeType?.toLowerCase()
+})
+
+const icon = computed((): IconType => {
+  if (unref(hasPersonalSpaceIcon)) {
+    return defaultPersonalSpaceIcon
+  }
+  if (unref(hasDisabledSpaceIcon)) {
+    return defaultSpaceIconDisabled
+  }
+  if (unref(hasSpaceIcon)) {
+    return defaultSpaceIcon
+  }
+  if (unref(hasFolderIcon)) {
+    return defaultFolderIcon
+  }
+
+  const icon =
+    defaultFileIconMapping[unref(extension)] ||
+    iconMappingInjection?.mimeType[unref(mimeType)] ||
+    iconMappingInjection?.extension[unref(extension)]
+
+  return {
+    ...defaultFallbackIcon,
+    ...icon
   }
 })
 </script>

packages/web-pkg/src/components/FilesList/ResourceLink.vue

@@ -78,7 +78,7 @@ export default {
       if (!this.resource) {
         return false
       }
-      return (this.resource.isFolder || this.link) && !this.resource.disabled
+      return this.link && !this.resource.disabled
     },
     isClickable() {
       return this.isResourceClickable && !this.resource?.disabled

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -403,8 +403,7 @@ const {
   getParentFolderLink,
   getParentFolderLinkIconAdditionalAttributes,
   getParentFolderName,
-  getPathPrefix,
-  getFolderLink
+  getPathPrefix
 } = useFolderLink({
   space: ref(space),
   targetRouteCallback: computed(() => targetRouteCallback)
@@ -486,10 +485,6 @@ const emitSelect = (selectedIds: string[]) => {
 }
 
 const getResourceLink = (resource: Resource) => {
-  if (resource.isFolder) {
-    return getFolderLink(resource)
-  }
-
   let matchingSpace = space
   if (!matchingSpace) {
     matchingSpace = getMatchingSpace(resource)