Skip to content

chore: consolidate ManageSettingsLayout code #14885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Oct 3, 2024
Merged

chore: consolidate ManageSettingsLayout code #14885

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
bf9ab32
typescript is so irritating sometimes
aslilac Sep 30, 2024
05d1e80
oh
aslilac Sep 30, 2024
602ffab
fmt
aslilac Sep 30, 2024
88bc231
Merge branch 'main' into lilac/anger
aslilac Oct 1, 2024
445b82e
yay
aslilac Oct 2, 2024
183c5db
Merge branch 'main' into lilac/anger
aslilac Oct 2, 2024
c8eaa77
oih
aslilac Oct 2, 2024
f4beba0
here
aslilac Oct 2, 2024
3af9601
fix route
aslilac Oct 2, 2024
16f6650
Merge branch 'main' into lilac/anger
aslilac Oct 3, 2024
932f829
:)
aslilac Oct 3, 2024
4288004
whoops
aslilac Oct 3, 2024
62b4575
mock the context
aslilac Oct 3, 2024
6581e8d
fix some stories
aslilac Oct 3, 2024
0719fbd
jerk
aslilac Oct 3, 2024
6fea1be
wow
aslilac Oct 3, 2024
fc7732c
そうそう
aslilac Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
yay
  • Loading branch information
@aslilac
aslilac committed Oct 2, 2024
commit 445b82e55d1d7ca94f08383a3efb9510f95d26df
2 changes: 1 addition & 1 deletion site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
{canViewAllUsers && (
<MenuItem
component={NavLink}
to={canViewOrganizations ? `/deployment${linkToUsers}` : linkToUsers}
to={linkToUsers}
css={styles.menuItem}
onClick={onPopoverClose}
>
Expand Down
32 changes: 16 additions & 16 deletions site/src/modules/management/ManagementSettingsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -88,21 +88,21 @@ export const ManagementSettingsLayout: FC = () => {
}

return (
<Margins>
<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
<Sidebar />
<main css={{ width: "100%" }}>
<Suspense fallback={<Loader />}>
<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
<ManagementSettingsContext.Provider
value={{ deploymentValues: deploymentConfigQuery.data }}
>
<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
<ManagementSettingsContext.Provider
value={{ deploymentValues: deploymentConfigQuery.data }}
>
<Margins>
<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
<Sidebar />
<main css={{ width: "100%" }}>
<Suspense fallback={<Loader />}>
<Outlet />
</ManagementSettingsContext.Provider>
</RequirePermission>
</Suspense>
</main>
</Stack>
</Margins>
</Suspense>
</main>
</Stack>
</Margins>
</ManagementSettingsContext.Provider>
</RequirePermission>
);
};
2 changes: 0 additions & 2 deletions site/src/modules/management/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -56,7 +55,6 @@ export const Sidebar: FC = () => {
activeOrganizationName={organizationName}
organizations={editableOrgs}
permissions={permissions}
experiments={experiments}
/>
);
};
1 change: 0 additions & 1 deletion site/src/modules/management/SidebarView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ const meta: Meta<typeof SidebarView> = {
},
],
permissions: MockPermissions,
experiments: ["notifications"],
},
};

Expand Down
38 changes: 20 additions & 18 deletions site/src/modules/management/SidebarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ interface SidebarProps {
organizations: OrganizationWithPermissions[] | undefined;
/** Site-wide permissions. */
permissions: AuthorizationResponse;
/** Active experiments */
experiments: Experiments;
}

/**
Expand All @@ -43,25 +41,29 @@ export const SidebarView: FC<SidebarProps> = ({
activeOrganizationName,
organizations,
permissions,
experiments,
}) => {
const { showOrganizations } = useDashboard();

// TODO: Do something nice to scroll to the active org.
return (
<BaseSidebar>
<header>
<h2 css={styles.sidebarHeader}>Deployment</h2>
</header>
{showOrganizations && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would showOrganizations need to be true to show only the Deployment header? Is there some reason to show DeploymentSettingsNavigation without the Header text?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it just looks weird for it to say deployment twice without the organizations section below. it's weird, but we'll get rid of this when we adopt the designs we went over with Christin.

<header>
<h2 css={styles.sidebarHeader}>Deployment</h2>
</header>
)}

<DeploymentSettingsNavigation
active={!activeOrganizationName && activeSettings}
experiments={experiments}
permissions={permissions}
/>
<OrganizationsSettingsNavigation
activeOrganizationName={activeOrganizationName}
organizations={organizations}
permissions={permissions}
/>
{showOrganizations && (
<OrganizationsSettingsNavigation
activeOrganizationName={activeOrganizationName}
organizations={organizations}
permissions={permissions}
/>
)}
</BaseSidebar>
);
};
Expand All @@ -71,8 +73,6 @@ interface DeploymentSettingsNavigationProps {
active: boolean;
/** Site-wide permissions. */
permissions: AuthorizationResponse;
/** Active experiments */
experiments: Experiments;
}

/**
Expand All @@ -85,7 +85,6 @@ interface DeploymentSettingsNavigationProps {
const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
active,
permissions,
experiments,
}) => {
return (
<div css={{ paddingBottom: 12 }}>
Expand Down Expand Up @@ -148,9 +147,12 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
Users
</SidebarNavSubItem>
)}
<SidebarNavSubItem href="notifications">
Notifications <FeatureStageBadge contentType="beta" size="sm" />
</SidebarNavSubItem>
<Stack direction="row" alignItems="center" spacing={0}>
<SidebarNavSubItem href="notifications">
Notifications
</SidebarNavSubItem>
<FeatureStageBadge contentType="beta" size="sm" />
</Stack>
</Stack>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =>
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/UsersPage/UsersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const UsersPage: FC = () => {
authMethodsQuery.isLoading ||
groupsByUserIdQuery.isLoading;

if (showOrganizations && location.pathname === "/users") {
if (location.pathname === "/users") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could I get more context on this change? Mainly wondering why we went from !== to ===

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The goal is just to always redirect from /users to /deployment/users. I guess I could've left it the other way, this just feels clearer to me.

return <Navigate to={`/deployment/users${location.search}`} replace />;
}

Expand Down
Loading