Migrate breadcrumbs into the page header component for the top level …

…of all pages Signed-off-by: Derek Ho <dxho@amazon.com>
opensearch-project · Aug 9, 2024 · 44983ad · 44983ad
1 parent 132001e
commit 44983ad
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 71 deletions.
diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
@@ -41,6 +41,7 @@ import { ResourceType } from '../../../common';
 import { buildHashUrl, buildUrl } from './utils/url-builder';
 import { CrossPageToast } from './cross-page-toast';
 import { getDataSourceFromUrl, LocalCluster } from '../../utils/datasource-utils';
+import { getBreadcrumbs } from './utils/resource-utils';
 
 const LANDING_PAGE_URL = '/getstarted';
 
@@ -107,42 +108,6 @@ export const allNavPanelUrls = (multitenancyEnabled: boolean) =>
       ...(multitenancyEnabled ? [buildUrl(ResourceType.tenantsConfigureTab)] : []),
     ]);
 
-export function getBreadcrumbs(
-  includeSecurityBase: boolean,
-  resourceType?: ResourceType,
-  pageTitle?: string,
-  subAction?: string
-): EuiBreadcrumb[] {
-  const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
-    ? [
-        {
-          text: 'Security',
-          href: buildHashUrl(),
-        },
-      ]
-    : [];
-
-  if (resourceType) {
-    breadcrumbs.push({
-      text: ROUTE_MAP[resourceType].name,
-      href: buildHashUrl(resourceType),
-    });
-  }
-
-  if (pageTitle) {
-    breadcrumbs.push({
-      text: pageTitle,
-    });
-  }
-
-  if (subAction) {
-    breadcrumbs.push({
-      text: subAction,
-    });
-  }
-  return breadcrumbs;
-}
-
 function decodeParams(params: { [k: string]: string }): any {
   return Object.keys(params).reduce((obj: { [k: string]: string }, key: string) => {
     obj[key] = decodeURIComponent(params[key]);
@@ -223,14 +188,12 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.roles.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.roles);
                   return <RoleList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auth.href}
                 render={() => {
-                  //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auth);
                   return <AuthView {...props} />;
                 }}
               />
@@ -250,58 +213,43 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.users.href}
                 render={() => {
-                  //    setGlobalBreadcrumbs(includeSecurityBase, ResourceType.users);
                   return <UserList {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_GENERAL_SETTINGS_EDIT}
                 render={() => {
-                  // setGlobalBreadcrumbs(
-                  //   includeSecurityBase,
-                  //   ResourceType.auditLogging,
-                  //   'General settings'
-                  // );
                   return <AuditLoggingEditSettings setting={'general'} {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT}
                 render={() => {
-                  // setGlobalBreadcrumbs(
-                  //   includeSecurityBase,
-                  //   ResourceType.auditLogging,
-                  //   'Compliance settings'
-                  // );
                   return <AuditLoggingEditSettings setting={'compliance'} {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auditLogging.href + '/:fromType?'}
                 render={(match) => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auditLogging);
                   return <AuditLogging {...{ ...props, ...match.match.params }} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.permissions.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.permissions);
                   return <PermissionList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.getStarted.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase);
                   return <GetStarted {...props} />;
                 }}
               />
               {multitenancyEnabled && (
                 <Route
                   path={ROUTE_MAP.tenants.href}
                   render={() => {
-                    // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Manage'} {...props} />;
                   }}
                 />
@@ -310,7 +258,6 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenantsConfigureTab.href}
                   render={() => {
-                    //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Configure'} {...props} />;
                   }}
                 />

diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
@@ -73,13 +73,15 @@ export const HeaderDescription = React.memo((props: DescriptionProps) => {
 export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
   const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
   const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
+  flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
+    !props.coreStart.uiSettings.get('home:useNewHomePage'),
+    props.resourceType,
+    props.pageTitle,
+    props.subAction,
+    props.count
+  );
   if (useNewUx) {
-    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
-      !props.coreStart.uiSettings.get('home:useNewHomePage'),
-      props.resourceType,
-      props.pageTitle,
-      props.subAction
-    );
+
     return (
       <>
         {props.descriptionControls ? (
@@ -97,12 +99,6 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
       </>
     );
   } else {
-    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
-      !props.coreStart.uiSettings.get('home:useNewHomePage'),
-      props.resourceType,
-      props.pageTitle,
-      props.subAction
-    );
     return props.fallBackComponent;
   }
 };
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
@@ -25,6 +25,7 @@ export interface HeaderProps {
   resourceType?: ResourceType;
   pageTitle?: string;
   subAction?: string;
+  count?: number;
 }
 
 export interface ControlProps {

diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -411,6 +411,7 @@ export function PermissionList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.permissions}
+        count={permissionList.length}
       />
       {loading ? (
         <EuiLoadingContent />

diff --git a/...pps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/...pps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -132,6 +132,7 @@ exports[`Permission list page  AccessError component should load access error co
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {

diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
@@ -315,6 +315,7 @@ export function RoleList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.roles}
+        count={roleData.length}
       />
       {loading ? (
         <EuiLoadingContent />

diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -66,10 +66,9 @@ import { PageId } from '../../types';
 import { useDeleteConfirmState } from '../../utils/delete-confirm-modal-utils';
 import { showTableStatusMessage } from '../../utils/loading-spinner-utils';
 import { useContextMenuState } from '../../utils/context-menu';
-import { generateResourceName } from '../../utils/resource-utils';
+import { generateResourceName, getBreadcrumbs } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { TenantList } from './tenant-list';
-import { getBreadcrumbs } from '../../app-router';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { buildUrl } from '../../utils/url-builder';
 import { CrossPageToast } from '../../cross-page-toast';

diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`Role list AccessError component should load access error component 1`]
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {

diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -81,6 +81,7 @@ exports[`User list AccessError component should load access error component 1`]
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {

diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
@@ -257,6 +257,7 @@ export function UserList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.users}
+        count={userData.length}
       />
       {loading ? (
         <EuiLoadingContent />

diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
@@ -14,7 +14,8 @@
  */
 
 import { EuiBreadcrumb } from '@elastic/eui';
-import { ResourceType } from 'plugins/security-dashboards-plugin/common';
+import { ResourceType } from '../../../../common';
+import { i18n } from '@osd/i18n';
 import { buildHashUrl } from './url-builder';
 import { ROUTE_MAP } from '../app-router';
 
@@ -37,7 +38,8 @@ export function getBreadcrumbs(
   includeSecurityBase: boolean,
   resourceType?: ResourceType,
   pageTitle?: string,
-  subAction?: string
+  subAction?: string,
+  count?: number,
 ): EuiBreadcrumb[] {
   const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
     ? [
@@ -56,7 +58,7 @@ export function getBreadcrumbs(
       });
     } else {
       breadcrumbs.push({
-        text: ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
+        text: count ? `${ROUTE_MAP[resourceType].displayNameWithoutSecurityBase} (${count})` : ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
         href: buildHashUrl(resourceType),
       });
     }