Add custom empty prompt for solution navs

elastic · Sep 18, 2024 · e6f9830 · e6f9830
1 parent a11d6cc
commit e6f9830
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 42 deletions.
diff --git a/src/plugins/management/public/components/landing/classic_empty_prompt.tsx b/src/plugins/management/public/components/landing/classic_empty_prompt.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import React, { type FC } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiHorizontalRule } from '@elastic/eui';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
+interface Props {
+  kibanaVersion: string;
+}
+
+export const ClassicEmptyPrompt: FC<Props> = ({ kibanaVersion }) => {
+  return (
+    <KibanaPageTemplate.EmptyPrompt
+      data-test-subj="managementHome"
+      iconType="managementApp"
+      title={
+        <h1>
+          <FormattedMessage
+            id="management.landing.header"
+            defaultMessage="Welcome to Stack Management {version}"
+            values={{ version: kibanaVersion }}
+          />
+        </h1>
+      }
+      body={
+        <>
+          <p>
+            <FormattedMessage
+              id="management.landing.subhead"
+              defaultMessage="Manage your indices, data views, saved objects, Kibana settings, and more."
+            />
+          </p>
+          <EuiHorizontalRule />
+          <p>
+            <FormattedMessage
+              id="management.landing.text"
+              defaultMessage="A complete list of apps is in the menu on the left."
+            />
+          </p>
+        </>
+      }
+    />
+  );
+};
diff --git a/src/plugins/management/public/components/landing/landing.tsx b/src/plugins/management/public/components/landing/landing.tsx
@@ -8,13 +8,13 @@
  */
 
 import React, { useEffect } from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiHorizontalRule } from '@elastic/eui';
-import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
 import { EuiPageBody } from '@elastic/eui';
 import { CardsNavigation } from '@kbn/management-cards-navigation';
 
 import { useAppContext } from '../management_app/management_context';
