[Workspace] Refactor new home page

changelogs/fragments/8467.yml

@@ -0,0 +1,2 @@
+refactor:
+- [Workspace] Refactor new home page. ([#8467](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8467))

src/plugins/home/public/plugin.ts

@@ -166,6 +166,10 @@
       navLinkStatus: AppNavLinkStatus.hidden,
       mount: async (params: AppMountParameters) => {
         const [coreStart, { navigation }] = await core.getStartServices();
+        if (!!coreStart.application.capabilities.workspaces?.enabled) {
+          coreStart.application.navigateToApp('workspace_initial');
+          return () => {};
+        }
         setCommonService();
         coreStart.chrome.docTitle.change(
           i18n.translate('home.pageTitle', { defaultMessage: 'Home' })

src/plugins/workspace/common/constants.ts

@@ -167,3 +167,5 @@ export const WORKSPACE_DATA_SOURCE_AND_CONNECTION_OBJECT_TYPES = [
   DATA_SOURCE_SAVED_OBJECT_TYPE,
   DATA_CONNECTION_SAVED_OBJECT_TYPE,
 ];
+
+export const USE_CASE_CARD_GRADIENT_PREFIX = 'workspace-initial-use-case-card';

src/plugins/workspace/public/application.tsx

@@ -17,6 +17,7 @@ import { WorkspaceDetailApp } from './components/workspace_detail_app';
 import { WorkspaceDetailProps } from './components/workspace_detail/workspace_detail';
 import { WorkspaceInitialApp } from './components/workspace_initial_app';
 import { WorkspaceUseCaseOverviewApp } from './components/workspace_use_case_overview_app';
+import { WorkspaceInitialProps } from './components/workspace_initial/workspace_initial';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -101,18 +102,20 @@ export const renderDetailApp = (
   };
 };
 
-export const renderInitialApp = ({}: AppMountParameters, services: Services) => {
-  const rootElement = document.getElementById('opensearch-dashboards-body');
-
+export const renderInitialApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: WorkspaceInitialProps
+) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceInitialApp />
+      <WorkspaceInitialApp {...props} />
     </OpenSearchDashboardsContextProvider>,
-    rootElement
+    element
   );
 
   return () => {
-    ReactDOM.unmountComponentAtNode(rootElement!);
+    ReactDOM.unmountComponentAtNode(element);
   };
 };