[Unified Integrations] Clean up empty states, tutorial links and rout…

…ing to prefer unified integrations (#114911) (#115493) Cleans up the integrations view and redirects all links to the integration manager. Co-authored-by: Caroline Horn <[email protected]>
elastic · Oct 19, 2021 · f54724d · f54724d
1 parent 0c86129
commit f54724d
Show file tree

Hide file tree

Showing 48 changed files with 292 additions and 783 deletions.
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -362,7 +362,7 @@ export function CollapsibleNav({
               iconType="plusInCircleFilled"
             >
               {i18n.translate('core.ui.primaryNav.addData', {
-                defaultMessage: 'Add data',
+                defaultMessage: 'Add integrations',
               })}
             </EuiButton>
           </EuiCollapsibleNavGroup>

diff --git a/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap
diff --git a/src/plugins/home/public/application/components/add_data/add_data.test.tsx b/src/plugins/home/public/application/components/add_data/add_data.test.tsx
@@ -27,7 +27,9 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-const applicationStartMock = {} as unknown as ApplicationStart;
+const applicationStartMock = {
+  capabilities: { navLinks: { integrations: true } },
+} as unknown as ApplicationStart;
 
 const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
 

diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -22,8 +22,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { ApplicationStart } from 'kibana/public';
 import { createAppNavigationHandler } from '../app_navigation_handler';
-// @ts-expect-error untyped component
-import { Synopsis } from '../synopsis';
 import { getServices } from '../../kibana_services';
 import { RedirectAppLinks } from '../../../../../kibana_react/public';
 
@@ -35,87 +33,91 @@ interface Props {
 
 export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) => {
   const { trackUiMetric } = getServices();
+  const canAccessIntegrations = application.capabilities.navLinks.integrations;
+  if (canAccessIntegrations) {
+    return (
+      <>
+        <section className="homDataAdd" aria-labelledby="homDataAdd__title">
+          <EuiFlexGroup alignItems="flexEnd">
+            <EuiFlexItem>
+              <EuiTitle size="s">
+                <h2 id="homDataAdd__title">
+                  <FormattedMessage
+                    id="home.addData.sectionTitle"
+                    defaultMessage="Get started by adding integrations"
+                  />
+                </h2>
+              </EuiTitle>
 
-  return (
-    <>
-      <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-        <EuiFlexGroup alignItems="flexEnd">
-          <EuiFlexItem>
-            <EuiTitle size="s">
-              <h2 id="homDataAdd__title">
-                <FormattedMessage
-                  id="home.addData.sectionTitle"
-                  defaultMessage="Get started by adding your data"
-                />
-              </h2>
-            </EuiTitle>
+              <EuiSpacer />
 
-            <EuiSpacer />
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="home.addData.text"
+                    defaultMessage="To start working with your data, use one of our many ingest options. Collect data from an app or service, or upload a file. If you're not ready to use your own data, add a sample data set."
+                  />
+                </p>
+              </EuiText>
 
-            <EuiText>
-              <p>
-                <FormattedMessage
-                  id="home.addData.text"
-                  defaultMessage="To start working with your data, use one of our many ingest options. Collect data from an app or service, or upload a file. If you're not ready to use your own data, add a sample data set."
-                />
-              </p>
-            </EuiText>
+              <EuiSpacer />
 
-            <EuiSpacer />
+              <EuiFlexGroup gutterSize="m" responsive={false} wrap>
+                <EuiFlexItem grow={false}>
+                  <RedirectAppLinks application={application}>
+                    {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+                    <EuiButton
+                      data-test-subj="homeAddData"
+                      fill
+                      href={addBasePath('/app/integrations/browse')}
+                      iconType="plusInCircle"
+                      onClick={(event: MouseEvent) => {
+                        trackUiMetric(METRIC_TYPE.CLICK, 'home_tutorial_directory');
+                        createAppNavigationHandler('/app/integrations/browse')(event);
+                      }}
+                    >
+                      <FormattedMessage
+                        id="home.addData.addDataButtonLabel"
+                        defaultMessage="Add integrations"
+                      />
+                    </EuiButton>
+                  </RedirectAppLinks>
+                </EuiFlexItem>
 
-            <EuiFlexGroup gutterSize="m" responsive={false} wrap>
-              <EuiFlexItem grow={false}>
-                <RedirectAppLinks application={application}>
-                  {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-                  <EuiButton
-                    data-test-subj="homeAddData"
-                    fill
-                    href={addBasePath('/app/home#/tutorial_directory')}
-                    iconType="plusInCircle"
-                    onClick={(event: MouseEvent) => {
-                      trackUiMetric(METRIC_TYPE.CLICK, 'home_tutorial_directory');
-                      createAppNavigationHandler('/app/home#/tutorial_directory')(event);
-                    }}
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    data-test-subj="addSampleData"
+                    href={addBasePath('#/tutorial_directory/sampleData')}
+                    iconType="documents"
                   >
                     <FormattedMessage
-                      id="home.addData.addDataButtonLabel"
-                      defaultMessage="Add your data"
+                      id="home.addData.sampleDataButtonLabel"
+                      defaultMessage="Try sample data"
                     />
-                  </EuiButton>
-                </RedirectAppLinks>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  data-test-subj="addSampleData"
-                  href={addBasePath('#/tutorial_directory/sampleData')}
-                  iconType="documents"
-                >
-                  <FormattedMessage
-                    id="home.addData.sampleDataButtonLabel"
-                    defaultMessage="Try sample data"
-                  />
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiImage
-              alt="Illustration of Elastic data integrations"
-              className="homDataAdd__illustration"
-              src={
-                addBasePath('/plugins/kibanaReact/assets/') +
-                (isDarkMode
-                  ? 'illustration_integrations_darkmode.svg'
-                  : 'illustration_integrations_lightmode.svg')
-              }
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </section>
+            <EuiFlexItem>
+              <EuiImage
+                alt="Illustration of Elastic data integrations"
+                className="homDataAdd__illustration"
+                src={
+                  addBasePath('/plugins/kibanaReact/assets/') +
+                  (isDarkMode
+                    ? 'illustration_integrations_darkmode.svg'
+                    : 'illustration_integrations_lightmode.svg')
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </section>
 
-      <EuiHorizontalRule margin="xxl" />
-    </>
-  );
+        <EuiHorizontalRule margin="xxl" />
+      </>
+    );
+  } else {
+    return null;
+  }
 };
diff --git a/src/plugins/home/public/application/components/sample_data/index.tsx b/src/plugins/home/public/application/components/sample_data/index.tsx
@@ -40,7 +40,7 @@ export function SampleDataCard({ urlBasePath, onDecline, onConfirm }: Props) {
       image={cardGraphicURL}
       textAlign="left"
       title={
-        <FormattedMessage id="home.letsStartTitle" defaultMessage="Start by adding your data" />
+        <FormattedMessage id="home.letsStartTitle" defaultMessage="Start by adding integrations" />
       }
       description={
         <FormattedMessage
@@ -51,7 +51,7 @@ export function SampleDataCard({ urlBasePath, onDecline, onConfirm }: Props) {
       footer={
         <footer>
           <EuiButton fill className="homWelcome__footerAction" onClick={onConfirm}>
-            <FormattedMessage id="home.tryButtonLabel" defaultMessage="Add data" />
+            <FormattedMessage id="home.tryButtonLabel" defaultMessage="Add integrations" />
           </EuiButton>
           <EuiButtonEmpty
             className="homWelcome__footerAction"

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -9,7 +9,7 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Synopsis } from './synopsis';
@@ -33,34 +33,6 @@ class TutorialDirectoryUi extends React.Component {
     const extraTabs = getServices().addDataService.getAddDataTabs();
 
     this.tabs = [
-      {
-        id: ALL_TAB_ID,
-        name: this.props.intl.formatMessage({
-          id: 'home.tutorial.tabs.allTitle',
-          defaultMessage: 'All',
-        }),
-      },
-      {
-        id: 'logging',
-        name: this.props.intl.formatMessage({
-          id: 'home.tutorial.tabs.loggingTitle',
-          defaultMessage: 'Logs',
-        }),
-      },
-      {
-        id: 'metrics',
-        name: this.props.intl.formatMessage({
-          id: 'home.tutorial.tabs.metricsTitle',
-          defaultMessage: 'Metrics',
-        }),
-      },
-      {
-        id: 'security',
-        name: this.props.intl.formatMessage({
-          id: 'home.tutorial.tabs.securitySolutionTitle',
-          defaultMessage: 'Security',
-        }),
-      },
       {
         id: SAMPLE_DATA_TAB_ID,
         name: this.props.intl.formatMessage({
@@ -88,7 +60,6 @@ class TutorialDirectoryUi extends React.Component {
     this.state = {
       selectedTabId: openTab,
       tutorialCards: [],
-      notices: getServices().tutorialService.getDirectoryNotices(),
     };
   }
 
@@ -216,19 +187,6 @@ class TutorialDirectoryUi extends React.Component {
     );
   };
 
-  renderNotices = () => {
-    const notices = getServices().tutorialService.getDirectoryNotices();
-    return notices.length ? (
-      <EuiFlexGroup direction="column" gutterSize="none">
-        {notices.map((DirectoryNotice, index) => (
-          <EuiFlexItem key={index}>
-            <DirectoryNotice />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    ) : null;
-  };
-
   renderHeaderLinks = () => {
     const headerLinks = getServices().tutorialService.getDirectoryHeaderLinks();
     return headerLinks.length ? (
@@ -245,26 +203,22 @@ class TutorialDirectoryUi extends React.Component {
   render() {
     const headerLinks = this.renderHeaderLinks();
     const tabs = this.getTabs();
-    const notices = this.renderNotices();
 
     return (
       <KibanaPageTemplate
         restrictWidth={1200}
         template="empty"
         pageHeader={{
           pageTitle: (
-            <FormattedMessage id="home.tutorial.addDataToKibanaTitle" defaultMessage="Add data" />
+            <FormattedMessage
+              id="home.tutorial.addDataToKibanaTitle"
+              defaultMessage="Alternative ways to add data"
+            />
           ),
           tabs,
           rightSideItems: headerLinks ? [headerLinks] : [],
         }}
       >
-        {notices && (
-          <>
-            {notices}
-            <EuiSpacer size="s" />
-          </>
-        )}
         {this.renderTabContent()}
       </KibanaPageTemplate>
     );

diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
@@ -48,8 +48,7 @@ export class Welcome extends React.Component<Props> {
   };
 
   private redirecToAddData() {
-    const path = this.services.addBasePath('#/tutorial_directory');
-    window.location.href = path;
+    this.services.application.navigateToApp('integrations', { path: '/browse' });
   }
 
   private onSampleDataDecline = () => {

diff --git a/src/plugins/home/public/index.ts b/src/plugins/home/public/index.ts
@@ -23,7 +23,6 @@ export type {
   FeatureCatalogueSolution,
   Environment,
   TutorialVariables,
-  TutorialDirectoryNoticeComponent,
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './services';

diff --git a/src/plugins/home/public/services/index.ts b/src/plugins/home/public/services/index.ts
@@ -22,7 +22,6 @@ export { TutorialService } from './tutorials';
 export type {
   TutorialVariables,
   TutorialServiceSetup,
-  TutorialDirectoryNoticeComponent,
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './tutorials';

diff --git a/src/plugins/home/public/services/tutorials/index.ts b/src/plugins/home/public/services/tutorials/index.ts
@@ -11,7 +11,6 @@ export { TutorialService } from './tutorial_service';
 export type {
   TutorialVariables,
   TutorialServiceSetup,
-  TutorialDirectoryNoticeComponent,
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './tutorial_service';
diff --git a/src/plugins/home/public/services/tutorials/tutorial_service.mock.ts b/src/plugins/home/public/services/tutorials/tutorial_service.mock.ts
@@ -25,7 +25,6 @@ const createMock = (): jest.Mocked<PublicMethodsOf<TutorialService>> => {
   const service = {
     setup: jest.fn(),
     getVariables: jest.fn(() => ({})),
-    getDirectoryNotices: jest.fn(() => []),
     getDirectoryHeaderLinks: jest.fn(() => []),
     getModuleNotices: jest.fn(() => []),
     getCustomStatusCheck: jest.fn(),