@patternfly/react-core#TabTitleText JavaScript Examples

The following examples show how to use @patternfly/react-core#TabTitleText. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DeviceDetailTabs.js    From edge-frontend with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: TasksTabs.js    From tasks-frontend with Apache License 2.0 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: tabs.js    From ibutsu-server with MIT License 6 votes vote down vote up 
render() {
    const Icon = this.props.icon;
    return (
      <React.Fragment>
        <TabTitleIcon><Icon /></TabTitleIcon>
        <TabTitleText>{this.props.text}</TabTitleText>
      </React.Fragment>
    );
  }
Example #4
Source File: index.js    From sed-frontend with Apache License 2.0 5 votes vote down vote up 
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>
  );
}
Example #5
Source File: app.jsx    From cockpit-wicked with GNU General Public License v2.0 5 votes vote down vote up 
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>
    );
}
Example #6
Source File: ImageDetailTabs.js    From edge-frontend with Apache License 2.0 4 votes vote down vote up 
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>
      )}
    </>
  );
}