From 72c6a5aa6504053f1181997ddcbc6b3680643a79 Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Mon, 11 Mar 2024 18:00:19 +0800
Subject: [PATCH 1/4] feat: add workspace list

Signed-off-by: tygao <tygao@amazon.com>
---
 src/core/public/index.ts                      |   4 +-
 src/core/public/utils/debounce.test.ts        |  55 ++++
 src/core/public/utils/debounce.ts             |  23 ++
 src/core/public/utils/index.ts                |   1 +
 .../workspace/opensearch_dashboards.json      |   3 +-
 src/plugins/workspace/public/application.tsx  |  13 +
 .../delete_workspace_modal.test.tsx.snap      | 134 ++++++++
 .../delete_workspace_modal.test.tsx           | 262 +++++++++++++++
 .../delete_workspace_modal.tsx                | 121 +++++++
 .../delete_workspace_modal/index.ts           |   6 +
 .../public/components/utils/workspace.test.ts |  78 +++++
 .../public/components/utils/workspace.ts      |  36 +++
 .../__snapshots__/index.test.tsx.snap         | 301 ++++++++++++++++++
 .../components/workspace_list/index.test.tsx  | 119 +++++++
 .../components/workspace_list/index.tsx       | 221 +++++++++++++
 .../public/components/workspace_list_app.tsx  |  35 ++
 src/plugins/workspace/public/plugin.test.ts   |   6 +-
 src/plugins/workspace/public/plugin.ts        |  12 +
 18 files changed, 1425 insertions(+), 5 deletions(-)
 create mode 100644 src/core/public/utils/debounce.test.ts
 create mode 100644 src/core/public/utils/debounce.ts
 create mode 100644 src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap
 create mode 100644 src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
 create mode 100644 src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
 create mode 100644 src/plugins/workspace/public/components/delete_workspace_modal/index.ts
 create mode 100644 src/plugins/workspace/public/components/utils/workspace.test.ts
 create mode 100644 src/plugins/workspace/public/components/utils/workspace.ts
 create mode 100644 src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
 create mode 100644 src/plugins/workspace/public/components/workspace_list/index.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_list/index.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_list_app.tsx

diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index c82457ef218..cc51c721596 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -94,7 +94,7 @@ export type { Logos } from '../common';
 export { PackageInfo, EnvironmentMode } from '../server/types';
 /** @interal */
 export { CoreContext, CoreSystem } from './core_system';
