[Fleet] Refactor Integration Package Details view navigation links to…

… tabbed interface (#83116) (#83184)

x-pack/plugins/fleet/common/types/models/epm.ts

@@ -30,7 +30,7 @@ export type InstallSource = 'registry' | 'upload';
 
 export type EpmPackageInstallStatus = 'installed' | 'installing';
 
-export type DetailViewPanelName = 'overview' | 'usages' | 'settings';
+export type DetailViewPanelName = 'overview' | 'policies' | 'settings';
 export type ServiceName = 'kibana' | 'elasticsearch';
 export type AgentAssetType = typeof agentAssetTypes;
 export type AssetType = KibanaAssetType | ElasticsearchAssetType | ValueOf<AgentAssetType>;
@@ -47,7 +47,7 @@ export enum KibanaAssetType {
 }
 
 /*
- Enum of saved object types that are allowed to be installed 
+ Enum of saved object types that are allowed to be installed
 */
 export enum KibanaSavedObjectType {
   dashboard = 'dashboard',

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

@@ -36,6 +36,7 @@ export interface HeaderProps {
   rightColumn?: JSX.Element;
   rightColumnGrow?: EuiFlexItemProps['grow'];
   tabs?: EuiTabProps[];
+  tabsClassName?: string;
   'data-test-subj'?: string;
 }
 
@@ -54,6 +55,7 @@ export const Header: React.FC<HeaderProps> = ({
   rightColumnGrow,
   tabs,
   maxWidth,
+  tabsClassName,
   'data-test-subj': dataTestSubj,
 }) => (
   <Container data-test-subj={dataTestSubj}>
@@ -67,7 +69,7 @@ export const Header: React.FC<HeaderProps> = ({
         {tabs ? (
           <EuiFlexItem>
             <EuiSpacer size="s" />
-            <Tabs>
+            <Tabs className={tabsClassName}>
               {tabs.map((props) => (
                 <EuiTab {...props} key={props.id}>
                   {props.name}

x-pack/plugins/fleet/public/applications/fleet/layouts/with_header.tsx

@@ -12,14 +12,14 @@ const Page = styled(EuiPage)`
   background: ${(props) => props.theme.eui.euiColorEmptyShade};
 `;
 
-interface Props extends HeaderProps {
+export interface WithHeaderLayoutProps extends HeaderProps {
   restrictWidth?: number;
   restrictHeaderWidth?: number;
   'data-test-subj'?: string;
   children?: React.ReactNode;
 }
 
-export const WithHeaderLayout: React.FC<Props> = ({
+export const WithHeaderLayout: React.FC<WithHeaderLayoutProps> = ({
   restrictWidth,
   restrictHeaderWidth,
   children,

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

@@ -10,6 +10,7 @@ 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.spacerSizes.xl) * 2}px;
   height: 1px;

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

@@ -7,12 +7,11 @@
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
-import { DEFAULT_PANEL, DetailParams } from '.';
+import { DetailParams } from '.';
 import { PackageInfo } from '../../../../types';
 import { AssetsFacetGroup } from '../../components/assets_facet_group';
 import { CenterColumn, LeftColumn, RightColumn } from './layout';
 import { OverviewPanel } from './overview_panel';
-import { SideNavLinks } from './side_nav_links';
 import { PackagePoliciesPanel } from './package_policies_panel';
 import { SettingsPanel } from './settings_panel';
 
@@ -31,12 +30,9 @@ const ContentFlexGroup = styled(EuiFlexGroup)`
 `;
 
 export function Content(props: ContentProps) {
-  const { name, panel, version } = props;
   return (
     <ContentFlexGroup>
-      <SideNavColumn>
-        <SideNavLinks name={name} version={version} active={panel || DEFAULT_PANEL} />
-      </SideNavColumn>
+      <SideNavColumn />
       <CenterColumn>
         <ContentPanel {...props} />
       </CenterColumn>
@@ -62,7 +58,7 @@ export function ContentPanel(props: ContentPanelProps) {
           latestVersion={latestVersion}
         />
       );
-    case 'usages':
+    case 'policies':
       return <PackagePoliciesPanel name={name} version={version} />;
     case 'overview':
     default:

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

@@ -20,7 +20,7 @@ import {
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
-import { DetailViewPanelName, InstallStatus, PackageInfo } from '../../../../types';
+import { DetailViewPanelName, entries, InstallStatus, PackageInfo } from '../../../../types';
 import { Loading, Error } from '../../../../components';
 import {
   useGetPackageInfoByKey,
@@ -34,6 +34,7 @@ import { IconPanel, LoadingIconPanel } from '../../components/icon_panel';
 import { RELEASE_BADGE_LABEL, RELEASE_BADGE_DESCRIPTION } from '../../components/release_badge';
 import { UpdateIcon } from '../../components/icons';
 import { Content } from './content';
+import { WithHeaderLayoutProps } from '../../../../layouts/with_header';
 
 export const DEFAULT_PANEL: DetailViewPanelName = 'overview';
 
@@ -42,6 +43,28 @@ export interface DetailParams {
   panel?: DetailViewPanelName;
 }
 
+const PanelDisplayNames: Record<DetailViewPanelName, string> = {
+  overview: i18n.translate('xpack.fleet.epm.packageDetailsNav.overviewLinkText', {
+    defaultMessage: 'Overview',
+  }),
+  policies: i18n.translate('xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText', {
+    defaultMessage: 'Policies',
+  }),
+  settings: i18n.translate('xpack.fleet.epm.packageDetailsNav.settingsLinkText', {
+    defaultMessage: 'Settings',
+  }),
+};
+
+const DetailWrapper = styled.div`
+  // Class name here is in sync with 'PanelWrapper' in 'IconPanel' component
+  .shiftNavTabs {
+    margin-left: ${(props) =>
+      parseFloat(props.theme.eui.euiSize) * 6 +
+      parseFloat(props.theme.eui.spacerSizes.xl) * 2 +
+      parseFloat(props.theme.eui.spacerSizes.l)}px;
+  }
+`;
+
 const Divider = styled.div`
   width: 0;
   height: 100%;
@@ -216,28 +239,57 @@ export function Detail() {
     [getHref, hasWriteCapabilites, packageInfo, pkgkey, updateAvailable]
   );
 
+  const tabs = useMemo<WithHeaderLayoutProps['tabs']>(() => {
+    if (!packageInfo) {
+      return [];
+    }
+
+    return (entries(PanelDisplayNames)
+      .filter(([panelId]) => {
+        return (
+          panelId !== 'policies' ||
+          (packageInfoData?.response.status === InstallStatus.installed && false) // Remove `false` when ready to implement policies tab
+        );
+      })
+      .map(([panelId, display]) => {
+        return {
+          id: panelId,
+          name: display,
+          isSelected: panelId === panel,
+          href: getHref('integration_details', {
+            pkgkey: `${packageInfo?.name}-${packageInfo?.version}`,
+            panel: panelId,
+          }),
+        };
+      }) as unknown) as WithHeaderLayoutProps['tabs'];
+  }, [getHref, packageInfo, packageInfoData?.response?.status, panel]);
+
   return (
-    <WithHeaderLayout
-      leftColumn={headerLeftContent}
-      rightColumn={headerRightContent}
-      rightColumnGrow={false}
-    >
-      {packageInfo ? <Breadcrumbs packageTitle={packageInfo.title} /> : null}
-      {packageInfoError ? (
-        <Error
-          title={
-            <FormattedMessage
-              id="xpack.fleet.epm.loadingIntegrationErrorTitle"
-              defaultMessage="Error loading integration details"
-            />
-          }
-          error={packageInfoError}
-        />
-      ) : isLoading || !packageInfo ? (
-        <Loading />
-      ) : (
-        <Content {...packageInfo} panel={panel} />
-      )}
-    </WithHeaderLayout>
+    <DetailWrapper>
+      <WithHeaderLayout
+        leftColumn={headerLeftContent}
+        rightColumn={headerRightContent}
+        rightColumnGrow={false}
+        tabs={tabs}
+        tabsClassName={'shiftNavTabs'}
+      >
+        {packageInfo ? <Breadcrumbs packageTitle={packageInfo.title} /> : null}
+        {packageInfoError ? (
+          <Error
+            title={
+              <FormattedMessage
+                id="xpack.fleet.epm.loadingIntegrationErrorTitle"
+                defaultMessage="Error loading integration details"
+              />
+            }
+            error={packageInfoError}
+          />
+        ) : isLoading || !packageInfo ? (
+          <Loading />
+        ) : (
+          <Content {...packageInfo} panel={panel} />
+        )}
+      </WithHeaderLayout>
+    </DetailWrapper>
   );
 }