page title with dashboard name

elastic · Apr 20, 2023 · 684d2ed · 684d2ed
1 parent ac581be
commit 684d2ed
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
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 [];
 };