@patternfly/react-core 4.265.0 → 4.265.2

package/src/components/Tabs/examples/TabsNavSecondary.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
+
+export const TabsNavSecondary: React.FunctionComponent = () => {
+  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
+
+  // Toggle currently active primary tab
+  const handleTabClickFirst = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey1(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecond = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey2(tabIndex);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTabKey1}
+      onSelect={handleTabClickFirst}
+      component={TabsComponent.nav}
+      aria-label="Tabs in the sub tabs with nav element example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
+        <Tabs
+          activeKey={activeTabKey2}
+          isSecondary
+          onSelect={handleTabClickSecond}
+          aria-label="Local secondary"
+          component={TabsComponent.nav}
+        >
+          <Tab eventKey={20} title={<TabTitleText>Item 1</TabTitleText>} href="#">
+            Item 1 item section
+          </Tab>
+          <Tab eventKey={21} title={<TabTitleText>Item 2</TabTitleText>} href="#">
+            Item 2 section
+          </Tab>
+          <Tab eventKey={22} title={<TabTitleText>Item 3</TabTitleText>} href="#">
+            Item 3 section
+          </Tab>
+          <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#">
+            Disabled
+          </Tab>
+          <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#">
+            ARIA Disabled
+          </Tab>
+          <Tab eventKey={25} title={<TabTitleText>Item 6</TabTitleText>} href="#">
+            Item 6 section
+          </Tab>
+        </Tabs>
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

package/src/components/Tabs/examples/TabsPageInsets.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsPageInsets: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        usePageInsets
+        isBox={isBox}
+        aria-label="Tabs in the page insets example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Page insets example content users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+          Server
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+          System
+        </Tab>
+        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+          Network
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with inset"
+          id="toggle-box-page-inset"
+          name="toggle-box-page-inset"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/examples/TabsSeparateContent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core';
+
+export const TabsSeparateContent: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentRef1 = React.createRef<HTMLElement>();
+  const contentRef2 = React.createRef<HTMLElement>();
+  const contentRef3 = React.createRef<HTMLElement>();
+
+  return (
+    <React.Fragment>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the seperate content example"
+        role="region"
+      >
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Tab item 1</TabTitleText>}
+          tabContentId="refTab1Section"
+          tabContentRef={contentRef1}
+        />
+        <Tab
+          eventKey={1}
+          title={<TabTitleText>Tab item 2</TabTitleText>}
+          tabContentId="refTab2Section"
+          tabContentRef={contentRef2}
+        />
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>Tab item 3</TabTitleText>}
+          tabContentId="refTab3Section"
+          tabContentRef={contentRef3}
+        />
+      </Tabs>
+      <div>
+        <TabContent
+          eventKey={0}
+          id="refTab1Section"
+          ref={contentRef1}
+          aria-label="This is content for the first separate content tab"
+        >
+          Tab 1 section
+        </TabContent>
+        <TabContent
+          eventKey={1}
+          id="refTab2Section"
+          ref={contentRef2}
+          aria-label="This is content for the second separate content tab"
+          hidden
+        >
+          Tab 2 section
+        </TabContent>
+        <TabContent
+          eventKey={2}
+          id="refTab3Section"
+          ref={contentRef3}
+          aria-label="This is content for the third separate content tab"
+          hidden
+        >
+          Tab 3 section
+        </TabContent>
+      </div>
+    </React.Fragment>
+  );
+};

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsSubtabs: React.FunctionComponent = () => {
+  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+
+  // Toggle currently active primary tab
+  const handleTabClickFirst = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey1(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecond = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey2(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey1}
+        onSelect={handleTabClickFirst}
+        isBox={isBox}
+        aria-label="Tabs in the tabs with subtabs example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
+          <Tabs
+            aria-label="secondary tabs for users"
+            role="region"
+            activeKey={activeTabKey2}
+            isSecondary
+            onSelect={handleTabClickSecond}
+          >
+            <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
+              Secondary tab item 1 item section
+            </Tab>
+            <Tab eventKey={21} title={<TabTitleText>Secondary tab item 2</TabTitleText>}>
+              Secondary tab item 2 section
+            </Tab>
+            <Tab eventKey={22} title={<TabTitleText>Secondary tab item 3</TabTitleText>}>
+              Secondary tab item 3 section
+            </Tab>
+            <Tab eventKey={23} title={<TabTitleText>Secondary tab item 4</TabTitleText>}>
+              Secondary tab item 4 section
+            </Tab>
+            <Tab eventKey={24} title={<TabTitleText>Secondary tab item 5</TabTitleText>}>
+              Secondary tab item 5 section
+            </Tab>
+            <Tab eventKey={25} title={<TabTitleText>Secondary tab item 6</TabTitleText>}>
+              Secondary tab item 6 section
+            </Tab>
+            <Tab eventKey={26} title={<TabTitleText>Secondary tab item 7</TabTitleText>}>
+              Secondary tab item 7 section
+            </Tab>
+            <Tab eventKey={27} title={<TabTitleText>Secondary tab item 8</TabTitleText>}>
+              Secondary tab item 8 section
+            </Tab>
+          </Tabs>
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+          Server
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+          System
+        </Tab>
+        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+          Network
+        </Tab>
+        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>
+          Tab 7 section
+        </Tab>
+        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>
+          Tab 8 section
+        </Tab>
+        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>
+          Tab 9 section
+        </Tab>
+        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>
+          Tab 10 section
+        </Tab>
+        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>
+          Tab 11 section
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with sub tabs"
+          id="toggle-box-secondary"
+          name="toggle-box-secondary"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/examples/TabsToggledSeparateContent.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core';
+
+export const TabsToggledSeparateContent: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isTab2Hidden, setisTab2Hidden] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentRef1 = React.createRef<HTMLElement>();
+  const contentRef2 = React.createRef<HTMLElement>();
+  const contentRef3 = React.createRef<HTMLElement>();
+
+  return (
+    <React.Fragment>
+      <Button onClick={() => setisTab2Hidden(!isTab2Hidden)}>{isTab2Hidden ? 'Show' : 'Hide'} tab 2</Button>
+      <Divider style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the toggled separate content example"
+        role="region"
+      >
+        <Tab eventKey={0} title="Tab item 1" tabContentId="tab1SectionSeparateContent" tabContentRef={contentRef1} />
+        {!isTab2Hidden && (
+          <Tab eventKey={1} title="Tab item 2" tabContentId="tab2SectionSeparateContent" tabContentRef={contentRef2} />
+        )}
+        <Tab eventKey={2} title="Tab item 3" tabContentId="tab3SectionSeparateContent" tabContentRef={contentRef3} />
+      </Tabs>
+      <div>
+        <TabContent
+          eventKey={0}
+          id="tab1SectionSeparateContent"
+          ref={contentRef1}
+          aria-label="This is content for the first toggled separate content tab"
+        >
+          Tab 1 section
+        </TabContent>
+        {!isTab2Hidden && (
+          <TabContent
+            eventKey={1}
+            id="tab2SectionSeparateContent"
+            ref={contentRef2}
+            aria-label="This is content for the second toggled separate content tab"
+            hidden
+          >
+            Tab 2 section
+          </TabContent>
+        )}
+        <TabContent
+          eventKey={2}
+          id="tab3SectionSeparateContent"
+          ref={contentRef3}
+          aria-label="This is content for the third toggled separate content tab"
+          hidden
+        >
+          Tab 3 section
+        </TabContent>
+      </div>
+    </React.Fragment>
+  );
+};

