From c82b31c31dc00c2804578bf35b1a98b04b8b21a4 Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Tue, 20 Aug 2024 17:22:08 +0800
Subject: [PATCH 1/6] fix workspace detail page header

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../workspace_detail.test.tsx.snap            | 59 -------------------
 .../opensearch_connections_table.tsx          | 17 +++---
 .../workspace_detail.test.tsx                 | 38 ++++--------
 .../workspace_detail/workspace_detail.tsx     | 52 ++++++++++------
 .../workspace_form/workspace_detail_form.scss |  8 ---
 .../workspace_form/workspace_detail_form.tsx  |  7 +--
 .../workspace_detail_form_details.tsx         |  4 +-
 7 files changed, 59 insertions(+), 126 deletions(-)
 delete mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_detail_form.scss

diff --git a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
index b9e165a79c3a..b1036d4d80ed 100644
--- a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
@@ -5,65 +5,6 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
   <div
     class="euiPage euiPage--paddingMedium euiPage--column euiPage--grow"
   >
-    <header
-      class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
-    >
-      <div
-        class="euiPageHeaderContent"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
-        >
-          <div
-            class="euiFlexItem"
-          />
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
-            >
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <button
-                  class="euiButton euiButton--danger euiButton--small"
-                  type="button"
-                >
-                  <span
-                    class="euiButtonContent euiButton__content"
-                  >
-                    <span
-                      class="euiButtonContent__icon"
-                      color="inherit"
-                      data-euiicon-type="trash"
-                    />
-                    <span
-                      class="euiButton__text"
-                    >
-                      delete
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-    <div
-      class="euiPageBody euiPageBody--borderRadiusNone"
-    >
-      <div
-        class="euiText euiText--medium"
-      >
-        <div
-          class="euiTextColor euiTextColor--subdued"
-        >
-          this is my foo workspace description
-        </div>
-      </div>
-    </div>
     <div
       class="euiSpacer euiSpacer--l"
     />
