[Workspace] Refactor: workspace detail page header

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))

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',

src/plugins/workspace/public/components/workspace_detail/workspace_detail.test.tsx

@@ -119,6 +119,14 @@ const WorkspaceDetailPage = (props: any) => {
         },
       },
       dataSourceManagement,
+      navigationUI: {
+        HeaderControl: ({ controls }) => {
+          if (props.showDeleteModal) {
+            controls?.[0]?.run?.();
+          }
+          return null;
+        },
+      },
     },
   });
 
@@ -198,16 +206,15 @@ describe('WorkspaceDetail', () => {
     expect(document.querySelector('#dataSources')).toHaveClass('euiTab-isSelected');
   });
 
-  it('click on delete button will show delete modal', async () => {
+  it('delete button will been shown at page header', async () => {
     const workspaceService = createWorkspacesSetupContractMockWithValue(workspaceObject);
-    const { getByText, getByTestId, queryByText } = render(
-      WorkspaceDetailPage({ workspacesService: workspaceService })
+    const { getByText, getByTestId } = render(
+      WorkspaceDetailPage({
+        workspacesService: workspaceService,
+        showDeleteModal: true,
+      })
     );
-    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' },
@@ -281,13 +288,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();
   });

src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx

@@ -6,14 +6,9 @@
 import React, { useEffect, useState } from 'react';
 import {
   EuiPage,
-  EuiText,
   EuiSpacer,
-  EuiFlexItem,
   EuiPageBody,
-  EuiFlexGroup,
-  EuiPageHeader,
   EuiPageContent,
-  EuiSmallButton,
   EuiConfirmModal,
   EuiTabbedContent,
 } from '@elastic/eui';
@@ -34,17 +29,31 @@ 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,
+  TopNavControlDescriptionData,
+  TopNavControlIconData,
+} from '../../../../navigation/public';
 
 export interface WorkspaceDetailProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
 }
 
 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 {
@@ -146,25 +155,35 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
       : []),
   ];
 
-  const deleteButton = (
-    <EuiSmallButton
-      color="danger"
-      iconType="trash"
-      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,
+              } as TopNavControlDescriptionData,
+            ]}
+            setMountPoint={application.setAppDescriptionControls}
+          />
+        )}
+        <HeaderControl
+          controls={[
+            {
+              run: () => setDeletedWorkspace(currentWorkspace),
+              color: 'danger',
+              iconType: 'trash',
+              ariaLabel: i18n.translate('workspace.detail.delete.button', {
+                defaultMessage: 'Delete',
+              }),
+              testId: 'workspace-detail-delete-button',
+              controlType: 'icon',
+              display: 'base',
+            } as TopNavControlIconData,
+          ]}
+          setMountPoint={application.setAppRightControls}
+        />
         <EuiSpacer />
         <EuiPageContent>
           <WorkspaceDetailPanel

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);

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}>

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 {

src/plugins/workspace/public/components/workspace_initial/workspace_initial.tsx

@@ -69,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.',