[EPM] redirect after package install (#52771)

* add callback after successful installation and redirect

* add temp data sources tab content to access add data source page

* remove assets tab for mvp

* hide data sources link and redirect from data sources tab if package not installed

* change callback name

* remove commented out assets logic

* add redirect to hook

* fix type

x-pack/legacy/plugins/epm/public/hooks/use_package_install.tsx

@@ -22,9 +22,11 @@ interface PackageInstallItem {
   status: InstallStatus;
 }
 
+type InstallPackageProps = Pick<PackageInfo, 'name' | 'version' | 'title'>;
+
 function usePackageInstall({ notifications }: { notifications: NotificationsStart }) {
   const [packages, setPackage] = useState<PackagesInstall>({});
-  const { toAddDataSourceView } = useLinks();
+  const { toAddDataSourceView, toDetailView } = useLinks();
 
   const setPackageInstallStatus = useCallback(
     ({ name, status }: { name: PackageInfo['name']; status: InstallStatus }) => {
@@ -37,7 +39,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
   );
 
   const installPackage = useCallback(
-    async ({ name, version, title }: Pick<PackageInfo, 'name' | 'version' | 'title'>) => {
+    async ({ name, version, title }: InstallPackageProps) => {
       setPackageInstallStatus({ name, status: InstallStatus.installing });
       const pkgkey = `${name}-${version}`;
 
@@ -59,11 +61,22 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
             </EuiFlexGroup>
           </Fragment>
         );
-
         notifications.toasts.addSuccess({
           title: `Installed ${title} package`,
           text: toMountPoint(SuccessMsg),
         });
+
+        // TODO: this should probably live somewhere else and use <Redirect />,
+        // this hook could return the request state and a component could
+        // use that state. the component should be able to unsubscribe to prevent memory leaks
+        const packageUrl = toDetailView({ name, version });
+        const dataSourcesUrl = toDetailView({
+          name,
+          version,
+          panel: 'data-sources',
+          withAppRoot: false,
+        });
+        if (window.location.href.includes(packageUrl)) window.location.hash = dataSourcesUrl;
       } catch (err) {
         setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
         notifications.toasts.addWarning({
@@ -74,7 +87,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
         });
       }
     },
-    [notifications.toasts, setPackageInstallStatus, toAddDataSourceView]
+    [notifications.toasts, setPackageInstallStatus, toAddDataSourceView, toDetailView]
   );
 
   const getPackageInstallStatus = useCallback(
@@ -99,6 +112,14 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
           title: `Deleted ${title} package`,
           text: toMountPoint(SuccessMsg),
         });
+
+        const packageUrl = toDetailView({ name, version });
+        const dataSourcesUrl = toDetailView({
+          name,
+          version,
+          panel: 'data-sources',
+        });
+        if (window.location.href.includes(packageUrl)) window.location.href = dataSourcesUrl;
       } catch (err) {
         setPackageInstallStatus({ name, status: InstallStatus.installed });
         notifications.toasts.addWarning({
@@ -108,7 +129,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
         });
       }
     },