diff --git a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
index ed6ce46965ac..278b7ffcba85 100644
--- a/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx
@@ -41,8 +41,7 @@ export const OpenSearchConnectionTable = ({
   } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
   const { formData, setSelectedDataSources } = useWorkspaceFormContext();
   const [searchTerm, setSearchTerm] = useState('');
-  const [SelectedItems, setSelectedItems] = useState<DataSource[]>([]);
-  const [assignItems, setAssignItems] = useState<DataSource[]>([]);
+  const [selectedItems, setSelectedItems] = useState<DataSource[]>([]);
   const [modalVisible, setModalVisible] = useState(false);
 
   const filteredDataSources = useMemo(
@@ -53,9 +52,8 @@ export const OpenSearchConnectionTable = ({
     [searchTerm, assignedDataSources]
   );
 
-  const onSelectionChange = (selectedItems: DataSource[]) => {
-    setSelectedItems(selectedItems);
-    setAssignItems(selectedItems);
+  const onSelectionChange = (selectedDataSources: DataSource[]) => {
+    setSelectedItems(selectedDataSources);
   };
 
   const handleUnassignDataSources = async (dataSources: DataSource[]) => {
@@ -138,7 +136,7 @@ export const OpenSearchConnectionTable = ({
                 icon: 'unlink',
                 type: 'icon',
                 onClick: (item: DataSource) => {
-                  setAssignItems([item]);
+                  setSelectedItems([item]);
                   setModalVisible(true);
                 },
                 'data-test-subj': 'workspace-detail-dataSources-table-actions-remove',
@@ -160,7 +158,7 @@ export const OpenSearchConnectionTable = ({
   return (
     <>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        {SelectedItems.length > 0 && !modalVisible && (
+        {selectedItems.length > 0 && !modalVisible && (
           <EuiFlexItem grow={false}>
             <EuiButton
               color="danger"
@@ -169,7 +167,7 @@ export const OpenSearchConnectionTable = ({
             >
               {i18n.translate('workspace.detail.dataSources.table.remove.button', {
                 defaultMessage: 'Remove {numberOfSelect} association(s)',
-                values: { numberOfSelect: SelectedItems.length },
+                values: { numberOfSelect: selectedItems.length },
               })}
             </EuiButton>
           </EuiFlexItem>
@@ -205,9 +203,10 @@ export const OpenSearchConnectionTable = ({
           })}
           onCancel={() => {
             setModalVisible(false);
+            setSelectedItems([]);
           }}
           onConfirm={() => {
-            handleUnassignDataSources(assignItems);
+            handleUnassignDataSources(selectedItems);
           }}
           cancelButtonText={i18n.translate('workspace.detail.dataSources.modal.cancelButton', {
             defaultMessage: 'Cancel',
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
index cc23f3af8ec8..c4e4f4e19906 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
@@ -119,6 +119,9 @@ const WorkspaceDetailPage = (props: any) => {
         },
       },
       dataSourceManagement,
+      navigationUI: {
+        HeaderControl: () => null,
+      },
     },
   });
 
@@ -198,24 +201,6 @@ describe('WorkspaceDetail', () => {
     expect(document.querySelector('#dataSources')).toHaveClass('euiTab-isSelected');
   });
 
-  it('click on delete button will show delete modal', async () => {
-    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText, getByTestId, queryByText } = render(
-      WorkspaceDetailPage({ workspacesService: workspaceService })
-    );
-    fireEvent.click(getByText('delete'));
-    expect(getByText('Delete workspace')).toBeInTheDocument();
-    fireEvent.click(getByText('Cancel'));
-    expect(queryByText('Delete workspace')).toBeNull();
-    fireEvent.click(getByText('delete'));
-    const input = getByTestId('delete-workspace-modal-input');
-    fireEvent.change(input, {
-      target: { value: 'delete' },
-    });
-    const confirmButton = getByTestId('delete-workspace-modal-confirm');
-    fireEvent.click(confirmButton);
-  });
-
   it('click on Collaborators tab when permission control and dataSource disabled', async () => {
     const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
     const { queryByText } = render(
@@ -281,13 +266,16 @@ describe('WorkspaceDetail', () => {
 
   it('will not render xss content', async () => {
     const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
-    const workspaceService = createWorkspacesSetupContractMockWithValue({
-      ...workspaceObject,
-      name: '<script>alert("name")</script>',
-      description: '<script>alert("description")</script>',
-    });
-    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    expect(getByText('<script>alert("description")</script>')).toBeInTheDocument();
+    const workspaceService = createWorkspacesSetupContractMockWithValue();
+    const { getByTestId } = render(
+      WorkspaceDetailPage({
+        workspacesService: workspaceService,
+        defaultValues: { ...defaultValues, description: '<script>alert("description")</script>' },
+      })
+    );
+    expect(getByTestId('workspaceForm-workspaceDetails-descriptionInputText').value).toEqual(
+      '<script>alert("description")</script>'
+    );
     expect(alertSpy).toBeCalledTimes(0);
     alertSpy.mockRestore();
   });
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
index a95756947424..558879109107 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
@@ -6,14 +6,10 @@
 import React, { useEffect, useState } from 'react';
 import {
   EuiPage,
-  EuiText,
   EuiSpacer,
-  EuiFlexItem,
   EuiPageBody,
-  EuiFlexGroup,
-  EuiPageHeader,
+  EuiButtonIcon,
   EuiPageContent,
-  EuiSmallButton,
   EuiConfirmModal,
   EuiTabbedContent,
 } from '@elastic/eui';
@@ -34,6 +30,7 @@ import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { SelectDataSourceDetailPanel } from './select_data_source_panel';
 import { WorkspaceBottomBar } from './workspace_bottom_bar';
+import { NavigationPublicPluginStart } from '../../../../navigation/public';
 
 export interface WorkspaceDetailProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -41,10 +38,19 @@ export interface WorkspaceDetailProps {
 
 export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
   const {
-    services: { workspaces, application, http, savedObjects, dataSourceManagement, uiSettings },
+    services: {
+      workspaces,
+      application,
+      http,
+      savedObjects,
+      dataSourceManagement,
+      uiSettings,
+      navigationUI: { HeaderControl },
+    },
   } = useOpenSearchDashboards<{
     CoreStart: CoreStart;
     dataSourceManagement?: DataSourceManagementPluginSetup;
+    navigationUI: NavigationPublicPluginStart['ui'];
   }>();
 
   const {
@@ -147,24 +153,34 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
   ];
 
   const deleteButton = (
-    <EuiSmallButton
-      color="danger"
+    <EuiButtonIcon
+      size="s"
+      display="base"
       iconType="trash"
+      aria-label="Delete"
+      color="danger"
+      data-test-subj="workspace-detail-delete-button"
       onClick={() => setDeletedWorkspace(currentWorkspace)}
-    >
-      {i18n.translate('workspace.detail.delete', {
-        defaultMessage: 'delete',
-      })}
-    </EuiSmallButton>
+    />
   );
 
   return (
     <>
       <EuiPage direction="column">
-        <EuiPageHeader rightSideItems={[deleteButton]} alignItems="center" />
-        <EuiPageBody>
-          <EuiText color="subdued">{currentWorkspace.description}</EuiText>
-        </EuiPageBody>
+        {currentWorkspace.description && (
+          <HeaderControl
+            controls={[
+              {
+                description: currentWorkspace.description,
+              },
+            ]}
+            setMountPoint={application.setAppDescriptionControls}
+          />
+        )}
+        <HeaderControl
+          controls={[{ renderComponent: deleteButton }]}
+          setMountPoint={application.setAppRightControls}
+        />
         <EuiSpacer />
         <EuiPageContent>
           <WorkspaceDetailPanel
@@ -187,7 +203,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
         </EuiPageBody>
         {deletedWorkspace && (
           <DeleteWorkspaceModal
-            selectedWorkspace={deletedWorkspace}
+            selectedWorkspaces={[deletedWorkspace]}
             onClose={() => setDeletedWorkspace(null)}
             onDeleteSuccess={() => {
               window.setTimeout(() => {
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.scss b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.scss
deleted file mode 100644
index 12d655151605..000000000000
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.workspace-detail-form-group {
-  width: 15%;
-}
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
index a8015120d407..bc3ce92067ff 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './workspace_detail_form.scss';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   EuiSpacer,
@@ -23,7 +22,7 @@ import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_
 import { DetailTab, usersAndPermissionsTitle } from './constants';
 import { WorkspaceFormErrorCallout } from './workspace_form_error_callout';
 import { useWorkspaceFormContext } from './workspace_form_context';
-import { WorkspaceDetailFormDetailsProps } from './workspace_detail_form_details';
+import { WorkspaceDetailFormDetails } from './workspace_detail_form_details';
 
 interface FormGroupProps {
   title: React.ReactNode;
@@ -34,7 +33,7 @@ interface FormGroupProps {
 const FormGroup = ({ title, children, describe }: FormGroupProps) => (
   <>
     <EuiFlexGroup gutterSize="xl">
-      <EuiFlexItem grow={false} className="workspace-detail-form-group">
+      <EuiFlexItem grow={false} style={{ width: '15%' }}>
         <EuiTitle size="xs">
           <h3>{title}</h3>
         </EuiTitle>
@@ -132,7 +131,7 @@ export const WorkspaceDetailForm = (props: WorkspaceFormProps) => {
         </EuiFlexGroup>
         <EuiHorizontalRule />
         {detailTab === DetailTab.Details && (
-          <WorkspaceDetailFormDetailsProps availableUseCases={availableUseCases} />
+          <WorkspaceDetailFormDetails availableUseCases={availableUseCases} />
         )}
         {detailTab === DetailTab.Collaborators && (
           <FormGroup title={usersAndPermissionsTitle}>
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx
index 27de826141b2..ec79f063acc5 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_detail_form_details.tsx
@@ -8,7 +8,6 @@ import {
   EuiColorPicker,
   EuiCompressedFormRow,
   EuiDescribedFormGroup,
-  EuiCompressedTextArea,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { useObservable } from 'react-use';
@@ -17,7 +16,6 @@ import {
   detailsColorLabel,
   detailsUseCaseLabel,
   detailsColorHelpText,
-  detailsDescriptionPlaceholder,
   detailsDescriptionIntroduction,
   detailsUseCaseHelpText,
 } from './constants';
@@ -36,7 +34,7 @@ interface WorkspaceDetailFormDetailsProps {
   >;
 }
 
-export const WorkspaceDetailFormDetailsProps = ({
+export const WorkspaceDetailFormDetails = ({
   availableUseCases,
 }: WorkspaceDetailFormDetailsProps) => {
   const {

From e763810ecaf91049f2c507871ee45cced6780a46 Mon Sep 17 00:00:00 2001
From: "opensearch-changeset-bot[bot]"
 <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 09:27:26 +0000
Subject: [PATCH 2/6] Changeset file for PR #7771 created/updated

---
 changelogs/fragments/7771.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 changelogs/fragments/7771.yml

diff --git a/changelogs/fragments/7771.yml b/changelogs/fragments/7771.yml
new file mode 100644
index 000000000000..1c9eccd32254
--- /dev/null
+++ b/changelogs/fragments/7771.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Workspace] Refactor: workspace detail page header ([#7771](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7771))
\ No newline at end of file

From 367cd80d4a0590d42690732b2c50ed29208e3efe Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Wed, 21 Aug 2024 09:19:35 +0800
Subject: [PATCH 3/6] optimize workspace detail page header

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../workspace_detail/workspace_detail.tsx     | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
index 558879109107..f05cf48efaba 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
@@ -8,7 +8,6 @@ import {
   EuiPage,
   EuiSpacer,
   EuiPageBody,
-  EuiButtonIcon,
   EuiPageContent,
   EuiConfirmModal,
   EuiTabbedContent,
@@ -30,7 +29,11 @@ import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { SelectDataSourceDetailPanel } from './select_data_source_panel';
 import { WorkspaceBottomBar } from './workspace_bottom_bar';
-import { NavigationPublicPluginStart } from '../../../../navigation/public';
+import {
+  NavigationPublicPluginStart,
+  TopNavControlDescriptionData,
+  TopNavControlIconData,
+} from '../../../../navigation/public';
 
 export interface WorkspaceDetailProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -152,18 +155,6 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
       : []),
   ];
 
-  const deleteButton = (
-    <EuiButtonIcon
-      size="s"
-      display="base"
-      iconType="trash"
-      aria-label="Delete"
-      color="danger"
-      data-test-subj="workspace-detail-delete-button"
-      onClick={() => setDeletedWorkspace(currentWorkspace)}
-    />
-  );
-
   return (
     <>
       <EuiPage direction="column">
@@ -172,13 +163,23 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
             controls={[
               {
                 description: currentWorkspace.description,
-              },
+              } as TopNavControlDescriptionData,
             ]}
             setMountPoint={application.setAppDescriptionControls}
           />
         )}
         <HeaderControl
-          controls={[{ renderComponent: deleteButton }]}
+          controls={[
+            {
+              run: () => setDeletedWorkspace(currentWorkspace),
+              color: 'danger',
+              iconType: 'trash',
+              ariaLabel: 'Delete',
+              testId: 'workspace-detail-delete-button',
+              controlType: 'icon',
+              display: 'base',
+            } as TopNavControlIconData,
+          ]}
           setMountPoint={application.setAppRightControls}
         />
         <EuiSpacer />

From b082ec2305d0651cba784348205151413081bb9d Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Wed, 21 Aug 2024 14:22:19 +0800
Subject: [PATCH 4/6] optimize the code

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../__snapshots__/workspace_detail.test.tsx.snap   |  1 +
 .../workspace_detail/workspace_detail.test.tsx     | 10 +++++++++-
 .../workspace_initial/workspace_initial.tsx        | 14 +++++++++-----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
index b1036d4d80ed..ad4aa5e09bf7 100644
--- a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
   <div
     class="euiPage euiPage--paddingMedium euiPage--column euiPage--grow"
   >
+    workspace-detail-delete-button
     <div
       class="euiSpacer euiSpacer--l"
     />
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
index c4e4f4e19906..e7bf4e6de032 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
@@ -120,7 +120,9 @@ const WorkspaceDetailPage = (props: any) => {
       },
       dataSourceManagement,
       navigationUI: {
-        HeaderControl: () => null,
+        HeaderControl: ({ controls }) => {
+          return controls?.[0].testId ?? null;
+        },
       },
     },
   });
@@ -201,6 +203,12 @@ describe('WorkspaceDetail', () => {
     expect(document.querySelector('#dataSources')).toHaveClass('euiTab-isSelected');
   });
 
+  it('delete button will been shown at page header', async () => {
+    const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
+    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
+    expect(getByText('workspace-detail-delete-button')).toBeInTheDocument();
+  });
+
   it('click on Collaborators tab when permission control and dataSource disabled', async () => {
     const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
     const { queryByText } = render(
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
index 7d88210820f4..2ee59f962764 100644
--- a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
+++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
@@ -40,10 +40,14 @@ export const WorkspaceInitial = () => {
   const isDarkTheme = uiSettings.get('theme:darkMode');
   const backGroundUrl = isDarkTheme ? BackgroundDarkSVG : BackgroundLightSVG;
 
-  const noAdminToolTip = i18n.translate('workspace.initial.card.createWorkspace.toolTip', {
-    defaultMessage:
-      'Contact your administrator to create a workspace or to be added to an existing one.',
-  });
+  const noAdminToolTip = (
+    <>
+      {i18n.translate('workspace.initial.card.createWorkspace.toolTip', {
+        defaultMessage:
+          'Contact your administrator to create a workspace or to be added to an existing one.',
+      })}
+    </>
+  );
 
   const createButton = (
     <EuiSmallButton
@@ -69,7 +73,7 @@ export const WorkspaceInitial = () => {
             defaultMessage: 'Create a workspace',
           })}
           description={
-            <EuiToolTip content={isDashboardAdmin || noAdminToolTip}>
+            <EuiToolTip content={isDashboardAdmin ? <></> : noAdminToolTip}>
               <>
                 {i18n.translate('workspace.initial.card.createWorkspace.description', {
                   defaultMessage: 'Organize projects by use case in a collaborative workspace.',

From 82b077ca4d51cfd5b9d1ba4f0356e166cfcdc1af Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Wed, 21 Aug 2024 22:25:26 +0800
Subject: [PATCH 5/6] Add delete unit  test flow

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../workspace_detail.test.tsx.snap            |  1 -
 .../workspace_detail.test.tsx                 | 20 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
index ad4aa5e09bf7..b1036d4d80ed 100644
--- a/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`WorkspaceDetail render workspace detail page normally 1`] = `
   <div
     class="euiPage euiPage--paddingMedium euiPage--column euiPage--grow"
   >
-    workspace-detail-delete-button
     <div
       class="euiSpacer euiSpacer--l"
     />
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
index e7bf4e6de032..386782f731fb 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
@@ -121,7 +121,10 @@ const WorkspaceDetailPage = (props: any) => {
       dataSourceManagement,
       navigationUI: {
         HeaderControl: ({ controls }) => {
-          return controls?.[0].testId ?? null;
+          if (props.showDeleteModal && controls && controls[0] && controls[0].run) {
+            controls[0].run();
+          }
+          return null;
         },
       },
     },
@@ -205,8 +208,19 @@ describe('WorkspaceDetail', () => {
 
   it('delete button will been shown at page header', async () => {
     const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText } = render(WorkspaceDetailPage({ workspacesService: workspaceService }));
-    expect(getByText('workspace-detail-delete-button')).toBeInTheDocument();
+    const { getByText, getByTestId } = render(
+      WorkspaceDetailPage({
+        workspacesService: workspaceService,
+        showDeleteModal: true,
+      })
+    );
+    expect(getByText('Delete workspace')).toBeInTheDocument();
+    const input = getByTestId('delete-workspace-modal-input');
+    fireEvent.change(input, {
+      target: { value: 'delete' },
+    });
+    const confirmButton = getByTestId('delete-workspace-modal-confirm');
+    fireEvent.click(confirmButton);
   });
 
   it('click on Collaborators tab when permission control and dataSource disabled', async () => {

From 507489dfa70dbb919a0aad570f3f9a8e1d391c88 Mon Sep 17 00:00:00 2001
From: yubonluo <yubonluo@amazon.com>
Date: Thu, 22 Aug 2024 14:31:14 +0800
Subject: [PATCH 6/6] optimize the code

Signed-off-by: yubonluo <yubonluo@amazon.com>
---
 .../workspace_detail/workspace_detail.test.tsx     |  4 ++--
 .../workspace_detail/workspace_detail.tsx          |  4 +++-
 .../workspace_form/use_workspace_form.ts           |  2 +-
 .../workspace_initial/workspace_initial.tsx        | 14 +++++---------
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
index 386782f731fb..41344d975cfb 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx
@@ -121,8 +121,8 @@ const WorkspaceDetailPage = (props: any) => {
       dataSourceManagement,
       navigationUI: {
         HeaderControl: ({ controls }) => {
-          if (props.showDeleteModal && controls && controls[0] && controls[0].run) {
-            controls[0].run();
+          if (props.showDeleteModal) {
+            controls?.[0]?.run?.();
           }
           return null;
         },
diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
index f05cf48efaba..8f02be4e6909 100644
--- a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
+++ b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
@@ -174,7 +174,9 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
               run: () => setDeletedWorkspace(currentWorkspace),
               color: 'danger',
               iconType: 'trash',
-              ariaLabel: 'Delete',
+              ariaLabel: i18n.translate('workspace.detail.delete.button', {
+                defaultMessage: 'Delete',
+              }),
               testId: 'workspace-detail-delete-button',
               controlType: 'icon',
               display: 'base',
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
index 422161bea948..fb8bf40e497c 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -136,7 +136,7 @@ export const useWorkspaceForm = ({
   const handleResetForm = useCallback(() => {
     const resetValues = defaultValuesRef.current;
     setName(resetValues?.name ?? '');
-    setDescription(resetValues?.description);
+    setDescription(resetValues?.description ?? '');
     setColor(resetValues?.color);
     setFeatureConfigs(appendDefaultFeatureIds(resetValues?.features ?? []));
     setPermissionSettings(initialPermissionSettingsRef.current);
diff --git a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
index 2ee59f962764..96e91613ce07 100644
--- a/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
+++ b/src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx
@@ -40,14 +40,10 @@ export const WorkspaceInitial = () => {
   const isDarkTheme = uiSettings.get('theme:darkMode');
   const backGroundUrl = isDarkTheme ? BackgroundDarkSVG : BackgroundLightSVG;
 
-  const noAdminToolTip = (
-    <>
-      {i18n.translate('workspace.initial.card.createWorkspace.toolTip', {
-        defaultMessage:
-          'Contact your administrator to create a workspace or to be added to an existing one.',
-      })}
-    </>
-  );
+  const noAdminToolTip = i18n.translate('workspace.initial.card.createWorkspace.toolTip', {
+    defaultMessage:
+      'Contact your administrator to create a workspace or to be added to an existing one.',
+  });
 
   const createButton = (
     <EuiSmallButton
@@ -73,7 +69,7 @@ export const WorkspaceInitial = () => {
             defaultMessage: 'Create a workspace',
           })}
           description={
-            <EuiToolTip content={isDashboardAdmin ? <></> : noAdminToolTip}>
+            <EuiToolTip content={isDashboardAdmin ? null : noAdminToolTip}>
               <>
                 {i18n.translate('workspace.initial.card.createWorkspace.description', {
                   defaultMessage: 'Organize projects by use case in a collaborative workspace.',