tabs content

elastic · Nov 14, 2024 · 254dc17 · 254dc17
1 parent f4af267
commit 254dc17
Show file tree

Hide file tree

Showing 20 changed files with 530 additions and 203 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -212,7 +212,7 @@ export const FleetAppContext: React.FC<{
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />
-                    <UIExtensionsContext.Provider value={extensions}>
+                    <UIExtensionsContext.Provider value={{}}>
                       <FleetStatusProvider defaultFleetStatus={fleetStatus}>
                         <SpaceSettingsContextProvider>
                           <Router history={history}>

diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -38,7 +38,11 @@ import { INTEGRATIONS_ROUTING_PATHS, pagePathGetters } from './constants';
 import type { UIExtensionsStorage } from './types';
 
 import { EPMApp } from './sections/epm';
-import { PackageInstallProvider, UIExtensionsContext, FlyoutContextProvider } from './hooks';
+import {
+  PackageInstallProvider,
+  UIExtensionsContextProvider,
+  FlyoutContextProvider,
+} from './hooks';
 import { IntegrationsHeader } from './components/header';
 import { AgentEnrollmentFlyout } from './components';
 import { ReadOnlyContextProvider } from './hooks/use_read_only_context';
@@ -103,7 +107,7 @@ export const IntegrationsAppContext: React.FC<{
                 <EuiThemeProvider darkMode={isDarkMode}>
                   <QueryClientProvider client={queryClient}>
                     <ReactQueryDevtools initialIsOpen={false} />
-                    <UIExtensionsContext.Provider value={extensions}>
+                    <UIExtensionsContextProvider values={extensions}>
                       <FleetStatusProvider defaultFleetStatus={fleetStatus}>
                         <SpaceSettingsContextProvider>
                           <startServices.customIntegrations.ContextProvider>
@@ -126,7 +130,7 @@ export const IntegrationsAppContext: React.FC<{
                           </startServices.customIntegrations.ContextProvider>
                         </SpaceSettingsContextProvider>
                       </FleetStatusProvider>
-                    </UIExtensionsContext.Provider>
+                    </UIExtensionsContextProvider>
                   </QueryClientProvider>
                 </EuiThemeProvider>
               </KibanaVersionContext.Provider>

diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_integrations_state.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_integrations_state.tsx
@@ -23,13 +23,20 @@ export const IntegrationsStateContextProvider: FunctionComponent<{
   children?: React.ReactNode;
 }> = ({ children }) => {
   const maybeState = useIntraAppState<undefined | IntegrationsAppBrowseRouteState>();
-  const fromIntegrationsRef = useRef<undefined | string>(maybeState?.fromIntegrations);
-
+  const stateRef = useRef(maybeState);
+  console.log('myState---', maybeState);
   const getFromIntegrations = useCallback(() => {
-    return fromIntegrationsRef.current;
+    return stateRef.current?.fromIntegrations;
   }, []);
   return (
-    <IntegrationsStateContext.Provider value={{ getFromIntegrations }}>
+    <IntegrationsStateContext.Provider
+      value={{
+        getFromIntegrations,
+        pkgkey: maybeState?.pkgkey,
+        panel: maybeState?.panel,
+        fleet: maybeState?.fleet,
+      }}
+    >
       {children}
     </IntegrationsStateContext.Provider>
   );

diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx
@@ -261,16 +261,18 @@ function usePackageInstall({ startServices }: { startServices: StartServices })
   };
 }
 
-export const [
-  PackageInstallProvider,
-  useInstallPackage,
-  useSetPackageInstallStatus,
-  useGetPackageInstallStatus,
-  useUninstallPackage,
-] = createContainer(
+export const packageInstallContainer = createContainer(
   usePackageInstall,
   (value) => value.installPackage,
   (value) => value.setPackageInstallStatus,
   (value) => value.getPackageInstallStatus,
   (value) => value.uninstallPackage
 );
+
+export const [
+  PackageInstallProvider,
+  useInstallPackage,
+  useSetPackageInstallStatus,
+  useGetPackageInstallStatus,
+  useUninstallPackage,
+] = packageInstallContainer;
diff --git a/...plications/integrations/sections/epm/screens/detail/hooks/use_is_first_time_agent_user.ts b/...plications/integrations/sections/epm/screens/detail/hooks/use_is_first_time_agent_user.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { FleetAuthz } from '../../../../../../../../common';
 import {
   FLEET_SERVER_PACKAGE,
   LEGACY_PACKAGE_POLICY_SAVED_OBJECT_TYPE,
@@ -16,8 +17,10 @@ interface UseIsFirstTimeAgentUserResponse {
   isLoading?: boolean;
 }
 
-export const useIsFirstTimeAgentUserQuery = (): UseIsFirstTimeAgentUserResponse => {
-  const authz = useAuthz();
+export const useIsFirstTimeAgentUserQuery = (
+  authzContext?: FleetAuthz
+): UseIsFirstTimeAgentUserResponse => {
+  const authz = useAuthz() ?? authzContext;
   const {
     data: packagePolicies,
     isLoading: areAgentPoliciesLoading,

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
@@ -91,6 +91,7 @@ import { Configs } from './configs';
 import './index.scss';
 import type { InstallPkgRouteOptions } from './utils/get_install_route_options';
 import { InstallButton } from './settings/install_button';
+import { TabsContent } from './tabs_content';
 
 export type DetailViewPanelName =
   | 'overview'
@@ -129,10 +130,17 @@ function Breadcrumbs({ packageTitle }: { packageTitle: string }) {
   return null;
 }
 
-export function Detail() {
+export function Detail({ routesEnabled = true }: { routesEnabled?: boolean }) {
   const { getId: getAgentPolicyId } = useAgentPolicyContext();
-  const { getFromIntegrations } = useIntegrationsStateContext();
-  const { pkgkey, panel } = useParams<DetailParams>();
+  const {
+    getFromIntegrations,
+    pkgkey: pkgKeyContext,
+    panel: panelContext,
+  } = useIntegrationsStateContext();
+  const [selectedPanel, setSelectedPanel] = useState<DetailViewPanelName>(panelContext);
+  const { pkgkey: pkgkeyParam, panel: panelParam } = useParams<DetailParams>();
+  const pkgkey = pkgkeyParam || pkgKeyContext;
+  const panel = panelParam || selectedPanel;
   const { getHref, getPath } = useLink();
   const history = useHistory();
   const { pathname, search, hash } = useLocation();
@@ -144,7 +152,6 @@ export function Detail() {
    */
   const onboardingLink = useMemo(() => queryParams.get('onboardingLink'), [queryParams]);
   const onboardingAppId = useMemo(() => queryParams.get('onboardingAppId'), [queryParams]);
-
   const authz = useAuthz();
   const canAddAgent = authz.fleet.addAgents;
   const canInstallPackages = authz.integrations.installPackages;
@@ -178,7 +185,7 @@ export function Detail() {
     if (packageInfo === null || !packageInfo.name) {
       return undefined;
     }
-    return getPackageInstallStatus(packageInfo?.name)?.status;
+    return getPackageInstallStatus?.(packageInfo?.name)?.status;
   }, [packageInfo, getPackageInstallStatus]);
   const isInstalled = useMemo(
     () =>
@@ -253,7 +260,7 @@ export function Detail() {
   }, [packageInfoLatestPrereleaseData?.item.version]);
 
   const { isFirstTimeAgentUser = false, isLoading: firstTimeUserLoading } =
-    useIsFirstTimeAgentUserQuery();
+    useIsFirstTimeAgentUserQuery(authz);
   const isGuidedOnboardingActive = useIsGuidedOnboardingActive(pkgName);
 
   // Refresh package info when status change
@@ -629,10 +636,16 @@ export function Detail() {
         ),
         isSelected: panel === 'overview',
         'data-test-subj': `tab-overview`,
-        href: getHref('integration_details_overview', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_overview', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('overview');
+        },
       },
     ];
 
@@ -647,10 +660,16 @@ export function Detail() {
         ),
         isSelected: panel === 'policies',
         'data-test-subj': `tab-policies`,
-        href: getHref('integration_details_policies', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_policies', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('policies');
+        },
       });
     }
 
@@ -671,10 +690,16 @@ export function Detail() {
         ),
         isSelected: panel === 'assets',
         'data-test-subj': `tab-assets`,
-        href: getHref('integration_details_assets', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_assets', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('assets');
+        },
       });
     }
 
@@ -689,10 +714,16 @@ export function Detail() {
         ),
         isSelected: panel === 'settings',
         'data-test-subj': `tab-settings`,
-        href: getHref('integration_details_settings', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_settings', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('settings');
+        },
       });
     }
 
