@@ -69,7 +58,9 @@ import {
Key,
useAppMeta,
useGetResourceContext,
- useKeyboardActions
+ useKeyboardActions,
+ useExtensionRegistry,
+ CustomComponentExtension
} from '../../composables'
import {
Resource,
@@ -151,6 +142,37 @@ const currentContent = ref()
let deleteResourceEventToken = ''
let appOnDeleteResourceCallback: (() => void) | null = null
+const { registerExtensions, unregisterExtensions } = useExtensionRegistry()
+const topBarExtensionId = 'app.app-wrapper.app-top-bar'
+const appBarExtension = computed(() => {
+ if (unref(loading) || unref(loadingError) || !unref(resource)) {
+ return []
+ }
+ return [
+ {
+ id: topBarExtensionId,
+ type: 'customComponent',
+ extensionPointIds: ['app.runtime.header.left'],
+ content: AppTopBar,
+ componentProps: () => ({
+ resource: unref(resource),
+ isReadOnly: unref(isReadOnly),
+ isEditor: unref(isEditor),
+ hasAutoSave: !disableAutoSave,
+ mainActions: unref(fileActions),
+ dropDownMenuSections: unref(dropDownMenuSections),
+ dropDownActionOptions: unref(actionOptions),
+ onClose: () => {
+ closeApp()
+ unregisterExtensions([topBarExtensionId])
+ }
+ })
+ }
+ ]
+})
+
+registerExtensions(appBarExtension)
+
const { actions: saveAsActions } = useFileActionsSaveAs({ content: currentContent })
const isEditor = computed(() => {
@@ -490,6 +512,7 @@ onMounted(() => {
})
onBeforeUnmount(() => {
eventBus.unsubscribe('runtime.resource.deleted', deleteResourceEventToken)
+ unregisterExtensions([topBarExtensionId])
if (!loadingService.isLoading) {
window.removeEventListener('beforeunload', preventUnload)
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index f3dd7c7d3f..0c7b0737b7 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,106 +1,104 @@
-
+
@@ -100,6 +96,8 @@ import { ImageDimension } from '../../../../constants'
import { ProcessorType } from '../../../../services'
import { isLocationSpacesActive } from '../../../../router'
import { useGettext } from 'vue3-gettext'
+import CustomComponentTarget from '../../../CustomComponentTarget.vue'
+import { fileSideBarSpaceDetailsTableExtensionPoint } from '../../../../extensionPoints'
const { showShareIndicators = true } = defineProps<{
showShareIndicators?: boolean
diff --git a/packages/web-pkg/src/components/index.ts b/packages/web-pkg/src/components/index.ts
index bdef64448c..95daeca5c9 100644
--- a/packages/web-pkg/src/components/index.ts
+++ b/packages/web-pkg/src/components/index.ts
@@ -25,7 +25,6 @@ export { default as QuotaSelect } from './QuotaSelect.vue'
export { default as SpaceQuota } from './SpaceQuota.vue'
export { default as SearchBarFilter } from './SearchBarFilter.vue'
export { default as ViewOptions } from './ViewOptions.vue'
-export { default as PortalTarget } from './PortalTarget.vue'
export { default as CreateShortcutModal } from './CreateShortcutModal.vue'
export { default as CreateLinkModal } from './CreateLinkModal.vue'
export { default as VersionCheck } from './VersionCheck.vue'
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index e1ce63ce9a..5e3617df4d 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -22,7 +22,6 @@ export * from './navItems'
export * from './pagination'
export * from './passwordPolicyService'
export * from './piniaStores'
-export * from './portalTarget'
export * from './previewService'
export * from './requestHeaders'
export * from './resources'
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 584491aae3..3af3b6308e 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -59,6 +59,7 @@ export interface FolderViewExtension extends Extension {
export interface CustomComponentExtension extends Extension {
type: 'customComponent'
content: Slot | Component
+ componentProps?: () => Record
}
export interface AccountExtension extends Extension {
diff --git a/packages/web-pkg/src/composables/portalTarget/eventTopics.ts b/packages/web-pkg/src/composables/portalTarget/eventTopics.ts
deleted file mode 100644
index ba25403837..0000000000
--- a/packages/web-pkg/src/composables/portalTarget/eventTopics.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum PortalTargetEventTopics {
- mounted = 'portal-target.mounted'
-}
diff --git a/packages/web-pkg/src/composables/portalTarget/index.ts b/packages/web-pkg/src/composables/portalTarget/index.ts
deleted file mode 100644
index 5b2ee447cc..0000000000
--- a/packages/web-pkg/src/composables/portalTarget/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './eventTopics'
-export * from './usePortalTarget'
diff --git a/packages/web-pkg/src/composables/portalTarget/usePortalTarget.ts b/packages/web-pkg/src/composables/portalTarget/usePortalTarget.ts
deleted file mode 100644
index 012b9d71e8..0000000000
--- a/packages/web-pkg/src/composables/portalTarget/usePortalTarget.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useWormhole } from 'portal-vue'
-import { TransportInput } from 'portal-vue/types'
-import { useEventBus } from '../eventBus'
-import { PortalTargetEventTopics } from './eventTopics'
-
-export const usePortalTarget = () => {
- const eventBus = useEventBus()
- const wormhole = useWormhole()
-
- const registerPortal = (transportInput: TransportInput) => {
- eventBus.subscribe(PortalTargetEventTopics.mounted, () => {
- wormhole.open(transportInput)
- })
- }
-
- return {
- registerPortal
- }
-}
diff --git a/packages/web-pkg/src/extensionPoints.ts b/packages/web-pkg/src/extensionPoints.ts
new file mode 100644
index 0000000000..a5529b1b36
--- /dev/null
+++ b/packages/web-pkg/src/extensionPoints.ts
@@ -0,0 +1,14 @@
+import { CustomComponentExtension, ExtensionPoint } from './composables'
+import { computed } from 'vue'
+
+export const fileSideBarSpaceDetailsTableExtensionPoint: ExtensionPoint =
+ {
+ id: 'app.files.sidebar.space-details.table',
+ extensionType: 'customComponent'
+ }
+
+export const extensionPoints = () => {
+ return computed[]>(() => {
+ return [fileSideBarSpaceDetailsTableExtensionPoint]
+ })
+}
diff --git a/packages/web-pkg/src/index.ts b/packages/web-pkg/src/index.ts
index 6a5b5ad470..fa9c551bac 100644
--- a/packages/web-pkg/src/index.ts
+++ b/packages/web-pkg/src/index.ts
@@ -3,6 +3,7 @@ export * from './components'
export * from './composables'
export * from './constants'
export * from './errors'
+export * from './extensionPoints'
export * from './helpers'
export * from './http'
export * from './observer'
diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index ff9960b32e..c097a8130e 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -85,25 +85,25 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
-
+
-
+
-
+
-
+
-
+
-
+
@@ -27,17 +23,13 @@
-
+
+
+
-
-
-
+
-
-
-