From 4a12e3e4b8e563ac0230595c418f699b039c7d55 Mon Sep 17 00:00:00 2001 From: Jenny Date: Tue, 4 Jul 2023 19:56:41 +0200 Subject: [PATCH] Add onTabsStateChange to useTabSwitcher --- .../components/asset_details/asset_details.tsx | 2 +- .../components/asset_details/content/content.tsx | 7 +++---- .../components/asset_details/header/header.tsx | 7 +------ .../asset_details/hooks/use_tab_switcher.tsx | 13 +++++++++++-- .../tabs/overview/metadata_summary.tsx | 12 ++---------- .../asset_details/tabs/overview/overview.tsx | 7 +------ 6 files changed, 19 insertions(+), 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 index f6b64ea5777ab..b745a80cc48e4 100644 --- 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 ( 0 ? activeTabId ?? tabs[0].id : undefined} + 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 index 109c13d343677..b108781fbd4a3 100644 --- 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 index b85cb9e167a21..3aea36850e0c4 100644 --- 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 index f6f7757bb062f..a529b6f38609c 100644 --- 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(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 index 798620392085a..6354ab3355992 100644 --- 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 index 88e1fb53c6831..5ce9be855ec81 100644 --- 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 = ({ /> - +