fleet/frontend/pages/admin/SettingsWrapper/SettingsWrapper.tsx

import React, { useContext } from "react";
import { Tab, Tabs, TabList } from "react-tabs";
import { InjectedRouter } from "react-router";
import PATHS from "router/paths";
import { AppContext } from "context/app";

import TabsWrapper from "components/TabsWrapper";
import MainContent from "components/MainContent";
import classnames from "classnames";

interface ISettingSubNavItem {
  name: string;
  pathname: string;
}

const settingsSubNav: ISettingSubNavItem[] = [
  {
    name: "Organization settings",
    pathname: PATHS.ADMIN_SETTINGS,
  },
  {
    name: "Integrations",
    pathname: PATHS.ADMIN_INTEGRATIONS,
  },
  {
    name: "Users",
    pathname: PATHS.ADMIN_USERS,
  },
];

interface ISettingsWrapperProp {
  children: JSX.Element;
  location: {
    pathname: string;
  };
  router: InjectedRouter; // v3
}

const getTabIndex = (path: string): number => {
  return settingsSubNav.findIndex((navItem) => {
    // tab stays highlighted for paths that start with same pathname
    return path.startsWith(navItem.pathname);
  });
};

const baseClass = "settings-wrapper";

const SettingsWrapper = ({
  children,
  location: { pathname },
  router,
}: ISettingsWrapperProp): JSX.Element => {
  const { isPremiumTier, isSandboxMode } = useContext(AppContext);

  if (isPremiumTier && settingsSubNav.length === 3) {
    settingsSubNav.push({
      name: "Teams",
      pathname: PATHS.ADMIN_TEAMS,
    });
  }

  const navigateToNav = (i: number): void => {
    const navPath = settingsSubNav[i].pathname;
    router.push(navPath);
  };

  // we add a conditional sandbox-mode class here as we will need to make some
  // styling changes on the settings page to have the sticky elements work
  // with the sandbox mode expiry message
  const classNames = classnames(baseClass, { "sandbox-mode": isSandboxMode });

  return (
    <MainContent className={classNames}>
      <div className={`${baseClass}_wrapper`}>
        <TabsWrapper>
          <h1>Settings</h1>
          <Tabs
            selectedIndex={getTabIndex(pathname)}
            onSelect={(i) => navigateToNav(i)}
          >
            <TabList>
              {settingsSubNav.map((navItem) => {
                // Bolding text when the tab is active causes a layout shift
                // so we add a hidden pseudo element with the same text string
                return (
                  <Tab key={navItem.name} data-text={navItem.name}>
                    {navItem.name}
                  </Tab>
                );
              })}
            </TabList>
          </Tabs>
        </TabsWrapper>
        {children}
      </div>
    </MainContent>
  );
};

export default SettingsWrapper;