feat(editor): Add front-end for Data Store feature (#17590)

packages/frontend/editor-ui/src/moduleInitializer/module.types.ts

@@ -0,0 +1,22 @@
+import type { DynamicTabOptions } from '@/utils/modules/tabUtils';
+import type { RouteRecordRaw } from 'vue-router';
+
+export type ResourceMetadata = {
+	key: string;
+	displayName: string;
+	i18nKeys?: Record<string, string>;
+};
+
+export type FrontendModuleDescription = {
+	id: string;
+	name: string;
+	description: string;
+	icon: string;
+	routes?: RouteRecordRaw[];
+	projectTabs?: {
+		overview?: DynamicTabOptions[];
+		project?: DynamicTabOptions[];
+		shared?: DynamicTabOptions[];
+	};
+	resources?: ResourceMetadata[];
+};

packages/frontend/editor-ui/src/moduleInitializer/moduleInitializer.ts

@@ -0,0 +1,86 @@
+import { type Router } from 'vue-router';
+import { VIEWS } from '@/constants';
+import { DataStoreModule } from '@/features/dataStore/module.descriptor';
+import { registerResource } from '@/moduleInitializer/resourceRegistry';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { InsightsModule } from '../features/insights/module.descriptor';
+import type { FrontendModuleDescription } from '@/moduleInitializer/module.types';
+
+/**
+ * Hard-coding modules list until we have a dynamic way to load modules.
+ */
+const modules: FrontendModuleDescription[] = [InsightsModule, DataStoreModule];
+
+/**
+ * Initialize modules resources (used in ResourcesListLayout), done in init.ts
+ */
+export const registerModuleResources = () => {
+	modules.forEach((module) => {
+		module.resources?.forEach((resource) => {
+			registerResource(resource);
+		});
+	});
+};
+
+/**
+ * Initialize modules project tabs (used in ProjectHeader), done in init.ts
+ */
+export const registerModuleProjectTabs = () => {
+	const uiStore = useUIStore();
+	modules.forEach((module) => {
+		if (module.projectTabs) {
+			if (module.projectTabs.overview) {
+				uiStore.registerCustomTabs('overview', module.id, module.projectTabs.overview);
+			}
+			if (module.projectTabs.project) {
+				uiStore.registerCustomTabs('project', module.id, module.projectTabs.project);
+			}
+			if (module.projectTabs.shared) {
+				uiStore.registerCustomTabs('shared', module.id, module.projectTabs.shared);
+			}
+		}
+	});
+};
+
+/**
+ * Middleware function to check if a module is available
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const checkModuleAvailability = (options: any) => {
+	if (!options?.to?.meta?.moduleName || typeof options.to.meta.moduleName !== 'string') {
+		return true;
+	}
+	return useSettingsStore().isModuleActive(options.to.meta.moduleName);
+};
+
+/**
+ * Initialize module routes, done in main.ts
+ */
+export const registerModuleRoutes = (router: Router) => {
+	modules.forEach((module) => {
+		module.routes?.forEach((route) => {
+			// Prepare the enhanced route with module metadata and custom middleware that checks module availability
+			const enhancedRoute = {
+				...route,
+				meta: {
+					...route.meta,
+					moduleName: module.id,
+					// Merge middleware options if custom middleware is present
+					...(route.meta?.middleware?.includes('custom') && {
+						middlewareOptions: {
+							...route.meta?.middlewareOptions,
+							custom: checkModuleAvailability,
+						},
+					}),
+				},
+			};
+
+			if (route.meta?.projectRoute) {
+				router.addRoute(VIEWS.PROJECT_DETAILS, enhancedRoute);
+			} else {
+				router.addRoute(enhancedRoute);
+			}
+		});
+	});
+};

packages/frontend/editor-ui/src/moduleInitializer/resourceRegistry.ts

@@ -0,0 +1,48 @@
+/**
+ * Allows features to register their resource types without modifying core components
+ * These resources can then be used in ResourcesListLayout.
+ *
+ * Apart from this, new resource types can be registered like this:
+  	1. Create a types.d.ts file in your feature directory
+		2. Define your resource type extending BaseResource
+  	3. Use module augmentation to extend ModuleResources:
+  			declare module '@/Interface' {
+    			interface ModuleResources {
+      			myFeature: MyFeatureResource;
+    		}
+			}
+  	4. Import your resource type from the local types file in your components
+ */
+
+import { type ResourceMetadata } from './module.types';
+
+// Private module state
+const resources: Map<string, ResourceMetadata> = new Map();
+
+/**
+ * Register a new resource type
+ */
+export function registerResource(metadata: ResourceMetadata): void {
+	resources.set(metadata.key, metadata);
+}
+
+/**
+ * Get resource metadata by key
+ */
+export function getResource(key: string): ResourceMetadata | undefined {
+	return resources.get(key);
+}
+
+/**
+ * Check if a resource is registered
+ */
+export function hasResource(key: string): boolean {
+	return resources.has(key);
+}
+
+/**
+ * Get all registered resource keys
+ */
+export function getAllResourceKeys(): string[] {
+	return Array.from(resources.keys());
+}