@@ -707,10 +738,16 @@ export function Detail() {
         ),
         isSelected: panel === 'configs',
         'data-test-subj': `tab-configs`,
-        href: getHref('integration_details_configs', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_configs', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('configs');
+        },
       });
     }
 
@@ -725,10 +762,16 @@ export function Detail() {
         ),
         isSelected: panel === 'custom',
         'data-test-subj': `tab-custom`,
-        href: getHref('integration_details_custom', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_custom', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('custom');
+        },
       });
     }
 
@@ -743,17 +786,24 @@ export function Detail() {
         ),
         isSelected: panel === 'api-reference',
         'data-test-subj': `tab-api-reference`,
-        href: getHref('integration_details_api_reference', {
-          pkgkey: packageInfoKey,
-          ...(integration ? { integration } : {}),
-        }),
+        href: routesEnabled
+          ? getHref('integration_details_api_reference', {
+              pkgkey: packageInfoKey,
+              ...(integration ? { integration } : {}),
+            })
+          : undefined,
+        onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.preventDefault();
+          setSelectedPanel('api-reference');
+        },
       });
     }
 
     return tabs;
   }, [
     packageInfo,
     panel,
+    routesEnabled,
     getHref,
     integration,
     canReadIntegrationPolicies,
@@ -823,45 +873,17 @@ export function Detail() {
       ) : isLoading || !packageInfo ? (
         <Loading />
       ) : (
-        <Routes>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_overview}>
-            <OverviewPage
-              packageInfo={packageInfo}
-              integrationInfo={integrationInfo}
-              latestGAVersion={latestGAVersion}
-            />
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_settings}>
-            <SettingsPage
-              packageInfo={packageInfo}
-              packageMetadata={packageInfoData?.metadata}
-              startServices={services}
-            />
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_assets}>
-            <AssetsPage packageInfo={packageInfo} refetchPackageInfo={refetchPackageInfo} />
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_configs}>
-            <Configs packageInfo={packageInfo} />
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_policies}>
-            {canReadIntegrationPolicies ? (
-              <PackagePoliciesPage name={packageInfo.name} version={packageInfo.version} />
-            ) : (
-              <PermissionsError
-                error="MISSING_PRIVILEGES"
-                requiredFleetRole="Agent Policies Read and Integrations Read"
-              />
-            )}
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_custom}>
-            <CustomViewPage packageInfo={packageInfo} />
-          </Route>
-          <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_api_reference}>
-            <DocumentationPage packageInfo={packageInfo} integration={integrationInfo?.name} />
-          </Route>
-          <Redirect to={INTEGRATIONS_ROUTING_PATHS.integration_details_overview} />
-        </Routes>
+        <TabsContent
+          canReadIntegrationPolicies={canReadIntegrationPolicies}
+          integrationInfo={integrationInfo}
+          latestGAVersion={latestGAVersion}
+          packageInfo={packageInfo}
+          packageInfoData={packageInfoData}
+          panel={panel}
+          refetchPackageInfo={refetchPackageInfo}
+          routesEnabled={routesEnabled}
+          services={services}
+        />
       )}
     </WithHeaderLayout>
   );

diff --git a/...ublic/applications/integrations/sections/epm/screens/detail/settings/uninstall_button.tsx b/...ublic/applications/integrations/sections/epm/screens/detail/settings/uninstall_button.tsx
@@ -12,7 +12,12 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { InstallStatus } from '../../../../../types';
 import type { PackageInfo } from '../../../../../types';
 
-import { useAuthz, useGetPackageInstallStatus, useUninstallPackage } from '../../../../../hooks';
+import {
+  useAuthz,
+  useGetPackageInstallStatus,
+  useIntegrationsStateContext,
+  useUninstallPackage,
+} from '../../../../../hooks';
 
 import { ConfirmPackageUninstall } from './confirm_package_uninstall';