feat: extension points, custom components, preferences

changelog/unreleased/enhancement-custom-component-extension

@@ -0,0 +1,7 @@
+Enhancement: Custom component extension type
+
+We've introduced a new extension type `customComponent`. This allows to register a custom component via an extension which
+can then be rendered in a custom component render target. For the mapping to the render target, an extension point needs to be
+registered and a CustomComponentTarget for this extension point needs to be in place in a vue template.
+
+https://github.com/owncloud/web/pull/10443

changelog/unreleased/enhancement-extension-points

@@ -0,0 +1,16 @@
+Enhancement: Add extensionPoint concept
+
+The extension system now allows developers to register extension points. An extension point defines the metadata for the
+integration of a certain extension type in a certain context. Examples for extension points are render targets for
+custom components, targets for file actions (e.g. the right click context menu, the batch actions, the whitespace context
+menu), etc.
+
+Extensions can now specify that they are only valid for a certain or multiple extension points. This way a file action extension
+can e.g. specify to be rendered only in the context menu, but not in the batch actions. Consequently, the extension points
+concept is the next iteration of the `scopes` concept. The `scopes` concept will most likely be removed in a future release.
+
+Extension points can define if users should be able to choose preferences for the extension point. E.g. for the global progress
+bar extension point, users can choose which of the available progress bar extensions should be used, since the extension point
+only allows one extension to be active. At the moment we persist the user choice in the local storage of the browser.
+
+https://github.com/owncloud/web/pull/10443

dev/docker/ocis.web.config.json

@@ -36,7 +36,8 @@
     "external",
     "admin-settings",
     "ocm",
-    "webfinger"
+    "webfinger",
+    "progress-bars"
   ],
   "external_apps": [
     {

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -318,7 +318,7 @@ export default defineComponent({
     const extensionActions = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<ActionExtension>('action', ['upload-menu'])
+          .requestExtensions<ActionExtension>('action', { scopes: ['upload-menu'] })
           .map((e) => e.action)
       ].filter((e) => e.isEnabled())
     })

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

@@ -39,7 +39,7 @@ export default defineComponent({
 
     const filteredActions = computed(() => {
       return unref(extensionRegistry)
-        .requestExtensions<ActionExtension>('action', ['resource.quick-action'])
+        .requestExtensions<ActionExtension>('action', { scopes: ['resource.quick-action'] })
         .map((e) => e.action)
         .filter(({ isEnabled }) => isEnabled({ space: props.space, resources: [props.item] }))
     })

packages/web-app-files/src/views/Favorites.vue

@@ -124,7 +124,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['favorite'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['favorite'] })
           .map((e) => e.folderView)
       ]
     })

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

@@ -271,7 +271,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['resource'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['resource'] })
           .map((e) => e.folderView)
       ]
     })

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

@@ -327,7 +327,7 @@ export default defineComponent({
     const viewModes = computed(() => {
       return [
         ...extensionRegistry
-          .requestExtensions<FolderViewExtension>('folderView', ['space'])
+          .requestExtensions<FolderViewExtension>('folderView', { scopes: ['space'] })
           .map((e) => e.folderView)
       ]
     })

packages/web-app-files/tests/unit/views/Favorites.spec.ts

@@ -70,7 +70,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })

packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts

@@ -308,7 +308,7 @@ function getMountedWrapper({
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })

packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts

@@ -115,7 +115,7 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
 
   vi.mocked(useExtensionRegistry).mockImplementation(() =>
     useExtensionRegistryMock({
-      requestExtensions<ExtensionType>(type: string, scopes: string[]) {
+      requestExtensions<ExtensionType>(type: string) {
         return extensions as ExtensionType[]
       }
     })

packages/web-app-progress-bars/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "web-app-progress-bars",
+  "version": "0.0.0",
+  "description": "Progress Bars",
+  "license": "AGPL-3.0",
+  "peerDependencies": {
+    "@ownclouders/web-pkg": "workspace:*"
+  }
+}