refacter workspace template into hooks

Signed-off-by: Hailong Cui <ihailong@amazon.com>

src/plugins/workspace/public/components/workspace_app.tsx

@@ -10,30 +10,14 @@ import { matchPath, Route, Switch, useLocation } from 'react-router-dom';
 
 import { ROUTES } from './routes';
 import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
-import { ChromeBreadcrumb, PublicAppInfo } from '../../../../core/public';
+import { ChromeBreadcrumb } from '../../../../core/public';
 import { WORKSPACE_APP_NAME } from '../../common/constants';
-import { WorkspaceTemplate } from '../../../../core/types';
 
 export const WorkspaceApp = ({ appBasePath }: { appBasePath: string }) => {
   const {
-    services: { chrome, application },
+    services: { chrome },
   } = useOpenSearchDashboards();
   const location = useLocation();
-  let workspaceTemplates = [] as WorkspaceTemplate[];
-  const templateFeatureMap = new Map<string, PublicAppInfo[]>();
-  application?.applications$.subscribe((map) =>
-    map.forEach((app) => {
-      const { workspaceTemplate: templates = [] } = app;
-      workspaceTemplates.push(...templates);
-      for (const template of templates) {
-        const features = templateFeatureMap.get(template.id) || [];
-        features.push(app);
-        templateFeatureMap.set(template.id, features);
-      }
-    })
-  );
-
-  workspaceTemplates = [...new Set(workspaceTemplates)];
 
   /**
    * map the current pathname to breadcrumbs

src/plugins/workspace/public/hooks.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ApplicationStart, PublicAppInfo } from 'opensearch-dashboards/public';
+import { WorkspaceTemplate } from '../../../core/types';
+
+export function useWorkspaceTemplate(application: ApplicationStart) {
+  let workspaceTemplates = [] as WorkspaceTemplate[];
+  const templateFeatureMap = new Map<string, PublicAppInfo[]>();
+
+  application.applications$.subscribe((applications) =>
+    applications.forEach((app) => {
+      const { workspaceTemplate: templates = [] } = app;
+      workspaceTemplates.push(...templates);
+      for (const template of templates) {
+        const features = templateFeatureMap.get(template.id) || [];
+        features.push(app);
+        templateFeatureMap.set(template.id, features);
+      }
+    })
+  );
+
+  workspaceTemplates.sort((a, b) => (a.order || 0) - (b.order || 0));
+  workspaceTemplates = [...new Set(workspaceTemplates)];
+
+  return {
+    workspaceTemplates,
+    templateFeatureMap,
+  };
+}