-    [notifications.toasts, setPackageInstallStatus]
+    [notifications.toasts, setPackageInstallStatus, toDetailView]
   );
 
   return {

x-pack/legacy/plugins/epm/public/index.ts

@@ -11,7 +11,7 @@ import { Plugin, PluginInitializerContext } from './plugin';
 import { routes } from './routes';
 
 // create './types' later and move there?
-export type DetailViewPanelName = 'overview' | 'assets' | 'data-sources';
+export type DetailViewPanelName = 'overview' | 'data-sources';
 
 const REACT_APP_ROOT_ID = 'epm__root';
 const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1; display: flex; flex-direction: column"></div>`;

x-pack/legacy/plugins/epm/public/screens/add_data_source/step_one.tsx

@@ -17,8 +17,7 @@ import { FormState } from './add_data_source_form';
 
 interface AddDataSourceFormProps {
   formState: FormState;
-  // EuiCheckboxGroup onChange prop type says parameter is an event, but it is a string of the input name
-  onCheckboxChange: (name: any) => void;
+  onCheckboxChange: (name: string) => void;
   onTextChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
   datasetCheckboxes: EuiCheckboxGroupOption[];
 }

x-pack/legacy/plugins/epm/public/screens/detail/content.tsx

@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 import { DEFAULT_PANEL, DetailProps } from '.';
 import { PackageInfo } from '../../../common/types';
 import { AssetsFacetGroup } from '../../components/assets_facet_group';
-import { AssetAccordion } from '../../components/asset_accordion';
 import { Requirements } from '../../components/requirements';
 import { CenterColumn, LeftColumn, RightColumn } from './layout';
 import { OverviewPanel } from './overview_panel';
 import { SideNavLinks } from './side_nav_links';
+import { DataSourcesPanel } from './data_sources_panel';
 
 type ContentProps = PackageInfo & Pick<DetailProps, 'panel'> & { hasIconPanel: boolean };
 export function Content(props: ContentProps) {
@@ -49,16 +49,10 @@ export function Content(props: ContentProps) {
 
 type ContentPanelProps = PackageInfo & Pick<DetailProps, 'panel'>;
 export function ContentPanel(props: ContentPanelProps) {
-  const { assets, panel } = props;
+  const { panel, name, version } = props;
   switch (panel) {
-    case 'assets':
-      return <AssetAccordion assets={assets} />;
     case 'data-sources':
-      return (
-        <EuiTitle size="xs">
-          <span>Data Sources</span>
-        </EuiTitle>
-      );
+      return <DataSourcesPanel name={name} version={version} />;
     case 'overview':
     default:
       return <OverviewPanel {...props} />;

x-pack/legacy/plugins/epm/public/screens/detail/data_sources_panel.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import { EuiTitle, EuiButton, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { Redirect } from 'react-router-dom';
+import { useLinks, useGetPackageInstallStatus } from '../../hooks';
+import { InstallStatus } from '../../types';
+
+interface DataSourcesPanelProps {
+  name: string;
+  version: string;
+}
+export const DataSourcesPanel = ({ name, version }: DataSourcesPanelProps) => {
+  const { toAddDataSourceView, toDetailView } = useLinks();
+  const packageDataSourceUrl = toAddDataSourceView({ name, version });
+  const getPackageInstallStatus = useGetPackageInstallStatus();
+  const packageInstallStatus = getPackageInstallStatus(name);
+  // if they arrive at this page and the package is not installed, send them to overview
+  // this happens if they arrive with a direct url or they uninstall while on this tab
+  if (packageInstallStatus !== InstallStatus.installed)
+    return (
+      <Redirect
+        to={toDetailView({
+          name,
+          version,
+          withAppRoot: false,
+        })}
+      />
+    );
+  return (
+    <Fragment>
+      <EuiTitle size="xs">
+        <span>Data Sources</span>
+      </EuiTitle>
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton href={packageDataSourceUrl} size="s">
+            Add data source
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </Fragment>
+  );
+};

x-pack/legacy/plugins/epm/public/screens/detail/installation_button.tsx

@@ -25,7 +25,6 @@ export function InstallationButton(props: InstallationButtonProps) {
   const isInstalling = installationStatus === InstallStatus.installing;
   const isRemoving = installationStatus === InstallStatus.uninstalling;
   const isInstalled = installationStatus === InstallStatus.installed;
-
   const [isModalVisible, setModalVisible] = useState<boolean>(false);
   const toggleModal = useCallback(() => {
     setModalVisible(!isModalVisible);

x-pack/legacy/plugins/epm/public/screens/detail/side_nav_links.tsx

@@ -10,20 +10,22 @@ import styled from 'styled-components';
 import { DetailViewPanelName } from '../../';
 import { PackageInfo } from '../../../common/types';
 import { entries } from '../../../common/type_utils';
-import { useLinks } from '../../hooks';
+import { useLinks, useGetPackageInstallStatus } from '../../hooks';
+import { InstallStatus } from '../../types';
 
 export type NavLinkProps = Pick<PackageInfo, 'name' | 'version'> & {
   active: DetailViewPanelName;
 };
 
 const PanelDisplayNames: Record<DetailViewPanelName, string> = {
   overview: 'Overview',
-  assets: 'Assets',
   'data-sources': 'Data Sources',
 };
 
 export function SideNavLinks({ name, version, active }: NavLinkProps) {
   const { toDetailView } = useLinks();
+  const getPackageInstallStatus = useGetPackageInstallStatus();
+  const packageInstallStatus = getPackageInstallStatus(name);
 
   return (
     <Fragment>
@@ -36,6 +38,10 @@ export function SideNavLinks({ name, version, active }: NavLinkProps) {
               ? p.theme.eui.euiFontWeightSemiBold
               : p.theme.eui.euiFontWeightRegular};
         `;
+        // don't display Data Sources tab if the package is not installed
+        if (packageInstallStatus !== InstallStatus.installed && panel === 'data-sources')
+          return null;
+
         return (
           <div key={panel}>
             <Link>{display}</Link>