[Fleet] Revamp integration detail page

x-pack/plugins/fleet/public/applications/fleet/components/header.tsx

@@ -37,7 +37,7 @@ export interface HeaderProps {
   leftColumn?: JSX.Element;
   rightColumn?: JSX.Element;
   rightColumnGrow?: EuiFlexItemProps['grow'];
-  tabs?: EuiTabProps[];
+  tabs?: Array<Omit<EuiTabProps, 'name'> & { name?: JSX.Element | string }>;
   tabsClassName?: string;
   'data-test-subj'?: string;
 }
@@ -73,7 +73,7 @@ export const Header: React.FC<HeaderProps> = ({
             <EuiSpacer size="s" />
             <Tabs className={tabsClassName}>
               {tabs.map((props) => (
-                <EuiTab {...props} key={props.id}>
+                <EuiTab {...(props as EuiTabProps)} key={props.id}>
                   {props.name}
                 </EuiTab>
               ))}

x-pack/plugins/fleet/public/applications/fleet/components/home_integration/tutorial_module_notice.tsx

@@ -43,7 +43,7 @@ const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }
                 ),
                 availableAsIntegrationLink: (
                   <EuiLink
-                    href={getHref('integration_details', {
+                    href={getHref('integration_details_overview', {
                       pkgkey: pkgKeyFromPackageInfo(pkgInfo),
                     })}
                   >

x-pack/plugins/fleet/public/applications/fleet/constants/page_paths.ts

@@ -18,7 +18,10 @@ export type StaticPage =
   | 'data_streams';
 
 export type DynamicPage =
-  | 'integration_details'
+  | 'integration_details_overview'
+  | 'integration_details_policies'
+  | 'integration_details_settings'
+  | 'integration_details_custom'
   | 'integration_policy_edit'
   | 'policy_details'
   | 'add_integration_from_policy'
@@ -43,6 +46,10 @@ export const PAGE_ROUTING_PATHS = {
   integrations_all: '/integrations',
   integrations_installed: '/integrations/installed',
   integration_details: '/integrations/detail/:pkgkey/:panel?',
+  integration_details_overview: '/integrations/detail/:pkgkey/overview',
+  integration_details_policies: '/integrations/detail/:pkgkey/policies',
+  integration_details_settings: '/integrations/detail/:pkgkey/settings',
+  integration_details_custom: '/integrations/detail/:pkgkey/custom',
   integration_policy_edit: '/integrations/edit-integration/:packagePolicyId',
   policies: '/policies',
   policies_list: '/policies',
@@ -70,8 +77,10 @@ export const pagePathGetters: {
   integrations: () => '/integrations',
   integrations_all: () => '/integrations',
   integrations_installed: () => '/integrations/installed',
-  integration_details: ({ pkgkey, panel }) =>
-    `/integrations/detail/${pkgkey}${panel ? `/${panel}` : ''}`,
+  integration_details_overview: ({ pkgkey }) => `/integrations/detail/${pkgkey}/overview`,
+  integration_details_policies: ({ pkgkey }) => `/integrations/detail/${pkgkey}/policies`,
+  integration_details_settings: ({ pkgkey }) => `/integrations/detail/${pkgkey}/settings`,
+  integration_details_custom: ({ pkgkey }) => `/integrations/detail/${pkgkey}/custom`,
   integration_policy_edit: ({ packagePolicyId }) =>
     `/integrations/edit-integration/${packagePolicyId}`,
   policies: () => '/policies',

x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx

@@ -18,7 +18,7 @@ const BASE_BREADCRUMB: ChromeBreadcrumb = {
 };
 
 const breadcrumbGetters: {
-  [key in Page]: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
+  [key in Page]?: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
 } = {
   base: () => [BASE_BREADCRUMB],
   overview: () => [
@@ -65,7 +65,7 @@ const breadcrumbGetters: {
       }),
     },
   ],
-  integration_details: ({ pkgTitle }) => [
+  integration_details_overview: ({ pkgTitle }) => [
     BASE_BREADCRUMB,
     {
       href: pagePathGetters.integrations(),
@@ -84,7 +84,7 @@ const breadcrumbGetters: {
       }),
     },
     {
-      href: pagePathGetters.integration_details({ pkgkey, panel: 'policies' }),
+      href: pagePathGetters.integration_details_policies({ pkgkey }),
       text: pkgTitle,
     },
     { text: policyName },
@@ -142,7 +142,7 @@ const breadcrumbGetters: {
       }),
     },
     {
-      href: pagePathGetters.integration_details({ pkgkey }),
+      href: pagePathGetters.integration_details_overview({ pkgkey }),
       text: pkgTitle,
     },
     {
@@ -221,10 +221,11 @@ const breadcrumbGetters: {
 
 export function useBreadcrumbs(page: Page, values: DynamicPagePathValues = {}) {
   const { chrome, http } = useStartServices();
-  const breadcrumbs: ChromeBreadcrumb[] = breadcrumbGetters[page](values).map((breadcrumb) => ({
-    ...breadcrumb,
-    href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,
-  }));
+  const breadcrumbs: ChromeBreadcrumb[] =
+    breadcrumbGetters[page]?.(values).map((breadcrumb) => ({
+      ...breadcrumb,
+      href: breadcrumb.href ? http.basePath.prepend(`${BASE_PATH}#${breadcrumb.href}`) : undefined,
+    })) || [];
   const docTitle: string[] = [...breadcrumbs]
     .reverse()
     .map((breadcrumb) => breadcrumb.text as string);

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx

@@ -217,7 +217,7 @@ export const CreatePackagePolicyPage: React.FunctionComponent = () => {
     }
     return from === 'policy'
       ? getHref('policy_details', { policyId: agentPolicyId || policyId })
-      : getHref('integration_details', { pkgkey });
+      : getHref('integration_details_overview', { pkgkey });
   }, [agentPolicyId, policyId, from, getHref, pkgkey, routeState]);
 
   const cancelClickHandler: ReactEventHandler = useCallback(

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx

@@ -246,9 +246,8 @@ export const EditPackagePolicyForm = memo<{
   const cancelUrl = useMemo((): string => {
     if (packageInfo && policyId) {
       return from === 'package-edit'
-        ? getHref('integration_details', {
+        ? getHref('integration_details_policies', {
             pkgkey: pkgKeyFromPackageInfo(packageInfo!),
-            panel: 'policies',
           })
         : getHref('policy_details', { policyId });
     }
@@ -258,9 +257,8 @@ export const EditPackagePolicyForm = memo<{
   const successRedirectPath = useMemo(() => {
     if (packageInfo && policyId) {
       return from === 'package-edit'
-        ? getPath('integration_details', {
+        ? getPath('integration_details_policies', {
             pkgkey: pkgKeyFromPackageInfo(packageInfo!),
-            panel: 'policies',
           })
         : getPath('policy_details', { policyId });
     }

x-pack/plugins/fleet/public/applications/fleet/sections/epm/components/package_card.tsx

@@ -43,7 +43,7 @@ export function PackageCard({
       title={title || ''}
       description={description}
       icon={<PackageIcon icons={icons} packageName={name} version={version} size="xl" />}
-      href={getHref('integration_details', { pkgkey: `${name}-${urlVersion}` })}
+      href={getHref('integration_details_overview', { pkgkey: `${name}-${urlVersion}` })}
       betaBadgeLabel={release && release !== 'ga' ? RELEASE_BADGE_LABEL[release] : undefined}
       betaBadgeTooltipContent={
         release && release !== 'ga' ? RELEASE_BADGE_DESCRIPTION[release] : undefined

x-pack/plugins/fleet/public/applications/fleet/sections/epm/hooks/use_package_install.tsx

@@ -90,9 +90,8 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
       } else {
         setPackageInstallStatus({ name, status: InstallStatus.installed, version });
         if (fromUpdate) {
-          const settingsPath = getPath('integration_details', {
+          const settingsPath = getPath('integration_details_settings', {
             pkgkey: `${name}-${version}`,
-            panel: 'settings',
           });
           history.push(settingsPath);
         }

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/components/icon_panel.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { EuiIcon, EuiPanel } from '@elastic/eui';
+import { usePackageIconType, UsePackageIconType } from '../../../../../hooks';
+import { Loading } from '../../../../../components';
+
+const PanelWrapper = styled.div`
+  // NOTE: changes to the width here will impact navigation tabs page layout under integration package details
+  width: ${(props) =>
+    parseFloat(props.theme.eui.euiSize) * 6 + parseFloat(props.theme.eui.euiSizeXL) * 2}px;
+  height: 1px;
+  z-index: 1;
+`;
+
+const Panel = styled(EuiPanel)`
+  padding: ${(props) => props.theme.eui.spacerSizes.xl};
+  margin-bottom: -100%;
+  svg,
+  img {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    width: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+  }
+  .euiFlexItem {
+    height: ${(props) => parseFloat(props.theme.eui.euiSize) * 6}px;
+    justify-content: center;
+  }
+`;
+
+export function IconPanel({
+  packageName,
+  version,
+  icons,
+}: Pick<UsePackageIconType, 'packageName' | 'version' | 'icons'>) {
+  const iconType = usePackageIconType({ packageName, version, icons });
+
+  return (
+    <PanelWrapper>
+      <Panel>
+        <EuiIcon type={iconType} size="original" />
+      </Panel>
+    </PanelWrapper>
+  );
+}
+
+export function LoadingIconPanel() {
+  return (
+    <PanelWrapper>
+      <Panel>
+        <Loading />
+      </Panel>
+    </PanelWrapper>
+  );
+}

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/components/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+export { UpdateIcon } from './update_icon';
+export { IntegrationAgentPolicyCount } from './integration_agent_policy_count';
+export { IconPanel, LoadingIconPanel } from './icon_panel';

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/integration_agent_policy_count.tsx → x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/components/integration_agent_policy_count.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { memo } from 'react';
-import { useGetPackageStats } from '../../../../hooks';
+import { useGetPackageStats } from '../../../../../hooks';
 
 /**
  * Displays a count of Agent Policies that are using the given integration

x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/components/update_icon.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconTip, EuiIconProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const UpdateIcon = ({ size = 'm' }: { size?: EuiIconProps['size'] }) => (
+  <EuiIconTip
+    aria-label={i18n.translate('xpack.fleet.epm.updateAvailableTooltip', {
+      defaultMessage: 'Update available',
+    })}
+    size={size}
+    type="alert"
+    color="warning"
+    content={i18n.translate('xpack.fleet.epm.updateAvailableTooltip', {
+      defaultMessage: 'Update available',
+    })}
+  />
+);