From bf9ab326fa9417d03b9c24020ad31c1fce3bd7a5 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Sep 2024 22:43:38 +0000 Subject: [PATCH 01/14] typescript is so irritating sometimes --- .../management/ManagementSettingsLayout.tsx | 111 +++++ site/src/modules/management/Sidebar.tsx | 62 +++ .../management/SidebarView.stories.tsx | 225 +++++++++ site/src/modules/management/SidebarView.tsx | 434 ++++++++++++++++++ .../DeploySettingsLayout.tsx | 67 --- site/src/pages/DeploySettingsPage/Sidebar.tsx | 61 --- .../AnnouncementBannerDialog.stories.tsx | 2 +- .../AnnouncementBannerDialog.tsx | 0 .../AnnouncementBannerItem.tsx | 0 .../AnnouncementBannerSettings.tsx | 0 .../AppearanceSettingsPage.tsx | 0 .../AppearanceSettingsPageView.stories.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 0 .../ExternalAuthSettingsPage.tsx | 4 +- .../ExternalAuthSettingsPageView.stories.tsx | 2 +- .../ExternalAuthSettingsPageView.tsx | 0 .../Fieldset.tsx | 0 .../GeneralSettingsPage/ChartSection.tsx | 0 .../GeneralSettingsPage.tsx | 0 .../GeneralSettingsPageView.stories.tsx | 2 +- .../GeneralSettingsPageView.tsx | 0 .../AddNewLicensePage.tsx | 0 .../AddNewLicensePageView.stories.tsx | 2 +- .../AddNewLicensePageView.tsx | 0 .../LicensesSettingsPage/DividerWithText.tsx | 0 .../LicensesSettingsPage/LicenseCard.test.tsx | 0 .../LicensesSettingsPage/LicenseCard.tsx | 0 .../LicensesSettingsPage.tsx | 0 .../LicensesSettingsPageView.stories.tsx | 2 +- .../LicensesSettingsPageView.tsx | 0 .../NetworkSettingsPage.tsx | 4 +- .../NetworkSettingsPageView.stories.tsx | 2 +- .../NetworkSettingsPageView.tsx | 0 .../NotificationEvents.stories.tsx | 0 .../NotificationsPage/NotificationEvents.tsx | 0 .../NotificationsPage.stories.tsx | 0 .../NotificationsPage/NotificationsPage.tsx | 4 +- .../NotificationsPage/storybookUtils.ts | 4 +- .../CreateOAuth2AppPage.tsx | 0 .../CreateOAuth2AppPageView.stories.tsx | 2 +- .../CreateOAuth2AppPageView.tsx | 0 .../EditOAuth2AppPage.tsx | 0 .../EditOAuth2AppPageView.stories.tsx | 2 +- .../EditOAuth2AppPageView.tsx | 0 .../OAuth2AppsSettingsPage/OAuth2AppForm.tsx | 0 .../OAuth2AppsSettingsPage.tsx | 0 .../OAuth2AppsSettingsPageView.stories.tsx | 2 +- .../OAuth2AppsSettingsPageView.tsx | 0 .../ObservabilitySettingsPage.tsx | 4 +- .../ObservabilitySettingsPageView.stories.tsx | 2 +- .../ObservabilitySettingsPageView.tsx | 0 .../Option.tsx | 0 .../OptionsTable.tsx | 0 .../SecuritySettingsPage.tsx | 4 +- .../SecuritySettingsPageView.stories.tsx | 2 +- .../SecuritySettingsPageView.tsx | 0 .../UserAuthSettingsPage.tsx | 4 +- .../UserAuthSettingsPageView.stories.tsx | 2 +- .../UserAuthSettingsPageView.tsx | 0 .../optionValue.test.ts | 0 .../optionValue.ts | 0 .../CustomRolesPage/CreateEditRolePage.tsx | 4 +- .../CustomRolesPage/CustomRolesPage.tsx | 4 +- .../GroupsPage/GroupsPage.tsx | 4 +- .../IdpSyncPage/IdpSyncPage.tsx | 4 +- .../ManagementSettingsLayout.tsx | 82 ---- .../OrganizationMembersPage.tsx | 4 +- .../OrganizationProvisionersPage.tsx | 13 +- .../OrganizationSettingsPage.tsx | 6 +- .../pages/ManagementSettingsPage/Sidebar.tsx | 6 +- site/src/pages/UsersPage/UsersPage.tsx | 2 +- site/src/router.tsx | 35 +- site/src/testHelpers/renderHelpers.tsx | 2 +- site/src/testHelpers/storybook.tsx | 11 +- 74 files changed, 906 insertions(+), 285 deletions(-) create mode 100644 site/src/modules/management/ManagementSettingsLayout.tsx create mode 100644 site/src/modules/management/Sidebar.tsx create mode 100644 site/src/modules/management/SidebarView.stories.tsx create mode 100644 site/src/modules/management/SidebarView.tsx delete mode 100644 site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx delete mode 100644 site/src/pages/DeploySettingsPage/Sidebar.tsx rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx (91%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AnnouncementBannerDialog.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AnnouncementBannerItem.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AnnouncementBannerSettings.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AppearanceSettingsPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx (92%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/AppearanceSettingsPage/AppearanceSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx (80%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx (92%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/Fieldset.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/GeneralSettingsPage/ChartSection.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/GeneralSettingsPage/GeneralSettingsPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx (98%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/GeneralSettingsPage/GeneralSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/AddNewLicensePage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/AddNewLicensePageView.stories.tsx (77%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/AddNewLicensePageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/DividerWithText.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/LicenseCard.test.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/LicenseCard.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/LicensesSettingsPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx (89%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/LicensesSettingsPage/LicensesSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NetworkSettingsPage/NetworkSettingsPage.tsx (79%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx (96%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NetworkSettingsPage/NetworkSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NotificationsPage/NotificationEvents.stories.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NotificationsPage/NotificationEvents.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NotificationsPage/NotificationsPage.stories.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NotificationsPage/NotificationsPage.tsx (94%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/NotificationsPage/storybookUtils.ts (99%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx (92%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx (96%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/OAuth2AppForm.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx (90%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx (87%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx (94%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/Option.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/OptionsTable.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/SecuritySettingsPage/SecuritySettingsPage.tsx (84%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx (95%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/SecuritySettingsPage/SecuritySettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/UserAuthSettingsPage/UserAuthSettingsPage.tsx (80%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx (97%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/UserAuthSettingsPage/UserAuthSettingsPageView.tsx (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/optionValue.test.ts (100%) rename site/src/pages/{DeploySettingsPage => DeploymentSettingsPage}/optionValue.ts (100%) delete mode 100644 site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx new file mode 100644 index 0000000000000..ee89122859a79 --- /dev/null +++ b/site/src/modules/management/ManagementSettingsLayout.tsx @@ -0,0 +1,111 @@ +import { deploymentConfig } from "api/queries/deployment"; +import type { + AuthorizationResponse, + DeploymentConfig, + Organization, +} from "api/typesGenerated"; +import { Loader } from "components/Loader/Loader"; +import { Margins } from "components/Margins/Margins"; +import { Stack } from "components/Stack/Stack"; +import { useAuthenticated } from "contexts/auth/RequireAuth"; +import { RequirePermission } from "contexts/auth/RequirePermission"; +import { useDashboard } from "modules/dashboard/useDashboard"; +import { createContext, type FC, Suspense, useContext } from "react"; +import { useQuery } from "react-query"; +import { Navigate, Outlet, useNavigate, useParams } from "react-router-dom"; +import { Sidebar } from "./Sidebar"; +import { ErrorAlert } from "components/Alert/ErrorAlert"; + +export const ManagementSettingsContext = createContext< + { deploymentValues: DeploymentConfig } | undefined +>(undefined); + +type ManagementSettingsValue = Readonly<{ + deploymentValues: DeploymentConfig; + organizations: readonly Organization[]; + organization?: Organization; +}>; + +export const useManagementSettings = (): ManagementSettingsValue => { + const context = useContext(ManagementSettingsContext); + if (!context) { + throw new Error( + "useManagementSettings should be used inside of ManagementSettingsLayout", + ); + } + const { organizations } = useDashboard(); + const { organization: orgName } = useParams() as { + organization?: string; + }; + + const organization = + organizations && orgName + ? organizations.find((org) => org.name === orgName) + : undefined; + + return { + deploymentValues: context.deploymentValues, + organizations, + organization, + }; +}; + +/** + * Return true if the user can edit the organization settings or its members. + */ +export const canEditOrganization = ( + permissions: AuthorizationResponse | undefined, +) => { + return ( + permissions !== undefined && + (permissions.editOrganization || + permissions.editMembers || + permissions.editGroups) + ); +}; + +/** + * A multi-org capable settings page layout. + * + * If multi-org is not enabled or licensed, this is the wrong layout to use. + * See DeploySettingsLayoutInner instead. + */ +export const ManagementSettingsLayout: FC = () => { + const { permissions } = useAuthenticated(); + const deploymentConfigQuery = useQuery(deploymentConfig()); + + // The deployment settings page also contains users, audit logs, groups and + // organizations, so this page must be visible if you can see any of these. + const canViewDeploymentSettingsPage = + permissions.viewDeploymentValues || + permissions.viewAllUsers || + permissions.editAnyOrganization || + permissions.viewAnyAuditLog; + + if (deploymentConfigQuery.error) { + return ; + } + + if (!deploymentConfigQuery.data) { + return ; + } + + return ( + + + +
+ }> + + + + + + +
+ + + ); +}; diff --git a/site/src/modules/management/Sidebar.tsx b/site/src/modules/management/Sidebar.tsx new file mode 100644 index 0000000000000..23dc47374730c --- /dev/null +++ b/site/src/modules/management/Sidebar.tsx @@ -0,0 +1,62 @@ +import { organizationsPermissions } from "api/queries/organizations"; +import { useAuthenticated } from "contexts/auth/RequireAuth"; +import { useDashboard } from "modules/dashboard/useDashboard"; +import type { FC } from "react"; +import { useQuery } from "react-query"; +import { useLocation, useParams } from "react-router-dom"; +import { + canEditOrganization, + useManagementSettings, +} from "modules/management/ManagementSettingsLayout"; +import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; + +/** + * A combined deployment settings and organization menu. + * + * This should only be used with multi-org support. If multi-org support is + * disabled or not licensed, this is the wrong sidebar to use. See + * DeploySettingsPage/Sidebar instead. + */ +export const Sidebar: FC = () => { + const location = useLocation(); + const { permissions } = useAuthenticated(); + const { experiments } = useDashboard(); + const { organizations } = useManagementSettings(); + const { organization: organizationName } = useParams() as { + organization?: string; + }; + + const orgPermissionsQuery = useQuery( + organizationsPermissions(organizations?.map((o) => o.id)), + ); + + // Sometimes a user can read an organization but cannot actually do anything + // with it. For now, these are filtered out so you only see organizations you + // can manage in some way. + const editableOrgs = organizations + ?.map((org) => { + return { + ...org, + permissions: orgPermissionsQuery.data?.[org.id], + }; + }) + // TypeScript is not able to infer whether permissions are defined on the + // object even if we explicitly check org.permissions here, so add the `is` + // here to help out (canEditOrganization does the actual check). + .filter((org): org is OrganizationWithPermissions => { + return canEditOrganization(org.permissions); + }); + + return ( + + ); +}; diff --git a/site/src/modules/management/SidebarView.stories.tsx b/site/src/modules/management/SidebarView.stories.tsx new file mode 100644 index 0000000000000..ec1e75c1026f6 --- /dev/null +++ b/site/src/modules/management/SidebarView.stories.tsx @@ -0,0 +1,225 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { + MockOrganization, + MockOrganization2, + MockPermissions, +} from "testHelpers/entities"; +import { withDashboardProvider } from "testHelpers/storybook"; +import { SidebarView } from "./SidebarView"; + +const meta: Meta = { + title: "components/MultiOrgSidebarView", + component: SidebarView, + decorators: [withDashboardProvider], + args: { + activeSettings: true, + activeOrganizationName: undefined, + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: true, + editMembers: true, + editGroups: true, + auditOrganization: true, + }, + }, + { + ...MockOrganization2, + permissions: { + editOrganization: true, + editMembers: true, + editGroups: true, + auditOrganization: true, + }, + }, + ], + permissions: MockPermissions, + experiments: ["notifications"], + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoadingOrganizations: Story = { + args: { + organizations: undefined, + }, +}; + +export const NoCreateOrg: Story = { + args: { + permissions: { + ...MockPermissions, + createOrganization: false, + }, + }, +}; + +export const NoViewUsers: Story = { + args: { + permissions: { + ...MockPermissions, + viewAllUsers: false, + }, + }, +}; + +export const NoAuditLog: Story = { + args: { + permissions: { + ...MockPermissions, + viewAnyAuditLog: false, + }, + }, +}; + +export const NoLicenses: Story = { + args: { + permissions: { + ...MockPermissions, + viewAllLicenses: false, + }, + }, +}; + +export const NoDeploymentValues: Story = { + args: { + permissions: { + ...MockPermissions, + viewDeploymentValues: false, + editDeploymentValues: false, + }, + }, +}; + +export const NoPermissions: Story = { + args: { + permissions: {}, + }, +}; + +export const NoSelected: Story = { + args: { + activeSettings: false, + }, +}; + +export const SelectedOrgNoMatch: Story = { + args: { + activeOrganizationName: MockOrganization.name, + organizations: [], + }, +}; + +export const SelectedOrgAdmin: Story = { + args: { + activeOrganizationName: MockOrganization.name, + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: true, + editMembers: true, + editGroups: true, + auditOrganization: true, + assignOrgRole: true, + }, + }, + ], + }, +}; + +export const SelectedOrgAuditor: Story = { + args: { + activeOrganizationName: MockOrganization.name, + permissions: { + ...MockPermissions, + createOrganization: false, + }, + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: false, + editMembers: false, + editGroups: false, + auditOrganization: true, + }, + }, + ], + }, +}; + +export const SelectedOrgUserAdmin: Story = { + args: { + activeOrganizationName: MockOrganization.name, + permissions: { + ...MockPermissions, + createOrganization: false, + }, + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: false, + editMembers: true, + editGroups: true, + auditOrganization: false, + }, + }, + ], + }, +}; + +export const MultiOrgAdminAndUserAdmin: Story = { + args: { + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: false, + editMembers: false, + editGroups: false, + auditOrganization: true, + }, + }, + { + ...MockOrganization2, + permissions: { + editOrganization: false, + editMembers: true, + editGroups: true, + auditOrganization: false, + }, + }, + ], + }, +}; + +export const SelectedMultiOrgAdminAndUserAdmin: Story = { + args: { + activeOrganizationName: MockOrganization2.name, + organizations: [ + { + ...MockOrganization, + permissions: { + editOrganization: false, + editMembers: false, + editGroups: false, + auditOrganization: true, + }, + }, + { + ...MockOrganization2, + permissions: { + editOrganization: false, + editMembers: true, + editGroups: true, + auditOrganization: false, + }, + }, + ], + }, +}; diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx new file mode 100644 index 0000000000000..f76b4da5b339f --- /dev/null +++ b/site/src/modules/management/SidebarView.tsx @@ -0,0 +1,434 @@ +import { cx } from "@emotion/css"; +import type { Interpolation, Theme } from "@emotion/react"; +import AddIcon from "@mui/icons-material/Add"; +import SettingsIcon from "@mui/icons-material/Settings"; +import type { + AuthorizationResponse, + Experiments, + Organization, +} from "api/typesGenerated"; +import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; +import { Loader } from "components/Loader/Loader"; +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 { linkToUsers } from "modules/navigation"; +import type { FC, ReactNode } from "react"; +import { Link, NavLink } from "react-router-dom"; + +export interface OrganizationWithPermissions extends Organization { + permissions: AuthorizationResponse; +} + +interface SidebarProps { + /** True if a settings page is being viewed. */ + activeSettings: boolean; + /** The active org name, if any. Overrides activeSettings. */ + activeOrganizationName: string | undefined; + /** Organizations and their permissions or undefined if still fetching. */ + organizations: OrganizationWithPermissions[] | undefined; + /** Site-wide permissions. */ + permissions: AuthorizationResponse; + /** Active experiments */ + experiments: Experiments; +} + +/** + * A combined deployment settings and organization menu. + */ +export const SidebarView: FC = ({ + activeSettings, + activeOrganizationName, + organizations, + permissions, + experiments, +}) => { + // TODO: Do something nice to scroll to the active org. + return ( + +
+

Deployment

+
+ + + + + ); +}; + +interface DeploymentSettingsNavigationProps { + /** Whether a deployment setting page is being viewed. */ + active: boolean; + /** Site-wide permissions. */ + permissions: AuthorizationResponse; + /** Active experiments */ + experiments: Experiments; +} + +/** + * Displays navigation for deployment settings. If active, highlight the main + * menu heading. + * + * Menu items are shown based on the permissions. If organizations can be + * viewed, groups are skipped since they will show under each org instead. + */ +const DeploymentSettingsNavigation: FC = ({ + active, + permissions, + experiments, +}) => { + return ( +
+ } + > + Deployment + + {active && ( + + {permissions.viewDeploymentValues && ( + General + )} + {permissions.viewAllLicenses && ( + Licenses + )} + {permissions.editDeploymentValues && ( + Appearance + )} + {permissions.viewDeploymentValues && ( + + User Authentication + + )} + {permissions.viewDeploymentValues && ( + + External Authentication + + )} + {/* Not exposing this yet since token exchange is not finished yet. + Network + )} + {/* All users can view workspace regions. */} + + Workspace Proxies + + {permissions.viewDeploymentValues && ( + Security + )} + {permissions.viewDeploymentValues && ( + + Observability + + )} + {permissions.viewAllUsers && ( + + Users + + )} + {experiments.includes("notifications") && ( + + Notifications + + )} + + )} +
+ ); +}; + +function urlForSubpage(organizationName: string, subpage = ""): string { + return `/organizations/${organizationName}/${subpage}`; +} + +interface OrganizationsSettingsNavigationProps { + /** The active org name if an org is being viewed. */ + activeOrganizationName: string | undefined; + /** Organizations and their permissions or undefined if still fetching. */ + organizations: OrganizationWithPermissions[] | undefined; + /** Site-wide permissions. */ + permissions: AuthorizationResponse; +} + +/** + * Displays navigation for all organizations and a create organization link. + * + * If organizations or their permissions are still loading, show a loader. + * + * If there are no organizations and the user does not have the create org + * permission, nothing is displayed. + */ +const OrganizationsSettingsNavigation: FC< + OrganizationsSettingsNavigationProps +> = ({ activeOrganizationName, organizations, permissions }) => { + // Wait for organizations and their permissions to load in. + if (!organizations) { + return ; + } + + if (organizations.length <= 0 && !permissions.createOrganization) { + return null; + } + + return ( + <> +
+

Organizations

+ +
+ + {permissions.createOrganization && ( + } + > + New organization + + )} + {organizations.map((org) => ( + + ))} + + ); +}; + +interface OrganizationSettingsNavigationProps { + /** Whether this organization is currently selected. */ + active: boolean; + /** The organization to display in the navigation. */ + organization: OrganizationWithPermissions; +} + +/** + * Displays navigation for a single organization. + * + * If inactive, no sub-menu items will be shown, just the organization name. + * + * If active, it will show sub-menu items based on the permissions. + */ +const OrganizationSettingsNavigation: FC< + OrganizationSettingsNavigationProps +> = ({ active, organization }) => { + const { experiments } = useDashboard(); + + return ( + <> + + } + > + {organization.display_name} + + {active && ( + + {organization.permissions.editOrganization && ( + + Settings + + )} + {organization.permissions.editMembers && ( + + Members + + )} + {organization.permissions.editGroups && ( + + Groups + + )} + {organization.permissions.assignOrgRole && ( + + Roles + + )} + {organization.permissions.viewProvisioners && ( + + Provisioners + + )} + {organization.permissions.viewIdpSyncSettings && ( + + IdP Sync + + )} + + )} + + ); +}; + +interface SidebarNavItemProps { + active?: boolean | "auto"; + children?: ReactNode; + icon?: ReactNode; + href: string; +} + +const SidebarNavItem: FC = ({ + active, + children, + href, + icon, +}) => { + const link = useClassName(classNames.link, []); + const activeLink = useClassName(classNames.activeLink, []); + + const content = ( + + {icon} + {children} + + ); + + if (active === "auto") { + return ( + cx([link, isActive && activeLink])} + > + {content} + + ); + } + + return ( + + {content} + + ); +}; + +interface SidebarNavSubItemProps { + children?: ReactNode; + href: string; + end?: boolean; +} + +const SidebarNavSubItem: FC = ({ + children, + href, + end, +}) => { + const link = useClassName(classNames.subLink, []); + const activeLink = useClassName(classNames.activeSubLink, []); + + return ( + cx([link, isActive && activeLink])} + > + {children} + + ); +}; + +const styles = { + sidebarHeader: { + textTransform: "uppercase", + letterSpacing: "0.1em", + margin: 0, + fontSize: 11, + fontWeight: 500, + paddingBottom: 4, + }, +} satisfies Record>; + +const classNames = { + link: (css, theme) => css` + color: inherit; + display: block; + font-size: 14px; + text-decoration: none; + padding: 10px 12px 10px 16px; + border-radius: 4px; + transition: background-color 0.15s ease-in-out; + position: relative; + + &:hover { + background-color: ${theme.palette.action.hover}; + } + + border-left: 3px solid transparent; + `, + + activeLink: (css, theme) => css` + border-left-color: ${theme.palette.primary.main}; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + `, + + subLink: (css, theme) => css` + color: ${theme.palette.text.secondary}; + text-decoration: none; + + display: block; + font-size: 13px; + margin-left: 44px; + padding: 4px 12px; + border-radius: 4px; + transition: background-color 0.15s ease-in-out; + margin-bottom: 1px; + position: relative; + + &:hover { + color: ${theme.palette.text.primary}; + background-color: ${theme.palette.action.hover}; + } + `, + + activeSubLink: (css, theme) => css` + color: ${theme.palette.text.primary}; + font-weight: 600; + `, +} satisfies Record; diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx deleted file mode 100644 index 9d90e12a3c26f..0000000000000 --- a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import type { DeploymentConfig } from "api/api"; -import { deploymentConfig } from "api/queries/deployment"; -import { Loader } from "components/Loader/Loader"; -import { Margins } from "components/Margins/Margins"; -import { Stack } from "components/Stack/Stack"; -import { useAuthenticated } from "contexts/auth/RequireAuth"; -import { RequirePermission } from "contexts/auth/RequirePermission"; -import { useDashboard } from "modules/dashboard/useDashboard"; -import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout"; -import { type FC, Suspense, createContext, useContext } from "react"; -import { useQuery } from "react-query"; -import { Outlet } from "react-router-dom"; -import { Sidebar } from "./Sidebar"; - -type DeploySettingsContextValue = { - deploymentValues: DeploymentConfig | undefined; -}; - -export const DeploySettingsContext = createContext< - DeploySettingsContextValue | undefined ->(undefined); - -export const useDeploySettings = (): DeploySettingsContextValue => { - const context = useContext(DeploySettingsContext); - if (!context) { - throw new Error( - "useDeploySettings should be used inside of DeploySettingsContext or DeploySettingsLayout", - ); - } - return context; -}; - -export const DeploySettingsLayout: FC = () => { - const { showOrganizations } = useDashboard(); - - return showOrganizations ? ( - - ) : ( - - ); -}; - -const DeploySettingsLayoutInner: FC = () => { - const deploymentConfigQuery = useQuery(deploymentConfig()); - const { permissions } = useAuthenticated(); - - return ( - - - - -
- - }> - - - -
- - - - ); -}; diff --git a/site/src/pages/DeploySettingsPage/Sidebar.tsx b/site/src/pages/DeploySettingsPage/Sidebar.tsx deleted file mode 100644 index 607920d65ee2f..0000000000000 --- a/site/src/pages/DeploySettingsPage/Sidebar.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import Brush from "@mui/icons-material/Brush"; -import HubOutlinedIcon from "@mui/icons-material/HubOutlined"; -import InsertChartIcon from "@mui/icons-material/InsertChart"; -import LaunchOutlined from "@mui/icons-material/LaunchOutlined"; -import LockRounded from "@mui/icons-material/LockOutlined"; -import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined"; -import Globe from "@mui/icons-material/PublicOutlined"; -import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined"; -import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"; -import { GitIcon } from "components/Icons/GitIcon"; -import { - Sidebar as BaseSidebar, - SidebarNavItem, -} from "components/Sidebar/Sidebar"; -import { useDashboard } from "modules/dashboard/useDashboard"; -import type { FC } from "react"; - -export const Sidebar: FC = () => { - const { experiments } = useDashboard(); - - return ( - - - General - - - Licenses - - - Appearance - - - User Authentication - - - External Authentication - - {/* Not exposing this yet since token exchange is not finished yet. - - OAuth2 Applications - */} - - Network - - - Workspace Proxies - - - Security - - - Observability - - {experiments.includes("notifications") && ( - - Notifications - - )} - - ); -}; diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx similarity index 91% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx index 5d419ba46a7fd..619a20ec9d69c 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { AnnouncementBannerDialog } from "./AnnouncementBannerDialog"; const meta: Meta = { - title: "pages/DeploySettingsPage/AnnouncementBannerDialog", + title: "pages/DeploymentSettingsPage/AnnouncementBannerDialog", component: AnnouncementBannerDialog, args: { banner: { diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx similarity index 92% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx index 67a91e170a409..1670006dbf060 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/AppearanceSettingsPageView", + title: "pages/DeploymentSettingsPage/AppearanceSettingsPageView", component: AppearanceSettingsPageView, args: { appearance: { diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx similarity index 80% rename from site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx index c2d54b441bf93..64db07029b7ac 100644 --- a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx @@ -2,11 +2,11 @@ import { Loader } from "components/Loader/Loader"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView"; const ExternalAuthSettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); return ( <> diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx similarity index 92% rename from site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx index 3e553912c2094..38a74a8e735f4 100644 --- a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/ExternalAuthSettingsPageView", + title: "pages/DeploymentSettingsPage/ExternalAuthSettingsPageView", component: ExternalAuthSettingsPageView, args: { config: { diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/Fieldset.tsx b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/Fieldset.tsx rename to site/src/pages/DeploymentSettingsPage/Fieldset.tsx diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/ChartSection.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx rename to site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/ChartSection.tsx diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx similarity index 98% rename from site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx index f28fe8af57a9d..6f09110e77a5e 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx @@ -7,7 +7,7 @@ import { import { GeneralSettingsPageView } from "./GeneralSettingsPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/GeneralSettingsPageView", + title: "pages/DeploymentSettingsPage/GeneralSettingsPageView", component: GeneralSettingsPageView, args: { deploymentOptions: [ diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx similarity index 77% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx index 3484e9ee74d28..b3f2f5e00ec72 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.stories.tsx @@ -1,7 +1,7 @@ import { AddNewLicensePageView } from "./AddNewLicensePageView"; export default { - title: "pages/DeploySettingsPage/AddNewLicensePageView", + title: "pages/DeploymentSettingsPage/AddNewLicensePageView", component: AddNewLicensePageView, }; diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/DividerWithText.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/DividerWithText.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.test.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.test.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.test.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.test.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx similarity index 89% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx index 295c54f29d26a..87f1405557ef6 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx @@ -3,7 +3,7 @@ import { MockLicenseResponse } from "testHelpers/entities"; import LicensesSettingsPageView from "./LicensesSettingsPageView"; export default { - title: "pages/DeploySettingsPage/LicensesSettingsPageView", + title: "pages/DeploymentSettingsPage/LicensesSettingsPageView", parameters: { chromatic }, component: LicensesSettingsPageView, }; diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx similarity index 79% rename from site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx index 82492d63edad0..5af0e0a5b45e5 100644 --- a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx @@ -2,11 +2,11 @@ import { Loader } from "components/Loader/Loader"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { NetworkSettingsPageView } from "./NetworkSettingsPageView"; const NetworkSettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); return ( <> diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx similarity index 96% rename from site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx index 6d6318adc6bc0..f9d0610a7dfa4 100644 --- a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx @@ -8,7 +8,7 @@ const group: SerpentGroup = { }; const meta: Meta = { - title: "pages/DeploySettingsPage/NetworkSettingsPageView", + title: "pages/DeploymentSettingsPage/NetworkSettingsPageView", component: NetworkSettingsPageView, args: { options: [ diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.stories.tsx rename to site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/NotificationsPage/NotificationEvents.tsx rename to site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.stories.tsx rename to site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx similarity index 94% rename from site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx rename to site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx index c073792248072..d6fd66206e911 100644 --- a/site/src/pages/DeploySettingsPage/NotificationsPage/NotificationsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx @@ -14,13 +14,13 @@ import { useQueries } from "react-query"; import { useSearchParams } from "react-router-dom"; import { deploymentGroupHasParent } from "utils/deployOptions"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import OptionsTable from "../OptionsTable"; import { NotificationEvents } from "./NotificationEvents"; export const NotificationsPage: FC = () => { const [searchParams] = useSearchParams(); - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); const [templatesByGroup, dispatchMethods] = useQueries({ queries: [ { diff --git a/site/src/pages/DeploySettingsPage/NotificationsPage/storybookUtils.ts b/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts similarity index 99% rename from site/src/pages/DeploySettingsPage/NotificationsPage/storybookUtils.ts rename to site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts index c422adb56adb9..1ceca8bbf27d9 100644 --- a/site/src/pages/DeploySettingsPage/NotificationsPage/storybookUtils.ts +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts @@ -12,7 +12,7 @@ import { import { withAuthProvider, withDashboardProvider, - withDeploySettings, + withManagementSettingsProvider, withGlobalSnackbar, } from "testHelpers/storybook"; import type { NotificationsPage } from "./NotificationsPage"; @@ -213,6 +213,6 @@ export const baseMeta = { withGlobalSnackbar, withAuthProvider, withDashboardProvider, - withDeploySettings, + withManagementSettingsProvider, ], } satisfies Meta; diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx similarity index 92% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx index de92aed2a6216..6f2f35bcff73f 100644 --- a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx @@ -3,7 +3,7 @@ import { mockApiError } from "testHelpers/entities"; import { CreateOAuth2AppPageView } from "./CreateOAuth2AppPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/CreateOAuth2AppPageView", + title: "pages/DeploymentSettingsPage/CreateOAuth2AppPageView", component: CreateOAuth2AppPageView, }; export default meta; diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx similarity index 96% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx index acc603ec231f3..ad86d81f3243e 100644 --- a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx @@ -7,7 +7,7 @@ import { import { EditOAuth2AppPageView } from "./EditOAuth2AppPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/EditOAuth2AppPageView", + title: "pages/DeploymentSettingsPage/EditOAuth2AppPageView", component: EditOAuth2AppPageView, }; export default meta; diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx similarity index 90% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx index 3ae7177d00bbd..3e2d175487694 100644 --- a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx @@ -3,7 +3,7 @@ import { MockOAuth2ProviderApps } from "testHelpers/entities"; import OAuth2AppsSettingsPageView from "./OAuth2AppsSettingsPageView"; const meta: Meta = { - title: "pages/DeploySettingsPage/OAuth2AppsSettingsPageView", + title: "pages/DeploymentSettingsPage/OAuth2AppsSettingsPageView", component: OAuth2AppsSettingsPageView, }; export default meta; diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx similarity index 87% rename from site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx index 0b23dee112e15..88d06dc8794e5 100644 --- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx @@ -4,11 +4,11 @@ import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView"; const ObservabilitySettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); const { entitlements } = useDashboard(); const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility(); diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx similarity index 94% rename from site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx index 2de725ab70149..6467ef0830010 100644 --- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx @@ -8,7 +8,7 @@ const group: SerpentGroup = { }; const meta: Meta = { - title: "pages/DeploySettingsPage/ObservabilitySettingsPageView", + title: "pages/DeploymentSettingsPage/ObservabilitySettingsPageView", component: ObservabilitySettingsPageView, args: { options: [ diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploymentSettingsPage/Option.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/Option.tsx rename to site/src/pages/DeploymentSettingsPage/Option.tsx diff --git a/site/src/pages/DeploySettingsPage/OptionsTable.tsx b/site/src/pages/DeploymentSettingsPage/OptionsTable.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/OptionsTable.tsx rename to site/src/pages/DeploymentSettingsPage/OptionsTable.tsx diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx similarity index 84% rename from site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx index 0e27b89041c31..72ac2039d35ef 100644 --- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx @@ -3,11 +3,11 @@ import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { SecuritySettingsPageView } from "./SecuritySettingsPageView"; const SecuritySettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); const { entitlements } = useDashboard(); return ( diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx similarity index 95% rename from site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx index 7f788151ba6f3..c14f2d0a09f2b 100644 --- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx @@ -8,7 +8,7 @@ const group: SerpentGroup = { }; const meta: Meta = { - title: "pages/DeploySettingsPage/SecuritySettingsPageView", + title: "pages/DeploymentSettingsPage/SecuritySettingsPageView", component: SecuritySettingsPageView, args: { options: [ diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx similarity index 80% rename from site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx rename to site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx index 5266064df878b..9bb54535a653c 100644 --- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx @@ -2,11 +2,11 @@ import { Loader } from "components/Loader/Loader"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"; const UserAuthSettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); return ( <> diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx similarity index 97% rename from site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx rename to site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx index 9bbe2d46d7ca5..5756f11748800 100644 --- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx @@ -13,7 +13,7 @@ const ghGroup: SerpentGroup = { }; const meta: Meta = { - title: "pages/DeploySettingsPage/UserAuthSettingsPageView", + title: "pages/DeploymentSettingsPage/UserAuthSettingsPageView", component: UserAuthSettingsPageView, args: { options: [ diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx similarity index 100% rename from site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx rename to site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx diff --git a/site/src/pages/DeploySettingsPage/optionValue.test.ts b/site/src/pages/DeploymentSettingsPage/optionValue.test.ts similarity index 100% rename from site/src/pages/DeploySettingsPage/optionValue.test.ts rename to site/src/pages/DeploymentSettingsPage/optionValue.test.ts diff --git a/site/src/pages/DeploySettingsPage/optionValue.ts b/site/src/pages/DeploymentSettingsPage/optionValue.ts similarity index 100% rename from site/src/pages/DeploySettingsPage/optionValue.ts rename to site/src/pages/DeploymentSettingsPage/optionValue.ts diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx index fd438e8ae5973..722a865b0bf83 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx @@ -13,7 +13,7 @@ import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useNavigate, useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useOrganizationSettings } from "../ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import CreateEditRolePageView from "./CreateEditRolePageView"; export const CreateEditRolePage: FC = () => { @@ -23,7 +23,7 @@ export const CreateEditRolePage: FC = () => { organization: string; roleName: string; }; - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const organization = organizations?.find((o) => o.name === organizationName); const permissionsQuery = useQuery(organizationPermissions(organization?.id)); const createOrganizationRoleMutation = useMutation( diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx index cc47c85133e22..ac7883e19ee51 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -13,7 +13,7 @@ import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useOrganizationSettings } from "../ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import CustomRolesPageView from "./CustomRolesPageView"; export const CustomRolesPage: FC = () => { @@ -22,7 +22,7 @@ export const CustomRolesPage: FC = () => { const { organization: organizationName } = useParams() as { organization: string; }; - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const organization = organizations?.find((o) => o.name === organizationName); const permissionsQuery = useQuery(organizationPermissions(organization?.id)); const deleteRoleMutation = useMutation( diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx index ce0e3fd0804d3..68ada5a1d0a06 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx @@ -15,7 +15,7 @@ import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { Navigate, Link as RouterLink, useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useOrganizationSettings } from "../ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import GroupsPageView from "./GroupsPageView"; export const GroupsPage: FC = () => { @@ -24,7 +24,7 @@ export const GroupsPage: FC = () => { organization: string; }; const groupsQuery = useQuery(groupsByOrganization(organizationName)); - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const organization = organizations?.find((o) => o.name === organizationName); const permissionsQuery = useQuery(organizationPermissions(organization?.id)); diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx index 5842f6d3696c8..378a5f75cc106 100644 --- a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx +++ b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx @@ -17,7 +17,7 @@ import { useQueries } from "react-query"; import { useParams } from "react-router-dom"; import { docs } from "utils/docs"; import { pageTitle } from "utils/page"; -import { useOrganizationSettings } from "../ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip"; import IdpSyncPageView from "./IdpSyncPageView"; @@ -27,7 +27,7 @@ export const IdpSyncPage: FC = () => { }; // IdP sync does not have its own entitlement and is based on templace_rbac const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility(); - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const organization = organizations?.find((o) => o.name === organizationName); const [groupIdpSyncSettingsQuery, roleIdpSyncSettingsQuery, groupsQuery] = diff --git a/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx b/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx deleted file mode 100644 index 4a74417e86a65..0000000000000 --- a/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { deploymentConfig } from "api/queries/deployment"; -import type { AuthorizationResponse, Organization } from "api/typesGenerated"; -import { Loader } from "components/Loader/Loader"; -import { Margins } from "components/Margins/Margins"; -import { Stack } from "components/Stack/Stack"; -import { useAuthenticated } from "contexts/auth/RequireAuth"; -import { RequirePermission } from "contexts/auth/RequirePermission"; -import { useDashboard } from "modules/dashboard/useDashboard"; -import { type FC, Suspense } from "react"; -import { useQuery } from "react-query"; -import { Outlet } from "react-router-dom"; -import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayout"; -import { Sidebar } from "./Sidebar"; - -type OrganizationSettingsValue = Readonly<{ - organizations: readonly Organization[]; -}>; - -export const useOrganizationSettings = (): OrganizationSettingsValue => { - const { organizations } = useDashboard(); - return { organizations }; -}; - -/** - * Return true if the user can edit the organization settings or its members. - */ -export const canEditOrganization = ( - permissions: AuthorizationResponse | undefined, -) => { - return ( - permissions !== undefined && - (permissions.editOrganization || - permissions.editMembers || - permissions.editGroups) - ); -}; - -/** - * A multi-org capable settings page layout. - * - * If multi-org is not enabled or licensed, this is the wrong layout to use. - * See DeploySettingsLayoutInner instead. - */ -export const ManagementSettingsLayout: FC = () => { - const { permissions } = useAuthenticated(); - const deploymentConfigQuery = useQuery( - // TODO: This is probably normally fine because we will not show links to - // pages that need this data, but if you manually visit the page you - // will see an endless loader when maybe we should show a "permission - // denied" error or at least a 404 instead. - permissions.viewDeploymentValues ? deploymentConfig() : { enabled: false }, - ); - - // The deployment settings page also contains users, audit logs, groups and - // organizations, so this page must be visible if you can see any of these. - const canViewDeploymentSettingsPage = - permissions.viewDeploymentValues || - permissions.viewAllUsers || - permissions.editAnyOrganization || - permissions.viewAnyAuditLog; - - return ( - - - - -
- - }> - - - -
- - - - ); -}; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx index af75b454b69b4..cd30b3ba560dc 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx @@ -18,7 +18,7 @@ import { useAuthenticated } from "contexts/auth/RequireAuth"; import { type FC, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useParams } from "react-router-dom"; -import { useOrganizationSettings } from "./ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { OrganizationMembersPageView } from "./OrganizationMembersPageView"; const OrganizationMembersPage: FC = () => { @@ -50,7 +50,7 @@ const OrganizationMembersPage: FC = () => { updateOrganizationMemberRoles(queryClient, organizationName), ); - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const organization = organizations?.find((o) => o.name === organizationName); const permissionsQuery = useQuery(organizationPermissions(organization?.id)); diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx index 55dff198822a0..96af48f241143 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx @@ -1,27 +1,20 @@ import { buildInfo } from "api/queries/buildInfo"; -import { - organizationsPermissions, - provisionerDaemonGroups, -} from "api/queries/organizations"; +import { provisionerDaemonGroups } from "api/queries/organizations"; import type { Organization } from "api/typesGenerated"; -import { ErrorAlert } from "components/Alert/ErrorAlert"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { Loader } from "components/Loader/Loader"; -import { Paywall } from "components/Paywall/Paywall"; import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata"; import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; import { useQuery } from "react-query"; import { useParams } from "react-router-dom"; -import { docs } from "utils/docs"; -import { useOrganizationSettings } from "./ManagementSettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView"; const OrganizationProvisionersPage: FC = () => { const { organization: organizationName } = useParams() as { organization: string; }; - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const { entitlements } = useDashboard(); const { metadata } = useEmbeddedMetadata(); diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx index 7e63bf8111c2c..33f2843a0561d 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx @@ -14,8 +14,8 @@ import { useMutation, useQuery, useQueryClient } from "react-query"; import { Navigate, useNavigate, useParams } from "react-router-dom"; import { canEditOrganization, - useOrganizationSettings, -} from "./ManagementSettingsLayout"; + useManagementSettings, +} from "modules/management/ManagementSettingsLayout"; import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; import { OrganizationSummaryPageView } from "./OrganizationSummaryPageView"; @@ -23,7 +23,7 @@ const OrganizationSettingsPage: FC = () => { const { organization: organizationName } = useParams() as { organization?: string; }; - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const feats = useFeatureVisibility(); const navigate = useNavigate(); diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx index 05c2d7fea30dc..23dc47374730c 100644 --- a/site/src/pages/ManagementSettingsPage/Sidebar.tsx +++ b/site/src/pages/ManagementSettingsPage/Sidebar.tsx @@ -6,8 +6,8 @@ import { useQuery } from "react-query"; import { useLocation, useParams } from "react-router-dom"; import { canEditOrganization, - useOrganizationSettings, -} from "./ManagementSettingsLayout"; + useManagementSettings, +} from "modules/management/ManagementSettingsLayout"; import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; /** @@ -21,7 +21,7 @@ export const Sidebar: FC = () => { const location = useLocation(); const { permissions } = useAuthenticated(); const { experiments } = useDashboard(); - const { organizations } = useOrganizationSettings(); + const { organizations } = useManagementSettings(); const { organization: organizationName } = useParams() as { organization?: string; }; diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index 0fb755d551da2..244aa3ecffb76 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -102,7 +102,7 @@ const UsersPage: FC = () => { authMethodsQuery.isLoading || groupsByUserIdQuery.isLoading; - if (showOrganizations && location.pathname !== "/deployment/users") { + if (showOrganizations && location.pathname === "/users") { return ; } diff --git a/site/src/router.tsx b/site/src/router.tsx index c5c9e68f0f314..1b0022006415b 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -11,10 +11,9 @@ import { Loader } from "./components/Loader/Loader"; import { RequireAuth } from "./contexts/auth/RequireAuth"; import { DashboardLayout } from "./modules/dashboard/DashboardLayout"; import AuditPage from "./pages/AuditPage/AuditPage"; -import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout"; import { HealthLayout } from "./pages/HealthPage/HealthLayout"; import LoginPage from "./pages/LoginPage/LoginPage"; -import { ManagementSettingsLayout } from "./pages/ManagementSettingsPage/ManagementSettingsLayout"; +import { ManagementSettingsLayout } from "./modules/management/ManagementSettingsLayout"; import { SetupPage } from "./pages/SetupPage/SetupPage"; import { TemplateLayout } from "./pages/TemplatePage/TemplateLayout"; import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout"; @@ -96,61 +95,61 @@ const SettingsGroupPage = lazy( const GeneralSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage" + "./pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage" ), ); const SecuritySettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage" + "./pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage" ), ); const AppearanceSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage" + "./pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage" ), ); const UserAuthSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage" + "./pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage" ), ); const ExternalAuthSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage" + "./pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage" ), ); const OAuth2AppsSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage" + "./pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage" ), ); const EditOAuth2AppPage = lazy( () => import( - "./pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage" + "./pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage" ), ); const CreateOAuth2AppPage = lazy( () => import( - "./pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage" + "./pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage" ), ); const NetworkSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage" + "./pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage" ), ); const ObservabilitySettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage" + "./pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage" ), ); const ExternalAuthPage = lazy( @@ -215,12 +214,14 @@ const TemplateSettingsPage = lazy( const LicensesSettingsPage = lazy( () => import( - "./pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage" + "./pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage" ), ); const AddNewLicensePage = lazy( () => - import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage"), + import( + "./pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage" + ), ); const CreateOrganizationPage = lazy( () => import("./pages/ManagementSettingsPage/CreateOrganizationPage"), @@ -282,7 +283,9 @@ const UserNotificationsPage = lazy( ); const DeploymentNotificationsPage = lazy( () => - import("./pages/DeploySettingsPage/NotificationsPage/NotificationsPage"), + import( + "./pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage" + ), ); const RoutesWithSuspense = () => { @@ -413,7 +416,7 @@ export const router = createBrowserRouter( - }> + }> } /> } /> } /> diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx index 30aa6b7e89e10..f093adb1cfb4a 100644 --- a/site/src/testHelpers/renderHelpers.tsx +++ b/site/src/testHelpers/renderHelpers.tsx @@ -9,7 +9,7 @@ import { ThemeProvider } from "contexts/ThemeProvider"; import { RequireAuth } from "contexts/auth/RequireAuth"; import { DashboardLayout } from "modules/dashboard/DashboardLayout"; import type { DashboardProvider } from "modules/dashboard/DashboardProvider"; -import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout"; +import { ManagementSettingsLayout } from "modules/management/ManagementSettingsLayout"; import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"; import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout"; import type { ReactNode } from "react"; diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx index 9550af025e6f7..ca8b19230c9a1 100644 --- a/site/src/testHelpers/storybook.tsx +++ b/site/src/testHelpers/storybook.tsx @@ -7,7 +7,7 @@ import { GlobalSnackbar } from "components/GlobalSnackbar/GlobalSnackbar"; import { AuthProvider } from "contexts/auth/AuthProvider"; import { permissionsToCheck } from "contexts/auth/permissions"; import { DashboardContext } from "modules/dashboard/DashboardProvider"; -import { DeploySettingsContext } from "pages/DeploySettingsPage/DeploySettingsLayout"; +import { ManagementSettingsContext } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { useQueryClient } from "react-query"; import { @@ -126,9 +126,12 @@ export const withGlobalSnackbar = (Story: FC) => ( ); -export const withDeploySettings = (Story: FC, { parameters }: StoryContext) => { +export const withManagementSettingsProvider = ( + Story: FC, + { parameters }: StoryContext, +) => { return ( - { }} > - + ); }; From 05d1e804b0f506af7c88c04047c0d2f773f23a4a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Sep 2024 22:49:47 +0000 Subject: [PATCH 02/14] oh --- site/src/modules/management/ManagementSettingsLayout.tsx | 7 ++----- .../GeneralSettingsPage/GeneralSettingsPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx index ee89122859a79..7fbad682c649d 100644 --- a/site/src/modules/management/ManagementSettingsLayout.tsx +++ b/site/src/modules/management/ManagementSettingsLayout.tsx @@ -1,9 +1,6 @@ +import type { DeploymentConfig } from "api/api"; import { deploymentConfig } from "api/queries/deployment"; -import type { - AuthorizationResponse, - DeploymentConfig, - Organization, -} from "api/typesGenerated"; +import type { AuthorizationResponse, Organization } from "api/typesGenerated"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; import { Stack } from "components/Stack/Stack"; diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx index 9565e7f88b00c..eef20b8509248 100644 --- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx @@ -7,11 +7,11 @@ import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { pageTitle } from "utils/page"; -import { useDeploySettings } from "../DeploySettingsLayout"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { GeneralSettingsPageView } from "./GeneralSettingsPageView"; const GeneralSettingsPage: FC = () => { - const { deploymentValues } = useDeploySettings(); + const { deploymentValues } = useManagementSettings(); const deploymentDAUsQuery = useQuery(deploymentDAUs()); const safeExperimentsQuery = useQuery(availableExperiments()); From 602ffab5e412d92f108fd2557094271b9fd0532c Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 30 Sep 2024 22:59:27 +0000 Subject: [PATCH 03/14] fmt --- site/src/modules/management/ManagementSettingsLayout.tsx | 4 ++-- site/src/modules/management/Sidebar.tsx | 6 +++--- .../ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx | 2 +- .../GeneralSettingsPage/GeneralSettingsPage.tsx | 2 +- .../NetworkSettingsPage/NetworkSettingsPage.tsx | 2 +- .../NotificationsPage/NotificationsPage.tsx | 2 +- .../NotificationsPage/storybookUtils.ts | 2 +- .../ObservabilitySettingsPage/ObservabilitySettingsPage.tsx | 2 +- .../SecuritySettingsPage/SecuritySettingsPage.tsx | 2 +- .../UserAuthSettingsPage/UserAuthSettingsPage.tsx | 2 +- .../CustomRolesPage/CreateEditRolePage.tsx | 2 +- .../CustomRolesPage/CustomRolesPage.tsx | 2 +- .../pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx | 2 +- .../ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx | 2 +- .../ManagementSettingsPage/OrganizationMembersPage.tsx | 2 +- .../ManagementSettingsPage/OrganizationProvisionersPage.tsx | 2 +- .../ManagementSettingsPage/OrganizationSettingsPage.tsx | 6 +++--- site/src/pages/ManagementSettingsPage/Sidebar.tsx | 6 +++--- site/src/router.tsx | 2 +- 19 files changed, 26 insertions(+), 26 deletions(-) diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx index 7fbad682c649d..996de620d386f 100644 --- a/site/src/modules/management/ManagementSettingsLayout.tsx +++ b/site/src/modules/management/ManagementSettingsLayout.tsx @@ -1,17 +1,17 @@ import type { DeploymentConfig } from "api/api"; import { deploymentConfig } from "api/queries/deployment"; import type { AuthorizationResponse, Organization } from "api/typesGenerated"; +import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; import { Stack } from "components/Stack/Stack"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { RequirePermission } from "contexts/auth/RequirePermission"; import { useDashboard } from "modules/dashboard/useDashboard"; -import { createContext, type FC, Suspense, useContext } from "react"; +import { type FC, Suspense, createContext, useContext } from "react"; import { useQuery } from "react-query"; import { Navigate, Outlet, useNavigate, useParams } from "react-router-dom"; import { Sidebar } from "./Sidebar"; -import { ErrorAlert } from "components/Alert/ErrorAlert"; export const ManagementSettingsContext = createContext< { deploymentValues: DeploymentConfig } | undefined diff --git a/site/src/modules/management/Sidebar.tsx b/site/src/modules/management/Sidebar.tsx index 23dc47374730c..273de5718546a 100644 --- a/site/src/modules/management/Sidebar.tsx +++ b/site/src/modules/management/Sidebar.tsx @@ -1,13 +1,13 @@ import { organizationsPermissions } from "api/queries/organizations"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { useDashboard } from "modules/dashboard/useDashboard"; -import type { FC } from "react"; -import { useQuery } from "react-query"; -import { useLocation, useParams } from "react-router-dom"; import { canEditOrganization, useManagementSettings, } from "modules/management/ManagementSettingsLayout"; +import type { FC } from "react"; +import { useQuery } from "react-query"; +import { useLocation, useParams } from "react-router-dom"; import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; /** diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx index 64db07029b7ac..422cebc7edb93 100644 --- a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx @@ -1,8 +1,8 @@ import { Loader } from "components/Loader/Loader"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView"; const ExternalAuthSettingsPage: FC = () => { diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx index eef20b8509248..5d3879e195996 100644 --- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx @@ -3,11 +3,11 @@ import { entitlements } from "api/queries/entitlements"; import { availableExperiments, experiments } from "api/queries/experiments"; import { Loader } from "components/Loader/Loader"; import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { GeneralSettingsPageView } from "./GeneralSettingsPageView"; const GeneralSettingsPage: FC = () => { diff --git a/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx index 5af0e0a5b45e5..6ebd005f71031 100644 --- a/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx @@ -1,8 +1,8 @@ import { Loader } from "components/Loader/Loader"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { NetworkSettingsPageView } from "./NetworkSettingsPageView"; const NetworkSettingsPage: FC = () => { diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx index d6fd66206e911..21a5010ae240c 100644 --- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.tsx @@ -6,6 +6,7 @@ import { } from "api/queries/notifications"; import { Loader } from "components/Loader/Loader"; import { TabLink, Tabs, TabsList } from "components/Tabs/Tabs"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { castNotificationMethod } from "modules/notifications/utils"; import { Section } from "pages/UserSettingsPage/Section"; import type { FC } from "react"; @@ -14,7 +15,6 @@ import { useQueries } from "react-query"; import { useSearchParams } from "react-router-dom"; import { deploymentGroupHasParent } from "utils/deployOptions"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import OptionsTable from "../OptionsTable"; import { NotificationEvents } from "./NotificationEvents"; diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts b/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts index 1ceca8bbf27d9..4906a5ab54496 100644 --- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/storybookUtils.ts @@ -12,8 +12,8 @@ import { import { withAuthProvider, withDashboardProvider, - withManagementSettingsProvider, withGlobalSnackbar, + withManagementSettingsProvider, } from "testHelpers/storybook"; import type { NotificationsPage } from "./NotificationsPage"; diff --git a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx index 88d06dc8794e5..1ea1a2d19ef82 100644 --- a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx @@ -1,10 +1,10 @@ import { Loader } from "components/Loader/Loader"; import { useDashboard } from "modules/dashboard/useDashboard"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView"; const ObservabilitySettingsPage: FC = () => { diff --git a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx index 72ac2039d35ef..2a296fc9d22d2 100644 --- a/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx @@ -1,9 +1,9 @@ import { Loader } from "components/Loader/Loader"; import { useDashboard } from "modules/dashboard/useDashboard"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { SecuritySettingsPageView } from "./SecuritySettingsPageView"; const SecuritySettingsPage: FC = () => { diff --git a/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx index 9bb54535a653c..b6382f5a54f99 100644 --- a/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx @@ -1,8 +1,8 @@ import { Loader } from "components/Loader/Loader"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"; const UserAuthSettingsPage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx index 722a865b0bf83..80995a160b67d 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx @@ -8,12 +8,12 @@ import { import type { CustomRoleRequest } from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useNavigate, useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import CreateEditRolePageView from "./CreateEditRolePageView"; export const CreateEditRolePage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx index ac7883e19ee51..34c33083a76be 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -8,12 +8,12 @@ import { Loader } from "components/Loader/Loader"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { type FC, useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import CustomRolesPageView from "./CustomRolesPageView"; export const CustomRolesPage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx index 68ada5a1d0a06..774360dc6a6d1 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx @@ -10,12 +10,12 @@ import { Loader } from "components/Loader/Loader"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { type FC, useEffect } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { Navigate, Link as RouterLink, useParams } from "react-router-dom"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import GroupsPageView from "./GroupsPageView"; export const GroupsPage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx index 378a5f75cc106..89f72fd3fd29d 100644 --- a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx +++ b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx @@ -11,13 +11,13 @@ import { Paywall } from "components/Paywall/Paywall"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQueries } from "react-query"; import { useParams } from "react-router-dom"; import { docs } from "utils/docs"; import { pageTitle } from "utils/page"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip"; import IdpSyncPageView from "./IdpSyncPageView"; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx index cd30b3ba560dc..de6295a838bd9 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx @@ -15,10 +15,10 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; import { Stack } from "components/Stack/Stack"; import { useAuthenticated } from "contexts/auth/RequireAuth"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { type FC, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { useParams } from "react-router-dom"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { OrganizationMembersPageView } from "./OrganizationMembersPageView"; const OrganizationMembersPage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx index 96af48f241143..bd91c348e03ee 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx @@ -4,10 +4,10 @@ import type { Organization } from "api/typesGenerated"; import { EmptyState } from "components/EmptyState/EmptyState"; import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata"; import { useDashboard } from "modules/dashboard/useDashboard"; +import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import type { FC } from "react"; import { useQuery } from "react-query"; import { useParams } from "react-router-dom"; -import { useManagementSettings } from "modules/management/ManagementSettingsLayout"; import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView"; const OrganizationProvisionersPage: FC = () => { diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx index 33f2843a0561d..1d11c85a605ae 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx @@ -9,13 +9,13 @@ import { EmptyState } from "components/EmptyState/EmptyState"; import { displaySuccess } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; -import type { FC } from "react"; -import { useMutation, useQuery, useQueryClient } from "react-query"; -import { Navigate, useNavigate, useParams } from "react-router-dom"; import { canEditOrganization, useManagementSettings, } from "modules/management/ManagementSettingsLayout"; +import type { FC } from "react"; +import { useMutation, useQuery, useQueryClient } from "react-query"; +import { Navigate, useNavigate, useParams } from "react-router-dom"; import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; import { OrganizationSummaryPageView } from "./OrganizationSummaryPageView"; diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx index 23dc47374730c..273de5718546a 100644 --- a/site/src/pages/ManagementSettingsPage/Sidebar.tsx +++ b/site/src/pages/ManagementSettingsPage/Sidebar.tsx @@ -1,13 +1,13 @@ import { organizationsPermissions } from "api/queries/organizations"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { useDashboard } from "modules/dashboard/useDashboard"; -import type { FC } from "react"; -import { useQuery } from "react-query"; -import { useLocation, useParams } from "react-router-dom"; import { canEditOrganization, useManagementSettings, } from "modules/management/ManagementSettingsLayout"; +import type { FC } from "react"; +import { useQuery } from "react-query"; +import { useLocation, useParams } from "react-router-dom"; import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; /** diff --git a/site/src/router.tsx b/site/src/router.tsx index 1b0022006415b..330a576878ea8 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -10,10 +10,10 @@ import { import { Loader } from "./components/Loader/Loader"; import { RequireAuth } from "./contexts/auth/RequireAuth"; import { DashboardLayout } from "./modules/dashboard/DashboardLayout"; +import { ManagementSettingsLayout } from "./modules/management/ManagementSettingsLayout"; import AuditPage from "./pages/AuditPage/AuditPage"; import { HealthLayout } from "./pages/HealthPage/HealthLayout"; import LoginPage from "./pages/LoginPage/LoginPage"; -import { ManagementSettingsLayout } from "./modules/management/ManagementSettingsLayout"; import { SetupPage } from "./pages/SetupPage/SetupPage"; import { TemplateLayout } from "./pages/TemplatePage/TemplateLayout"; import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout"; From 445b82e55d1d7ca94f08383a3efb9510f95d26df Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 2 Oct 2024 16:46:21 +0000 Subject: [PATCH 04/14] yay --- .../dashboard/Navbar/DeploymentDropdown.tsx | 2 +- .../management/ManagementSettingsLayout.tsx | 32 ++++++++-------- site/src/modules/management/Sidebar.tsx | 2 - .../management/SidebarView.stories.tsx | 1 - site/src/modules/management/SidebarView.tsx | 38 ++++++++++--------- site/src/modules/navigation.ts | 2 +- site/src/pages/UsersPage/UsersPage.tsx | 2 +- 7 files changed, 39 insertions(+), 40 deletions(-) diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx index 3d1bee7365ba5..ec55c2ac3728a 100644 --- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx @@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC = ({ {canViewAllUsers && ( diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx index 996de620d386f..05ab7204168da 100644 --- a/site/src/modules/management/ManagementSettingsLayout.tsx +++ b/site/src/modules/management/ManagementSettingsLayout.tsx @@ -10,7 +10,7 @@ import { RequirePermission } from "contexts/auth/RequirePermission"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, Suspense, createContext, useContext } from "react"; import { useQuery } from "react-query"; -import { Navigate, Outlet, useNavigate, useParams } from "react-router-dom"; +import { Outlet, useParams } from "react-router-dom"; import { Sidebar } from "./Sidebar"; export const ManagementSettingsContext = createContext< @@ -88,21 +88,21 @@ export const ManagementSettingsLayout: FC = () => { } return ( - - - -
- }> - - + + + + + +
+ }> - - - -
- - + +
+ + + + ); }; diff --git a/site/src/modules/management/Sidebar.tsx b/site/src/modules/management/Sidebar.tsx index 273de5718546a..a2560fe5d6515 100644 --- a/site/src/modules/management/Sidebar.tsx +++ b/site/src/modules/management/Sidebar.tsx @@ -20,7 +20,6 @@ import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; export const Sidebar: FC = () => { const location = useLocation(); const { permissions } = useAuthenticated(); - const { experiments } = useDashboard(); const { organizations } = useManagementSettings(); const { organization: organizationName } = useParams() as { organization?: string; @@ -56,7 +55,6 @@ export const Sidebar: FC = () => { activeOrganizationName={organizationName} organizations={editableOrgs} permissions={permissions} - experiments={experiments} /> ); }; diff --git a/site/src/modules/management/SidebarView.stories.tsx b/site/src/modules/management/SidebarView.stories.tsx index ec1e75c1026f6..6b4417c7184e7 100644 --- a/site/src/modules/management/SidebarView.stories.tsx +++ b/site/src/modules/management/SidebarView.stories.tsx @@ -35,7 +35,6 @@ const meta: Meta = { }, ], permissions: MockPermissions, - experiments: ["notifications"], }, }; diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx index c3a70212b2f92..109f03cdc827b 100644 --- a/site/src/modules/management/SidebarView.tsx +++ b/site/src/modules/management/SidebarView.tsx @@ -31,8 +31,6 @@ interface SidebarProps { organizations: OrganizationWithPermissions[] | undefined; /** Site-wide permissions. */ permissions: AuthorizationResponse; - /** Active experiments */ - experiments: Experiments; } /** @@ -43,25 +41,29 @@ export const SidebarView: FC = ({ activeOrganizationName, organizations, permissions, - experiments, }) => { + const { showOrganizations } = useDashboard(); + // TODO: Do something nice to scroll to the active org. return ( -
-

Deployment

-
+ {showOrganizations && ( +
+

Deployment

+
+ )} - + {showOrganizations && ( + + )} ); }; @@ -71,8 +73,6 @@ interface DeploymentSettingsNavigationProps { active: boolean; /** Site-wide permissions. */ permissions: AuthorizationResponse; - /** Active experiments */ - experiments: Experiments; } /** @@ -85,7 +85,6 @@ interface DeploymentSettingsNavigationProps { const DeploymentSettingsNavigation: FC = ({ active, permissions, - experiments, }) => { return (
@@ -148,9 +147,12 @@ const DeploymentSettingsNavigation: FC = ({ Users )} - - Notifications - + + + Notifications + + + )}
diff --git a/site/src/modules/navigation.ts b/site/src/modules/navigation.ts index b4b41d15212c1..ab089b04a0c5d 100644 --- a/site/src/modules/navigation.ts +++ b/site/src/modules/navigation.ts @@ -22,7 +22,7 @@ export function withFilter(path: string, filter: string) { export const linkToAuditing = "/audit"; -export const linkToUsers = withFilter("/users", "status:active"); +export const linkToUsers = withFilter("/deployment/users", "status:active"); export const linkToTemplate = (organizationName: string, templateName: string): LinkThunk => diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index 244aa3ecffb76..7b90ec98b3248 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -102,7 +102,7 @@ const UsersPage: FC = () => { authMethodsQuery.isLoading || groupsByUserIdQuery.isLoading; - if (showOrganizations && location.pathname === "/users") { + if (location.pathname === "/users") { return ; } From c8eaa77f07fe69ffedb7f1b17d0614e721e68818 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 2 Oct 2024 17:01:49 +0000 Subject: [PATCH 05/14] oih --- site/src/modules/management/SidebarView.tsx | 12 +- .../pages/ManagementSettingsPage/Sidebar.tsx | 62 --- .../SidebarView.stories.tsx | 225 --------- .../ManagementSettingsPage/SidebarView.tsx | 435 ------------------ 4 files changed, 6 insertions(+), 728 deletions(-) delete mode 100644 site/src/pages/ManagementSettingsPage/Sidebar.tsx delete mode 100644 site/src/pages/ManagementSettingsPage/SidebarView.stories.tsx delete mode 100644 site/src/pages/ManagementSettingsPage/SidebarView.tsx diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx index 109f03cdc827b..1d7a5f3a18f24 100644 --- a/site/src/modules/management/SidebarView.tsx +++ b/site/src/modules/management/SidebarView.tsx @@ -147,12 +147,12 @@ const DeploymentSettingsNavigation: FC = ({ Users )} - - - Notifications - - - + + + Notifications + + + )} diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx deleted file mode 100644 index 273de5718546a..0000000000000 --- a/site/src/pages/ManagementSettingsPage/Sidebar.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { organizationsPermissions } from "api/queries/organizations"; -import { useAuthenticated } from "contexts/auth/RequireAuth"; -import { useDashboard } from "modules/dashboard/useDashboard"; -import { - canEditOrganization, - useManagementSettings, -} from "modules/management/ManagementSettingsLayout"; -import type { FC } from "react"; -import { useQuery } from "react-query"; -import { useLocation, useParams } from "react-router-dom"; -import { type OrganizationWithPermissions, SidebarView } from "./SidebarView"; - -/** - * A combined deployment settings and organization menu. - * - * This should only be used with multi-org support. If multi-org support is - * disabled or not licensed, this is the wrong sidebar to use. See - * DeploySettingsPage/Sidebar instead. - */ -export const Sidebar: FC = () => { - const location = useLocation(); - const { permissions } = useAuthenticated(); - const { experiments } = useDashboard(); - const { organizations } = useManagementSettings(); - const { organization: organizationName } = useParams() as { - organization?: string; - }; - - const orgPermissionsQuery = useQuery( - organizationsPermissions(organizations?.map((o) => o.id)), - ); - - // Sometimes a user can read an organization but cannot actually do anything - // with it. For now, these are filtered out so you only see organizations you - // can manage in some way. - const editableOrgs = organizations - ?.map((org) => { - return { - ...org, - permissions: orgPermissionsQuery.data?.[org.id], - }; - }) - // TypeScript is not able to infer whether permissions are defined on the - // object even if we explicitly check org.permissions here, so add the `is` - // here to help out (canEditOrganization does the actual check). - .filter((org): org is OrganizationWithPermissions => { - return canEditOrganization(org.permissions); - }); - - return ( - - ); -}; diff --git a/site/src/pages/ManagementSettingsPage/SidebarView.stories.tsx b/site/src/pages/ManagementSettingsPage/SidebarView.stories.tsx deleted file mode 100644 index ec1e75c1026f6..0000000000000 --- a/site/src/pages/ManagementSettingsPage/SidebarView.stories.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { - MockOrganization, - MockOrganization2, - MockPermissions, -} from "testHelpers/entities"; -import { withDashboardProvider } from "testHelpers/storybook"; -import { SidebarView } from "./SidebarView"; - -const meta: Meta = { - title: "components/MultiOrgSidebarView", - component: SidebarView, - decorators: [withDashboardProvider], - args: { - activeSettings: true, - activeOrganizationName: undefined, - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: true, - editMembers: true, - editGroups: true, - auditOrganization: true, - }, - }, - { - ...MockOrganization2, - permissions: { - editOrganization: true, - editMembers: true, - editGroups: true, - auditOrganization: true, - }, - }, - ], - permissions: MockPermissions, - experiments: ["notifications"], - }, -}; - -export default meta; -type Story = StoryObj; - -export const LoadingOrganizations: Story = { - args: { - organizations: undefined, - }, -}; - -export const NoCreateOrg: Story = { - args: { - permissions: { - ...MockPermissions, - createOrganization: false, - }, - }, -}; - -export const NoViewUsers: Story = { - args: { - permissions: { - ...MockPermissions, - viewAllUsers: false, - }, - }, -}; - -export const NoAuditLog: Story = { - args: { - permissions: { - ...MockPermissions, - viewAnyAuditLog: false, - }, - }, -}; - -export const NoLicenses: Story = { - args: { - permissions: { - ...MockPermissions, - viewAllLicenses: false, - }, - }, -}; - -export const NoDeploymentValues: Story = { - args: { - permissions: { - ...MockPermissions, - viewDeploymentValues: false, - editDeploymentValues: false, - }, - }, -}; - -export const NoPermissions: Story = { - args: { - permissions: {}, - }, -}; - -export const NoSelected: Story = { - args: { - activeSettings: false, - }, -}; - -export const SelectedOrgNoMatch: Story = { - args: { - activeOrganizationName: MockOrganization.name, - organizations: [], - }, -}; - -export const SelectedOrgAdmin: Story = { - args: { - activeOrganizationName: MockOrganization.name, - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: true, - editMembers: true, - editGroups: true, - auditOrganization: true, - assignOrgRole: true, - }, - }, - ], - }, -}; - -export const SelectedOrgAuditor: Story = { - args: { - activeOrganizationName: MockOrganization.name, - permissions: { - ...MockPermissions, - createOrganization: false, - }, - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: false, - editMembers: false, - editGroups: false, - auditOrganization: true, - }, - }, - ], - }, -}; - -export const SelectedOrgUserAdmin: Story = { - args: { - activeOrganizationName: MockOrganization.name, - permissions: { - ...MockPermissions, - createOrganization: false, - }, - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: false, - editMembers: true, - editGroups: true, - auditOrganization: false, - }, - }, - ], - }, -}; - -export const MultiOrgAdminAndUserAdmin: Story = { - args: { - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: false, - editMembers: false, - editGroups: false, - auditOrganization: true, - }, - }, - { - ...MockOrganization2, - permissions: { - editOrganization: false, - editMembers: true, - editGroups: true, - auditOrganization: false, - }, - }, - ], - }, -}; - -export const SelectedMultiOrgAdminAndUserAdmin: Story = { - args: { - activeOrganizationName: MockOrganization2.name, - organizations: [ - { - ...MockOrganization, - permissions: { - editOrganization: false, - editMembers: false, - editGroups: false, - auditOrganization: true, - }, - }, - { - ...MockOrganization2, - permissions: { - editOrganization: false, - editMembers: true, - editGroups: true, - auditOrganization: false, - }, - }, - ], - }, -}; diff --git a/site/src/pages/ManagementSettingsPage/SidebarView.tsx b/site/src/pages/ManagementSettingsPage/SidebarView.tsx deleted file mode 100644 index 76874490e90e8..0000000000000 --- a/site/src/pages/ManagementSettingsPage/SidebarView.tsx +++ /dev/null @@ -1,435 +0,0 @@ -import { cx } from "@emotion/css"; -import type { Interpolation, Theme } from "@emotion/react"; -import AddIcon from "@mui/icons-material/Add"; -import SettingsIcon from "@mui/icons-material/Settings"; -import type { - AuthorizationResponse, - Experiments, - Organization, -} from "api/typesGenerated"; -import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge"; -import { Loader } from "components/Loader/Loader"; -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 { linkToUsers } from "modules/navigation"; -import type { FC, ReactNode } from "react"; -import { Link, NavLink } from "react-router-dom"; - -export interface OrganizationWithPermissions extends Organization { - permissions: AuthorizationResponse; -} - -interface SidebarProps { - /** True if a settings page is being viewed. */ - activeSettings: boolean; - /** The active org name, if any. Overrides activeSettings. */ - activeOrganizationName: string | undefined; - /** Organizations and their permissions or undefined if still fetching. */ - organizations: OrganizationWithPermissions[] | undefined; - /** Site-wide permissions. */ - permissions: AuthorizationResponse; - /** Active experiments */ - experiments: Experiments; -} - -/** - * A combined deployment settings and organization menu. - */ -export const SidebarView: FC = ({ - activeSettings, - activeOrganizationName, - organizations, - permissions, - experiments, -}) => { - // TODO: Do something nice to scroll to the active org. - return ( - -
-

Deployment

-
- - - - - ); -}; - -interface DeploymentSettingsNavigationProps { - /** Whether a deployment setting page is being viewed. */ - active: boolean; - /** Site-wide permissions. */ - permissions: AuthorizationResponse; - /** Active experiments */ - experiments: Experiments; -} - -/** - * Displays navigation for deployment settings. If active, highlight the main - * menu heading. - * - * Menu items are shown based on the permissions. If organizations can be - * viewed, groups are skipped since they will show under each org instead. - */ -const DeploymentSettingsNavigation: FC = ({ - active, - permissions, - experiments, -}) => { - return ( -
- } - > - Deployment - - {active && ( - - {permissions.viewDeploymentValues && ( - General - )} - {permissions.viewAllLicenses && ( - Licenses - )} - {permissions.editDeploymentValues && ( - Appearance - )} - {permissions.viewDeploymentValues && ( - - User Authentication - - )} - {permissions.viewDeploymentValues && ( - - External Authentication - - )} - {/* Not exposing this yet since token exchange is not finished yet. - Network - )} - {/* All users can view workspace regions. */} - - Workspace Proxies - - {permissions.viewDeploymentValues && ( - Security - )} - {permissions.viewDeploymentValues && ( - - Observability - - )} - {permissions.viewAllUsers && ( - - Users - - )} - - - Notifications - - - - - )} -
- ); -}; - -function urlForSubpage(organizationName: string, subpage = ""): string { - return `/organizations/${organizationName}/${subpage}`; -} - -interface OrganizationsSettingsNavigationProps { - /** The active org name if an org is being viewed. */ - activeOrganizationName: string | undefined; - /** Organizations and their permissions or undefined if still fetching. */ - organizations: OrganizationWithPermissions[] | undefined; - /** Site-wide permissions. */ - permissions: AuthorizationResponse; -} - -/** - * Displays navigation for all organizations and a create organization link. - * - * If organizations or their permissions are still loading, show a loader. - * - * If there are no organizations and the user does not have the create org - * permission, nothing is displayed. - */ -const OrganizationsSettingsNavigation: FC< - OrganizationsSettingsNavigationProps -> = ({ activeOrganizationName, organizations, permissions }) => { - // Wait for organizations and their permissions to load in. - if (!organizations) { - return ; - } - - if (organizations.length <= 0 && !permissions.createOrganization) { - return null; - } - - return ( - <> -
-

Organizations

- -
- - {permissions.createOrganization && ( - } - > - New organization - - )} - {organizations.map((org) => ( - - ))} - - ); -}; - -interface OrganizationSettingsNavigationProps { - /** Whether this organization is currently selected. */ - active: boolean; - /** The organization to display in the navigation. */ - organization: OrganizationWithPermissions; -} - -/** - * Displays navigation for a single organization. - * - * If inactive, no sub-menu items will be shown, just the organization name. - * - * If active, it will show sub-menu items based on the permissions. - */ -const OrganizationSettingsNavigation: FC< - OrganizationSettingsNavigationProps -> = ({ active, organization }) => { - const { experiments } = useDashboard(); - - return ( - <> - - } - > - {organization.display_name} - - {active && ( - - {organization.permissions.editOrganization && ( - - Settings - - )} - {organization.permissions.editMembers && ( - - Members - - )} - {organization.permissions.editGroups && ( - - Groups - - )} - {organization.permissions.assignOrgRole && ( - - Roles - - )} - {organization.permissions.viewProvisioners && ( - - Provisioners - - )} - {organization.permissions.viewIdpSyncSettings && ( - - IdP Sync - - )} - - )} - - ); -}; - -interface SidebarNavItemProps { - active?: boolean | "auto"; - children?: ReactNode; - icon?: ReactNode; - href: string; -} - -const SidebarNavItem: FC = ({ - active, - children, - href, - icon, -}) => { - const link = useClassName(classNames.link, []); - const activeLink = useClassName(classNames.activeLink, []); - - const content = ( - - {icon} - {children} - - ); - - if (active === "auto") { - return ( - cx([link, isActive && activeLink])} - > - {content} - - ); - } - - return ( - - {content} - - ); -}; - -interface SidebarNavSubItemProps { - children?: ReactNode; - href: string; - end?: boolean; -} - -const SidebarNavSubItem: FC = ({ - children, - href, - end, -}) => { - const link = useClassName(classNames.subLink, []); - const activeLink = useClassName(classNames.activeSubLink, []); - - return ( - cx([link, isActive && activeLink])} - > - {children} - - ); -}; - -const styles = { - sidebarHeader: { - textTransform: "uppercase", - letterSpacing: "0.1em", - margin: 0, - fontSize: 11, - fontWeight: 500, - paddingBottom: 4, - }, -} satisfies Record>; - -const classNames = { - link: (css, theme) => css` - color: inherit; - display: block; - font-size: 14px; - text-decoration: none; - padding: 10px 12px 10px 16px; - border-radius: 4px; - transition: background-color 0.15s ease-in-out; - position: relative; - - &:hover { - background-color: ${theme.palette.action.hover}; - } - - border-left: 3px solid transparent; - `, - - activeLink: (css, theme) => css` - border-left-color: ${theme.palette.primary.main}; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - `, - - subLink: (css, theme) => css` - color: ${theme.palette.text.secondary}; - text-decoration: none; - - display: block; - font-size: 13px; - margin-left: 44px; - padding: 4px 12px; - border-radius: 4px; - transition: background-color 0.15s ease-in-out; - margin-bottom: 1px; - position: relative; - - &:hover { - color: ${theme.palette.text.primary}; - background-color: ${theme.palette.action.hover}; - } - `, - - activeSubLink: (css, theme) => css` - color: ${theme.palette.text.primary}; - font-weight: 600; - `, -} satisfies Record; From f4beba0536cd60b3a85f8714e58c46b2dfeced69 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 2 Oct 2024 17:13:48 +0000 Subject: [PATCH 06/14] here --- site/src/modules/management/SidebarView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/modules/management/SidebarView.tsx b/site/src/modules/management/SidebarView.tsx index 1d7a5f3a18f24..b4099a4dd7815 100644 --- a/site/src/modules/management/SidebarView.tsx +++ b/site/src/modules/management/SidebarView.tsx @@ -143,9 +143,7 @@ const DeploymentSettingsNavigation: FC = ({ )} {permissions.viewAllUsers && ( - - Users - + Users )} From 3af96010def839cfc118677b0d9a48a422bc2780 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 2 Oct 2024 17:15:17 +0000 Subject: [PATCH 07/14] fix route --- site/e2e/tests/users/createUserWithPassword.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/site/e2e/tests/users/createUserWithPassword.spec.ts b/site/e2e/tests/users/createUserWithPassword.spec.ts index 67f3ca92e9810..85a3e47ccd87f 100644 --- a/site/e2e/tests/users/createUserWithPassword.spec.ts +++ b/site/e2e/tests/users/createUserWithPassword.spec.ts @@ -5,7 +5,9 @@ import { beforeCoderTest } from "../../hooks"; test.beforeEach(async ({ page }) => await beforeCoderTest(page)); test("create user with password", async ({ page, baseURL }) => { - await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" }); + await page.goto(`${baseURL}/deployment/users`, { + waitUntil: "domcontentloaded", + }); await expect(page).toHaveTitle("Users - Coder"); await page.getByRole("button", { name: "Create user" }).click(); @@ -37,7 +39,9 @@ test("create user with password", async ({ page, baseURL }) => { }); test("create user without full name is optional", async ({ page, baseURL }) => { - await page.goto(`${baseURL}/users`, { waitUntil: "domcontentloaded" }); + await page.goto(`${baseURL}/deployment/users`, { + waitUntil: "domcontentloaded", + }); await expect(page).toHaveTitle("Users - Coder"); await page.getByRole("button", { name: "Create user" }).click(); From 932f82980e7c852503bae2890a8ae77c5ad34186 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 20:54:47 +0000 Subject: [PATCH 08/14] :) --- .../management/ManagementSettingsLayout.tsx | 32 +++++++++---------- .../NotificationEvents.stories.tsx | 2 +- .../NotificationsPage.stories.tsx | 2 +- .../CreateOAuth2AppPageView.stories.tsx | 6 +--- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/site/src/modules/management/ManagementSettingsLayout.tsx b/site/src/modules/management/ManagementSettingsLayout.tsx index 05ab7204168da..b9fcbc0936e4b 100644 --- a/site/src/modules/management/ManagementSettingsLayout.tsx +++ b/site/src/modules/management/ManagementSettingsLayout.tsx @@ -14,7 +14,7 @@ import { Outlet, useParams } from "react-router-dom"; import { Sidebar } from "./Sidebar"; export const ManagementSettingsContext = createContext< - { deploymentValues: DeploymentConfig } | undefined + ManagementSettingsValue | undefined >(undefined); type ManagementSettingsValue = Readonly<{ @@ -30,21 +30,8 @@ export const useManagementSettings = (): ManagementSettingsValue => { "useManagementSettings should be used inside of ManagementSettingsLayout", ); } - const { organizations } = useDashboard(); - const { organization: orgName } = useParams() as { - organization?: string; - }; - - const organization = - organizations && orgName - ? organizations.find((org) => org.name === orgName) - : undefined; - return { - deploymentValues: context.deploymentValues, - organizations, - organization, - }; + return context; }; /** @@ -70,6 +57,10 @@ export const canEditOrganization = ( export const ManagementSettingsLayout: FC = () => { const { permissions } = useAuthenticated(); const deploymentConfigQuery = useQuery(deploymentConfig()); + const { organizations } = useDashboard(); + const { organization: orgName } = useParams() as { + organization?: string; + }; // The deployment settings page also contains users, audit logs, groups and // organizations, so this page must be visible if you can see any of these. @@ -87,10 +78,19 @@ export const ManagementSettingsLayout: FC = () => { return ; } + const organization = + organizations && orgName + ? organizations.find((org) => org.name === orgName) + : undefined; + return ( diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx index 159a2d45b8e63..c2e8479a26f8c 100644 --- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.stories.tsx @@ -8,7 +8,7 @@ import { NotificationEvents } from "./NotificationEvents"; import { baseMeta } from "./storybookUtils"; const meta: Meta = { - title: "pages/DeploymentSettings/NotificationsPage/NotificationEvents", + title: "pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents", component: NotificationEvents, args: { defaultMethod: "smtp", diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx index 79984c46dd46e..a76f31fb33eed 100644 --- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationsPage.stories.tsx @@ -12,7 +12,7 @@ import { NotificationsPage } from "./NotificationsPage"; import { baseMeta } from "./storybookUtils"; const meta: Meta = { - title: "pages/DeploymentSettings/NotificationsPage", + title: "pages/DeploymentSettingsPage/NotificationsPage", component: NotificationsPage, ...baseMeta, }; diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx index 6f2f35bcff73f..fc11ce2ecdce2 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx @@ -38,8 +38,4 @@ export const WithError: Story = { }, }; -export const Default: Story = { - args: { - // Nothing. - }, -}; +export const Default: Story = {}; From 4288004d12a2d50e54d6769361d8ce3f9098ba08 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:04:55 +0000 Subject: [PATCH 09/14] whoops --- site/src/pages/UsersPage/UsersPage.tsx | 3 +- site/src/pages/UsersPage/UsersPageView.tsx | 33 ++++++++++------------ 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index 7b90ec98b3248..a4db3aed3ce45 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -40,7 +40,7 @@ const UsersPage: FC = () => { const navigate = useNavigate(); const location = useLocation(); const searchParamsResult = useSearchParams(); - const { entitlements, showOrganizations } = useDashboard(); + const { entitlements } = useDashboard(); const [searchParams] = searchParamsResult; const groupsByUserIdQuery = useQuery(groupsByUserId()); @@ -159,7 +159,6 @@ const UsersPage: FC = () => { menus: { status: statusMenu }, }} usersQuery={usersQuery} - canViewOrganizations={showOrganizations} canCreateUser={canCreateUser} /> diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx index e8ccd60bb0f6a..e68c10f904b44 100644 --- a/site/src/pages/UsersPage/UsersPageView.tsx +++ b/site/src/pages/UsersPage/UsersPageView.tsx @@ -63,30 +63,27 @@ export const UsersPageView: FC = ({ authMethods, groupsByUserId, usersQuery, - canViewOrganizations, canCreateUser, }) => { const navigate = useNavigate(); return ( <> - {canViewOrganizations && ( - navigate("create")} - startIcon={} - > - Create user - - ) - } - > - Users - - )} + navigate("create")} + startIcon={} + > + Create user + + ) + } + > + Users + From 62b457584fe532ae6a9812f5a256bb992b8068cf Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:13:34 +0000 Subject: [PATCH 10/14] mock the context --- site/src/testHelpers/storybook.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx index ca8b19230c9a1..a76e1230205fc 100644 --- a/site/src/testHelpers/storybook.tsx +++ b/site/src/testHelpers/storybook.tsx @@ -13,6 +13,7 @@ import { useQueryClient } from "react-query"; import { MockAppearanceConfig, MockDefaultOrganization, + MockDeploymentConfig, MockEntitlements, } from "./entities"; @@ -126,17 +127,13 @@ export const withGlobalSnackbar = (Story: FC) => ( ); -export const withManagementSettingsProvider = ( - Story: FC, - { parameters }: StoryContext, -) => { +export const withManagementSettingsProvider = (Story: FC) => { return ( From 6581e8d3e43e39347f3a3ffdb94e33a62edc77cb Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:34:19 +0000 Subject: [PATCH 11/14] fix some stories --- site/src/modules/management/SidebarView.stories.tsx | 9 ++++++++- .../OrganizationSettingsPageView.stories.tsx | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/site/src/modules/management/SidebarView.stories.tsx b/site/src/modules/management/SidebarView.stories.tsx index 6b4417c7184e7..2ddcf7750bc8d 100644 --- a/site/src/modules/management/SidebarView.stories.tsx +++ b/site/src/modules/management/SidebarView.stories.tsx @@ -8,9 +8,10 @@ import { withDashboardProvider } from "testHelpers/storybook"; import { SidebarView } from "./SidebarView"; const meta: Meta = { - title: "components/MultiOrgSidebarView", + title: "modules/management/SidebarView", component: SidebarView, decorators: [withDashboardProvider], + parameters: { showOrganizations: true }, args: { activeSettings: true, activeOrganizationName: undefined, @@ -222,3 +223,9 @@ export const SelectedMultiOrgAdminAndUserAdmin: Story = { ], }, }; + +export const OrgsDisabled: Story = { + parameters: { + showOrganizations: false, + }, +}; diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx index 3e8b1ad3133b7..2585eed4b6122 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx @@ -5,11 +5,13 @@ import { MockOrganization, } from "testHelpers/entities"; import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; +import { withManagementSettingsProvider } from "testHelpers/storybook"; const meta: Meta = { title: "pages/OrganizationSettingsPageView", component: OrganizationSettingsPageView, parameters: { chromatic }, + decorators: [withManagementSettingsProvider], args: { organization: MockOrganization, }, From 0719fbd0457ed47a2e6957e7c09d8cfb5ffed6e6 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:37:28 +0000 Subject: [PATCH 12/14] jerk --- .../OrganizationSettingsPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx index 2585eed4b6122..a55839d8a123b 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx @@ -4,8 +4,8 @@ import { MockDefaultOrganization, MockOrganization, } from "testHelpers/entities"; -import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; import { withManagementSettingsProvider } from "testHelpers/storybook"; +import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; const meta: Meta = { title: "pages/OrganizationSettingsPageView", From 6fea1beeb1196d54db3d6ae76172b2b36efe4ef8 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:44:59 +0000 Subject: [PATCH 13/14] wow --- .../OrganizationSettingsPage.stories.tsx | 14 +++++++++++--- .../OrganizationSettingsPageView.stories.tsx | 1 - 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx index 7aab615ebbc7a..129a37b169654 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx @@ -1,16 +1,24 @@ import type { Meta, StoryObj } from "@storybook/react"; import { reactRouterParameters } from "storybook-addon-remix-react-router"; import { MockDefaultOrganization, MockUser } from "testHelpers/entities"; -import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook"; +import { + withAuthProvider, + withDashboardProvider, + withManagementSettingsProvider, +} from "testHelpers/storybook"; import OrganizationSettingsPage from "./OrganizationSettingsPage"; const meta: Meta = { title: "pages/OrganizationSettingsPage", component: OrganizationSettingsPage, - decorators: [withAuthProvider, withDashboardProvider], + decorators: [ + withAuthProvider, + withDashboardProvider, + withManagementSettingsProvider, + ], parameters: { + showOrganizations: true, user: MockUser, - features: ["multiple_organizations"], permissions: { viewDeploymentValues: true }, queries: [ { diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx index a55839d8a123b..9983c25080a59 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx @@ -11,7 +11,6 @@ const meta: Meta = { title: "pages/OrganizationSettingsPageView", component: OrganizationSettingsPageView, parameters: { chromatic }, - decorators: [withManagementSettingsProvider], args: { organization: MockOrganization, }, From fc7732cf146068ef85323e4badb4ea940b25acb8 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 3 Oct 2024 21:50:47 +0000 Subject: [PATCH 14/14] =?UTF-8?q?=E3=81=9D=E3=81=86=E3=81=9D=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ManagementSettingsPage/OrganizationSettingsPage.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx index 129a37b169654..9c85f89a62b55 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx @@ -19,6 +19,7 @@ const meta: Meta = { parameters: { showOrganizations: true, user: MockUser, + features: ["multiple_organizations"], permissions: { viewDeploymentValues: true }, queries: [ {