-export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE } from '../utils';
+export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE, cleanWorkspaceId } from '../utils';
 export {
   AppCategory,
   UiSettingsParams,
@@ -358,3 +358,5 @@ export {
 export { __osdBootstrap__ } from './osd_bootstrap';
 
 export { WorkspacesStart, WorkspacesSetup, WorkspacesService, WorkspaceObject } from './workspace';
+
+export { debounce } from './utils';
diff --git a/src/core/public/utils/debounce.test.ts b/src/core/public/utils/debounce.test.ts
new file mode 100644
index 00000000000..7722a26bd0e
--- /dev/null
+++ b/src/core/public/utils/debounce.test.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { debounce } from './debounce';
+
+describe('debounce', () => {
+  let fn: Function;
+  beforeEach(() => {
+    fn = jest.fn();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  test('it should call the debounced fn once at the end of the quiet time', () => {
+    const debounced = debounce(fn, 1000);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(1001);
+    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledWith(99);
+  });
+
+  test("with a leading invocation, it should call the debounced fn once, if the time doens't pass", () => {
+    const debounced = debounce(fn, 1000, true);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(999);
+
+    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledWith(0);
+  });
+
+  test('with a leading invocation, it should call the debounced fn twice (at the beginning and at the end)', () => {
+    const debounced = debounce(fn, 1000, true);
+
+    for (let i = 0; i < 100; i++) {
+      debounced(i);
+    }
+
+    jest.advanceTimersByTime(1500);
+
+    expect(fn).toBeCalledTimes(2);
+    expect(fn).toBeCalledWith(0);
+    expect(fn).toBeCalledWith(99);
+  });
+});
diff --git a/src/core/public/utils/debounce.ts b/src/core/public/utils/debounce.ts
new file mode 100644
index 00000000000..95e1a81dcab
--- /dev/null
+++ b/src/core/public/utils/debounce.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @param func The function to be debounced.
+ * @param delay The time in milliseconds to wait before invoking the function again after the last invocation.
+ * @param leading An optional parameter that, when true, allows the function to be invoked immediately upon the first call. 
+
+ */
+export const debounce = (func: Function, delay: number, leading?: boolean) => {
+  let timerId: NodeJS.Timeout;
+
+  return (...args: any) => {
+    if (!timerId && leading) {
+      func(...args);
+    }
+    clearTimeout(timerId);
+
+    timerId = setTimeout(() => func(...args), delay);
+  };
+};
diff --git a/src/core/public/utils/index.ts b/src/core/public/utils/index.ts
index 30055b0ff81..4c64728feb1 100644
--- a/src/core/public/utils/index.ts
+++ b/src/core/public/utils/index.ts
@@ -38,3 +38,4 @@ export {
   getWorkspaceIdFromUrl,
   cleanWorkspaceId,
 } from '../../utils';
+export { debounce } from './debounce';
diff --git a/src/plugins/workspace/opensearch_dashboards.json b/src/plugins/workspace/opensearch_dashboards.json
index 4443b7e9983..efb5cef5fdb 100644
--- a/src/plugins/workspace/opensearch_dashboards.json
+++ b/src/plugins/workspace/opensearch_dashboards.json
@@ -4,7 +4,8 @@
   "server": true,
   "ui": true,
   "requiredPlugins": [
-    "savedObjects"
+    "savedObjects",
+    "opensearchDashboardsReact"
   ],
   "optionalPlugins": [],
   "requiredBundles": ["opensearchDashboardsReact"]
diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
index 66672561616..98ddb661086 100644
--- a/src/plugins/workspace/public/application.tsx
+++ b/src/plugins/workspace/public/application.tsx
@@ -9,6 +9,7 @@ import { AppMountParameters, ScopedHistory } from '../../../core/public';
 import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
 import { WorkspaceFatalError } from './components/workspace_fatal_error';
 import { WorkspaceCreatorApp } from './components/workspace_creator_app';
+import { WorkspaceListApp } from './components/workspace_list_app';
 import { Services } from './types';
 
 export const renderCreatorApp = ({ element }: AppMountParameters, services: Services) => {
@@ -38,3 +39,15 @@ export const renderFatalErrorApp = (params: AppMountParameters, services: Servic
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+export const renderListApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceListApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap b/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap
new file mode 100644
index 00000000000..efa63c2f1d0
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/__snapshots__/delete_workspace_modal.test.tsx.snap
@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeleteWorkspaceModal should render normally 1`] = `
+<body
+  class="euiBody-hasOverlayMask"
+>
+  <div />
+  <div
+    class="euiOverlayMask euiOverlayMask--aboveHeader"
+  >
+    <div
+      data-eui="EuiFocusTrap"
+    >
+      <div
+        aria-label="modal"
+        class="euiModal euiModal--maxWidth-default delete-workspace-modal"
+        tabindex="0"
+      >
+        <button
+          aria-label="Closes this modal window"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
+        <div
+          class="euiModal__flex"
+        >
+          <div
+            class="euiModalHeader"
+            data-test-subj="delete-workspace-modal-header"
+          >
+            <div
+              class="euiModalHeader__title"
+            >
+              Delete workspace
+            </div>
+          </div>
+          <div
+            class="euiModalBody"
+            data-test-subj="delete-workspace-modal-body"
+          >
+            <div
+              class="euiModalBody__overflow"
+            >
+              <div
+                style="line-height: 1.5;"
+              >
+                <p>
+                  The following workspace will be permanently deleted. This action cannot be undone.
+                </p>
+                <ul
+                  style="list-style-type: disc; list-style-position: inside;"
+                />
+                <div
+                  class="euiSpacer euiSpacer--l"
+                />
+                <div
+                  class="euiText euiText--medium"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--subdued"
+                  >
+                    To confirm your action, type 
+                    <b>
+                      delete
+                    </b>
+                    .
+                  </div>
+                </div>
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      class="euiFieldText euiFieldText--fullWidth"
+                      data-test-subj="delete-workspace-modal-input"
+                      placeholder="delete"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiModalFooter"
+          >
+            <button
+              class="euiButtonEmpty euiButtonEmpty--primary"
+              data-test-subj="delete-workspace-modal-cancel-button"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButtonEmpty__content"
+              >
+                <span
+                  class="euiButtonEmpty__text"
+                >
+                  Cancel
+                </span>
+              </span>
+            </button>
+            <button
+              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              data-test-subj="delete-workspace-modal-confirm"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Delete
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
new file mode 100644
index 00000000000..15078b87bad
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { DeleteWorkspaceModal, DeleteWorkspaceModalProps } from './delete_workspace_modal';
+import { coreMock } from '../../../../../core/public/mocks';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { workspaceClientMock } from '../../../public/workspace_client.mock';
+import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
+
+const defaultProps: DeleteWorkspaceModalProps = {
+  onClose: jest.fn(),
+  selectedWorkspace: null,
+  returnToHome: true,
+};
+
+const coreStartMock = coreMock.createStart();
+
+function getWrapWorkspaceDeleteModalInContext(
+  props: DeleteWorkspaceModalProps,
+  services = { ...coreStartMock }
+) {
+  return (
+    <OpenSearchDashboardsContextProvider services={services}>
+      <DeleteWorkspaceModal {...props} />
+    </OpenSearchDashboardsContextProvider>
+  );
+}
+
+describe('DeleteWorkspaceModal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render normally', () => {
+    const { getByText, baseElement, getByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(defaultProps)
+    );
+
+    expect(getByText('Delete workspace')).toBeInTheDocument();
+    expect(getByTestId('delete-workspace-modal-header')).toBeInTheDocument();
+    expect(getByTestId('delete-workspace-modal-body')).toBeInTheDocument();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should emit onClose when clicking cancel button', () => {
+    const onClose = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      onClose,
+    };
+    const { getByTestId } = render(getWrapWorkspaceDeleteModalInContext(newProps));
+    expect(onClose).not.toHaveBeenCalled();
+    const cancelButton = getByTestId('delete-workspace-modal-cancel-button');
+    fireEvent.click(cancelButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be able to delete workspace and navigate successfully', async () => {
+    const onCloseFn = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+      onClose: onCloseFn,
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: true,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    expect(deleteFn).not.toHaveBeenCalled();
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    await waitFor(() => {
+      expect(coreStartMock.notifications.toasts.addSuccess).toHaveBeenCalled();
+      expect(onCloseFn).toHaveBeenCalled();
+      expect(coreStartMock.application.navigateToUrl).toHaveBeenCalled();
+    });
+  });
+
+  it('should not navigate when successfully if returnToHome is false', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+      returnToHome: false,
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: true,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    await waitFor(() => {
+      expect(coreStartMock.notifications.toasts.addSuccess).toHaveBeenCalled();
+      expect(coreStartMock.application.navigateToUrl).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should not call deleteWorkspace if passed selectedWorkspace is null', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: null,
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: true,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).not.toHaveBeenCalled();
+  });
+
+  it('should add danger is returned data is unsuccess', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: false,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    await waitFor(() => {
+      expect(coreStartMock.notifications.toasts.addSuccess).not.toHaveBeenCalled();
+      expect(coreStartMock.notifications.toasts.addDanger).toHaveBeenCalled();
+    });
+  });
+
+  it('confirm button should be disabled if not input delete', async () => {
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+    };
+    const deleteFn = jest.fn().mockReturnValue({
+      success: false,
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delet' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    expect(confirmButton.hasAttribute('disabled'));
+  });
+
+  it('should catch error and add danger', async () => {
+    const onCloseFn = jest.fn();
+    const newProps = {
+      ...defaultProps,
+      selectedWorkspace: {
+        id: 'test',
+        name: 'test',
+      },
+      onclose: onCloseFn,
+    };
+    const deleteFn = jest.fn().mockImplementation(() => {
+      throw new Error('error');
+    });
+    const newServices = {
+      ...coreStartMock,
+      workspaceClient: {
+        ...workspaceClientMock,
+        delete: deleteFn,
+      },
+    };
+    const { getByTestId, findByTestId } = render(
+      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
+    );
+    await findByTestId('delete-workspace-modal-input');
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
+    expect(deleteFn).toHaveBeenCalledWith('test');
+    expect(coreStartMock.notifications.toasts.addDanger).toHaveBeenCalled();
+  });
+});
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
new file mode 100644
index 00000000000..4273134805a
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { WorkspaceAttribute } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WorkspaceClient } from '../../workspace_client';
+
+export interface DeleteWorkspaceModalProps {
+  onClose: () => void;
+  selectedWorkspace?: WorkspaceAttribute | null;
+  returnToHome: boolean;
+}
+
+export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
+  const [value, setValue] = useState('');
+  const { onClose, selectedWorkspace, returnToHome } = props;
+  const {
+    services: { application, notifications, http, workspaceClient },
+  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+
+  const deleteWorkspace = async () => {
+    if (selectedWorkspace?.id) {
+      let result;
+      try {
+        result = await workspaceClient.delete(selectedWorkspace?.id);
+      } catch (error) {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: error instanceof Error ? error.message : JSON.stringify(error),
+        });
+        return onClose();
+      }
+      if (result?.success) {
+        notifications?.toasts.addSuccess({
+          title: i18n.translate('workspace.delete.success', {
+            defaultMessage: 'Delete workspace successfully',
+          }),
+        });
+        onClose();
+        if (http && application && returnToHome) {
+          const homeUrl = application.getUrlForApp('home', {
+            path: '/',
+            absolute: false,
+          });
+          const targetUrl = http.basePath.prepend(http.basePath.remove(homeUrl), {
+            withoutWorkspace: true,
+          });
+          await application.navigateToUrl(targetUrl);
+        }
+      } else {
+        notifications?.toasts.addDanger({
+          title: i18n.translate('workspace.delete.failed', {
+            defaultMessage: 'Failed to delete workspace',
+          }),
+          text: result?.error,
+        });
+      }
+    }
+  };
+
+  return (
+    <EuiModal onClose={onClose} className="delete-workspace-modal" aria-label="modal">
+      <EuiModalHeader data-test-subj="delete-workspace-modal-header">
+        <EuiModalHeaderTitle>Delete workspace</EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody data-test-subj="delete-workspace-modal-body">
+        <div style={{ lineHeight: 1.5 }}>
+          <p>The following workspace will be permanently deleted. This action cannot be undone.</p>
+          <ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }}>
+            {selectedWorkspace?.name ? <li>{selectedWorkspace.name}</li> : null}
+          </ul>
+          <EuiSpacer />
+          <EuiText color="subdued">
+            To confirm your action, type <b>delete</b>.
+          </EuiText>
+          <EuiFieldText
+            placeholder="delete"
+            fullWidth
+            value={value}
+            data-test-subj="delete-workspace-modal-input"
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </div>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty onClick={onClose} data-test-subj="delete-workspace-modal-cancel-button">
+          Cancel
+        </EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="delete-workspace-modal-confirm"
+          onClick={deleteWorkspace}
+          fill
+          color="danger"
+          disabled={value !== 'delete'}
+        >
+          Delete
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+}
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/index.ts b/src/plugins/workspace/public/components/delete_workspace_modal/index.ts
new file mode 100644
index 00000000000..3466e180c54
--- /dev/null
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './delete_workspace_modal';
diff --git a/src/plugins/workspace/public/components/utils/workspace.test.ts b/src/plugins/workspace/public/components/utils/workspace.test.ts
new file mode 100644
index 00000000000..7b0e93c739c
--- /dev/null
+++ b/src/plugins/workspace/public/components/utils/workspace.test.ts
@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { switchWorkspace, updateWorkspace } from './workspace';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+jest.mock('../../../../../core/public/utils');
+
+import { coreMock } from '../../../../../core/public/mocks';
+
+const coreStartMock = coreMock.createStart();
+let mockNavigateToUrl = jest.fn();
+
+const defaultUrl = 'localhost://';
+
+describe('workspace utils', () => {
+  beforeEach(() => {
+    mockNavigateToUrl = jest.fn();
+    coreStartMock.application.navigateToUrl = mockNavigateToUrl;
+  });
+
+  describe('switchWorkspace', () => {
+    it('should redirect if newUrl is returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
+      switchWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
+    });
+
+    it('should not redirect if newUrl is not returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => '');
+      switchWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).not.toBeCalled();
+    });
+  });
+
+  describe('updateWorkspace', () => {
+    it('should redirect if newUrl is returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
+      updateWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
+    });
+
+    it('should not redirect if newUrl is not returned', () => {
+      Object.defineProperty(window, 'location', {
+        value: {
+          href: defaultUrl,
+        },
+        writable: true,
+      });
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => '');
+      updateWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      expect(mockNavigateToUrl).not.toBeCalled();
+    });
+  });
+});
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
new file mode 100644
index 00000000000..fb47ca316cb
--- /dev/null
+++ b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { WORKSPACE_OVERVIEW_APP_ID, WORKSPACE_UPDATE_APP_ID } from '../../../common/constants';
+import { CoreStart } from '../../../../../core/public';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+
+type Core = Pick<CoreStart, 'application' | 'http'>;
+
+export const switchWorkspace = ({ application, http }: Core, id: string) => {
+  const newUrl = formatUrlWithWorkspaceId(
+    application.getUrlForApp(WORKSPACE_OVERVIEW_APP_ID, {
+      absolute: true,
+    }),
+    id,
+    http.basePath
+  );
+  if (newUrl) {
+    application.navigateToUrl(newUrl);
+  }
+};
+
+export const updateWorkspace = ({ application, http }: Core, id: string) => {
+  const newUrl = formatUrlWithWorkspaceId(
+    application.getUrlForApp(WORKSPACE_UPDATE_APP_ID, {
+      absolute: true,
+    }),
+    id,
+    http.basePath
+  );
+  if (newUrl) {
+    application.navigateToUrl(newUrl);
+  }
+};
diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000..f9010177295
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceList should render title and table normally 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--hasShadow euiPageBody euiPageBody--borderRadiusNone euiPageBody--paddingLarge"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPage--restrictWidth-default euiPageHeader--center"
+        style="padding-bottom: 0px; border-bottom: 0;"
+      >
+        <div
+          class="euiPageHeaderContent"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+              >
+                Workspaces
+              </h1>
+              <div
+                class="euiSpacer euiSpacer--l"
+              />
+              <div
+                class="euiText euiText--medium euiText--constrainedWidth"
+              >
+                <p>
+                  Workspace allow you to save and organize library items, such as index patterns, visualizations, dashboards, saved searches, and share them with other OpenSearch Dashboards users. You can control which features are visible in each workspace, and which users and groups have read and write access to the library items in the workspace.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+        role="main"
+        style="width: 100%; max-width: 1000px;"
+      >
+        <div>
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <div
+              class="euiFlexItem euiSearchBar__searchHolder"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    class="euiFieldSearch euiFieldSearch--fullWidth"
+                    placeholder="Search..."
+                    type="search"
+                    value=""
+                  />
+                  <div
+                    class="euiFormControlLayoutIcons"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="search"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="workspaceList-create-workspace"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create workspace
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiBasicTable"
+          >
+            <div>
+              <div
+                class="euiTableHeaderMobile"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  />
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      class="euiTableSortMobile"
+                    >
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <button
+                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                            >
+                              <span
+                                class="euiButtonContent__icon"
+                                color="inherit"
+                                data-euiicon-type="arrowDown"
+                              />
+                              <span
+                                class="euiButtonEmpty__text"
+                              >
+                                Sorting
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <table
+                class="euiTable euiTable--responsive"
+                id="__table_generated-id"
+                tabindex="-1"
+              >
+                <caption
+                  class="euiScreenReaderOnly euiTableCaption"
+                />
+                <thead>
+                  <tr>
+                    <th
+                      aria-live="polite"
+                      aria-sort="ascending"
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_name_0"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <button
+                        class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                        data-test-subj="tableHeaderSortButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="Name"
+                          >
+                            Name
+                          </span>
+                          <span
+                            class="euiTableSortIcon"
+                            data-euiicon-type="sortUp"
+                          />
+                        </span>
+                      </button>
+                    </th>
+                    <th
+                      aria-live="polite"
+                      aria-sort="none"
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_id_1"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <button
+                        class="euiTableHeaderButton"
+                        data-test-subj="tableHeaderSortButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiTableCellContent"
+                        >
+                          <span
+                            class="euiTableCellContent__text"
+                            title="ID"
+                          >
+                            ID
+                          </span>
+                        </span>
+                      </button>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_description_2"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Description"
+                        >
+                          Description
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      data-test-subj="tableHeaderCell_features_3"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Features"
+                        >
+                          Features
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="euiTableHeaderCell"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <span
+                        class="euiTableCellContent euiTableCellContent--alignRight"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Actions"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="euiTableRow"
+                  >
+                    <td
+                      class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                      colspan="5"
+                    >
+                      <div
+                        class="euiTableCellContent euiTableCellContent--alignCenter"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          No items found
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
new file mode 100644
index 00000000000..f9e5a388368
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { WorkspaceList } from './index';
+import { coreMock } from '../../../../../core/public/mocks';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { I18nProvider } from '@osd/i18n/react';
+import { switchWorkspace, updateWorkspace } from '../utils/workspace';
+
+import { of } from 'rxjs';
+
+import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
+
+jest.mock('../utils/workspace');
+
+function getWrapWorkspaceListInContext(
+  workspaceList = [
+    { id: 'id1', name: 'name1' },
+    { id: 'id2', name: 'name2' },
+  ]
+) {
+  const coreStartMock = coreMock.createStart();
+
+  const services = {
+    ...coreStartMock,
+    workspaces: {
+      workspaceList$: of(workspaceList),
+    },
+  };
+
+  return (
+    <I18nProvider>
+      <OpenSearchDashboardsContextProvider services={services}>
+        <WorkspaceList />
+      </OpenSearchDashboardsContextProvider>
+    </I18nProvider>
+  );
+}
+
+describe('WorkspaceList', () => {
+  it('should render title and table normally', () => {
+    const { getByText, getByRole, container } = render(<WorkspaceList />);
+    expect(getByText('Workspaces')).toBeInTheDocument();
+    expect(getByRole('table')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render data in table based on workspace list data', async () => {
+    const { getByText } = render(getWrapWorkspaceListInContext());
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(getByText('name2')).toBeInTheDocument();
+  });
+  it('should be able to apply debounce search after input', async () => {
+    const list = [
+      { id: 'id1', name: 'name1' },
+      { id: 'id2', name: 'name2' },
+      { id: 'id3', name: 'name3' },
+      { id: 'id4', name: 'name4' },
+      { id: 'id5', name: 'name5' },
+      { id: 'id6', name: 'name6' },
+    ];
+    const { getByText, getByRole, queryByText } = render(getWrapWorkspaceListInContext(list));
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(queryByText('name6')).not.toBeInTheDocument();
+    const input = getByRole('searchbox');
+    fireEvent.change(input, {
+      target: { value: 'nam' },
+    });
+    fireEvent.change(input, {
+      target: { value: 'name6' },
+    });
+    expect(queryByText('name6')).not.toBeInTheDocument();
+  });
+
+  it('should be able to switch workspace after clicking name', async () => {
+    const { getByText } = render(getWrapWorkspaceListInContext());
+    const nameLink = getByText('name1');
+    fireEvent.click(nameLink);
+    expect(switchWorkspace).toBeCalled();
+  });
+
+  it('should be able to update workspace after clicking name', async () => {
+    const { getAllByTestId } = render(getWrapWorkspaceListInContext());
+    const editIcon = getAllByTestId('workspace-list-edit-icon')[0];
+    fireEvent.click(editIcon);
+    expect(updateWorkspace).toBeCalled();
+  });
+
+  it('should be able to call delete modal after clicking delete button', async () => {
+    const { getAllByTestId } = render(getWrapWorkspaceListInContext());
+    const deleteIcon = getAllByTestId('workspace-list-delete-icon')[0];
+    fireEvent.click(deleteIcon);
+    await screen.findByTestId('delete-workspace-modal-header');
+    expect(screen.getByTestId('delete-workspace-modal-header')).toBeInTheDocument();
+    const cancelButton = screen.getByTestId('delete-workspace-modal-cancel-button');
+    fireEvent.click(cancelButton);
+    expect(screen.queryByTestId('delete-workspace-modal-header')).not.toBeInTheDocument();
+  });
+
+  it('should be able to pagination when clicking pagination button', async () => {
+    const list = [
+      { id: 'id1', name: 'name1' },
+      { id: 'id2', name: 'name2' },
+      { id: 'id3', name: 'name3' },
+      { id: 'id4', name: 'name4' },
+      { id: 'id5', name: 'name5' },
+      { id: 'id6', name: 'name6' },
+    ];
+    const { getByTestId, getByText, queryByText } = render(getWrapWorkspaceListInContext(list));
+    expect(getByText('name1')).toBeInTheDocument();
+    expect(queryByText('name6')).not.toBeInTheDocument();
+    const paginationButton = getByTestId('pagination-button-next');
+    fireEvent.click(paginationButton);
+    expect(queryByText('name1')).not.toBeInTheDocument();
+    expect(getByText('name6')).toBeInTheDocument();
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
new file mode 100644
index 00000000000..bc92a01f8f5
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContent,
+  EuiLink,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiSearchBarProps,
+} from '@elastic/eui';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
+import { i18n } from '@osd/i18n';
+import { debounce } from '../../../../../core/public';
+import { WorkspaceAttribute } from '../../../../../core/public';
+import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
+import { switchWorkspace, updateWorkspace } from '../utils/workspace';
+
+import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
+
+import { cleanWorkspaceId } from '../../../../../core/public';
+import { DeleteWorkspaceModal } from '../delete_workspace_modal';
+
+const WORKSPACE_LIST_PAGE_DESCRIPTIOIN = i18n.translate('workspace.list.description', {
+  defaultMessage:
+    'Workspace allow you to save and organize library items, such as index patterns, visualizations, dashboards, saved searches, and share them with other OpenSearch Dashboards users. You can control which features are visible in each workspace, and which users and groups have read and write access to the library items in the workspace.',
+});
+
+export const WorkspaceList = () => {
+  const {
+    services: { workspaces, application, http },
+  } = useOpenSearchDashboards();
+
+  const initialSortField = 'name';
+  const initialSortDirection = 'asc';
+  const workspaceList = useObservable(workspaces?.workspaceList$ ?? of([]), []);
+  const [queryInput, setQueryInput] = useState<string>('');
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5,
+    pageSizeOptions: [5, 10, 20],
+  });
+  const [deletedWorkspace, setDeletedWorkspace] = useState<WorkspaceAttribute | null>(null);
+
+  const handleSwitchWorkspace = useCallback(
+    (id: string) => {
+      if (application && http) {
+        switchWorkspace({ application, http }, id);
+      }
+    },
+    [application, http]
+  );
+
+  const handleUpdateWorkspace = useCallback(
+    (id: string) => {
+      if (application && http) {
+        updateWorkspace({ application, http }, id);
+      }
+    },
+    [application, http]
+  );
+
+  const searchResult = useMemo(() => {
+    if (queryInput) {
+      const normalizedQuery = queryInput.toLowerCase();
+      const result = workspaceList.filter((item) => {
+        return (
+          item.id.toLowerCase().indexOf(normalizedQuery) > -1 ||
+          item.name.toLowerCase().indexOf(normalizedQuery) > -1
+        );
+      });
+      return result;
+    }
+    return workspaceList;
+  }, [workspaceList, queryInput]);
+
+  const columns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      render: (name: string, item: WorkspaceAttribute) => (
+        <span>
+          <EuiLink onClick={() => handleSwitchWorkspace(item.id)}>{name}</EuiLink>
+        </span>
+      ),
+    },
+    {
+      field: 'id',
+      name: 'ID',
+      sortable: true,
+    },
+    {
+      field: 'description',
+      name: 'Description',
+      truncateText: true,
+    },
+    {
+      field: 'features',
+      name: 'Features',
+      isExpander: true,
+      hasActions: true,
+    },
+    {
+      name: 'Actions',
+      field: '',
+      actions: [
+        {
+          name: 'Edit',
+          icon: 'pencil',
+          type: 'icon',
+          description: 'Edit workspace',
+          onClick: ({ id }: WorkspaceAttribute) => handleUpdateWorkspace(id),
+          'data-test-subj': 'workspace-list-edit-icon',
+        },
+        {
+          name: 'Delete',
+          icon: 'trash',
+          type: 'icon',
+          description: 'Delete workspace',
+          onClick: (item: WorkspaceAttribute) => setDeletedWorkspace(item),
+          'data-test-subj': 'workspace-list-delete-icon',
+        },
+      ],
+    },
+  ];
+
+  const workspaceCreateUrl = useMemo(() => {
+    if (!application || !http) {
+      return '';
+    }
+
+    const appUrl = application.getUrlForApp(WORKSPACE_CREATE_APP_ID, {
+      absolute: false,
+    });
+    if (!appUrl) return '';
+
+    return cleanWorkspaceId(appUrl);
+  }, [application, http]);
+
+  const debouncedSetQueryInput = useMemo(() => {
+    return debounce(setQueryInput, 300);
+  }, [setQueryInput]);
+
+  const handleSearchInput: EuiSearchBarProps['onChange'] = useCallback(
+    ({ query }) => {
+      debouncedSetQueryInput(query?.text ?? '');
+    },
+    [debouncedSetQueryInput]
+  );
+
+  const search: EuiSearchBarProps = {
+    onChange: handleSearchInput,
+    box: {
+      incremental: true,
+    },
+    toolsRight: [
+      <EuiButton
+        href={workspaceCreateUrl}
+        key="create_workspace"
+        data-test-subj="workspaceList-create-workspace"
+      >
+        Create workspace
+      </EuiButton>,
+    ],
+  };
+
+  return (
+    <EuiPage paddingSize="none">
+      <EuiPageBody panelled>
+        <EuiPageHeader
+          restrictWidth
+          pageTitle="Workspaces"
+          description={WORKSPACE_LIST_PAGE_DESCRIPTIOIN}
+          style={{ paddingBottom: 0, borderBottom: 0 }}
+        />
+        <EuiPageContent
+          verticalPosition="center"
+          horizontalPosition="center"
+          paddingSize="none"
+          panelPaddingSize="l"
+          hasShadow={false}
+          style={{ width: '100%', maxWidth: 1000 }}
+        >
+          <EuiInMemoryTable
+            items={searchResult}
+            columns={columns}
+            itemId="id"
+            onTableChange={({ page: { index, size } }) =>
+              setPagination((prev) => {
+                return { ...prev, pageIndex: index, pageSize: size };
+              })
+            }
+            pagination={pagination}
+            sorting={{
+              sort: {
+                field: initialSortField,
+                direction: initialSortDirection,
+              },
+            }}
+            isSelectable={true}
+            search={search}
+          />
+        </EuiPageContent>
+      </EuiPageBody>
+      {deletedWorkspace && (
+        <DeleteWorkspaceModal
+          selectedWorkspace={deletedWorkspace}
+          onClose={() => setDeletedWorkspace(null)}
+          returnToHome={false}
+        />
+      )}
+    </EuiPage>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_list_app.tsx b/src/plugins/workspace/public/components/workspace_list_app.tsx
new file mode 100644
index 00000000000..8970cfc46fc
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_list_app.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceList } from './workspace_list';
+
+export const WorkspaceListApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceListTitle', {
+          defaultMessage: 'Workspaces',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceList />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
index 0ec007079c2..793ed5e0f09 100644
--- a/src/plugins/workspace/public/plugin.test.ts
+++ b/src/plugins/workspace/public/plugin.test.ts
@@ -23,7 +23,7 @@ describe('Workspace plugin', () => {
     const setupMock = getSetupMock();
     const workspacePlugin = new WorkspacePlugin();
     await workspacePlugin.setup(setupMock);
-    expect(setupMock.application.register).toBeCalledTimes(2);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
   });
 
@@ -35,7 +35,7 @@ describe('Workspace plugin', () => {
     workspacePlugin.start(coreStart);
     coreStart.workspaces.currentWorkspaceId$.next('foo');
     expect(coreStart.savedObjects.client.setCurrentWorkspace).toHaveBeenCalledWith('foo');
-    expect(setupMock.application.register).toBeCalledTimes(2);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledTimes(0);
   });
@@ -70,7 +70,7 @@ describe('Workspace plugin', () => {
 
     const workspacePlugin = new WorkspacePlugin();
     await workspacePlugin.setup(setupMock);
-    expect(setupMock.application.register).toBeCalledTimes(2);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledWith('workspaceId');
     expect(setupMock.getStartServices).toBeCalledTimes(1);
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
index eeaab74e8e4..bce606583b8 100644
--- a/src/plugins/workspace/public/plugin.ts
+++ b/src/plugins/workspace/public/plugin.ts
@@ -17,6 +17,7 @@ import {
   WORKSPACE_FATAL_ERROR_APP_ID,
   WORKSPACE_OVERVIEW_APP_ID,
   WORKSPACE_CREATE_APP_ID,
+  WORKSPACE_LIST_APP_ID,
 } from '../common/constants';
 import { getWorkspaceIdFromUrl } from '../../../core/public/utils';
 import { Services } from './types';
@@ -128,6 +129,17 @@ export class WorkspacePlugin implements Plugin<{}, {}, {}> {
       return React.createElement(WorkspaceMenu, { coreStart: this.coreStart });
     });
 
+    // workspace list
+    core.application.register({
+      id: WORKSPACE_LIST_APP_ID,
+      title: '',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderListApp } = await import('./application');
+        return mountWorkspaceApp(params, renderListApp);
+      },
+    });
+
     return {};
   }
 

