Add onTabsStateChange to useTabSwitcher

elastic · Jul 4, 2023 · 4a12e3e · 4a12e3e
1 parent 1c34e52
commit 4a12e3e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 29 deletions.
diff --git a/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx b/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx
@@ -48,6 +48,7 @@ export const AssetDetails = ({
   return (
     <TabSwitcherProvider
       initialActiveTabId={tabs.length > 0 ? activeTabId ?? tabs[0].id : undefined}
+      onTabsStateChange={onTabsStateChange}
     >
       <ContentTemplate
         header={
@@ -59,7 +60,6 @@ export const AssetDetails = ({
             tabs={tabs}
             links={links}
             overrides={overrides}
-            onTabsStateChange={onTabsStateChange}
           />
         }
         body={

diff --git a/x-pack/plugins/infra/public/components/asset_details/content/content.tsx b/x-pack/plugins/infra/public/components/asset_details/content/content.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 import { Anomalies, Metadata, Processes, Osquery, Metrics, Logs, Overview } from '../tabs';
-import { FlyoutTabIds, type TabState, type AssetDetailsProps, TabIds } from '../types';
+import { FlyoutTabIds, type TabState, type AssetDetailsProps } from '../types';
 
 type Props = Pick<
   AssetDetailsProps,
@@ -19,10 +19,10 @@ export const Content = ({
   overrides,
   currentTimeRange,
   node,
-  nodeType = 'host',
   onTabsStateChange,
+  nodeType = 'host',
 }: Props) => {
-  const onChange = (state: TabState & { activeTabId?: TabIds }) => {
+  const onChange = (state: TabState) => {
     if (!onTabsStateChange) {
       return;
     }
@@ -40,7 +40,6 @@ export const Content = ({
           currentTimeRange={currentTimeRange}
           nodeName={node.name}
           nodeType={nodeType}
-          onTabsStateChange={(tabId: TabIds) => onChange({ activeTabId: tabId })}
           dataView={overrides?.overview?.dataView}
           dateRange={overrides?.overview?.dateRange}
         />

diff --git a/x-pack/plugins/infra/public/components/asset_details/header/header.tsx b/x-pack/plugins/infra/public/components/asset_details/header/header.tsx
@@ -30,7 +30,7 @@ import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 
 type Props = Pick<
   AssetDetailsProps,
-  'currentTimeRange' | 'overrides' | 'node' | 'nodeType' | 'links' | 'tabs' | 'onTabsStateChange'
+  'currentTimeRange' | 'overrides' | 'node' | 'nodeType' | 'links' | 'tabs'
 > & {
   compact: boolean;
 };
@@ -45,16 +45,11 @@ export const Header = ({
   compact,
   currentTimeRange,
   overrides,
-  onTabsStateChange,
 }: Props) => {
   const { euiTheme } = useEuiTheme();
   const { showTab, activeTabId } = useTabSwitcherContext();
 
   const onTabClick = (tabId: TabIds) => {
-    if (onTabsStateChange) {
-      onTabsStateChange({ activeTabId: tabId });
-    }
-
     showTab(tabId);
   };
 

diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx b/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
@@ -8,9 +8,14 @@
 import { useState } from 'react';
 import createContainer from 'constate';
 import { useLazyRef } from '../../../hooks/use_lazy_ref';
-import type { TabIds } from '../types';
+import type { TabIds, TabsStateChangeFn } from '../types';
 
-export function useTabSwitcher({ initialActiveTabId }: { initialActiveTabId?: TabIds }) {
+interface TabSwitcherParams {
+  initialActiveTabId?: TabIds;
+  onTabsStateChange?: TabsStateChangeFn;
+}
+
+export function useTabSwitcher({ initialActiveTabId, onTabsStateChange }: TabSwitcherParams) {
   const [activeTabId, setActiveTabId] = useState<TabIds | undefined>(initialActiveTabId);
 
   // This set keeps track of which tabs content have been rendered the first time.
@@ -20,6 +25,10 @@ export function useTabSwitcher({ initialActiveTabId }: { initialActiveTabId?: Ta
   const showTab = (tabId: TabIds) => {
     renderedTabsSet.current.add(tabId); // On a tab click, mark the tab content as allowed to be rendered
     setActiveTabId(tabId);
+
+    if (onTabsStateChange) {
+      onTabsStateChange({ activeTabId: tabId });
+    }
   };
 
   return {

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary.tsx
@@ -22,7 +22,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import type { InfraMetadata } from '../../../../../common/http_api';
 import { NOT_AVAILABLE_LABEL } from '../../translations';
 import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
-import { FlyoutTabIds, type TabIds } from '../../types';
+import { FlyoutTabIds } from '../../types';
 import { ExpandableContent } from '../../components/expandable_content';
 
 const columnTitles = {
@@ -53,20 +53,12 @@ const metadataData = (metadataInfo: InfraMetadata['info']) => [
 interface MetadataSummaryProps {
   metadata: InfraMetadata | null;
   metadataLoading: boolean;
-  onShowAllClick?: (tabId: TabIds) => void;
 }
 
-export const MetadataSummary = ({
-  metadata,
-  metadataLoading,
-  onShowAllClick,
-}: MetadataSummaryProps) => {
+export const MetadataSummary = ({ metadata, metadataLoading }: MetadataSummaryProps) => {
   const { showTab } = useTabSwitcherContext();
 
   const onClick = () => {
-    if (onShowAllClick) {
-      onShowAllClick(FlyoutTabIds.METADATA);
-    }
     showTab(FlyoutTabIds.METADATA);
   };
 

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
@@ -45,7 +45,6 @@ export const Overview = ({
   nodeName,
   currentTimeRange,
   nodeType,
-  onTabsStateChange,
   dateRange,
   dataView,
 }: OverviewProps) => {
@@ -97,11 +96,7 @@ export const Overview = ({
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <MetadataSummary
-          metadata={metadata}
-          metadataLoading={metadataLoading}
-          onShowAllClick={onTabsStateChange}
-        />
+        <MetadataSummary metadata={metadata} metadataLoading={metadataLoading} />
       </EuiFlexItem>
       <EuiFlexItem grow={false} />
     </EuiFlexGroup>