From 02ddfee07568d9cb6aad3721caf1fac49ba5b610 Mon Sep 17 00:00:00 2001
From: Hailong Cui <ihailong@amazon.com>
Date: Thu, 25 Apr 2024 14:50:34 +0800
Subject: [PATCH] [Workspace] Add workspace overview page (#6584)

* workspace overview page

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

address review comments

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

address ux review comments

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

Add workspace overview to breadCrumb

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

getting start modal & settings tab

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

home breadcrumb

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

fix rebase issue

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

tmp enable management

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

add workspace overview collapsed into localStorage

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

getting start modal

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

page layout

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

Add test cases

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

fix breadcrumb

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

* fix merge issue

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

* fix wrong dataSourceManagement id

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

* Changeset file for PR #6584 created/updated

* update page layout

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

* overview tab layout update

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

* fix workspace overview page breadcrumb

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

* collapsed setting to be workspace level

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

* fix workspace_overview_modal unit test

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

* Update src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Update src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Update src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Update src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Update src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* Update src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>

* address review comments

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

* address review comments

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

* fix setBreadcrumbs issue

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

* wording change of breadcrumbs

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

* udpate breadcrumb subscription to be a better name

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

* Add unit test

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

---------

Signed-off-by: Hailong Cui <ihailong@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
---
 changelogs/fragments/6584.yml                 |   2 +
 src/plugins/workspace/common/constants.ts     |  42 +++
 src/plugins/workspace/public/application.tsx  |  19 ++
 .../workspace_overview.test.tsx.snap          | 260 ++++++++++++++++++
 .../all_get_started_cards.ts                  | 174 ++++++++++++
 .../getting_start_card.test.tsx               |  58 ++++
 .../workspace_overview/getting_start_card.tsx |  66 +++++
 .../getting_start_modal.test.tsx              | 106 +++++++
 .../getting_start_modal.tsx                   | 139 ++++++++++
 .../components/workspace_overview/index.scss  |  30 ++
 .../components/workspace_overview/types.ts    |  21 ++
 .../workspace_overview.test.tsx               | 229 +++++++++++++++
 .../workspace_overview/workspace_overview.tsx | 208 ++++++++++++++
 .../workspace_overview_content.tsx            |  48 ++++
 .../workspace_overview_settings.tsx           |  20 ++
 .../components/workspace_overview_app.tsx     |  46 ++++
 .../workspace_updater/workspace_updater.tsx   |  11 +-
 src/plugins/workspace/public/plugin.test.ts   |  49 +++-
 src/plugins/workspace/public/plugin.ts        |  81 +++++-
 19 files changed, 1589 insertions(+), 20 deletions(-)
 create mode 100644 changelogs/fragments/6584.yml
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/__snapshots__/workspace_overview.test.tsx.snap
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/all_get_started_cards.ts
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/getting_start_card.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/getting_start_modal.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/index.scss
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/types.ts
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/workspace_overview.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/workspace_overview.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_overview_app.tsx

diff --git a/changelogs/fragments/6584.yml b/changelogs/fragments/6584.yml
new file mode 100644
index 000000000000..69b9d2471271
--- /dev/null
+++ b/changelogs/fragments/6584.yml
@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Add workspace overview page ([#6584](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6584))
\ No newline at end of file
diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
index be071dd0c102..17a8291b4f72 100644
--- a/src/plugins/workspace/common/constants.ts
+++ b/src/plugins/workspace/common/constants.ts
@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
+import { AppCategory } from '../../../core/types';
+
 export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error';
 export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
 export const WORKSPACE_LIST_APP_ID = 'workspace_list';
@@ -37,3 +40,42 @@ export const PRIORITY_FOR_WORKSPACE_ID_CONSUMER_WRAPPER = -3;
 export const PRIORITY_FOR_WORKSPACE_UI_SETTINGS_WRAPPER = -2;
 export const PRIORITY_FOR_WORKSPACE_CONFLICT_CONTROL_WRAPPER = -1;
 export const PRIORITY_FOR_PERMISSION_CONTROL_WRAPPER = 0;
+
+export const WORKSPACE_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze({
+  // below categories are for workspace
+  getStarted: {
+    id: 'getStarted',
+    label: i18n.translate('core.ui.getStarted.label', {
+      defaultMessage: 'Get started',
+    }),
+    order: 10000,
+  },
+  dashboardAndReport: {
+    id: 'dashboardReport',
+    label: i18n.translate('core.ui.dashboardReport.label', {
+      defaultMessage: 'Dashboard and report',
+    }),
+    order: 11000,
+  },
+  investigate: {
+    id: 'investigate',
+    label: i18n.translate('core.ui.investigate.label', {
+      defaultMessage: 'Investigate',
+    }),
+    order: 12000,
+  },
+  detect: {
+    id: 'detect',
+    label: i18n.translate('core.ui.detect.label', {
+      defaultMessage: 'Detect',
+    }),
+    order: 13000,
+  },
+  searchSolution: {
+    id: 'searchSolution',
+    label: i18n.translate('core.ui.searchSolution.label', {
+      defaultMessage: 'Build search solution',
+    }),
+    order: 14000,
+  },
+});
diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
index 83c287357bbe..7ca706a0a161 100644
--- a/src/plugins/workspace/public/application.tsx
+++ b/src/plugins/workspace/public/application.tsx
@@ -14,6 +14,8 @@ import { WorkspaceListApp } from './components/workspace_list_app';
 import { WorkspaceUpdaterProps } from './components/workspace_updater';
 import { Services } from './types';
 import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
+import { WorkspaceOverviewProps } from './components/workspace_overview/workspace_overview';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -75,3 +77,20 @@ export const renderListApp = ({ element }: AppMountParameters, services: Service
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+
+export const renderOverviewApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: WorkspaceOverviewProps
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceOverviewApp {...props} />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview/__snapshots__/workspace_overview.test.tsx.snap b/src/plugins/workspace/public/components/workspace_overview/__snapshots__/workspace_overview.test.tsx.snap
new file mode 100644
index 000000000000..357f190534a3
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/__snapshots__/workspace_overview.test.tsx.snap
@@ -0,0 +1,260 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceOverview render workspace overview page normally 1`] = `
+<div>
+  <div
+    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder"
+  >
+    <header
+      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+    >
+      <div
+        class="euiPageHeaderContent"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+        >
+          <div
+            class="euiFlexItem"
+          >
+            <h1
+              class="euiTitle euiTitle--large"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  foo
+                </div>
+              </div>
+            </h1>
+          </div>
+        </div>
+        <div
+          class="euiPageHeaderContent__bottom"
+        >
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <p
+            class="euiTitle euiTitle--small"
+          >
+            Start working
+          </p>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            data-test-subj="workspaceGetStartCards"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <div
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable"
+                data-test-subj="Alerts"
+              >
+                <div
+                  class="euiCard__content"
+                >
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
+                  >
+                    <button
+                      aria-describedby=" "
+                      class="euiCard__titleButton"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <p>
+                          Proactively identify risks with customizable alter triggers.
+                        </p>
+                      </div>
+                    </button>
+                  </span>
+                  
+                </div>
+                <div
+                  class="euiCard__footer"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  >
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <span
+                        class="euiTextColor euiTextColor--subdued"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <span>
+                            with Alerts
+                          </span>
+                        </div>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem"
+            />
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                aria-label="Collapse"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                data-test-subj="Collapse"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <span
+                    class="euiButtonContent__icon"
+                    color="inherit"
+                    data-euiicon-type="arrowUp"
+                  />
+                  <span
+                    class="euiButtonEmpty__text"
+                  >
+                    Collapse
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </div>
+  <div
+    class="euiPage euiPage--paddingLarge euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <div
+        data-test-subj="workspaceTabs"
+      >
+        <div
+          class="euiTabs"
+          role="tablist"
+        >
+          <button
+            aria-controls="generated-id"
+            aria-selected="true"
+            class="euiTab euiTab-isSelected"
+            id="overview"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Overview
+            </span>
+          </button>
+          <button
+            aria-controls="generated-id"
+            aria-selected="false"
+            class="euiTab"
+            id="library"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Library
+            </span>
+          </button>
+          <button
+            aria-controls="generated-id"
+            aria-selected="false"
+            class="euiTab"
+            id="settings"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="euiTab__content"
+            >
+              Settings
+            </span>
+          </button>
+        </div>
+        <div
+          aria-labelledby="overview"
+          id="generated-id"
+          role="tabpanel"
+        >
+          <div
+            class="euiPage euiPage--grow"
+          >
+            <div
+              class="euiPageBody euiPageBody--borderRadiusNone"
+            >
+              <div
+                class="euiSpacer euiSpacer--l"
+              />
+              <div
+                class="euiPanel euiPanel--borderRadiusMedium euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPageContent"
+                role="main"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrow2"
+                  >
+                    <div
+                      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--horizontal"
+                      style="height: 200px;"
+                    >
+                      <div
+                        class="euiCard__content"
+                      >
+                        <span
+                          class="euiTitle euiTitle--xsmall euiCard__title"
+                          id="generated-idTitle"
+                        >
+                          About
+                        </span>
+                        <div
+                          class="euiText euiText--small euiCard__description"
+                          id="generated-idDescription"
+                        >
+                          <p>
+                            this is my foo workspace description
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrow8"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/workspace/public/components/workspace_overview/all_get_started_cards.ts b/src/plugins/workspace/public/components/workspace_overview/all_get_started_cards.ts
new file mode 100644
index 000000000000..c9986b00f5c1
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/all_get_started_cards.ts
@@ -0,0 +1,174 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { GetStartCard } from './types';
+import { WORKSPACE_APP_CATEGORIES } from '../../../common/constants';
+
+/**
+ * All getting start cards
+ */
+export const getStartCards: GetStartCard[] = [
+  // getStarted
+  {
+    id: 'home',
+    featureDescription: 'Discover pre-loaded datasets before adding your own.',
+    featureName: 'Sample Datasets',
+    link: '/app/home#/tutorial_directory',
+    category: WORKSPACE_APP_CATEGORIES.getStarted,
+  },
+  {
+    id: 'workspace_create',
+    featureDescription: 'Build a collaborative hub for your team.',
+    featureName: 'Workspaces',
+    link: '/app/workspace_create',
+    category: WORKSPACE_APP_CATEGORIES.getStarted,
+  },
+  {
+    id: 'datasources',
+    featureDescription: 'Seamlessly integrate your data sources.',
+    featureName: 'Data Sources',
+    link: '/app/datasources',
+    category: WORKSPACE_APP_CATEGORIES.getStarted,
+  },
+  {
+    id: 'management',
+    featureDescription: 'Unlock seamless data access.',
+    featureName: 'Index Patterns',
+    link: '/app/management/opensearch-dashboards/indexPatterns',
+    category: WORKSPACE_APP_CATEGORIES.getStarted,
+  },
+  {
+    id: 'integrations',
+    featureDescription: 'Gain instant insights with pre-configured log dashboards.',
+    featureName: 'Integrations',
+    link: '/app/integrations',
+    category: WORKSPACE_APP_CATEGORIES.getStarted,
+  },
+  // dashboardAndReport
+  {
+    id: 'dashboards',
+    featureDescription: 'Gain clarity and visibility with dynamic data visualization tools.',
+    featureName: 'Dashboards',
+    link: '/app/dashboards',
+    category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+  },
+  {
+    id: 'visualize',
+    featureDescription:
+      'Unlock insightful data exploration with powerful visualization and aggregation tools.',
+    featureName: 'Visualizations',
+    link: '/app/visualize',
+    category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+  },
+  {
+    id: 'maps-dashboards',
+    featureDescription: 'Unlock spatial insights with multi-layer map visualizations.',
+    featureName: 'Maps',
+    link: '/app/maps-dashboards',
+    category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+  },
+  {
+    id: 'observability-notebooks',
+    featureDescription: 'Gain real-time visibility with dynamic, data-powered report generation.',
+    featureName: 'Notebooks',
+    link: '/app/observability-notebooks',
+    category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+  },
+  {
+    id: 'reports-dashboards',
+    featureDescription: 'Collaborate effectively with multi-format report sharing.',
+    featureName: 'Reports',
+    link: '/app/reports-dashboards',
+    category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+  },
+  // investigate
+  {
+    id: 'discover',
+    featureDescription: 'Uncover insights with raw data exploration.',
+    featureName: 'Discover',
+    link: '/app/data-explorer/discover',
+    category: WORKSPACE_APP_CATEGORIES.investigate,
+  },
+  {
+    id: 'observability-traces',
+    featureDescription: 'Unveil performance bottlenecks with event flow visualization.',
+    featureName: 'Traces',
+    link: '/app/observability-traces',
+    category: WORKSPACE_APP_CATEGORIES.investigate,
+  },
+  {
+    id: 'observability-metrics',
+    featureDescription: 'Transform logs into actionable visualizations with metric extraction.',
+    featureName: 'Metrics',
+    link: '/app/observability-metrics',
+    category: WORKSPACE_APP_CATEGORIES.investigate,
+  },
+  {
+    id: 'observability-applications',
+    featureDescription:
+      'Gain comprehensive system visibility with unified log, trace, and metric analysis.',
+    featureName: 'Applications',
+    link: '/app/observability-applications',
+    category: WORKSPACE_APP_CATEGORIES.investigate,
+  },
+  // detect
+  {
+    id: 'alerting',
+    featureDescription: 'Proactively identify risks with customizable alter triggers.',
+    featureName: 'Alerts',
+    link: '/app/alerting',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'anomaly-detection-dashboards',
+    featureDescription: 'Unveil anomalies with real-time data monitoring.',
+    featureName: 'Anomaly Detectors',
+    link: '/app/anomaly-detection-dashboards#/detectors',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'opensearch_security_analytics_dashboards',
+    featureDescription: 'Receive timely notifications with detector-driven alert configuration.',
+    featureName: 'Threat Alerts',
+    link: '/app/opensearch_security_analytics_dashboards#/alerts',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'opensearch_security_analytics_dashboards',
+    featureDescription: 'Proactively safeguard your systems with customizable detection rules.',
+    featureName: 'Threat Detectors',
+    link: '/app/opensearch_security_analytics_dashboards#/detectors',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'opensearch_security_analytics_dashboards',
+    featureDescription: 'Tailor detection capabilities with flexible rule management.',
+    featureName: 'Detection Rules',
+    link: '/app/opensearch_security_analytics_dashboards#/rules',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'opensearch_security_analytics_dashboards',
+    featureDescription: 'Detect multi-system threats with correlation rule builder.',
+    featureName: 'Correlations',
+    link: '/app/opensearch_security_analytics_dashboards#/correlations',
+    category: WORKSPACE_APP_CATEGORIES.detect,
+  },
+  {
+    id: 'opensearch_security_analytics_dashboards',
+    featureDescription: 'Uncover hidden patterns and trends with detector finding analysis.',
+    featureName: 'Findings',
+    link: '/app/opensearch_security_analytics_dashboards#/findings',
+    category: WORKSPACE_APP_CATEGORIES.investigate,
+  },
+  // build search solutions
+  {
+    id: 'searchRelevance',
+    featureDescription: 'Optimize query performance with side-by-side comparison.',
+    featureName: 'Compare Search Results',
+    link: '/app/searchRelevance',
+    category: WORKSPACE_APP_CATEGORIES.searchSolution,
+  },
+];
diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_card.test.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.test.tsx
new file mode 100644
index 000000000000..107568751cbc
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { WorkspaceOverviewCard } from './getting_start_card';
+import { coreMock } from '../../../../../core/public/mocks';
+import { DEFAULT_APP_CATEGORIES } from '../../../../../core/public';
+import { GetStartCard } from './types';
+
+describe('WorkspaceOverviewCard', () => {
+  const featureName = 'Visualizations';
+  const featureDescription = 'this is a description';
+  const card = {
+    id: 'visualize',
+    featureDescription,
+    featureName,
+    link: '/app/visualize',
+    category: DEFAULT_APP_CATEGORIES.dashboardAndReport,
+  };
+  const mockCoreStart = coreMock.createStart();
+  const renderWorkspaceCard = (_card: GetStartCard) => {
+    return (
+      <WorkspaceOverviewCard
+        card={_card}
+        workspaceId="test"
+        basePath={mockCoreStart.http.basePath}
+        application={mockCoreStart.application}
+      />
+    );
+  };
+
+  it('render getting start card normally', async () => {
+    const { container } = render(renderWorkspaceCard(card));
+    expect(container).toHaveTextContent(`with Visualizations`);
+    expect(container).toHaveTextContent(featureDescription);
+  });
+
+  it('click on card will navigate to related URL', async () => {
+    const { getByTestId } = render(renderWorkspaceCard(card));
+    fireEvent.click(getByTestId(featureName));
+    expect(mockCoreStart.application.getUrlForApp).not.toHaveBeenCalled();
+    expect(mockCoreStart.application.navigateToUrl).toHaveBeenCalledWith(
+      'http://localhost/w/test/app/visualize'
+    );
+  });
+
+  it('click on card will navigate to specified app if no link provided', async () => {
+    const { getByTestId } = render(renderWorkspaceCard({ ...card, link: undefined }));
+    fireEvent.click(getByTestId(featureName));
+    expect(mockCoreStart.application.getUrlForApp).toHaveBeenCalledWith('visualize');
+    expect(mockCoreStart.application.navigateToUrl).toHaveBeenCalledWith(
+      'http://localhost/w/test/app/visualize'
+    );
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx
new file mode 100644
index 000000000000..a25451129fb0
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_card.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiText, EuiTextColor } from '@elastic/eui';
+import React from 'react';
+import { ApplicationStart, IBasePath } from 'opensearch-dashboards/public';
+import { FormattedMessage } from '@osd/i18n/react';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { GetStartCard } from './types';
+
+export interface WorkspaceOverviewCardProps {
+  card: GetStartCard;
+  workspaceId: string;
+  basePath: IBasePath;
+  application: ApplicationStart;
+}
+
+export const WorkspaceOverviewCard = ({
+  card,
+  application,
+  workspaceId,
+  basePath,
+}: WorkspaceOverviewCardProps) => {
+  return (
+    <EuiCard
+      data-test-subj={card.featureName}
+      layout="vertical"
+      textAlign="left"
+      title={
+        <EuiText size="s">
+          <p>{card.featureDescription}</p>
+        </EuiText>
+      }
+      description={''}
+      footer={
+        <EuiFlexGroup justifyContent="flexStart">
+          <EuiFlexItem grow={false}>
+            <EuiTextColor color="subdued">
+              <EuiText size="s">
+                <FormattedMessage
+                  id="workspace.overview.getStartCard.footer"
+                  defaultMessage="with {featureName}"
+                  values={{
+                    featureName: card.featureName,
+                  }}
+                />
+              </EuiText>
+            </EuiTextColor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      onClick={() => {
+        let url = card.link;
+        if (!url && card.id) {
+          url = application.getUrlForApp(card.id);
+        }
+
+        if (workspaceId && url) {
+          application.navigateToUrl(formatUrlWithWorkspaceId(url, workspaceId, basePath));
+        }
+      }}
+    />
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.test.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.test.tsx
new file mode 100644
index 000000000000..d63459a1dfe0
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.test.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { coreMock } from '../../../../../core/public/mocks';
+import {
+  WorkspaceOverviewGettingStartModal,
+  WorkspaceOverviewGettingStartModalProps,
+} from './getting_start_modal';
+import { GetStartCard } from './types';
+import { waitFor } from '@testing-library/dom';
+import { WORKSPACE_APP_CATEGORIES } from '../../../common/constants';
+
+// see https://github.com/elastic/eui/issues/5271 as workaround to render EuiSelectable correctly
+jest.mock('react-virtualized-auto-sizer', () => ({ children }: any) =>
+  children({ height: 600, width: 300 })
+);
+
+describe('WorkspaceOverviewGettingStartModal', () => {
+  const mockCoreStart = coreMock.createStart();
+  const closeModal = jest.fn();
+  const renderWorkspaceCardModal = (cards: GetStartCard[]) => {
+    const props: WorkspaceOverviewGettingStartModalProps = {
+      availableCards: cards,
+      onCloseModal: closeModal,
+      application: mockCoreStart.application,
+      basePath: mockCoreStart.http.basePath,
+      workspaceId: 'foo',
+    };
+    return <WorkspaceOverviewGettingStartModal {...props} />;
+  };
+
+  it('render getting start card modal normally with empty cards', async () => {
+    const { getByTestId } = render(renderWorkspaceCardModal([]));
+    await waitFor(() => expect(getByTestId('category_single_selection')).toHaveTextContent('All'));
+  });
+
+  it('render getting start card modal normally', async () => {
+    const cards = [
+      {
+        id: 'home',
+        featureDescription: 'Discover pre-loaded datasets before adding your own.',
+        featureName: 'Sample Datasets',
+        link: '/app/home#/tutorial_directory',
+        category: WORKSPACE_APP_CATEGORIES.getStarted,
+      },
+      {
+        id: 'dashboards',
+        featureDescription: 'Gain clarity and visibility with dynamic data visualization tools.',
+        featureName: 'Dashboards',
+        link: '/app/dashboards',
+        category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+      },
+    ];
+    const { queryByText, getByTestId } = render(renderWorkspaceCardModal(cards));
+    expect(getByTestId('category_single_selection')).toHaveTextContent('All');
+    expect(getByTestId('category_single_selection')).toHaveTextContent('Get started');
+    expect(getByTestId('category_single_selection')).toHaveTextContent('Dashboard and report');
+    expect(
+      queryByText('Gain clarity and visibility with dynamic data visualization tools.')
+    ).not.toBeNull();
+    expect(queryByText('Discover pre-loaded datasets before adding your own.')).not.toBeNull();
+  });
+
+  it('click on category to filter cards', async () => {
+    const cards = [
+      {
+        id: 'home',
+        featureDescription: 'Discover pre-loaded datasets before adding your own.',
+        featureName: 'Sample Datasets',
+        link: '/app/home#/tutorial_directory',
+        category: WORKSPACE_APP_CATEGORIES.getStarted,
+      },
+      {
+        id: 'dashboards',
+        featureDescription: 'Gain clarity and visibility with dynamic data visualization tools.',
+        featureName: 'Dashboards',
+        link: '/app/dashboards',
+        category: WORKSPACE_APP_CATEGORIES.dashboardAndReport,
+      },
+    ];
+    const { queryByText, getByTitle } = render(renderWorkspaceCardModal(cards));
+    // click `Get started` category
+    fireEvent.click(getByTitle('Get started'));
+    expect(
+      queryByText('Gain clarity and visibility with dynamic data visualization tools.')
+    ).toBeNull();
+    expect(queryByText('Discover pre-loaded datasets before adding your own.')).not.toBeNull();
+
+    // click `Dashboard and report` category
+    fireEvent.click(getByTitle('Dashboard and report'));
+    expect(
+      queryByText('Gain clarity and visibility with dynamic data visualization tools.')
+    ).not.toBeNull();
+    expect(queryByText('Discover pre-loaded datasets before adding your own.')).toBeNull();
+  });
+
+  it('click on close will close the modal', async () => {
+    const { getByTestId } = render(renderWorkspaceCardModal([]));
+    fireEvent.click(getByTestId('close'));
+    expect(closeModal).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
new file mode 100644
index 000000000000..c2bfc104cc05
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/getting_start_modal.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactNode, useState } from 'react';
+import {
+  EuiFlexItem,
+  EuiText,
+  slugify,
+  EuiTitle,
+  EuiSpacer,
+  EuiFlexGrid,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+  EuiModalFooter,
+  EuiButton,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiSelectable,
+  EuiSelectableOption,
+} from '@elastic/eui';
+import { WorkspaceOverviewCard, WorkspaceOverviewCardProps } from './getting_start_card';
+import { GetStartCard } from './types';
+import './index.scss';
+
+export interface WorkspaceOverviewGettingStartModalProps
+  extends Omit<WorkspaceOverviewCardProps, 'card'> {
+  onCloseModal: () => void;
+  availableCards: GetStartCard[];
+}
+
+export const WorkspaceOverviewGettingStartModal = (
+  props: WorkspaceOverviewGettingStartModalProps
+) => {
+  const ALL = 'All';
+  const [selectedItemName, setSelectedItem] = useState(ALL);
+  const { onCloseModal, availableCards } = props;
+
+  const categories: string[] = [
+    ...new Set(
+      availableCards.map((card) => {
+        return card?.category?.label || ALL;
+      })
+    ),
+  ];
+
+  const options: EuiSelectableOption[] = [ALL, ...categories].map((category) => {
+    return {
+      label: category,
+      checked: selectedItemName === category ? 'on' : undefined,
+      className: 'gettingStartCategoryItem',
+    };
+  });
+
+  const categorySelection = (
+    <EuiSelectable
+      data-test-subj="category_single_selection"
+      aria-label="category selection"
+      className="gettingStartCategory"
+      options={options}
+      onChange={(newOptions) => {
+        const selectedOption = newOptions.find((option) => option.checked === 'on');
+        setSelectedItem(selectedOption?.label || ALL);
+      }}
+      singleSelection={true}
+      listProps={{
+        bordered: false,
+        rowHeight: 48,
+        onFocusBadge: false,
+        windowProps: {
+          className: 'gettingStartCategoryItemList',
+        },
+      }}
+    >
+      {(list) => {
+        return list;
+      }}
+    </EuiSelectable>
+  );
+
+  const cardList: ReactNode[] = categories
+    .filter((category) => category === selectedItemName || selectedItemName === ALL)
+    .map((category) => {
+      const cards = availableCards.filter((card) => {
+        return card.category?.label === category;
+      });
+
+      return (
+        <div id={slugify(category)} key={slugify(category)}>
+          <EuiTitle>
+            <h3>{category}</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <EuiFlexGrid columns={4}>
+            {cards.map((card) => {
+              return (
+                <EuiFlexItem key={card.featureName}>
+                  <WorkspaceOverviewCard {...props} card={card} />
+                </EuiFlexItem>
+              );
+            })}
+          </EuiFlexGrid>
+          <EuiSpacer size="m" />
+        </div>
+      );
+    });
+
+  return (
+    <EuiModal onClose={onCloseModal} maxWidth={false} className="gettingStartModel">
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h2>Define your path forward</h2>
+          <EuiText color="subdued">Discover tailored solutions for your unique objectives</EuiText>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem key="category_selection" grow={2}>
+            {categorySelection}
+          </EuiFlexItem>
+          <EuiFlexItem key="cards_content" grow={10} style={{ margin: '0px' }}>
+            <EuiPanel color="subdued" className="gettingStartModel_body" grow={false}>
+              {cardList}
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButton data-test-subj="close" onClick={onCloseModal}>
+          Close
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview/index.scss b/src/plugins/workspace/public/components/workspace_overview/index.scss
new file mode 100644
index 000000000000..5c878370220c
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/index.scss
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.gettingStartModel {
+  width: calc(90vw - #{$euiSize});
+}
+
+.gettingStartModel_body {
+  overflow-y: auto;
+  height: calc(75vh - 200px);
+}
+
+.gettingStartCategoryItem {
+  border: none !important;
+}
+
+.gettingStartCategory {
+  div {
+    &:focus-within {
+      outline: none;
+      animation: none !important;
+    }
+  }
+}
+
+.gettingStartCategoryItemList {
+  mask: none !important;
+}
diff --git a/src/plugins/workspace/public/components/workspace_overview/types.ts b/src/plugins/workspace/public/components/workspace_overview/types.ts
new file mode 100644
index 000000000000..e9ba69402cc9
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/types.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { App } from 'opensearch-dashboards/public';
+
+export interface GetStartCard extends Partial<App> {
+  /**
+   * feature Name
+   */
+  featureName: string;
+  /**
+   * card description
+   */
+  featureDescription: string;
+  /**
+   * destination when the card been clicked
+   */
+  link?: string;
+}
diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview.test.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview.test.tsx
new file mode 100644
index 000000000000..64ff49fcbdd6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/workspace_overview.test.tsx
@@ -0,0 +1,229 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { coreMock } from '../../../../../core/public/mocks';
+import { createOpenSearchDashboardsReactContext } from '../../../../opensearch_dashboards_react/public';
+import { BehaviorSubject } from 'rxjs';
+import { PublicAppInfo, WorkspaceObject } from 'opensearch-dashboards/public';
+import { IS_WORKSPACE_OVERVIEW_COLLAPSED_KEY, WorkspaceOverview } from './workspace_overview';
+
+// all applications
+const PublicAPPInfoMap = new Map([
+  ['alerting', { id: 'alerting', title: 'alerting' }],
+  ['home', { id: 'home', title: 'home' }],
+]);
+
+const mockCoreStart = coreMock.createStart();
+
+const createWorkspacesSetupContractMockWithValue = (workspace?: WorkspaceObject) => {
+  const currentWorkspace = workspace
+    ? workspace
+    : {
+        id: 'foo_id',
+        name: 'foo',
+        description: 'this is my foo workspace description',
+        features: ['alerting'],
+        color: '',
+        icon: '',
+        reserved: false,
+      };
+  const currentWorkspaceId$ = new BehaviorSubject<string>(currentWorkspace.id);
+  const workspaceList$ = new BehaviorSubject<WorkspaceObject[]>([currentWorkspace]);
+  const currentWorkspace$ = new BehaviorSubject<WorkspaceObject | null>(currentWorkspace);
+  const initialized$ = new BehaviorSubject<boolean>(true);
+  return {
+    currentWorkspaceId$,
+    workspaceList$,
+    currentWorkspace$,
+    initialized$,
+  };
+};
+
+const WorkspaceOverviewPage = (props: any) => {
+  const workspacesService = props.workspacesService || createWorkspacesSetupContractMockWithValue();
+  const { Provider } = createOpenSearchDashboardsReactContext({
+    ...mockCoreStart,
+    ...{
+      application: {
+        ...mockCoreStart.application,
+        applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
+      },
+      workspaces: workspacesService,
+    },
+  });
+
+  return (
+    <Provider>
+      <WorkspaceOverview {...props} />
+    </Provider>
+  );
+};
+
+const setLocalStorage = jest.fn();
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: setLocalStorage,
+  removeItem: jest.fn(),
+  key: jest.fn(),
+  clear: jest.fn(),
+};
+
+describe('WorkspaceOverview', () => {
+  const localStorage = window.localStorage;
+
+  beforeAll(() => {
+    // Mock localStorage globally
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorageMock,
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'localStorage', {
+      value: localStorage,
+    });
+  });
+
+  it('render workspace overview page normally', async () => {
+    const { container } = render(WorkspaceOverviewPage({}));
+    expect(container).toMatchSnapshot();
+  });
+
+  it('filter getting start cards when workspace features is `*`', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['*'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByTestId } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    expect(getByTestId('workspaceGetStartCards')).toHaveTextContent('Sample Datasets');
+    // see more
+    expect(getByTestId('workspaceGetStartCards')).toHaveTextContent(
+      'Explore more paths to kick-start your OpenSearch journey.'
+    );
+  });
+
+  it('filter getting start cards when workspace features is subset of all features', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByTestId } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    expect(getByTestId('workspaceGetStartCards')).toHaveTextContent('with Sample Datasets');
+    expect(getByTestId('workspaceGetStartCards')).toHaveTextContent('with Alerts');
+    // no see more
+    expect(getByTestId('workspaceGetStartCards')).not.toHaveTextContent(
+      'Explore more paths to kick-start your OpenSearch journey.'
+    );
+  });
+
+  it('getting start section is expanded by default', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByTestId } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    expect(getByTestId('Collapse')).toBeVisible();
+  });
+
+  it('getting start section visible setting will saved to localStorage', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByTestId } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    expect(getByTestId('Collapse')).toBeVisible();
+    fireEvent.click(getByTestId('Collapse'));
+    expect(getByTestId('Expand')).toBeVisible();
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      IS_WORKSPACE_OVERVIEW_COLLAPSED_KEY + '_foo_id',
+      'true'
+    );
+    // click on Collapse
+    fireEvent.click(getByTestId('Expand'));
+    expect(getByTestId('Collapse')).toBeVisible();
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      IS_WORKSPACE_OVERVIEW_COLLAPSED_KEY + '_foo_id',
+      'false'
+    );
+  });
+
+  it('click on library tab will redirect to saved objects page', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByText } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    fireEvent.click(getByText('Library'));
+
+    expect(mockCoreStart.application.navigateToApp).toHaveBeenCalledWith('management', {
+      path: 'opensearch-dashboards/objects',
+    });
+  });
+
+  it('click on settings tab will show workspace update page', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByText } = render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    fireEvent.click(getByText('Settings'));
+    expect(screen.queryByText('Workspace Details')).not.toBeNull();
+    // title is hidden
+    expect(screen.queryByText('Update Workspace')).toBeNull();
+  });
+
+  it('default selected tab is overview', async () => {
+    const workspaceObject = {
+      id: 'foo_id',
+      name: 'foo',
+      description: 'this is my foo workspace description',
+      features: ['alerting', 'home'],
+      color: '',
+      icon: '',
+      reserved: false,
+    };
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    render(WorkspaceOverviewPage({ workspacesService: workspaceService }));
+    expect(document.querySelector('#overview')).toHaveClass('euiTab-isSelected');
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview.tsx
new file mode 100644
index 000000000000..63073bbce8c6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/workspace_overview.tsx
@@ -0,0 +1,208 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, ReactNode, useEffect } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiText,
+  EuiTabbedContent,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { useObservable } from 'react-use';
+import { i18n } from '@osd/i18n';
+import { App, CoreStart, PublicAppInfo } from 'opensearch-dashboards/public';
+import { BehaviorSubject } from 'rxjs';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceOverviewSettings } from './workspace_overview_settings';
+import { WorkspaceOverviewContent } from './workspace_overview_content';
+import { getStartCards } from './all_get_started_cards';
+import { isAppAccessibleInWorkspace } from '../../utils';
+import { WorkspaceOverviewCard } from './getting_start_card';
+import { WorkspaceOverviewGettingStartModal } from './getting_start_modal';
+
+export const IS_WORKSPACE_OVERVIEW_COLLAPSED_KEY = 'workspace:overview_collapsed';
+
+export interface WorkspaceOverviewProps {
+  workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
+}
+
+export const WorkspaceOverview = (props: WorkspaceOverviewProps) => {
+  const {
+    services: { workspaces, application, http },
+  } = useOpenSearchDashboards<CoreStart>();
+
+  const currentWorkspace = useObservable(workspaces.currentWorkspace$);
+  const currentWorkspaceId = useObservable(workspaces.currentWorkspaceId$);
+
+  // workspace level setting
+  const workspaceOverviewCollapsedKey = `${IS_WORKSPACE_OVERVIEW_COLLAPSED_KEY}_${
+    currentWorkspaceId || ''
+  }`;
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isGettingStartCardsCollapsed, setIsGettingStartCardsCollapsed] = useState(false);
+
+  useEffect(() => {
+    setIsGettingStartCardsCollapsed(localStorage.getItem(workspaceOverviewCollapsedKey) === 'true');
+  }, [workspaceOverviewCollapsedKey]);
+
+  /**
+   * all available cards based on workspace selected features
+   */
+  const availableCards = useMemo(() => {
+    if (!currentWorkspace) return [];
+    return getStartCards.filter(
+      (card) => !card.id || isAppAccessibleInWorkspace(card as App, currentWorkspace)
+    );
+  }, [currentWorkspace]);
+
+  if (!currentWorkspace) {
+    return null;
+  }
+
+  const pageTitle = (
+    <EuiFlexGroup gutterSize="none" alignItems="baseline" justifyContent="flexStart">
+      <EuiFlexItem grow={false}>{currentWorkspace?.name}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const tabs = [
+    {
+      id: 'overview',
+      name: i18n.translate('workspace.overview.tabTitle', {
+        defaultMessage: 'Overview',
+      }),
+      content: <WorkspaceOverviewContent />,
+    },
+    {
+      id: 'library',
+      name: i18n.translate('workspace.overview.library.tabTitle', {
+        defaultMessage: 'Library',
+      }),
+      content: <></>,
+    },
+    {
+      id: 'settings',
+      name: i18n.translate('workspace.overview.setting.tabTitle', {
+        defaultMessage: 'Settings',
+      }),
+      content: <WorkspaceOverviewSettings {...props} />,
+    },
+  ];
+
+  const collapseButton = (
+    <EuiButtonEmpty
+      color="text"
+      size="xs"
+      data-test-subj={isGettingStartCardsCollapsed ? 'Expand' : 'Collapse'}
+      aria-label={isGettingStartCardsCollapsed ? 'Expand' : 'Collapse'}
+      iconType={isGettingStartCardsCollapsed ? 'arrowDown' : 'arrowUp'}
+      iconSide="right"
+      onClick={() => {
+        const newValue = !isGettingStartCardsCollapsed;
+        setIsGettingStartCardsCollapsed(newValue);
+        localStorage.setItem(workspaceOverviewCollapsedKey, newValue ? 'true' : 'false');
+      }}
+    >
+      {isGettingStartCardsCollapsed ? 'Expand' : 'Collapse'}
+    </EuiButtonEmpty>
+  );
+
+  const rightSideItems: ReactNode[] = isGettingStartCardsCollapsed ? [collapseButton] : [];
+
+  return (
+    <>
+      <EuiPanel paddingSize="l" borderRadius="none" hasShadow={false} hasBorder={false}>
+        <EuiPageHeader
+          pageTitle={pageTitle}
+          rightSideItems={rightSideItems.length ? rightSideItems : undefined}
+        >
+          {!isGettingStartCardsCollapsed ? (
+            <>
+              <EuiTitle size="s">
+                <p>
+                  {i18n.translate('workspace.overview.startWorking.title', {
+                    defaultMessage: 'Start working',
+                  })}
+                </p>
+              </EuiTitle>
+              <EuiSpacer />
+              <EuiFlexGroup data-test-subj="workspaceGetStartCards">
+                {availableCards.slice(0, 5).map((card, i) => {
+                  return (
+                    <EuiFlexItem key={card.featureName}>
+                      <WorkspaceOverviewCard
+                        card={card}
+                        workspaceId={currentWorkspace?.id}
+                        basePath={http.basePath}
+                        application={application}
+                      />
+                    </EuiFlexItem>
+                  );
+                })}
+                {availableCards.length > 5 ? (
+                  <EuiFlexItem key="seeMore">
+                    <EuiPanel
+                      onClick={() => {
+                        setIsModalVisible(true);
+                      }}
+                    >
+                      <EuiText size="s">
+                        {i18n.translate('workspace.overview.seeMore.description', {
+                          defaultMessage:
+                            'Explore more paths to kick-start your OpenSearch journey.',
+                        })}
+                      </EuiText>
+                    </EuiPanel>
+                  </EuiFlexItem>
+                ) : null}
+              </EuiFlexGroup>
+              <EuiFlexGroup>
+                <EuiFlexItem />
+                <EuiFlexItem grow={false}>{collapseButton}</EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          ) : null}
+        </EuiPageHeader>
+      </EuiPanel>
+      <EuiPage paddingSize="l">
+        <EuiPageBody>
+          <EuiTabbedContent
+            data-test-subj="workspaceTabs"
+            tabs={tabs}
+            initialSelectedTab={tabs[0]}
+            autoFocus="selected"
+            onTabClick={(tab) => {
+              if (tab.id === 'library') {
+                application.navigateToApp('management', {
+                  path: 'opensearch-dashboards/objects',
+                });
+              }
+            }}
+          />
+          {isModalVisible ? (
+            <WorkspaceOverviewGettingStartModal
+              onCloseModal={() => {
+                setIsModalVisible(false);
+              }}
+              availableCards={availableCards}
+              workspaceId={currentWorkspace.id}
+              basePath={http.basePath}
+              application={application}
+            />
+          ) : null}
+        </EuiPageBody>
+      </EuiPage>
+    </>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx
new file mode 100644
index 000000000000..6b2ad0fbe689
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_content.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexItem,
+  EuiCard,
+  EuiFlexGroup,
+  EuiPage,
+  EuiPageContent,
+  EuiPageBody,
+  EuiSpacer,
+} from '@elastic/eui';
+import React from 'react';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
+
+export const WorkspaceOverviewContent = () => {
+  const {
+    services: { workspaces },
+  } = useOpenSearchDashboards();
+
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
+
+  return (
+    <EuiPage paddingSize="none">
+      <EuiPageBody>
+        <EuiSpacer />
+        <EuiPageContent color="subdued" hasShadow={false} paddingSize="none">
+          <EuiFlexGroup>
+            <EuiFlexItem grow={2}>
+              <EuiCard
+                style={{ height: '200px' }}
+                layout="horizontal"
+                title="About"
+                titleSize="xs"
+                description={currentWorkspace?.description || ''}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={8} />
+          </EuiFlexGroup>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx
new file mode 100644
index 000000000000..9515fab260c6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview/workspace_overview_settings.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { WorkspaceUpdater } from '../workspace_updater';
+import { WorkspaceOverviewProps } from './workspace_overview';
+
+export const WorkspaceOverviewSettings = ({
+  workspaceConfigurableApps$,
+}: WorkspaceOverviewProps) => {
+  return (
+    <WorkspaceUpdater
+      hideTitle={true}
+      maxWidth="100%"
+      workspaceConfigurableApps$={workspaceConfigurableApps$}
+    />
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_overview_app.tsx b/src/plugins/workspace/public/components/workspace_overview_app.tsx
new file mode 100644
index 000000000000..c581aad9d322
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_overview_app.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { useObservable } from 'react-use';
+import { EuiBreadcrumb } from '@elastic/eui';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceOverview, WorkspaceOverviewProps } from './workspace_overview/workspace_overview';
+
+export const WorkspaceOverviewApp = (props: WorkspaceOverviewProps) => {
+  const {
+    services: { workspaces, chrome, application },
+  } = useOpenSearchDashboards<CoreStart>();
+
+  const currentWorkspace = useObservable(workspaces.currentWorkspace$);
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    const breadcrumbs: EuiBreadcrumb[] = [
+      {
+        text: 'Home',
+        onClick: () => {
+          application.navigateToApp('home');
+        },
+      },
+    ];
+    if (currentWorkspace) {
+      breadcrumbs.push({
+        text: currentWorkspace.name,
+      });
+    }
+    chrome?.setBreadcrumbs(breadcrumbs);
+  }, [chrome, currentWorkspace, application]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceOverview {...props} />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
index 950d778fff96..d786abc19179 100644
--- a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
+++ b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { PublicAppInfo } from 'opensearch-dashboards/public';
 import { useObservable } from 'react-use';
@@ -24,6 +24,8 @@ import {
 
 export interface WorkspaceUpdaterProps {
   workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
+  hideTitle?: boolean;
+  maxWidth?: number | string;
 }
 
 function getFormDataFromWorkspace(
@@ -118,15 +120,16 @@ export const WorkspaceUpdater = (props: WorkspaceUpdaterProps) => {
 
   return (
     <EuiPage paddingSize="none">
-      <EuiPageBody panelled>
-        <EuiPageHeader restrictWidth pageTitle="Update Workspace" />
+      <EuiPageBody>
+        {!props.hideTitle ? <EuiPageHeader restrictWidth pageTitle="Update Workspace" /> : null}
+        <EuiSpacer />
         <EuiPageContent
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="none"
           color="subdued"
           hasShadow={false}
-          style={{ width: '100%', maxWidth: 1000 }}
+          style={{ width: '100%', maxWidth: props.maxWidth ? props.maxWidth : 1000 }}
         >
           {application && (
             <WorkspaceForm
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index 4a58acfe26bd..ab1daf0a0235 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Observable, Subscriber } from 'rxjs';
+import { BehaviorSubject, Observable, Subscriber } from 'rxjs';
 import { waitFor } from '@testing-library/dom';
+import { ChromeBreadcrumb } from 'opensearch-dashboards/public';
 import { workspaceClientMock, WorkspaceClientMock } from './workspace_client.mock';
 import { applicationServiceMock, chromeServiceMock, coreMock } from '../../../core/public/mocks';
 import { WorkspacePlugin } from './plugin';
@@ -29,7 +30,7 @@ describe('Workspace plugin', () => {
       savedObjectsManagement: savedObjectManagementSetupMock,
       management: managementPluginMock.createSetupContract(),
     });
-    expect(setupMock.application.register).toBeCalledTimes(4);
+    expect(setupMock.application.register).toBeCalledTimes(5);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(savedObjectManagementSetupMock.columns.register).toBeCalledTimes(1);
   });
@@ -42,7 +43,7 @@ describe('Workspace plugin', () => {
     workspacePlugin.start(coreStart);
     coreStart.workspaces.currentWorkspaceId$.next('foo');
     expect(coreStart.savedObjects.client.setCurrentWorkspace).toHaveBeenCalledWith('foo');
-    expect(setupMock.application.register).toBeCalledTimes(4);
+    expect(setupMock.application.register).toBeCalledTimes(5);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledTimes(0);
   });
@@ -79,7 +80,7 @@ describe('Workspace plugin', () => {
     await workspacePlugin.setup(setupMock, {
       management: managementPluginMock.createSetupContract(),
     });
-    expect(setupMock.application.register).toBeCalledTimes(4);
+    expect(setupMock.application.register).toBeCalledTimes(5);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledWith('workspaceId');
     expect(setupMock.getStartServices).toBeCalledTimes(1);
@@ -148,4 +149,44 @@ describe('Workspace plugin', () => {
     });
     expect(setupMock.chrome.registerCollapsibleNavHeader).toBeCalledTimes(1);
   });
+
+  it('#start add workspace overview page to breadcrumbs when start', async () => {
+    const startMock = coreMock.createStart();
+    const workspaceObject = {
+      id: 'foo',
+      name: 'bar',
+    };
+    startMock.workspaces.currentWorkspace$.next(workspaceObject);
+    const breadcrumbs = new BehaviorSubject<ChromeBreadcrumb[]>([{ text: 'dashboards' }]);
+    startMock.chrome.getBreadcrumbs$.mockReturnValue(breadcrumbs);
+    const workspacePlugin = new WorkspacePlugin();
+    workspacePlugin.start(startMock);
+    expect(startMock.chrome.setBreadcrumbs).toBeCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({
+          text: 'bar',
+        }),
+        expect.objectContaining({
+          text: 'Home',
+        }),
+      ])
+    );
+  });
+
+  it('#start do not add workspace overview page to breadcrumbs when already exists', async () => {
+    const startMock = coreMock.createStart();
+    const workspaceObject = {
+      id: 'foo',
+      name: 'bar',
+    };
+    startMock.workspaces.currentWorkspace$.next(workspaceObject);
+    const breadcrumbs = new BehaviorSubject<ChromeBreadcrumb[]>([
+      { text: 'home' },
+      { text: 'bar' },
+    ]);
+    startMock.chrome.getBreadcrumbs$.mockReturnValue(breadcrumbs);
+    const workspacePlugin = new WorkspacePlugin();
+    workspacePlugin.start(startMock);
+    expect(startMock.chrome.setBreadcrumbs).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index 04948c5d580c..ca62edde3e0f 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { first } from 'rxjs/operators';
@@ -16,6 +16,7 @@ import {
   AppUpdater,
   AppStatus,
   PublicAppInfo,
+  ChromeBreadcrumb,
   WorkspaceAvailability,
 } from '../../../core/public';
 import {
@@ -48,6 +49,7 @@ interface WorkspacePluginSetupDeps {
 export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps> {
   private coreStart?: CoreStart;
   private currentWorkspaceSubscription?: Subscription;
+  private breadcrumbsSubscription?: Subscription;
   private currentWorkspaceIdSubscription?: Subscription;
   private managementCurrentWorkspaceIdSubscription?: Subscription;
   private appUpdater$ = new BehaviorSubject<AppUpdater>(() => undefined);
@@ -122,6 +124,41 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
     );
   }
 
+  /**
+   * Add workspace overview page to breadcrumbs
+   * @param core CoreStart
+   * @private
+   */
+  private addWorkspaceToBreadcrumbs(core: CoreStart) {
+    this.breadcrumbsSubscription = combineLatest([
+      core.workspaces.currentWorkspace$,
+      core.chrome.getBreadcrumbs$(),
+    ]).subscribe(([currentWorkspace, breadcrumbs]) => {
+      if (currentWorkspace && breadcrumbs && breadcrumbs.length > 0) {
+        // workspace always be the second one
+        const workspaceInBreadcrumbs =
+          breadcrumbs.length > 1 && breadcrumbs[1]?.text === currentWorkspace.name;
+        if (!workspaceInBreadcrumbs) {
+          const workspaceBreadcrumb: ChromeBreadcrumb = {
+            text: currentWorkspace.name,
+            onClick: () => {
+              core.application.navigateToApp(WORKSPACE_OVERVIEW_APP_ID);
+            },
+          };
+          const homeBreadcrumb: ChromeBreadcrumb = {
+            text: 'Home',
+            onClick: () => {
+              core.application.navigateToApp('home');
+            },
+          };
+          breadcrumbs.splice(0, 0, homeBreadcrumb, workspaceBreadcrumb);
+
+          core.chrome.setBreadcrumbs(breadcrumbs);
+        }
+      }
+    });
+  }
+
   public async setup(
     core: CoreSetup,
     { savedObjectsManagement, management }: WorkspacePluginSetupDeps
@@ -203,27 +240,44 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
       workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
     });
 
-    // update
+    // workspace fatal error
     core.application.register({
-      id: WORKSPACE_UPDATE_APP_ID,
-      title: i18n.translate('workspace.settings.workspaceUpdate', {
-        defaultMessage: 'Update Workspace',
+      id: WORKSPACE_FATAL_ERROR_APP_ID,
+      title: '',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderFatalErrorApp } = await import('./application');
+        return mountWorkspaceApp(params, renderFatalErrorApp);
+      },
+    });
+
+    /**
+     * register workspace overview page
+     */
+    core.application.register({
+      id: WORKSPACE_OVERVIEW_APP_ID,
+      title: i18n.translate('workspace.settings.workspaceOverview', {
+        defaultMessage: 'Workspace Overview',
       }),
       navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
-        const { renderUpdaterApp } = await import('./application');
-        return mountWorkspaceApp(params, renderUpdaterApp);
+        const { renderOverviewApp } = await import('./application');
+        return mountWorkspaceApp(params, renderOverviewApp);
       },
     });
 
-    // workspace fatal error
+    /**
+     * register workspace update page
+     */
     core.application.register({
-      id: WORKSPACE_FATAL_ERROR_APP_ID,
-      title: '',
+      id: WORKSPACE_UPDATE_APP_ID,
+      title: i18n.translate('workspace.settings.workspaceUpdate', {
+        defaultMessage: 'Update Workspace',
+      }),
       navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
-        const { renderFatalErrorApp } = await import('./application');
-        return mountWorkspaceApp(params, renderFatalErrorApp);
+        const { renderUpdaterApp } = await import('./application');
+        return mountWorkspaceApp(params, renderUpdaterApp);
       },
     });
 
@@ -267,6 +321,8 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
       this.filterNavLinks(core);
     });
 
+    this.addWorkspaceToBreadcrumbs(core);
+
     return {};
   }
 
@@ -274,5 +330,6 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
     this.currentWorkspaceSubscription?.unsubscribe();
     this.currentWorkspaceIdSubscription?.unsubscribe();
     this.managementCurrentWorkspaceIdSubscription?.unsubscribe();
+    this.breadcrumbsSubscription?.unsubscribe();
   }
 }