[Security Solution] Use Dashboard name in the page title (#155381)

## Summary issue: #152955 follow up of #153040 These changes make the dashboard name to be displayed in the page title, as requested by @paulewing ## Screenshots ![example](https://user-images.githubusercontent.com/17747913/233359294-a3055aa5-5e2e-4412-93a6-bffd54d93840.png) ![not_found](https://user-images.githubusercontent.com/17747913/233359333-b0175225-99d1-41f3-b3e4-aed630531786.png)
elastic · Apr 21, 2023 · e9cc7a8 · e9cc7a8
1 parent ccb486c
commit e9cc7a8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 25 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1058,6 +1058,7 @@ packages/kbn-yarn-lock-validator @elastic/kibana-operations
 /x-pack/plugins/security_solution/public/cases @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/explore @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/public/overview @elastic/security-threat-hunting-explore
+/x-pack/plugins/security_solution/public/dashboards @elastic/security-threat-hunting-explore
 
 /x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts @elastic/security-threat-hunting-explore
 /x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/matrix_histogram @elastic/security-threat-hunting-explore

diff --git a/x-pack/plugins/security_solution/public/dashboards/pages/details/index.tsx b/x-pack/plugins/security_solution/public/dashboards/pages/details/index.tsx
@@ -12,7 +12,8 @@ import type { DashboardAPI } from '@kbn/dashboard-plugin/public';
 import type { DashboardCapabilities } from '@kbn/dashboard-plugin/common/types';
 import { useParams } from 'react-router-dom';
 
-import { isEmpty, pick } from 'lodash/fp';
+import { pick } from 'lodash/fp';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { SecurityPageName } from '../../../../common/constants';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import { useCapabilities } from '../../../common/lib/kibana';
@@ -25,12 +26,12 @@ import { FiltersGlobal } from '../../../common/components/filters_global';
 import { InputsModelId } from '../../../common/store/inputs/constants';
 import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { HeaderPage } from '../../../common/components/header_page';
-import { DASHBOARD_PAGE_TITLE } from '../translations';
+import { DASHBOARD_NOT_FOUND_TITLE } from './translations';
 import { inputsSelectors } from '../../../common/store';
 import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import { EditDashboardButton } from '../../components/edit_dashboard_button';
 
-type DashboardDetails = Record<string, string | undefined>;
+type DashboardDetails = Record<string, string>;
 
 const DashboardViewComponent: React.FC = () => {
   const { fromStr, toStr, from, to } = useDeepEqualSelector((state) =>
@@ -51,13 +52,20 @@ const DashboardViewComponent: React.FC = () => {
   const [currentState, setCurrentState] = useState<DashboardViewPromptState | null>(
     canReadDashboard ? null : DashboardViewPromptState.NoReadPermission
   );
-  const [dashboardDetails, setDashboardDetails] = useState<DashboardDetails>();
+  const [dashboardDetails, setDashboardDetails] = useState<DashboardDetails | undefined>();
   const onDashboardContainerLoaded = useCallback((dashboard: DashboardAPI) => {
-    const dashboardTitle = dashboard?.getTitle().trim();
-    setDashboardDetails({ dashboardTitle });
+    if (dashboard) {
+      const title = dashboard.getTitle().trim();
+      if (title) {
+        setDashboardDetails({ title });
+      } else {
+        setDashboardDetails({ title: DASHBOARD_NOT_FOUND_TITLE });
+      }
+    }
   }, []);
+
+  const dashboardExists = useMemo(() => dashboardDetails != null, [dashboardDetails]);
   const { detailName: savedObjectId } = useParams<{ detailName?: string }>();
-  const dashboardExists = !isEmpty(dashboardDetails?.dashboardTitle);
 
   useEffect(() => {
     if (!indicesExist) {
@@ -73,7 +81,7 @@ const DashboardViewComponent: React.FC = () => {
         </FiltersGlobal>
       )}
       <SecuritySolutionPageWrapper>
-        <HeaderPage border title={DASHBOARD_PAGE_TITLE}>
+        <HeaderPage border title={dashboardDetails?.title ?? <EuiLoadingSpinner size="m" />}>
           {showWriteControls && dashboardExists && (
             <EditDashboardButton
               filters={filters}
@@ -97,7 +105,10 @@ const DashboardViewComponent: React.FC = () => {
         )}
 
         <StatusPropmpt currentState={currentState} />
-        <SpyRoute pageName={SecurityPageName.dashboards} state={dashboardDetails} />
+        <SpyRoute
+          pageName={SecurityPageName.dashboards}
+          state={{ dashboardName: dashboardDetails?.title }}
+        />
       </SecuritySolutionPageWrapper>
     </>
   );

diff --git a/x-pack/plugins/security_solution/public/dashboards/pages/details/translations.ts b/x-pack/plugins/security_solution/public/dashboards/pages/details/translations.ts
@@ -27,6 +27,13 @@ export const DASHBOARD_INDICES_NOT_FOUND_TITLE = i18n.translate(
   }
 );
 
+export const DASHBOARD_NOT_FOUND_TITLE = i18n.translate(
+  'xpack.securitySolution.dashboards.dashboard.notFound.title',
+  {
+    defaultMessage: 'Not found',
+  }
+);
+
 export const EDIT_DASHBOARD_BUTTON_TITLE = i18n.translate(
   'xpack.securitySolution.dashboards.dashboard.editDashboardButtonTitle',
   {

diff --git a/x-pack/plugins/security_solution/public/dashboards/pages/translations.ts b/x-pack/plugins/security_solution/public/dashboards/pages/translations.ts
@@ -9,7 +9,3 @@ import { i18n } from '@kbn/i18n';
 export const DASHBOARDS_PAGE_TITLE = i18n.translate('xpack.securitySolution.dashboards.pageTitle', {
   defaultMessage: 'Dashboards',
 });
-
-export const DASHBOARD_PAGE_TITLE = i18n.translate('xpack.securitySolution.dashboard.pageTitle', {
-  defaultMessage: 'Dashboard',
-});
diff --git a/x-pack/plugins/security_solution/public/dashboards/pages/utils.ts b/x-pack/plugins/security_solution/public/dashboards/pages/utils.ts
@@ -6,21 +6,13 @@
  */
 
 import type { ChromeBreadcrumb } from '@kbn/core/public';
-import { isEmpty } from 'lodash/fp';
 import type { RouteSpyState } from '../../common/utils/route/types';
 
 export const getTrailingBreadcrumbs = (params: RouteSpyState): ChromeBreadcrumb[] => {
-  let breadcrumb: ChromeBreadcrumb[] = [];
-
-  const dashboardTitle = params?.state?.dashboardTitle?.trim();
-  if (params?.state?.dashboardTitle || params.detailName) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: !isEmpty(dashboardTitle) ? dashboardTitle : params.detailName,
-      },
-    ];
+  const breadcrumbName = params?.state?.dashboardName;
+  if (breadcrumbName) {
+    return [{ text: breadcrumbName }];
   }
 
-  return breadcrumb;
+  return [];
 };