[Workspace][Bug]Fix workspace detail page issues (opensearch-project#…

…8317) (opensearch-project#8387)

* Fix workspace detail page issues



* Changeset file for PR opensearch-project#8317 created/updated

* optimize the code



* optimzize the code



* optimize the code



* add callback function to onLeave



* optimize the code



* optimize the code



* navigate to workspace overview page in other tab



* optimize the code



* optimize the code



* optimize the code



* optimize the code



* optimize the code



* update assocation toast



* optimize the code



* add loding state for set default workspace button



* optimize the code



* optimize the comment



---------



(cherry picked from commit 948b3d6)

Signed-off-by: yubonluo <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/8317.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix workspace detail page issues ([#8317](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8317))

src/core/public/application/application_leave.tsx

@@ -37,8 +37,8 @@ import {
 } from './types';
 
 const appLeaveActionFactory: AppLeaveActionFactory = {
-  confirm(text: string, title?: string) {
-    return { type: AppLeaveActionType.confirm, text, title };
+  confirm(text: string, title?: string, callback?: () => void) {
+    return { type: AppLeaveActionType.confirm, text, title, callback };
   },
   default() {
     return { type: AppLeaveActionType.default };

src/core/public/application/application_service.tsx

@@ -517,6 +517,9 @@ export class ApplicationService {
       if (!confirmed) {
         return false;
       }
+      if (action?.callback) {
+        action.callback();
+      }
     }
     return true;
   }

src/core/public/application/types.ts

@@ -602,6 +602,7 @@ export interface AppLeaveConfirmAction {
   type: AppLeaveActionType.confirm;
   text: string;
   title?: string;
+  callback?: () => void;
 }
 
 /**
@@ -624,8 +625,9 @@ export interface AppLeaveActionFactory {
    *
    * @param text The text to display in the confirmation message
    * @param title (optional) title to display in the confirmation message
+   * @param callback (optional) function to execute in the confirmation message
    */
-  confirm(text: string, title?: string): AppLeaveConfirmAction;
+  confirm(text: string, title?: string, callback?: () => void): AppLeaveConfirmAction;
   /**
    * Returns a default action, resulting on executing the default behavior when
    * the user tries to leave an application

src/plugins/workspace/public/application.tsx

@@ -67,7 +67,7 @@ export const renderListApp = (
 };
 
 export const renderDetailApp = (
-  { element }: AppMountParameters,
+  { element, onAppLeave }: AppMountParameters,
   services: Services,
   props: WorkspaceDetailProps
 ) => {
@@ -76,7 +76,7 @@ export const renderDetailApp = (
       <Router>
         <Switch>
           <Route>
-            <WorkspaceDetailApp {...props} />
+            <WorkspaceDetailApp {...props} onAppLeave={onAppLeave} />
           </Route>
         </Switch>
       </Router>

src/plugins/workspace/public/components/home_get_start_card/use_case_card_title.tsx

@@ -51,8 +51,9 @@ export const UseCaseCardTitle = ({ filterWorkspaces, useCase, core }: UseCaseCar
 
   const iconButton = (
     <EuiButtonIcon
-      aria-label={i18n.translate(`workspace.getStartCard.${useCase.id}.icon.button`, {
-        defaultMessage: `show available workspace menu for ${useCase}`,
+      aria-label={i18n.translate(`workspace.getStartCard.{useCaseId}.icon.button`, {
+        defaultMessage: `show available workspace menu for {useCaseId}`,
+        values: { useCaseId: useCase.id },
       })}
       size="xs"
       iconType="arrowDown"

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

@@ -336,9 +336,9 @@ describe('SelectDataSourceDetailPanel', () => {
     });
     const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
     fireEvent.click(removeButton);
-    const confirButton = getByRole('button', { name: 'Remove association(s)' });
-    expect(confirButton).toBeInTheDocument();
-    fireEvent.click(confirButton);
+    const confirmButton = getByRole('button', { name: 'Remove 1 association' });
+    expect(confirmButton).toBeInTheDocument();
+    fireEvent.click(confirmButton);
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
     });
@@ -357,9 +357,9 @@ describe('SelectDataSourceDetailPanel', () => {
     });
     const removeButton = getByTestId('workspace-detail-dataSources-table-actions-remove');
     fireEvent.click(removeButton);
-    const confirButton = getByRole('button', { name: 'Remove association(s)' });
-    expect(confirButton).toBeInTheDocument();
-    fireEvent.click(confirButton);
+    const confirmButton = getByRole('button', { name: 'Remove 1 association' });
+    expect(confirmButton).toBeInTheDocument();
+    fireEvent.click(confirmButton);
     await waitFor(() => {
       expect(notificationToastsAddDanger).toHaveBeenCalled();
     });
@@ -381,9 +381,9 @@ describe('SelectDataSourceDetailPanel', () => {
 
     // Simulate clicking the checkbox
     fireEvent.click(checkbox);
-    expect(getByText('Remove 1 association(s)')).toBeInTheDocument();
-    fireEvent.click(getByText('Remove 1 association(s)'));
-    fireEvent.click(getByRole('button', { name: 'Remove association(s)' }));
+    expect(getByText('Remove 1 association')).toBeInTheDocument();
+    fireEvent.click(getByText('Remove 1 association'));
+    fireEvent.click(getByRole('button', { name: 'Remove 1 association' }));
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
     });

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

@@ -111,17 +111,21 @@ export const SelectDataSourceDetailPanel = ({
       if (result?.success) {
         notifications?.toasts.addSuccess({
           title: i18n.translate('workspace.detail.dataSources.assign.success', {
-            defaultMessage: 'Associate OpenSearch connections successfully',
+            defaultMessage:
+              '{numberOfAssignedDataSources, plural, one {The data source has} other {# data sources have}} been associated to the workspace.',
+            values: { numberOfAssignedDataSources: newAssignedDataSourceConnections.length },
           }),
         });
         setSelectedDataSourceConnections(savedDataSourceConnections);
       } else {
-        throw new Error(result?.error ? result?.error : 'Associate OpenSearch connections failed');
+        throw new Error(result?.error ? result?.error : 'Associate OpenSearch connections failed.');
       }
     } catch (error) {
       notifications?.toasts.addDanger({
         title: i18n.translate('workspace.detail.dataSources.assign.failed', {
-          defaultMessage: 'Failed to associate OpenSearch connections',
+          defaultMessage:
+            'Failed to associate {numberOfAssignedDataSources, plural, one {the data source} other {# data sources}} to the workspace.',
+          values: { numberOfAssignedDataSources: newAssignedDataSourceConnections.length },
         }),
         text: error instanceof Error ? error.message : JSON.stringify(error),
       });
@@ -159,19 +163,23 @@ export const SelectDataSourceDetailPanel = ({
         if (result?.success) {
           notifications?.toasts.addSuccess({
             title: i18n.translate('workspace.detail.dataSources.unassign.success', {
-              defaultMessage: 'The association has been removed',
+              defaultMessage:
+                '{numberOfUnAssignedDataSources, plural, one {# association has} other {# associations have}} been removed.',
+              values: { numberOfUnAssignedDataSources: unAssignedDataSources.length },
             }),
           });
           setSelectedDataSourceConnections(savedDataSourceConnections);
         } else {
           throw new Error(
-            result?.error ? result?.error : 'Remove associated OpenSearch connections failed'
+            result?.error ? result?.error : 'Remove associated OpenSearch connections failed.'
           );
         }
       } catch (error) {
         notifications?.toasts.addDanger({
           title: i18n.translate('workspace.detail.dataSources.unassign.failed', {
-            defaultMessage: 'Failed to remove associated OpenSearch connections',
+            defaultMessage:
+              'Failed to remove {numberOfUnAssignedDataSources, plural, one {# associated OpenSearch association} other {# associated OpenSearch associations}}.',
+            values: { numberOfUnAssignedDataSources: unAssignedDataSources.length },
           }),
           text: error instanceof Error ? error.message : JSON.stringify(error),
         });

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

@@ -15,6 +15,7 @@ import { WorkspaceDetail } from './workspace_detail';
 import { WorkspaceFormProvider, WorkspaceOperationType } from '../workspace_form';
 import { DataSourceConnectionType } from '../../../common/types';
 import * as utilsExports from '../../utils';
+import { IntlProvider } from 'react-intl';
 
 // all applications
 const PublicAPPInfoMap = new Map([
@@ -136,21 +137,24 @@ const WorkspaceDetailPage = (props: any) => {
   const registeredUseCases$ = createMockedRegisteredUseCases$();
 
   return (
-    <MemoryRouter>
-      <WorkspaceFormProvider
-        application={mockCoreStart.application}
-        savedObjects={mockCoreStart.savedObjects}
-        operationType={WorkspaceOperationType.Update}
-        permissionEnabled={true}
-        onSubmit={jest.fn()}
-        defaultValues={values}
-        availableUseCases={[]}
-      >
-        <Provider>
-          <WorkspaceDetail registeredUseCases$={registeredUseCases$} {...props} />
-        </Provider>
-      </WorkspaceFormProvider>
-    </MemoryRouter>
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <WorkspaceFormProvider
+          application={mockCoreStart.application}
+          savedObjects={mockCoreStart.savedObjects}
+          operationType={WorkspaceOperationType.Update}
+          permissionEnabled={true}
+          onSubmit={jest.fn()}
+          defaultValues={values}
+          availableUseCases={[]}
+          onAppLeave={jest.fn()}
+        >
+          <Provider>
+            <WorkspaceDetail registeredUseCases$={registeredUseCases$} {...props} />
+          </Provider>
+        </WorkspaceFormProvider>
+      </MemoryRouter>
+    </IntlProvider>
   );
 };
 
@@ -254,7 +258,7 @@ describe('WorkspaceDetail', () => {
     fireEvent.click(getByText('Cancel'));
     expect(queryByText('Any unsaved changes will be lost.')).toBeNull();
     fireEvent.click(getByText('Collaborators'));
-    const button = getByText('Navigate away');
+    const button = getByText('Confirm');
     fireEvent.click(button);
     expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
   });
@@ -276,7 +280,7 @@ describe('WorkspaceDetail', () => {
     fireEvent.click(getByText('+1 more'));
     expect(getByText('Any unsaved changes will be lost.')).toBeInTheDocument();
 
-    fireEvent.click(getByText('Navigate away'));
+    fireEvent.click(getByText('Confirm'));
     expect(document.querySelector('#collaborators')).toHaveClass('euiTab-isSelected');
   });