From cb7df9b9ada93eb8dccdd6f4808c2b3817135af9 Mon Sep 17 00:00:00 2001 From: Divyanshu Gupta Date: Tue, 6 Jan 2026 23:15:56 +0530 Subject: [PATCH 1/4] chore(miscellaneous): update demo and example flags from js to ts --- packages/react-core/src/demos/Tabs.md | 423 +----------------- .../src/demos/examples/Tabs/TabsOpen.tsx | 185 ++++++++ .../Tabs/TabsOpenWithSecondaryTabs.tsx | 228 ++++++++++ 3 files changed, 419 insertions(+), 417 deletions(-) create mode 100644 packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx create mode 100644 packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index aae416129a4..b3514be92e5 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -21,447 +21,36 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Open tabs -```js isFullscreen -import { useState } from 'react'; -import { - PageSection, - PageBreadcrumb, - Breadcrumb, - BreadcrumbItem, - Tabs, - Tab, - TabContent, - TabContentBody, - TabTitleText, - Title, - DescriptionList, - DescriptionListGroup, - DescriptionListTerm, - DescriptionListDescription, - Label, - LabelGroup, - Flex, - FlexItem -} from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; -import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; - -TabsOpenDemo = () => { - const [activeTabKey, setActiveTabKey] = useState(0); +```ts file="examples/Tabs/TabsOpen.tsx" isFullscreen - // Toggle currently active tab - const handleTabClick = (event, tabIndex) => { - setActiveTabKey(tabIndex); - }; - - const tabsBreadcrumb = ( - - - Overview - Pods - - Pod details{' '} - - - - ); - - const tabContent = ( - - - - Pod details - - - - - - Name - 3scale-control-fccb6ddb9-phyqv9 - - - Status - - - - - - Running - - - - - Namespace - - - - - - - knative-serving-ingress - - - - - - Restart policy - Always restart - - - Labels - - - - - - - - - Active deadline seconds - Not configured - - - Tolerations - stuff - - - Pod IP - 10..345.2.197 - - - Annotations - stuff - - - Node - - - - - - ip-10-0-233-118.us-east-2.computer.external - - - - - Created at - - - - - - - - ); - - return ( - - {tabsBreadcrumb} - - - - - - - - 3scale-control-fccb6ddb9-phyqv9 - - - - - - - - - - Details} tabContentId={`tabContent${0}`} /> - YAML} tabContentId={`tabContent${1}`} /> - Environment} tabContentId={`tabContent${2}`} /> - Events} tabContentId={`tabContent${3}`} /> - Terminal} tabContentId={`tabContent${4}`} /> - - - - - - - - - - - ); -}; ``` ### Open tabs with secondary tabs -```js isFullscreen -import { useState } from 'react'; -import { - PageSection, - PageBreadcrumb, - Breadcrumb, - BreadcrumbItem, - Tabs, - Tab, - TabContent, - TabContentBody, - TabTitleText, - Title, - DescriptionList, - DescriptionListGroup, - DescriptionListTerm, - DescriptionListDescription, - Label, - LabelGroup, - Flex, - FlexItem -} from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; -import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; - -TabsOpenWithSecondaryTabsDemo = () => { - const [activeTabKey, setActiveTabKey] = useState(0); - const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); - - // Toggle currently active tab - const handleTabClick = (event, tabIndex) => { - setActiveTabKey(tabIndex); - }; - - // Toggle currently active secondary tab - const handleTabClickSecondary = (event, tabIndex) => { - setActiveTabKeySecondary(tabIndex); - }; - - const tabsBreadcrumb = ( - - - Overview - Pods - - Pod details{' '} - - - - ); - - const tabContent = ( - - - - Pod details - - - - - - Name - 3scale-control-fccb6ddb9-phyqv9 - - - Status - - - - - - Running - - - - - Namespace - - - - - - - knative-serving-ingress - - - - - - Restart policy - Always restart - - - Labels - - - - - - - - - Active deadline seconds - Not configured - - - Tolerations - stuff - - - Pod IP - 10..345.2.197 - - - Annotations - stuff - - - Node - - - - - - ip-10-0-233-118.us-east-2.computer.external - - - - - Created at - - - - - - - - ); +```ts file="examples/Tabs/TabsOpenWithSecondaryTabs.tsx" isFullscreen - return ( - - {tabsBreadcrumb} - - - - - - - - 3scale-control-fccb6ddb9-phyqv9 - - - - - - - - - - Details} tabContentId={`tabContent${0}`} /> - YAML} tabContentId={`tabContent${1}`} /> - Environment} tabContentId={`tabContent${2}`} /> - Events} tabContentId={`tabContent${3}`} /> - Terminal} tabContentId={`tabContent${4}`} /> - - - - - - - - - - - ); -}; ``` ### Nested tabs -```js isFullscreen file="./examples/Tabs/NestedTabs.tsx" +```ts isFullscreen file="examples/Tabs/NestedTabs.tsx" ``` ### Nested, unindented tabs -```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx" +```ts isFullscreen file="examples/Tabs/NestedUnindentedTabs.tsx" ``` ### Tables and tabs -```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx" +```ts isFullscreen file="examples/Tabs/TabsAndTable.tsx" ``` ### Modal tabs -```js isFullscreen file="./examples/Tabs/ModalTabs.tsx" +```ts isFullscreen file="examples/Tabs/ModalTabs.tsx" ``` diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx new file mode 100644 index 00000000000..6a519654b09 --- /dev/null +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx @@ -0,0 +1,185 @@ +import { useState } from 'react'; +import { + PageSection, + PageBreadcrumb, + Breadcrumb, + BreadcrumbItem, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + DescriptionList, + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + LabelGroup, + Flex, + FlexItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +export const TabsOpen: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + + // Toggle currently active tab + const handleTabClick = (_event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const tabsBreadcrumb = ( + + + Overview + Pods + + Pod details{' '} + + + + ); + + const tabContent = ( + + + + Pod details + + + + + + Name + 3scale-control-fccb6ddb9-phyqv9 + + + Status + + + + + + Running + + + + + Namespace + + + + + + + knative-serving-ingress + + + + + + Restart policy + Always restart + + + Labels + + + + + + + + + Active deadline seconds + Not configured + + + Tolerations + stuff + + + Pod IP + 10..345.2.197 + + + Annotations + stuff + + + Node + + + + + + ip-10-0-233-118.us-east-2.computer.external + + + + + Created at + + + + + + + + ); + + return ( + + {tabsBreadcrumb} + + + + + + + + 3scale-control-fccb6ddb9-phyqv9 + + + + + + + + + + Details} tabContentId={`tabContent${0}`} /> + YAML} tabContentId={`tabContent${1}`} /> + Environment} tabContentId={`tabContent${2}`} /> + Events} tabContentId={`tabContent${3}`} /> + Terminal} tabContentId={`tabContent${4}`} /> + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx new file mode 100644 index 00000000000..858d8deb27d --- /dev/null +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx @@ -0,0 +1,228 @@ +import { useState } from 'react'; +import { + PageSection, + PageBreadcrumb, + Breadcrumb, + BreadcrumbItem, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + DescriptionList, + DescriptionListGroup, + DescriptionListTerm, + DescriptionListDescription, + Label, + LabelGroup, + Flex, + FlexItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); + + // Toggle currently active tab + const handleTabClick = (_event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + // Toggle currently active secondary tab + const handleTabClickSecondary = (_event, tabIndex) => { + setActiveTabKeySecondary(tabIndex); + }; + + const tabsBreadcrumb = ( + + + Overview + Pods + + Pod details{' '} + + + + ); + + const tabContent = ( + + + + Pod details + + + + + + Name + 3scale-control-fccb6ddb9-phyqv9 + + + Status + + + + + + Running + + + + + Namespace + + + + + + + knative-serving-ingress + + + + + + Restart policy + Always restart + + + Labels + + + + + + + + + Active deadline seconds + Not configured + + + Tolerations + stuff + + + Pod IP + 10..345.2.197 + + + Annotations + stuff + + + Node + + + + + + ip-10-0-233-118.us-east-2.computer.external + + + + + Created at + + + + + + + + ); + + return ( + + {tabsBreadcrumb} + + + + + + + + 3scale-control-fccb6ddb9-phyqv9 + + + + + + + + + + Details} tabContentId={`tabContent${0}`} /> + YAML} tabContentId={`tabContent${1}`} /> + Environment} tabContentId={`tabContent${2}`} /> + Events} tabContentId={`tabContent${3}`} /> + Terminal} tabContentId={`tabContent${4}`} /> + + + + + + + + + + + ); +}; From ca92a3055a0a7d140cd58460c42475506b8ddaee Mon Sep 17 00:00:00 2001 From: Divyanshu Gupta Date: Wed, 7 Jan 2026 01:08:32 +0530 Subject: [PATCH 2/4] chore(miscellaneous): update demo and example flags from js to ts --- .../src/layouts/Gallery/examples/Gallery.md | 107 ++---------------- .../examples/GalleryAdjustingMaxWidths.tsx | 21 ++++ .../examples/GalleryAdjustingMinMaxWidths.tsx | 25 ++++ .../examples/GalleryAdjustingMinWidths.tsx | 22 ++++ .../examples/GalleryAlternativeComponents.tsx | 11 ++ .../layouts/Gallery/examples/GalleryBasic.tsx | 14 +++ .../Gallery/examples/GalleryWithGutters.tsx | 12 ++ 7 files changed, 113 insertions(+), 99 deletions(-) create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx create mode 100644 packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx diff --git a/packages/react-core/src/layouts/Gallery/examples/Gallery.md b/packages/react-core/src/layouts/Gallery/examples/Gallery.md index 6681d2fecf3..f8b0d998e51 100644 --- a/packages/react-core/src/layouts/Gallery/examples/Gallery.md +++ b/packages/react-core/src/layouts/Gallery/examples/Gallery.md @@ -12,123 +12,32 @@ import './gallery.css'; ### Basic -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryBasic.tsx" + ``` ### With gutters -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryWithGutters.tsx" ``` ### Adjusting min widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMinWidths.tsx" + ``` ### Adjusting max widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMaxWidths.tsx" ``` ### Adjusting min and max widths -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item - Gallery Item -; +```ts file="GalleryAdjustingMinMaxWidths.tsx" ``` ### Alternative components -```js -import { Gallery, GalleryItem } from '@patternfly/react-core'; - - - Gallery item - Gallery item - Gallery item - Gallery item - Gallery item -; +```ts file="GalleryAlternativeComponents.tsx" ``` diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx new file mode 100644 index 00000000000..137031ad0dd --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx @@ -0,0 +1,21 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMaxWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx new file mode 100644 index 00000000000..084446447b7 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx @@ -0,0 +1,25 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMinMaxWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx new file mode 100644 index 00000000000..7990b401f8c --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx @@ -0,0 +1,22 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAdjustingMinWidths: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx new file mode 100644 index 00000000000..7b2a8a44be4 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx @@ -0,0 +1,11 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryAlternativeComponents: React.FunctionComponent = () => ( + + Gallery item + Gallery item + Gallery item + Gallery item + Gallery item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx new file mode 100644 index 00000000000..a043e634be9 --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryBasic.tsx @@ -0,0 +1,14 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryBasic: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx new file mode 100644 index 00000000000..88402f0465d --- /dev/null +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryWithGutters.tsx @@ -0,0 +1,12 @@ +import { Gallery, GalleryItem } from '@patternfly/react-core'; + +export const GalleryWithGutters: React.FunctionComponent = () => ( + + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + +); From 8c7f7d9979f998b039c101e52e71a9495e489623 Mon Sep 17 00:00:00 2001 From: Divyanshu Gupta Date: Thu, 8 Jan 2026 20:43:47 +0530 Subject: [PATCH 3/4] added types --- .../react-core/src/demos/examples/Tabs/TabsOpen.tsx | 4 ++-- .../demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx | 4 ++-- .../Gallery/examples/GalleryAlternativeComponents.tsx | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx index 6a519654b09..57cb2bc9672 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx @@ -28,7 +28,7 @@ export const TabsOpen: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab - const handleTabClick = (_event, tabIndex) => { + const handleTabClick = (_event: React.MouseEvent, tabIndex: number | string) => { setActiveTabKey(tabIndex); }; @@ -104,7 +104,7 @@ export const TabsOpen: React.FunctionComponent = () => { Pod IP - 10..345.2.197 + 10.345.2.197 Annotations diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx index 858d8deb27d..fcf474b33b0 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx @@ -29,12 +29,12 @@ export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); // Toggle currently active tab - const handleTabClick = (_event, tabIndex) => { + const handleTabClick = (_event: React.MouseEvent, tabIndex: number | string) => { setActiveTabKey(tabIndex); }; // Toggle currently active secondary tab - const handleTabClickSecondary = (_event, tabIndex) => { + const handleTabClickSecondary = (_event: React.MouseEvent, tabIndex: number | string) => { setActiveTabKeySecondary(tabIndex); }; diff --git a/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx index 7b2a8a44be4..29cece740e8 100644 --- a/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx +++ b/packages/react-core/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx @@ -2,10 +2,10 @@ import { Gallery, GalleryItem } from '@patternfly/react-core'; export const GalleryAlternativeComponents: React.FunctionComponent = () => ( - Gallery item - Gallery item - Gallery item - Gallery item - Gallery item + Gallery Item + Gallery Item + Gallery Item + Gallery Item + Gallery Item ); From a6d1f36b8c9805e90ae88b7d29d45be640cc8f3a Mon Sep 17 00:00:00 2001 From: Divyanshu Gupta Date: Thu, 8 Jan 2026 20:53:40 +0530 Subject: [PATCH 4/4] added types --- .../demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx index fcf474b33b0..1bd0223ee17 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx @@ -25,16 +25,16 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = useState(0); - const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); + const [activeTabKey, setActiveTabKey] = useState(0); + const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); // Toggle currently active tab - const handleTabClick = (_event: React.MouseEvent, tabIndex: number | string) => { + const handleTabClick = (_event: React.MouseEvent, tabIndex: number) => { setActiveTabKey(tabIndex); }; // Toggle currently active secondary tab - const handleTabClickSecondary = (_event: React.MouseEvent, tabIndex: number | string) => { + const handleTabClickSecondary = (_event: React.MouseEvent, tabIndex: number) => { setActiveTabKeySecondary(tabIndex); }; @@ -110,7 +110,7 @@ export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => { Pod IP - 10..345.2.197 + 10.345.2.197 Annotations