[Workspace]Fix workspace detail UI bugs (#8188)

* Render — when description is empty Signed-off-by: Lin Wang <wonglam@amazon.com> * Type workspace name in workspace delete workspace modal Signed-off-by: Lin Wang <wonglam@amazon.com> * Update use case icon in workspace detail page Signed-off-by: Lin Wang <wonglam@amazon.com> * Update Owner to Owners Signed-off-by: Lin Wang <wonglam@amazon.com> * Add copy tooltip for copy workspace id Signed-off-by: Lin Wang <wonglam@amazon.com> * Update gap between tab header and content Signed-off-by: Lin Wang <wonglam@amazon.com> * Update hr margin in tab content Signed-off-by: Lin Wang <wonglam@amazon.com> * Move form error banner inside tab content Signed-off-by: Lin Wang <wonglam@amazon.com> * Reduce the gap between associate button Signed-off-by: Lin Wang <wonglam@amazon.com> * Make input readOnly instead of disabled Signed-off-by: Lin Wang <wonglam@amazon.com> * Update collaborator form group title and description Signed-off-by: Lin Wang <wonglam@amazon.com> * Changeset file for PR #8188 created/updated * Reduce delete button size avoid line-height update Signed-off-by: Lin Wang <wonglam@amazon.com> * Update "Remove data source(s)" to "Remove data association(s)" Signed-off-by: Lin Wang <wonglam@amazon.com> * Fix data source connection selected items not clear after canceled Signed-off-by: Lin Wang <wonglam@amazon.com> * Update toast message on remove association flow Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 096b568) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 18, 2024 · 44ec2da · 44ec2da
1 parent a3e4e9a
commit 44ec2da
Show file tree

Hide file tree

Showing 14 changed files with 372 additions and 301 deletions.
diff --git a/changelogs/fragments/8188.yml b/changelogs/fragments/8188.yml
@@ -0,0 +1,2 @@
+fix:
+- [Workspace]Fix workspace detail UI bugs ([#8188](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8188))
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
@@ -25,9 +25,11 @@ export interface DeleteWorkspaceModalProps {
   onClose: () => void;
   selectedWorkspaces?: WorkspaceAttribute[];
   onDeleteSuccess?: () => void;
+  typeTextToConfirm?: string;
 }
 
 export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
+  const typeTextToConfirm = props.typeTextToConfirm ?? 'delete';
   const [value, setValue] = useState('');
   const { onClose, selectedWorkspaces, onDeleteSuccess } = props;
   const {
@@ -94,10 +96,10 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
             </ul>
             <EuiSpacer />
             <EuiText color="subdued">
-              To confirm your action, type <b>delete</b>.
+              To confirm your action, type <b>{typeTextToConfirm}</b>.
             </EuiText>
             <EuiCompressedFieldText
-              placeholder="delete"
+              placeholder={typeTextToConfirm}
               fullWidth
               value={value}
               data-test-subj="delete-workspace-modal-input"
@@ -119,7 +121,7 @@ export function DeleteWorkspaceModal(props: DeleteWorkspaceModalProps) {
           onClick={deleteWorkspaces}
           fill
           color="danger"
-          disabled={value !== 'delete'}
+          disabled={value !== typeTextToConfirm}
         >
           Delete
         </EuiSmallButton>

diff --git a/...workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap b/...workspace/public/components/workspace_detail/__snapshots__/workspace_detail.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.test.tsx
@@ -323,7 +323,7 @@ describe('SelectDataSourceDetailPanel', () => {
     ).toBeNull();
   });
 
-  it('should success to remove data sources', async () => {
+  it('should success to remove data associations', async () => {
     const { getByText, getByTestId, getByRole } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
@@ -336,15 +336,15 @@ describe('SelectDataSourceDetailPanel', () => {
     });
     const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
     fireEvent.click(removeButton);
-    const confirButton = getByRole('button', { name: 'Remove data source(s)' });
+    const confirButton = getByRole('button', { name: 'Remove association(s)' });
     expect(confirButton).toBeInTheDocument();
     fireEvent.click(confirButton);
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
     });
   });
 
-  it('should fail to remove data sources', async () => {
+  it('should fail to remove data associations', async () => {
     const { getByText, getByTestId, getByRole } = render(
       selectDataSourceDetailPanel({
         ...defaultProps,
@@ -357,7 +357,7 @@ describe('SelectDataSourceDetailPanel', () => {
     });
     const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
     fireEvent.click(removeButton);
-    const confirButton = getByRole('button', { name: 'Remove data source(s)' });
+    const confirButton = getByRole('button', { name: 'Remove association(s)' });
     expect(confirButton).toBeInTheDocument();
     fireEvent.click(confirButton);
     await waitFor(() => {
@@ -383,7 +383,7 @@ describe('SelectDataSourceDetailPanel', () => {
     fireEvent.click(checkbox);
     expect(getByText('Remove 1 association(s)')).toBeInTheDocument();
     fireEvent.click(getByText('Remove 1 association(s)'));
-    fireEvent.click(getByRole('button', { name: 'Remove data source(s)' }));
+    fireEvent.click(getByRole('button', { name: 'Remove association(s)' }));
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
     });

diff --git a/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx b/src/plugins/workspace/public/components/workspace_detail/select_data_source_panel.tsx
@@ -159,7 +159,7 @@ export const SelectDataSourceDetailPanel = ({
         if (result?.success) {
           notifications?.toasts.addSuccess({
             title: i18n.translate('workspace.detail.dataSources.unassign.success', {
-              defaultMessage: 'Remove associated OpenSearch connections successfully',
+              defaultMessage: 'The association has been removed',
             }),
           });
           setSelectedDataSourceConnections(savedDataSourceConnections);
@@ -282,7 +282,7 @@ export const SelectDataSourceDetailPanel = ({
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
             <EuiFlexItem>
               <EuiButtonGroup
                 legend="dataSourceGroup"
@@ -296,7 +296,7 @@ export const SelectDataSourceDetailPanel = ({
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiHorizontalRule />
+      <EuiHorizontalRule margin="m" />
       {renderTableContent()}
       {isVisible && (
         <AssociationDataSourceModal

diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail.tsx
@@ -154,15 +154,18 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
     id,
     name: detailTitle,
     content: (
-      <WorkspaceDetailForm
-        application={application}
-        operationType={WorkspaceOperationType.Update}
-        savedObjects={savedObjects}
-        detailTab={id}
-        dataSourceManagement={dataSourceManagement}
-        availableUseCases={availableUseCases}
-        detailTitle={detailTitle}
-      />
+      <>
+        <EuiSpacer size="m" />
+        <WorkspaceDetailForm
+          application={application}
+          operationType={WorkspaceOperationType.Update}
+          savedObjects={savedObjects}
+          detailTab={id}
+          dataSourceManagement={dataSourceManagement}
+          availableUseCases={availableUseCases}
+          detailTitle={detailTitle}
+        />
+      </>
     ),
   });
 
@@ -174,14 +177,17 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
             id: DetailTab.DataSources,
             name: DetailTabTitles.dataSources,
             content: (
-              <SelectDataSourceDetailPanel
-                loading={!isDQCFilled}
-                savedObjects={savedObjects}
-                detailTitle={DetailTabTitles.dataSources}
-                isDashboardAdmin={isDashboardAdmin}
-                currentWorkspace={currentWorkspace}
-                chrome={chrome}
-              />
+              <>
+                <EuiSpacer size="m" />
+                <SelectDataSourceDetailPanel
+                  loading={!isDQCFilled}
+                  savedObjects={savedObjects}
+                  detailTitle={DetailTabTitles.dataSources}
+                  isDashboardAdmin={isDashboardAdmin}
+                  currentWorkspace={currentWorkspace}
+                  chrome={chrome}
+                />
+              </>
             ),
           },
         ]
@@ -232,7 +238,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
             dateFormat={uiSettings.get('dateFormat')}
           />
         </EuiPageContent>
-        <EuiSpacer />
+        <EuiSpacer size="m" />
         <EuiPageBody>
           <EuiTabbedContent
             data-test-subj="workspaceTabs"
@@ -245,6 +251,7 @@ export const WorkspaceDetail = (props: WorkspaceDetailProps) => {
         {deletedWorkspace && (
           <DeleteWorkspaceModal
             selectedWorkspaces={[deletedWorkspace]}
+            typeTextToConfirm={deletedWorkspace.name}
             onClose={() => setDeletedWorkspace(null)}
             onDeleteSuccess={() => {
               window.setTimeout(() => {

diff --git a/...s/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx b/...s/workspace/public/components/workspace_detail/workspace_detail_connection_table.test.tsx
@@ -134,7 +134,7 @@ describe('WorkspaceDetailConnectionTable', () => {
       fireEvent.click(checkbox[0]);
       expect(getByText('Remove 2 association(s)')).toBeInTheDocument();
       fireEvent.click(getByText('Remove 2 association(s)'));
-      fireEvent.click(getByRole('button', { name: 'Remove data source(s)' }));
+      fireEvent.click(getByRole('button', { name: 'Remove association(s)' }));
       expect(handleUnassignDataSources).toHaveBeenCalled();
     });
 
@@ -154,7 +154,7 @@ describe('WorkspaceDetailConnectionTable', () => {
       fireEvent.click(buttons[0]);
       fireEvent.click(getByRole('button', { name: 'Cancel' }));
       fireEvent.click(buttons[0]);
-      fireEvent.click(getByRole('button', { name: 'Remove data source(s)' }));
+      fireEvent.click(getByRole('button', { name: 'Remove association(s)' }));
       expect(handleUnassignDataSources).toHaveBeenCalled();
     });
 

diff --git a/...lugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx b/...lugins/workspace/public/components/workspace_detail/workspace_detail_connection_table.tsx
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { EuiConfirmModal, EuiSearchBarProps, EuiSmallButton } from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { EuiConfirmModal, EuiInMemoryTable, EuiSearchBarProps, EuiSmallButton } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
 import { AssociationDataSourceModalMode } from '../../../common/constants';
@@ -25,6 +25,7 @@ export const WorkspaceDetailConnectionTable = ({
 }: WorkspaceDetailConnectionTableProps) => {
   const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
   const [modalVisible, setModalVisible] = useState(false);
+  const tableRef = useRef<EuiInMemoryTable<DataSourceConnection>>();
 
   useEffect(() => {
     // Reset selected items when connectionType changes
@@ -98,17 +99,18 @@ export const WorkspaceDetailConnectionTable = ({
           }}
           /* Unmount table after connection type */
           key={connectionType}
+          ref={tableRef}
         />
       }
       {modalVisible && (
         <EuiConfirmModal
           data-test-subj="workspaceForm-cancelModal"
           title={i18n.translate('workspace.detail.dataSources.modal.title', {
-            defaultMessage: 'Remove data source(s)',
+            defaultMessage: 'Remove association(s)',
           })}
           onCancel={() => {
             setModalVisible(false);
-            setSelectedItems([]);
+            tableRef.current?.setSelection([]);
           }}
           onConfirm={() => {
             setModalVisible(false);
@@ -118,7 +120,7 @@ export const WorkspaceDetailConnectionTable = ({
             defaultMessage: 'Cancel',
           })}
           confirmButtonText={i18n.translate('workspace.detail.dataSources.Modal.confirmButton', {
-            defaultMessage: 'Remove data source(s)',
+            defaultMessage: 'Remove association(s)',
           })}
           buttonColor="danger"
           defaultFocusedButton="confirm"

diff --git a/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx b/src/plugins/workspace/public/components/workspace_detail/workspace_detail_panel.tsx
@@ -12,7 +12,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiButtonIcon,
-  EuiColorPickerSwatch,
+  EuiIcon,
 } from '@elastic/eui';
 import moment from 'moment';
 import { i18n } from '@osd/i18n';
@@ -24,8 +24,8 @@ const detailUseCase = i18n.translate('workspace.detail.useCase', {
   defaultMessage: 'Use case',
 });
 
-const detailOwner = i18n.translate('workspace.detail.owner', {
-  defaultMessage: 'Owner',
+const detailOwners = i18n.translate('workspace.detail.owners', {
+  defaultMessage: 'Owners',
 });
 
 const detailLastUpdated = i18n.translate('workspace.detail.lastUpdated', {
@@ -73,18 +73,21 @@ export const WorkspaceDetailPanel = ({
       <EuiFlexItem>
         <EuiText>
           <h4>{detailUseCase}</h4>
-          <p style={{ display: 'flex', alignItems: 'center' }}>
-            <EuiColorPickerSwatch
-              style={{ width: '14px', height: '14px', marginRight: '8px' }}
-              color={currentWorkspace.color}
-            />
-            {currentUseCase?.title}
-          </p>
+          {currentUseCase && (
+            <EuiFlexGroup gutterSize="xs" alignItems="center">
+              {currentUseCase.icon && (
+                <EuiFlexItem grow={false}>
+                  <EuiIcon type={currentUseCase.icon} color={currentWorkspace.color} />
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem>{currentUseCase.title}</EuiFlexItem>
+            </EuiFlexGroup>
+          )}
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiText>
-          <h4>{detailOwner}</h4>
+          <h4>{detailOwners}</h4>
           <p style={{ display: 'inline-flex' }}>
             {owners?.at(0)}&nbsp;&nbsp;
             {owners && owners.length > 1 && (
@@ -110,7 +113,12 @@ export const WorkspaceDetailPanel = ({
           <h4>{detailID}</h4>
           <p>
             {currentWorkspace.id}
-            <EuiCopy textToCopy={currentWorkspace.id}>
+            <EuiCopy
+              beforeMessage={i18n.translate('workspace.detail.workspaceIdCopy.beforeMessage', {
+                defaultMessage: 'Copy',
+              })}
+              textToCopy={currentWorkspace.id}
+            >
               {(copy) => (
                 <EuiButtonIcon
                   aria-label="copy"

diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts
@@ -41,7 +41,7 @@ export const selectDataSourceTitle = i18n.translate('workspace.form.selectDataSo
 });
 
 export const usersAndPermissionsTitle = i18n.translate('workspace.form.usersAndPermissions.title', {
-  defaultMessage: 'Workspaces access',
+  defaultMessage: 'Workspace access',
 });
 
 export const usersAndPermissionsCreatePageTitle = i18n.translate(