From a5ef8d6d78e1946142dfeb1efbd93d1be36e9b40 Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Mon, 18 Mar 2024 18:10:07 +0800
Subject: [PATCH 2/4] doc: update changelog

Signed-off-by: tygao <tygao@amazon.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1f58d24285..9922970bb5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -67,6 +67,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add TLS configuration for multiple data sources ([#6171](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6171))
 - [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations ([#6256](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6256))
 - [Workspace] Add create workspace page ([#6179](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6179))
+- [Workspace] Add workspace list page ([#6182](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6182))
 
 ### 🐛 Bug Fixes
 

From 7a735eb2f9e49e39c06e746a87d8261a7d6f65cf Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Fri, 15 Mar 2024 14:49:58 +0800
Subject: [PATCH 3/4] fix test for delete workspace modal (#299)

Signed-off-by: tygao <tygao@amazon.com>
---
 .../delete_workspace_modal.test.tsx             |  6 +++---
 .../components/workspace_list/index.test.tsx    | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
index 15078b87bad..d2ba2e7876e 100644
--- a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { DeleteWorkspaceModal, DeleteWorkspaceModalProps } from './delete_workspace_modal';
 import { coreMock } from '../../../../../core/public/mocks';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 import { workspaceClientMock } from '../../../public/workspace_client.mock';
 import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
 
@@ -34,11 +34,11 @@ describe('DeleteWorkspaceModal', () => {
     jest.clearAllMocks();
   });
 
-  it('should render normally', () => {
+  it('should render normally', async () => {
     const { getByText, baseElement, getByTestId } = render(
       getWrapWorkspaceDeleteModalInContext(defaultProps)
     );
-
+    await screen.findByTestId('delete-workspace-modal-header');
     expect(getByText('Delete workspace')).toBeInTheDocument();
     expect(getByTestId('delete-workspace-modal-header')).toBeInTheDocument();
     expect(getByTestId('delete-workspace-modal-body')).toBeInTheDocument();
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
index f9e5a388368..1719bfe7a10 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -16,6 +16,14 @@ import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/open
 
 jest.mock('../utils/workspace');
 
+jest.mock('../delete_workspace_modal', () => ({
+  DeleteWorkspaceModal: ({ onClose }: { onClose: () => void }) => (
+    <div aria-label="mock delete workspace modal">
+      <button onClick={onClose} aria-label="mock delete workspace modal button" />
+    </div>
+  ),
+}));
+
 function getWrapWorkspaceListInContext(
   workspaceList = [
     { id: 'id1', name: 'name1' },
@@ -92,11 +100,10 @@ describe('WorkspaceList', () => {
     const { getAllByTestId } = render(getWrapWorkspaceListInContext());
     const deleteIcon = getAllByTestId('workspace-list-delete-icon')[0];
     fireEvent.click(deleteIcon);
-    await screen.findByTestId('delete-workspace-modal-header');
-    expect(screen.getByTestId('delete-workspace-modal-header')).toBeInTheDocument();
-    const cancelButton = screen.getByTestId('delete-workspace-modal-cancel-button');
-    fireEvent.click(cancelButton);
-    expect(screen.queryByTestId('delete-workspace-modal-header')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('mock delete workspace modal')).toBeInTheDocument();
+    const modalCancelButton = screen.getByLabelText('mock delete workspace modal button');
+    fireEvent.click(modalCancelButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).not.toBeInTheDocument();
   });
 
   it('should be able to pagination when clicking pagination button', async () => {

From d53b2a14320bf680213e8aa5dafbd09dc7883f61 Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Fri, 22 Mar 2024 19:31:23 +0800
Subject: [PATCH 4/4] update function name and modal

Signed-off-by: tygao <tygao@amazon.com>
---
 .../delete_workspace_modal.test.tsx           | 44 +++----------------
 .../delete_workspace_modal.tsx                | 17 +++----
 .../public/components/utils/workspace.test.ts | 14 ++++--
 .../public/components/utils/workspace.ts      |  2 +-
 .../components/workspace_list/index.test.tsx  |  4 +-
 .../components/workspace_list/index.tsx       |  5 +--
 6 files changed, 25 insertions(+), 61 deletions(-)

diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
index d2ba2e7876e..0304aa238ad 100644
--- a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.test.tsx
@@ -13,7 +13,7 @@ import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/open
 const defaultProps: DeleteWorkspaceModalProps = {
   onClose: jest.fn(),
   selectedWorkspace: null,
-  returnToHome: true,
+  onDeleteSuccess: jest.fn(),
 };
 
 const coreStartMock = coreMock.createStart();
@@ -58,8 +58,9 @@ describe('DeleteWorkspaceModal', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should be able to delete workspace and navigate successfully', async () => {
+  it('should be able to delete workspace and emit onDeleteSuccess', async () => {
     const onCloseFn = jest.fn();
+    const onDeleteSuccessFn = jest.fn();
     const newProps = {
       ...defaultProps,
       selectedWorkspace: {
@@ -67,6 +68,7 @@ describe('DeleteWorkspaceModal', () => {
         name: 'test',
       },
       onClose: onCloseFn,
+      onDeleteSuccess: onDeleteSuccessFn,
     };
     const deleteFn = jest.fn().mockReturnValue({
       success: true,
@@ -93,43 +95,7 @@ describe('DeleteWorkspaceModal', () => {
     await waitFor(() => {
       expect(coreStartMock.notifications.toasts.addSuccess).toHaveBeenCalled();
       expect(onCloseFn).toHaveBeenCalled();
-      expect(coreStartMock.application.navigateToUrl).toHaveBeenCalled();
-    });
-  });
-
-  it('should not navigate when successfully if returnToHome is false', async () => {
-    const newProps = {
-      ...defaultProps,
-      selectedWorkspace: {
-        id: 'test',
-        name: 'test',
-      },
-      returnToHome: false,
-    };
-    const deleteFn = jest.fn().mockReturnValue({
-      success: true,
-    });
-    const newServices = {
-      ...coreStartMock,
-      workspaceClient: {
-        ...workspaceClientMock,
-        delete: deleteFn,
-      },
-    };
-    const { getByTestId, findByTestId } = render(
-      getWrapWorkspaceDeleteModalInContext(newProps, newServices)
-    );
-    await findByTestId('delete-workspace-modal-input');
-    const input = getByTestId('delete-workspace-modal-input');
-    fireEvent.change(input, {
-      target: { value: 'delete' },
-    });
-    const confirmButton = getByTestId('delete-workspace-modal-confirm');
-    fireEvent.click(confirmButton);
-    expect(deleteFn).toHaveBeenCalledWith('test');
-    await waitFor(() => {
-      expect(coreStartMock.notifications.toasts.addSuccess).toHaveBeenCalled();
-      expect(coreStartMock.application.navigateToUrl).not.toHaveBeenCalled();
+      expect(onDeleteSuccessFn).toHaveBeenCalled();
     });
   });
 
diff --git a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
index 4273134805a..157c2ca8570 100644
--- a/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
+++ b/src/plugins/workspace/public/components/delete_workspace_modal/delete_workspace_modal.tsx
@@ -24,14 +24,14 @@ import { WorkspaceClient } from '../../workspace_client';
 export interface DeleteWorkspaceModalProps {
   onClose: () => void;
   selectedWorkspace?: WorkspaceAttribute | null;
-  returnToHome: boolean;
+  onDeleteSuccess?: () => void;
 }
 
 export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
   const [value, setValue] = useState('');
-  const { onClose, selectedWorkspace, returnToHome } = props;
+  const { onClose, selectedWorkspace, onDeleteSuccess } = props;
   const {
-    services: { application, notifications, http, workspaceClient },
+    services: { notifications, workspaceClient },
   } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
 
   const deleteWorkspace = async () => {
@@ -55,15 +55,8 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
           }),
         });
         onClose();
-        if (http && application && returnToHome) {
-          const homeUrl = application.getUrlForApp('home', {
-            path: '/',
-            absolute: false,
-          });
-          const targetUrl = http.basePath.prepend(http.basePath.remove(homeUrl), {
-            withoutWorkspace: true,
-          });
-          await application.navigateToUrl(targetUrl);
+        if (onDeleteSuccess) {
+          onDeleteSuccess();
         }
       } else {
         notifications?.toasts.addDanger({
diff --git a/src/plugins/workspace/public/components/utils/workspace.test.ts b/src/plugins/workspace/public/components/utils/workspace.test.ts
index 7b0e93c739c..926455feed3 100644
--- a/src/plugins/workspace/public/components/utils/workspace.test.ts
+++ b/src/plugins/workspace/public/components/utils/workspace.test.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { switchWorkspace, updateWorkspace } from './workspace';
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from './workspace';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 jest.mock('../../../../../core/public/utils');
 
@@ -48,7 +48,7 @@ describe('workspace utils', () => {
     });
   });
 
-  describe('updateWorkspace', () => {
+  describe('navigateToWorkspaceUpdatePage', () => {
     it('should redirect if newUrl is returned', () => {
       Object.defineProperty(window, 'location', {
         value: {
@@ -58,7 +58,10 @@ describe('workspace utils', () => {
       });
       // @ts-ignore
       formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
-      updateWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      navigateToWorkspaceUpdatePage(
+        { application: coreStartMock.application, http: coreStartMock.http },
+        ''
+      );
       expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
     });
 
@@ -71,7 +74,10 @@ describe('workspace utils', () => {
       });
       // @ts-ignore
       formatUrlWithWorkspaceId.mockImplementation(() => '');
-      updateWorkspace({ application: coreStartMock.application, http: coreStartMock.http }, '');
+      navigateToWorkspaceUpdatePage(
+        { application: coreStartMock.application, http: coreStartMock.http },
+        ''
+      );
       expect(mockNavigateToUrl).not.toBeCalled();
     });
   });
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
index fb47ca316cb..63ed5953dbf 100644
--- a/src/plugins/workspace/public/components/utils/workspace.ts
+++ b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -22,7 +22,7 @@ export const switchWorkspace = ({ application, http }: Core, id: string) => {
   }
 };
 
-export const updateWorkspace = ({ application, http }: Core, id: string) => {
+export const navigateToWorkspaceUpdatePage = ({ application, http }: Core, id: string) => {
   const newUrl = formatUrlWithWorkspaceId(
     application.getUrlForApp(WORKSPACE_UPDATE_APP_ID, {
       absolute: true,
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
index 1719bfe7a10..d75ddf0d513 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -8,7 +8,7 @@ import { WorkspaceList } from './index';
 import { coreMock } from '../../../../../core/public/mocks';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { I18nProvider } from '@osd/i18n/react';
-import { switchWorkspace, updateWorkspace } from '../utils/workspace';
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from '../utils/workspace';
 
 import { of } from 'rxjs';
 
@@ -93,7 +93,7 @@ describe('WorkspaceList', () => {
     const { getAllByTestId } = render(getWrapWorkspaceListInContext());
     const editIcon = getAllByTestId('workspace-list-edit-icon')[0];
     fireEvent.click(editIcon);
-    expect(updateWorkspace).toBeCalled();
+    expect(navigateToWorkspaceUpdatePage).toBeCalled();
   });
 
   it('should be able to call delete modal after clicking delete button', async () => {
diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
index bc92a01f8f5..b22a0fdb99f 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -20,7 +20,7 @@ import { i18n } from '@osd/i18n';
 import { debounce } from '../../../../../core/public';
 import { WorkspaceAttribute } from '../../../../../core/public';
 import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
-import { switchWorkspace, updateWorkspace } from '../utils/workspace';
+import { switchWorkspace, navigateToWorkspaceUpdatePage } from '../utils/workspace';
 
 import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
 
@@ -60,7 +60,7 @@ export const WorkspaceList = () => {
   const handleUpdateWorkspace = useCallback(
     (id: string) => {
       if (application && http) {
-        updateWorkspace({ application, http }, id);
+        navigateToWorkspaceUpdatePage({ application, http }, id);
       }
     },
     [application, http]
@@ -213,7 +213,6 @@ export const WorkspaceList = () => {
         <DeleteWorkspaceModal
           selectedWorkspace={deletedWorkspace}
           onClose={() => setDeletedWorkspace(null)}
-          returnToHome={false}
         />
       )}
     </EuiPage>