@patternfly/react-core#TabTitleText JavaScript Examples

DeviceDetailTabs = ({
  systemProfile,
  imageId,
  setUpdateModal,
  setReload,
}) => {
  const [activeTabKey, setActiveTabkey] = useState(0);
  const handleTabClick = (_event, tabIndex) => setActiveTabkey(tabIndex);

  return (
    <div className="edge-c-device--detail add-100vh">
      <Tabs
        className="pf-u-ml-md"
        activeKey={activeTabKey}
        onSelect={handleTabClick}
      >
        <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>}>
          <AppInfo showTags fallback="" />
        </Tab>
        <Tab eventKey={1} title={<TabTitleText>Vulnerability</TabTitleText>}>
          <VulnerabilityTab
            deviceData={systemProfile}
            setUpdateModal={setUpdateModal}
            imageId={imageId}
            setReload={setReload}
          />
        </Tab>
      </Tabs>
    </div>
  );
}

TasksTabs = ({ className, tabIndex, tabsList, updateTab }) => {
  return (
    <Tabs className={className} activeKey={tabIndex} onSelect={updateTab}>
      {tabsList.map((tabName, index) => (
        <Tab
          id={`tabs-page-${index}`}
          key={`tabs-page-${index}`}
          eventKey={index}
          title={<TabTitleText>{tabName}</TabTitleText>}
        />
      ))}
    </Tabs>
  );
}

render() {
    const Icon = this.props.icon;
    return (
      <React.Fragment>
        <TabTitleIcon><Icon /></TabTitleIcon>
        <TabTitleText>{this.props.text}</TabTitleText>
      </React.Fragment>
    );
  }

ConnectLog = () => {
  const [activeTabKey, setActiveTabKey] = useState(0);
  const dispatch = useDispatch();
  const { push, location } = useHistory();
  useEffect(() => {
    dispatch(clearNotifications());
    const searchParams = new URLSearchParams(location.search);
    const activeTab = tabMapper.findIndex(
      (item) => item === searchParams.get('active_tab')
    );
    if (activeTab !== -1) {
      setActiveTabKey(activeTab);
    } else {
      push({
        pathname: location.pathname,
        search: new URLSearchParams({
          active_tab: tabMapper[0],
        }).toString(),
      });
    }
  }, []);
  return (
    <Modal
      title="Red Hat connect log"
      variant="medium"
      isOpen={true}
      onClose={() => push(paths.connector)}
    >
      <Tabs
        activeKey={activeTabKey}
        onSelect={(_e, tabKey) => {
          push({
            pathname: location.pathname,
            search: new URLSearchParams({
              active_tab: tabMapper[tabKey],
            }).toString(),
          });
          setActiveTabKey(tabKey);
        }}
      >
        <Tab eventKey={0} title={<TabTitleText>Runs</TabTitleText>}>
          <LogsTable />
        </Tab>
        <Tab eventKey={1} title={<TabTitleText>Systems</TabTitleText>}>
          <SystemsTable />
        </Tab>
      </Tabs>
    </Modal>
  );
}

Application = () => {
    const [checkingService, setCheckingService] = useState(true);
    const [serviceReady, setServiceReady] = useState(false);
    const [activeTabKey, setActiveTabKey] = useState(0);

    const handleTabClick = (event, tabIndex) => {
        setActiveTabKey(tabIndex);
    };

    const renderTabs = () => {
        return (
            <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
                <Tab eventKey={0} title={<TabTitleText>{_("Interfaces")}</TabTitleText>}>
                    <InterfacesTab />
                </Tab>
                <Tab eventKey={1} title={<TabTitleText>{_("Routing")}</TabTitleText>}>
                    <RoutingTab />
                </Tab>
                <Tab eventKey={2} title={<TabTitleText>{_("DNS")}</TabTitleText>}>
                    <DnsTab />
                </Tab>
            </Tabs>
        );
    };

    const renderContent = () => {
        if (checkingService) return null;
        if (serviceReady) return renderTabs();
        return <InactiveServicePage />;
    };

    useEffect(() => {
        serviceIsActive()
                .then(result => {
                    setCheckingService(false);
                    setServiceReady(result);
                });
    }, []);

    return (
        <NetworkProvider>
            <Page className="network">
                { checkingService && <StatusBar showSpinner>{_("Checking if service is active...")}</StatusBar> }
                <PageSection>
                    { renderContent() }
                </PageSection>
            </Page>
        </NetworkProvider>
    );
}

ImageDetailTabs = ({
  imageData,
  openUpdateWizard,
  imageVersion,
  isLoading,
}) => {
  const location = useLocation();
  const history = useHistory();
  const [activeTabKey, setActiveTabkey] = useState(tabs.details);
  const activeTab = imageVersion ? 'imageTab' : 'imageSetTab';

  const keys = [
    'baseURL',
    'imageSetVersion',
    'imageSetTab',
    'imageVersion',
    'imageTab',
    'packagesToggle',
  ];
  const imageUrlMapper = mapUrlToObj(location.pathname, keys);

  const handleTabClick = (_event, tabIndex) => {
    const selectedTab =
      tabIndex === 0 ? 'details' : imageVersion ? 'packages' : 'versions';

    imageUrlMapper[activeTab] = selectedTab;

    history.push(imageUrlMapper.buildUrl());

    setActiveTabkey(tabIndex);
  };

  useEffect(() => {
    imageUrlMapper['imageTab']
      ? setActiveTabkey(tabs[imageUrlMapper['imageTab']])
      : setActiveTabkey(tabs[imageUrlMapper['imageSetTab']]);
  }, [location.pathname]);

  return (
    <>
      {!imageData.isLoading && imageData.hasError ? (
        <EmptyState
          icon="question"
          title="Image not found"
          body="Please check you have the correct link with the correct image Id."
          primaryAction={{
            text: 'Back to Manage Images',
            href: paths['manage-images'],
          }}
          secondaryActions={[]}
        />
      ) : (
        <div className="edge-c-device--detail add-100vh">
          <Tabs
            className="pf-u-ml-md"
            activeKey={activeTabKey}
            onSelect={handleTabClick}
          >
            <Tab
              eventKey={tabs.details}
              title={<TabTitleText>Details</TabTitleText>}
            >
              <ImageDetailTab
                imageData={imageData}
                imageVersion={imageVersion}
              />
            </Tab>
            {isLoading ? (
              <Tab
                title={
                  <TabTitleText>
                    <Skeleton width="75px" />
                  </TabTitleText>
                }
              ></Tab>
            ) : imageVersion ? (
              <Tab
                eventKey={tabs.packages}
                title={<TabTitleText>Packages</TabTitleText>}
              >
                <ImagePackagesTab imageVersion={imageVersion} />
              </Tab>
            ) : (
              <Tab
                eventKey={tabs.versions}
                title={<TabTitleText>Versions</TabTitleText>}
              >
                <ImageVersionTab
                  imageData={imageData}
                  openUpdateWizard={openUpdateWizard}
                />
              </Tab>
            )}
          </Tabs>
        </div>
      )}
    </>
  );
}