+import { ClassicEmptyPrompt } from './classic_empty_prompt';
+import { SolutionEmptyPrompt } from './solution_empty_prompt';
 
 interface ManagementLandingPageProps {
   onAppMounted: (id: string) => void;
@@ -25,7 +25,8 @@ export const ManagementLandingPage = ({
   setBreadcrumbs,
   onAppMounted,
 }: ManagementLandingPageProps) => {
-  const { appBasePath, sections, kibanaVersion, cardsNavigationConfig } = useAppContext();
+  const { appBasePath, sections, kibanaVersion, cardsNavigationConfig, chromeStyle, coreStart } =
+    useAppContext();
   setBreadcrumbs();
 
   useEffect(() => {
@@ -45,36 +46,11 @@ export const ManagementLandingPage = ({
     );
   }
 
-  return (
-    <KibanaPageTemplate.EmptyPrompt
-      data-test-subj="managementHome"
-      iconType="managementApp"
-      title={
-        <h1>
-          <FormattedMessage
-            id="management.landing.header"
-            defaultMessage="Welcome to Stack Management {version}"
-            values={{ version: kibanaVersion }}
-          />
-        </h1>
-      }
-      body={
-        <>
-          <p>
-            <FormattedMessage
-              id="management.landing.subhead"
-              defaultMessage="Manage your indices, data views, saved objects, Kibana settings, and more."
-            />
-          </p>
-          <EuiHorizontalRule />
-          <p>
-            <FormattedMessage
-              id="management.landing.text"
-              defaultMessage="A complete list of apps is in the menu on the left."
-            />
-          </p>
-        </>
-      }
-    />
-  );
+  if (!chromeStyle) return null;
+
+  if (chromeStyle === 'project') {
+    return <SolutionEmptyPrompt kibanaVersion={kibanaVersion} coreStart={coreStart} />;
+  }
+
+  return <ClassicEmptyPrompt kibanaVersion={kibanaVersion} />;
 };
diff --git a/src/plugins/management/public/components/landing/solution_empty_prompt.tsx b/src/plugins/management/public/components/landing/solution_empty_prompt.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import React, { type FC } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiHorizontalRule, EuiLink } from '@elastic/eui';
+import { type CoreStart } from '@kbn/core/public';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
+interface Props {
+  kibanaVersion: string;
+  coreStart: CoreStart;
+}
+
+const IndicesLink: FC<{ coreStart: CoreStart }> = ({ coreStart }) => (
+  <EuiLink href={coreStart.application.getUrlForApp('management/data/index_management')}>
+    {i18n.translate('management.landing.subhead.indicesLink', {
+      defaultMessage: 'indices',
+    })}
+  </EuiLink>
+);
+
+const DataViewsLink: FC<{ coreStart: CoreStart }> = ({ coreStart }) => (
+  <EuiLink href={coreStart.application.getUrlForApp('management/kibana/dataViews')}>
+    {i18n.translate('management.landing.subhead.dataViewsLink', {
+      defaultMessage: 'data views',
+    })}
+  </EuiLink>
+);
+
+const IngestPipelinesLink: FC<{ coreStart: CoreStart }> = ({ coreStart }) => (
+  <EuiLink href={coreStart.application.getUrlForApp('management/ingest/ingest_pipelines')}>
+    {i18n.translate('management.landing.subhead.ingestPipelinesLink', {
+      defaultMessage: 'ingest pipelines',
+    })}
+  </EuiLink>
+);
+
+const UsersLink: FC<{ coreStart: CoreStart }> = ({ coreStart }) => (
+  <EuiLink href={coreStart.application.getUrlForApp('management/security/users')}>
+    {i18n.translate('management.landing.subhead.usersLink', {
+      defaultMessage: 'users',
+    })}
+  </EuiLink>
+);
+
+export const SolutionEmptyPrompt: FC<Props> = ({ kibanaVersion, coreStart }) => {
+  return (
+    <KibanaPageTemplate.EmptyPrompt
+      data-test-subj="managementHome"
+      iconType="managementApp"
+      title={
+        <h1>
+          <FormattedMessage
+            id="management.landing.header"
+            defaultMessage="Stack Management {version}"
+            values={{ version: kibanaVersion }}
+          />
+        </h1>
+      }
+      body={
+        <>
+          <p>
+            <FormattedMessage
+              id="management.landing.subhead"
+              defaultMessage="Manage your {indicesLink}, {dataViewsLink}, {ingestPipelinesLink}, {usersLink}, and more."
+              values={{
+                indicesLink: <IndicesLink coreStart={coreStart} />,
+                dataViewsLink: <DataViewsLink coreStart={coreStart} />,
+                ingestPipelinesLink: <IngestPipelinesLink coreStart={coreStart} />,
+                usersLink: <UsersLink coreStart={coreStart} />,
+              }}
+            />
+          </p>
+
+          <p>
+            <EuiButton
+              fill
+              iconType="spaces"
+              onClick={() => {
+                console.log('open panel!');
+              }}
+            >
+              <FormattedMessage
+                id="management.landing.viewAllPagesButton"
+                defaultMessage="View all pages"
+              />
+            </EuiButton>
+          </p>
+        </>
+      }
+    />
+  );
+};
diff --git a/src/plugins/management/public/components/management_app/management_app.tsx b/src/plugins/management/public/components/management_app/management_app.tsx
@@ -10,7 +10,7 @@
 import './management_app.scss';
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { i18n } from '@kbn/i18n';
 import { AppMountParameters, ChromeBreadcrumb, ScopedHistory } from '@kbn/core/public';
@@ -21,6 +21,7 @@ import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaPageTemplate, KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
 import useObservable from 'react-use/lib/useObservable';
+import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import { AppContextProvider } from './management_context';
 import {
   ManagementSection,
@@ -29,7 +30,7 @@ import {
 } from '../../utils';
 import { ManagementRouter } from './management_router';
 import { managementSidebarNav } from '../management_sidebar_nav/management_sidebar_nav';
-import { SectionsServiceStart, NavigationCardsSubject } from '../../types';
+import { SectionsServiceStart, NavigationCardsSubject, AppDependencies } from '../../types';
 
 interface ManagementAppProps {
   appBasePath: string;
@@ -44,14 +45,17 @@ export interface ManagementAppDependencies {
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   isSidebarEnabled$: BehaviorSubject<boolean>;
   cardsNavigationConfig$: BehaviorSubject<NavigationCardsSubject>;
+  chromeStyle$: Observable<ChromeStyle>;
 }
 
 export const ManagementApp = ({ dependencies, history, appBasePath }: ManagementAppProps) => {
-  const { coreStart, setBreadcrumbs, isSidebarEnabled$, cardsNavigationConfig$ } = dependencies;
+  const { coreStart, setBreadcrumbs, isSidebarEnabled$, cardsNavigationConfig$, chromeStyle$ } =
+    dependencies;
   const [selectedId, setSelectedId] = useState<string>('');
   const [sections, setSections] = useState<ManagementSection[]>();
   const isSidebarEnabled = useObservable(isSidebarEnabled$);
   const cardsNavigationConfig = useObservable(cardsNavigationConfig$);
+  const chromeStyle = useObservable(chromeStyle$);
 
   const onAppMounted = useCallback((id: string) => {
     setSelectedId(id);
@@ -102,11 +106,13 @@ export const ManagementApp = ({ dependencies, history, appBasePath }: Management
       }
     : undefined;
 
-  const contextDependencies = {
+  const contextDependencies: AppDependencies = {
     appBasePath,
     sections,
     cardsNavigationConfig,
     kibanaVersion: dependencies.kibanaVersion,
+    coreStart,
+    chromeStyle,
   };
 
   return (

diff --git a/src/plugins/management/public/plugin.tsx b/src/plugins/management/public/plugin.tsx
@@ -119,6 +119,7 @@ export class ManagementPlugin
       async mount(params: AppMountParameters) {
         const { renderApp } = await import('./application');
         const [coreStart, deps] = await core.getStartServices();
+        const chromeStyle$ = coreStart.chrome.getChromeStyle$();
 
         return renderApp(params, {
           sections: getSectionsServiceStartPrivate(),
@@ -135,6 +136,7 @@ export class ManagementPlugin
           },
           isSidebarEnabled$: managementPlugin.isSidebarEnabled$,
           cardsNavigationConfig$: managementPlugin.cardsNavigationConfig$,
+          chromeStyle$,
         });
       },
     });

diff --git a/src/plugins/management/public/types.ts b/src/plugins/management/public/types.ts
@@ -8,10 +8,17 @@
  */
 
 import { Observable } from 'rxjs';
-import { ScopedHistory, Capabilities, ThemeServiceStart } from '@kbn/core/public';
+import {
+  ScopedHistory,
+  Capabilities,
+  ThemeServiceStart,
+  CoreStart,
+  ChromeBreadcrumb,
+  CoreTheme,
+} from '@kbn/core/public';
 import type { LocatorPublic } from '@kbn/share-plugin/common';
-import { ChromeBreadcrumb, CoreTheme } from '@kbn/core/public';
 import type { CardsNavigationComponentProps } from '@kbn/management-cards-navigation';
+import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import { ManagementSection, RegisterManagementSectionArgs } from './utils';
 import type { ManagementAppLocatorParams } from '../common/locator';
 
@@ -98,6 +105,8 @@ export interface AppDependencies {
   kibanaVersion: string;
   sections: ManagementSection[];
   cardsNavigationConfig?: NavigationCardsSubject;
+  chromeStyle?: ChromeStyle;
+  coreStart: CoreStart;
 }
 
 export interface ConfigSchema {