package/src/components/Tabs/examples/TabsTooltipReactRef.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
+
+export const TabsTooltipReactRef: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  const tooltipRef = React.createRef<HTMLElement>();
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isBox={isBox}
+        aria-label="Tabs in the example with a tooltip ref"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tooltip ref content - users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab
+          eventKey={5}
+          title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>}
+          isAriaDisabled
+          ref={tooltipRef}
+          aria-describedby="tooltip-ref1"
+        >
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+      <Tooltip
+        id="tooltip-ref1"
+        content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
+        reference={tooltipRef}
+      />
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox"
+          id="toggle-box-tooltip-ref"
+          name="toggle-box-tooltip-ref"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/examples/TabsUncontrolled.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Tooltip } from '@patternfly/react-core';
+
+export const TabsUncontrolled: React.FunctionComponent = () => {
+  const tooltip = (
+    <Tooltip content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support." />
+  );
+
+  return (
+    <>
+      <Tabs defaultActiveKey={0} aria-label="Tabs in the uncontrolled example" role="region">
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Uncontrolled ref content - users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+    </>
+  );
+};

package/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <Tabs
+      unmountOnExit
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      aria-label="Tabs in the unmounting invisible children example"
+      role="region"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} aria-label="Invisible children tab 1">
+        Tab 1 section
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} aria-label="Invisible children tab 2">
+        Tab 2 section
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} aria-label="Invisible children tab 3">
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+};

package/src/components/Tabs/examples/TabsVertical.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
+
+export const TabsVertical: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isBox, setIsBox] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleBox = (checked: boolean) => {
+    setIsBox(checked);
+  };
+
+  const tooltip = (
+    <Tooltip content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support." />
+  );
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        isVertical
+        isBox={isBox}
+        aria-label="Tabs in the vertical example"
+        role="region"
+      >
+        <Tab
+          eventKey={0}
+          title={
+            <TabTitleText aria-label="vertical" role="region">
+              Users
+            </TabTitleText>
+          }
+          aria-label="Vertical example content users"
+        >
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="isBox"
+          isChecked={isBox}
+          onChange={toggleBox}
+          aria-label="show box variation checkbox with vertical"
+          id="toggle-box-vertical"
+          name="toggle-box-vertical"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/examples/TabsVerticalExpandable.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsVerticalExpandable: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isVertical
+      expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+      toggleText="Containers"
+      aria-label="Tabs in the vertical expandable example"
+      role="region"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Vertical expandable content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+        Server
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+        System
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+        Network
+      </Tab>
+    </Tabs>
+  );
+};