refactor: add workspace info in index pattern and asset header and update workspace header

changelogs/fragments/7859.yml

@@ -0,0 +1,2 @@
+refactor:
+- Add workspace info in index pattern and asset header and update workspace header ([#7859](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7859))

src/plugins/index_pattern_management/public/components/breadcrumbs.ts

@@ -31,11 +31,11 @@
 import { i18n } from '@osd/i18n';
 import { IndexPattern } from '../../../data/public';
 
-export function getListBreadcrumbs() {
+export function getListBreadcrumbs(currentWorkspaceName?: string) {
   return [
     {
       text: i18n.translate('indexPatternManagement.indexPatterns.listBreadcrumb', {
-        defaultMessage: 'Index patterns',
+        defaultMessage: currentWorkspaceName ? 'Workspace index patterns' : 'Index patterns',
       }),
       href: `/`,
     },

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx

@@ -43,7 +43,7 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { DocLinksStart } from 'src/core/public';
 import { StepIndexPattern } from './components/step_index_pattern';
 import { StepTimeField } from './components/step_time_field';
-import { Header, Description } from './components/header';
+import { Header } from './components/header';
 import { LoadingState } from './components/loading_state';
 
 import { context as contextType } from '../../../../opensearch_dashboards_react/public';

src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx

@@ -37,30 +37,21 @@ import { EuiPageContent, EuiSpacer, EuiText, EuiFlexItem, EuiFlexGroup } from '@
 import { EuiDescriptionListTitle } from '@elastic/eui';
 import { EuiDescriptionListDescription, EuiDescriptionList } from '@elastic/eui';
 import { EuiLink } from '@elastic/eui';
-import { useMount } from 'react-use';
-import { getListBreadcrumbs } from '../../breadcrumbs';
 import { IndexPatternCreationOption } from '../../types';
 import { CreateButton } from '../../create_button';
 import { Illustration } from './assets/index_pattern_illustration';
-import { ManagementAppMountParams } from '../../../../../management/public';
 
 interface Props {
   canSave: boolean;
   creationOptions: IndexPatternCreationOption[];
   docLinksIndexPatternIntro: string;
-  setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
 }
 
 export const EmptyIndexPatternPrompt = ({
   canSave,
   creationOptions,
   docLinksIndexPatternIntro,
-  setBreadcrumbs,
 }: Props) => {
-  useMount(() => {
-    setBreadcrumbs(getListBreadcrumbs());
-  });
-
   return (
     <EuiPageContent
       data-test-subj="emptyIndexPatternPrompt"

src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx

@@ -43,7 +43,8 @@ import { FormattedMessage } from '@osd/i18n/react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import React, { useState, useEffect } from 'react';
 import { i18n } from '@osd/i18n';
-import { useEffectOnce, useMount } from 'react-use';
+import { useEffectOnce, useObservable } from 'react-use';
+import { of } from 'rxjs';
 import {
   reactRouterNavigate,
   useOpenSearchDashboards,
@@ -105,6 +106,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
     getMlCardState,
     data,
     dataSourceEnabled,
+    workspaces,
   } = useOpenSearchDashboards<IndexPatternManagmentContext>().services;
 
   const [indexPatterns, setIndexPatterns] = useState<IndexPatternTableItem[]>([]);
@@ -115,11 +117,13 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
   const [isLoadingIndexPatterns, setIsLoadingIndexPatterns] = useState<boolean>(true);
   const [isColumnDataLoaded, setIsColumnDataLoaded] = useState(false);
 
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
   const { columns: columnRegistry } = indexPatternManagementStart;
 
-  useMount(() => {
-    setBreadcrumbs(getListBreadcrumbs());
-  });
+  const useUpdatedUX = uiSettings.get('home:useNewHomePage');
+  useEffect(() => {
+    setBreadcrumbs(getListBreadcrumbs(useUpdatedUX ? currentWorkspace?.name : undefined));
+  }, [chrome, currentWorkspace, setBreadcrumbs, useUpdatedUX]);
 
   useEffect(() => {
     (async function () {
@@ -219,8 +223,6 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
     }),
   ];
 
-  const showActionsInHeader = uiSettings.get('home:useNewHomePage');
-
   const createButton = (() => {
     if (!canSave) return null;
 
@@ -233,7 +235,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
       </CreateButton>
     );
 
-    return showActionsInHeader ? (
+    return useUpdatedUX ? (
       <HeaderControl
         controls={[{ renderComponent: button }]}
         setMountPoint={application.setAppRightControls}
@@ -243,13 +245,22 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
     );
   })();
 
-  const description = ((
-    <FormattedMessage
-      id="indexPatternManagement.indexPatternTable.indexPatternExplanation"
-      defaultMessage="Create and manage the index patterns that help you retrieve your data from OpenSearch."
-    />
-  ) as unknown) as string;
-  const pageTitleAndDescription = showActionsInHeader ? (
+  const description = i18n.translate(
+    'indexPatternManagement.indexPatternTable.indexPatternExplanation',
+    currentWorkspace
+      ? {
+          defaultMessage:
+            'Create and manage the index patterns that help you retrieve your data from OpenSearch for {name} workspace.',
+          values: {
+            name: currentWorkspace.name,
+          },
+        }
+      : {
+          defaultMessage:
+            'Create and manage the index patterns that help you retrieve your data from OpenSearch.',
+        }
+  );
+  const pageTitleAndDescription = useUpdatedUX ? (
     <HeaderControl
       controls={[{ description }]}
       setMountPoint={application.setAppDescriptionControls}
@@ -291,7 +302,6 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
           canSave={canSave}
           creationOptions={creationOptions}
           docLinksIndexPatternIntro={docLinks.links.noDocumentation.indexPatterns.introduction}
-          setBreadcrumbs={setBreadcrumbs}
         />
       );
     }

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

@@ -66,7 +66,17 @@ export async function mountManagementSection(
   dataSource?: DataSourcePluginSetup
 ) {
   const [
-    { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
+    {
+      chrome,
+      application,
+      savedObjects,
+      uiSettings,
+      notifications,
+      overlays,
+      http,
+      docLinks,
+      workspaces,
+    },
     { data, navigation },
     indexPatternManagementStart,
   ] = await getStartServices();
@@ -94,6 +104,7 @@ export async function mountManagementSection(
     getMlCardState,
     dataSourceEnabled,
     hideLocalCluster,
+    workspaces,
   };
 
   const showActionsInHeader = uiSettings.get('home:useNewHomePage');

src/plugins/index_pattern_management/public/types.ts

@@ -38,6 +38,7 @@ import {
   DocLinksStart,
   HttpSetup,
   SavedObjectReference,
+  WorkspacesStart,
 } from 'src/core/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
@@ -62,6 +63,7 @@ export interface IndexPatternManagmentContext {
   getMlCardState: () => MlCardState;
   dataSourceEnabled: boolean;
   hideLocalCluster: boolean;
+  workspaces: WorkspacesStart;
 }
 
 export type IndexPatternManagmentContextValue = OpenSearchDashboardsReactContextValue<

src/plugins/management/public/components/feature_cards/feature_cards.tsx

@@ -63,15 +63,15 @@ export const FeatureCards = ({
         ]}
         setMountPoint={setAppDescriptionControls}
       />
-      <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+      <EuiPageContent hasShadow={false} hasBorder={false} color="transparent" paddingSize="m">
         {groupedCardForDisplay.map((group) => (
           <div key={group.category?.id}>
             {group.category && (
               <EuiTitle>
                 <h3>{group.category.label}</h3>
               </EuiTitle>
             )}
-            <EuiSpacer />
+            <EuiSpacer size="m" />
             {group.navLinks.map((row, rowIndex) => {
               return (
                 <EuiFlexGroup data-test-subj={`landingPageRow_${rowIndex}`} key={rowIndex}>