[Unified Integrations] Clean up empty states, tutorial links and routing to prefer unified integrations

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>

src/plugins/home/public/application/components/add_data/add_data.tsx

@@ -35,87 +35,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;
+  }
 };

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"

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>
     );

src/plugins/home/public/application/components/welcome.tsx

@@ -48,7 +48,7 @@ export class Welcome extends React.Component<Props> {
   };
 
   private redirecToAddData() {
-    const path = this.services.addBasePath('#/tutorial_directory');
+    const path = this.services.addBasePath('/app/integrations/browse');
     window.location.href = path;
   }
 

src/plugins/home/public/index.ts

@@ -23,7 +23,6 @@ export type {
   FeatureCatalogueSolution,
   Environment,
   TutorialVariables,
-  TutorialDirectoryNoticeComponent,
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './services';

src/plugins/home/public/services/index.ts

@@ -22,7 +22,6 @@ export { TutorialService } from './tutorials';
 export type {
   TutorialVariables,
   TutorialServiceSetup,
-  TutorialDirectoryNoticeComponent,
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './tutorials';

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';

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(),

src/plugins/home/public/services/tutorials/tutorial_service.test.tsx

@@ -27,22 +27,6 @@ describe('TutorialService', () => {
       }).toThrow();
     });
 
-    test('allows multiple register directory notice calls', () => {
-      const setup = new TutorialService().setup();
-      expect(() => {
-        setup.registerDirectoryNotice('abc', () => <div />);
-        setup.registerDirectoryNotice('def', () => <span />);
-      }).not.toThrow();
-    });
-
-    test('throws when same directory notice is registered twice', () => {
-      const setup = new TutorialService().setup();
-      expect(() => {
-        setup.registerDirectoryNotice('abc', () => <div />);
-        setup.registerDirectoryNotice('abc', () => <span />);
-      }).toThrow();
-    });
-
     test('allows multiple register directory header link calls', () => {
       const setup = new TutorialService().setup();
       expect(() => {
@@ -91,22 +75,6 @@ describe('TutorialService', () => {
     });
   });
 
-  describe('getDirectoryNotices', () => {
-    test('returns empty array', () => {
-      const service = new TutorialService();
-      expect(service.getDirectoryNotices()).toEqual([]);
-    });
-
-    test('returns last state of register calls', () => {
-      const service = new TutorialService();
-      const setup = service.setup();
-      const notices = [() => <div />, () => <span />];
-      setup.registerDirectoryNotice('abc', notices[0]);
-      setup.registerDirectoryNotice('def', notices[1]);
-      expect(service.getDirectoryNotices()).toEqual(notices);
-    });
-  });
-
   describe('getDirectoryHeaderLinks', () => {
     test('returns empty array', () => {
       const service = new TutorialService();