[Backport 2.x] refactor: update header description for data source management when in workspace

changelogs/fragments/7916.yml

@@ -0,0 +1,2 @@
+refactor:
+- Update header for data source management when in workspace ([#7916](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7916))

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx

@@ -14,18 +14,19 @@ import {
   EuiPageHeader,
   EuiPanel,
   EuiButtonGroup,
-  EuiText,
-  EuiLink,
 } from '@elastic/eui';
 import { TopNavControlButtonData, TopNavControlComponentData } from 'src/plugins/navigation/public';
-import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
 import { DataSourceHeader } from './data_source_page_header';
 import { DataSourceTableWithRouter } from '../data_source_table/data_source_table';
 import { ManageDirectQueryDataConnectionsTable } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
 import { CreateButton } from '../create_button';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getListBreadcrumbs } from '../breadcrumbs';
 import { DataSourceManagementContext } from '../../types';
+import { TopNavControlDescriptionData } from '../../../../navigation/public';
 
 interface DataSourceHomePanelProps extends RouteComponentProps {
   featureFlagStatus: boolean;
@@ -44,6 +45,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     savedObjects,
     uiSettings,
     application,
+    workspaces,
     docLinks,
     navigation,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
@@ -54,6 +56,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   const [selectedTabId, setSelectedTabId] = useState(defaultTabId);
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
   const { HeaderControl } = navigation.ui;
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
 
   useEffect(() => {
     setBreadcrumbs(getListBreadcrumbs());
@@ -63,27 +66,6 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     setSelectedTabId(id);
   };
 
-  const description = [
-    {
-      renderComponent: (
-        <EuiText size="s" color="subdued">
-          <FormattedMessage
-            id="dataSourcesManagement.dataSourcesTable.description"
-            defaultMessage="Create and manage data source connections. "
-          />
-          <EuiLink
-            external={true}
-            href={docLinks.links.opensearchDashboards.dataSource.guide}
-            target="_blank"
-            className="external-link-inline-block"
-          >
-            Learn more
-          </EuiLink>
-        </EuiText>
-      ),
-    },
-  ];
-
   const createDataSourceButton = [
     {
       id: 'Create data source',
@@ -156,7 +138,42 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
           )}
           <HeaderControl
             setMountPoint={application.setAppDescriptionControls}
-            controls={description}
+            controls={[
+              currentWorkspace?.name
+                ? {
+                    description: i18n.translate(
+                      'dataSourcesManagement.dataSourcesTable.workspace.description',
+                      {
+                        defaultMessage: 'View associated data sources for {name}.',
+                        values: {
+                          name: currentWorkspace.name,
+                        },
+                      }
+                    ),
+                  }
+                : ({
+                    description: i18n.translate(
+                      'dataSourcesManagement.dataSourcesTable.description',
+                      {
+                        defaultMessage: 'Create and manage data source connections.',
+                      }
+                    ),
+                    links: [
+                      {
+                        href: docLinks.links.opensearchDashboards.dataSource.guide,
+                        controlType: 'link',
+                        target: '_blank',
+                        className: 'external-link-inline-block',
+                        label: i18n.translate(
+                          'dataSourcesManagement.dataSourcesTable.documentation',
+                          {
+                            defaultMessage: 'Learn more',
+                          }
+                        ),
+                      },
+                    ],
+                  } as TopNavControlDescriptionData),
+            ]}
           />
         </>
       )}

src/plugins/data_source_management/public/components/direct_query_data_sources_components/acceleration_management/acceleration_table.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { mount, configure } from 'enzyme';
+import { mount, configure, render } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { AccelerationTable } from './acceleration_table';
@@ -180,18 +180,14 @@ describe('AccelerationTable Component', () => {
     expect(wrapper!.text()).toContain(expectedLocalizedTime);
   });
 
-  it('matches snapshot', async () => {
-    let wrapper: ReactWrapper;
-    await act(async () => {
-      wrapper = mount(
+  it('render result matches snapshot', async () => {
+    expect(
+      render(
         <AccelerationTable
           dataSourceName="testDataSource"
           cacheLoadingHooks={mockCacheLoadingHooks}
         />
-      );
-    });
-    wrapper!.update();
-
-    expect(wrapper!.html()).toMatchSnapshot();
+      )
+    ).toMatchSnapshot();
   });
 });

src/plugins/data_source_management/public/management_app/mount_management_section.tsx

@@ -36,7 +36,17 @@ export async function mountManagementSection(
   featureFlagStatus: boolean
 ) {
   const [
-    { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
+    {
+      chrome,
+      application,
+      savedObjects,
+      uiSettings,
+      notifications,
+      overlays,
+      http,
+      docLinks,
+      workspaces,
+    },
     { navigation },
   ] = await getStartServices();
 
@@ -52,6 +62,7 @@ export async function mountManagementSection(
     navigation,
     setBreadcrumbs: params.setBreadcrumbs,
     authenticationMethodRegistry: authMethodsRegistry,
+    workspaces,
   };
 
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;

src/plugins/data_source_management/public/types.ts

@@ -12,6 +12,7 @@ import {
   NotificationsStart,
   DocLinksStart,
   HttpSetup,
+  WorkspacesStart,
 } from 'src/core/public';
 import { ManagementAppMountParams } from 'src/plugins/management/public';
 import { i18n } from '@osd/i18n';
@@ -37,6 +38,7 @@ export interface DataSourceManagementContext {
   navigation: NavigationPublicPluginStart;
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
   authenticationMethodRegistry: AuthenticationMethodRegistry;
+  workspaces: WorkspacesStart;
 }
 
 export interface DataSourceTableItem {