feat: - hide custom roles tab if experiment is not enabled

jaaydenh · jaaydenh · commit 365611d96e71 · 2024-08-05T21:24:47.000Z
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx
@@ -3,26 +3,21 @@ import Button from "@mui/material/Button";
 import { type FC, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
-import { Link as RouterLink, useLocation, useParams } from "react-router-dom";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import { getErrorMessage } from "api/errors";
 import { organizationRoles } from "api/queries/roles";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { pageTitle } from "utils/page";
 import CustomRolesPageView from "./CustomRolesPageView";
 
 export const CustomRolesPage: FC = () => {
   const { permissions } = useAuthenticated();
   const { assignOrgRole: canAssignOrgRole } = permissions;
-  const {
-    multiple_organizations: organizationsEnabled,
-    custom_roles: isCustomRolesEnabled,
-  } = useFeatureVisibility();
-  const { experiments } = useDashboard();
-  const location = useLocation();
+  const { custom_roles: isCustomRolesEnabled } = useFeatureVisibility();
+
   const { organization = "default" } = useParams() as { organization: string };
   const organizationRolesQuery = useQuery(organizationRoles(organization));
   const filteredRoleData = organizationRolesQuery.data?.filter(
@@ -40,16 +35,6 @@ export const CustomRolesPage: FC = () => {
     }
   }, [organizationRolesQuery.error]);
 
-  // if (
-  //   organizationsEnabled &&
-  //   experiments.includes("multi-organization") &&
-  //   location.pathname === "/deployment/groups"
-  // ) {
-  //   const defaultName =
-  //     getOrganizationNameByDefault(organizations) ?? "default";
-  //   return <Navigate to={`/organizations/${defaultName}/groups`} replace />;
-  // }
-
   return (
     <>
       <Helmet>
diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -4,16 +4,18 @@ import AddIcon from "@mui/icons-material/Add";
 import SettingsIcon from "@mui/icons-material/Settings";
 import type { FC, ReactNode } from "react";
 import { Link, NavLink, useLocation, useParams } from "react-router-dom";
-import type { Organization } from "api/typesGenerated";
+import type { Experiments, Organization } from "api/typesGenerated";
 import { Sidebar as BaseSidebar } from "components/Sidebar/Sidebar";
 import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { linkToAuditing, linkToUsers, withFilter } from "modules/navigation";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
 
 export const Sidebar: FC = () => {
+  const { experiments } = useDashboard();
   const { organizations } = useOrganizationSettings();
   const { organization } = useParams() as { organization?: string };
   const { multiple_organizations: organizationsEnabled } =
@@ -49,6 +51,7 @@ export const Sidebar: FC = () => {
               key={org.id}
               organization={org}
               active={org.name === organizationName}
+              experiments={experiments}
             />
           ))}
         </>
@@ -123,11 +126,12 @@ function urlForSubpage(organizationName: string, subpage: string = ""): string {
 interface OrganizationSettingsNavigationProps {
   organization: Organization;
   active: boolean;
+  experiments: Experiments;
 }
 
 export const OrganizationSettingsNavigation: FC<
   OrganizationSettingsNavigationProps
-> = ({ organization, active }) => {
+> = ({ organization, active, experiments }) => {
   return (
     <>
       <SidebarNavItem
@@ -155,9 +159,11 @@ export const OrganizationSettingsNavigation: FC<
           <SidebarNavSubItem href={urlForSubpage(organization.name, "groups")}>
             Groups
           </SidebarNavSubItem>
-          <SidebarNavSubItem href={urlForSubpage(organization.name, "roles")}>
-            Roles
-          </SidebarNavSubItem>
+          {experiments.includes("custom-roles") && (
+            <SidebarNavSubItem href={urlForSubpage(organization.name, "roles")}>
+              Roles
+            </SidebarNavSubItem>
+          )}
           {/* For now redirect to the site-wide audit page with the organization
               pre-filled into the filter.  Based on user feedback we might want
               to serve a copy of the audit page or even delete this link. */}
