From 80b87af40c4c321e22e48fd33bbed20c21f83d14 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Fri, 9 Jun 2023 12:07:30 +0800
Subject: [PATCH] refacter workspace template into hooks

Signed-off-by: Hailong Cui <ihailong@amazon.com>
---
 .../public/components/workspace_app.tsx       | 20 ++----------
 src/plugins/workspace/public/hooks.ts         | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/plugins/workspace/public/hooks.ts

diff --git a/src/plugins/workspace/public/components/workspace_app.tsx b/src/plugins/workspace/public/components/workspace_app.tsx
index bec8ab5b7e4e..12009bb68561 100644
--- a/src/plugins/workspace/public/components/workspace_app.tsx
+++ b/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
diff --git a/src/plugins/workspace/public/hooks.ts b/src/plugins/workspace/public/hooks.ts
new file mode 100644
index 000000000000..a0b13ec911be
--- /dev/null
+++ b/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,
+  };
+}