remove render component button and add workspace info in index patter…

…n header

Signed-off-by: tygao <[email protected]>

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,9 @@ 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 } from 'react-use';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
 import {
   reactRouterNavigate,
   useOpenSearchDashboards,
@@ -105,6 +107,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
     getMlCardState,
     data,
     dataSourceEnabled,
+    workspaces,
   } = useOpenSearchDashboards<IndexPatternManagmentContext>().services;
 
   const [indexPatterns, setIndexPatterns] = useState<IndexPatternTableItem[]>([]);
@@ -115,11 +118,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 +224,6 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
     }),
   ];
 
-  const showActionsInHeader = uiSettings.get('home:useNewHomePage');
-
   const createButton = (() => {
     if (!canSave) return null;
 
@@ -233,7 +236,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
       </CreateButton>
     );
 
-    return showActionsInHeader ? (
+    return useUpdatedUX ? (
       <HeaderControl
         controls={[{ renderComponent: button }]}
         setMountPoint={application.setAppRightControls}
@@ -243,13 +246,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 +303,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/workspace/public/components/workspace_list/index.tsx

@@ -166,21 +166,19 @@ export const WorkspaceList = ({ registeredUseCases$ }: WorkspaceListProps) => {
   }, [isDashboardAdmin, workspaceCreateUrl]);
 
   const renderCreateWorkspaceButton = () => {
-    const button = (
-      <EuiSmallButton
-        href={workspaceCreateUrl}
-        key="create_workspace"
-        data-test-subj="workspaceList-create-workspace"
-        iconType="plus"
-      >
-        {i18n.translate('workspace.list.buttons.createWorkspace', {
-          defaultMessage: 'Create workspace',
-        })}
-      </EuiSmallButton>
-    );
     return (
       <HeaderControl
-        controls={[{ renderComponent: button }]}
+        controls={[
+          {
+            controlType: 'button',
+            label: i18n.translate('workspace.list.buttons.createWorkspace', {
+              defaultMessage: 'Create workspace',
+            }),
+            testId: 'workspaceList-create-workspace',
+            iconType: 'plus',
+            href: workspaceCreateUrl,
+          },
+        ]}
         setMountPoint={application?.setAppRightControls}
       />
     );