Skip to content

Commit 8a5d3cd

Browse files
jaaydenhjaaydenh
committed
feat: initial commit to setup redesign orgs sidebar
1 parent 5ede03c commit 8a5d3cd

12 files changed

+273
-162
lines changed

‎site/src/components/Command/Command.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const CommandGroup = forwardRef<
9292
<CommandPrimitive.Group
9393
ref={ref}
9494
className={cn(
95-
`overflow-hidden p-1 text-content-primary
95+
`overflow-hidden p-2 text-content-primary
9696
[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs
9797
[&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-content-secondary`,
9898
className,
@@ -119,7 +119,7 @@ export const CommandItem = forwardRef<
119119
<CommandPrimitive.Item
120120
ref={ref}
121121
className={cn(
122-
`relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none
122+
`relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-2 text-sm font-medium outline-none
123123
data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50
124124
data-[selected=true]:bg-surface-secondary data-[selected=true]:text-content-primary
125125
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,

‎site/src/components/Popover/Popover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const PopoverContent = forwardRef<
2424
align={align}
2525
sideOffset={sideOffset}
2626
className={cn(
27-
`z-50 w-72 rounded-md border border-solid bg-surface-primary p-4
27+
`z-50 w-72 rounded-md border border-solid bg-surface-primary
2828
text-content-primary shadow-md outline-none
2929
data-[state=open]:animate-in data-[state=closed]:animate-out
3030
data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0

‎site/src/components/Sidebar/Sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
6767
to={href}
6868
className={({ isActive }) =>
6969
cn(
70-
"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150 ",
70+
"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
7171
{
7272
"font-semibold text-content-primary": isActive,
7373
},

‎site/src/modules/management/DeploymentSidebarView.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { withDashboardProvider } from "testHelpers/storybook";
44
import { DeploymentSidebarView } from "./DeploymentSidebarView";
55

66
const meta: Meta<typeof DeploymentSidebarView> = {
7-
title: "modules/management/SidebarView",
7+
title: "modules/management/DeploymentSidebarView",
88
component: DeploymentSidebarView,
99
decorators: [withDashboardProvider],
1010
parameters: { showOrganizations: true },

‎site/src/modules/management/OrganizationSettingsLayout.tsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { RequirePermission } from "contexts/auth/RequirePermission";
1313
import { useDashboard } from "modules/dashboard/useDashboard";
1414
import { type FC, Suspense, createContext, useContext } from "react";
1515
import { Outlet, useParams } from "react-router-dom";
16-
import { OrganizationSidebar } from "./OrganizationSidebar";
1716

1817
export const OrganizationSettingsContext = createContext<
1918
OrganizationSettingsValue | undefined
@@ -98,14 +97,9 @@ const OrganizationSettingsLayout: FC = () => {
9897
</Breadcrumb>
9998
<hr className="h-px border-none bg-border" />
10099
<div className="px-10 max-w-screen-2xl">
101-
<div className="flex flex-row gap-12 py-10">
102-
<OrganizationSidebar />
103-
<main css={{ flexGrow: 1 }}>
104-
<Suspense fallback={<Loader />}>
105-
<Outlet />
106-
</Suspense>
107-
</main>
108-
</div>
100+
<Suspense fallback={<Loader />}>
101+
<Outlet />
102+
</Suspense>
109103
</div>
110104
</div>
111105
</OrganizationSettingsContext.Provider>

‎site/src/modules/management/OrganizationSidebar.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const OrganizationSidebar: FC = () => {
2626
organization?: string;
2727
};
2828

29+
const organization = organizations?.find((o) => o.name === organizationName);
2930
const orgPermissionsQuery = useQuery(
3031
organizationsPermissions(organizations?.map((o) => o.id)),
3132
);
@@ -49,7 +50,7 @@ export const OrganizationSidebar: FC = () => {
4950

5051
return (
5152
<OrganizationSidebarView
52-
activeOrganizationName={organizationName}
53+
activeOrganization={organization}
5354
organizations={editableOrgs}
5455
permissions={permissions}
5556
/>

‎site/src/modules/management/OrganizationSidebarLayout.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Loader } from "components/Loader/Loader";
2+
import { type FC, Suspense } from "react";
3+
import { Outlet } from "react-router-dom";
4+
import { OrganizationSidebar } from "./OrganizationSidebar";
5+
6+
const OrganizationSidebarLayout: FC = () => {
7+
return (
8+
<div className="flex flex-row gap-12 py-10">
9+
<OrganizationSidebar />
10+
<main css={{ flexGrow: 1 }}>
11+
<Suspense fallback={<Loader />}>
12+
<Outlet />
13+
</Suspense>
14+
</main>
15+
</div>
16+
);
17+
};
18+
19+
export default OrganizationSidebarLayout;

‎site/src/modules/management/OrganizationSidebarView.stories.tsx

+31-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2+
import { userEvent, within } from "@storybook/test";
23
import {
34
MockNoPermissions,
45
MockOrganization,
@@ -14,7 +15,7 @@ const meta: Meta<typeof OrganizationSidebarView> = {
1415
decorators: [withDashboardProvider],
1516
parameters: { showOrganizations: true },
1617
args: {
17-
activeOrganizationName: undefined,
18+
activeOrganization: undefined,
1819
organizations: [
1920
{
2021
...MockOrganization,
@@ -50,29 +51,50 @@ export const LoadingOrganizations: Story = {
5051

5152
export const NoCreateOrg: Story = {
5253
args: {
54+
activeOrganization: MockOrganization,
5355
permissions: {
5456
...MockPermissions,
5557
createOrganization: false,
5658
},
5759
},
60+
play: async ({ canvasElement }) => {
61+
const canvas = within(canvasElement);
62+
await userEvent.click(
63+
canvas.getByRole("button", { name: "My Organization" }),
64+
);
65+
},
5866
};
5967

6068
export const NoPermissions: Story = {
6169
args: {
70+
activeOrganization: MockOrganization,
6271
permissions: MockNoPermissions,
6372
},
6473
};
6574

66-
export const SelectedOrgNoMatch: Story = {
75+
export const AllPermissions: Story = {
6776
args: {
68-
activeOrganizationName: MockOrganization.name,
69-
organizations: [],
77+
activeOrganization: MockOrganization,
78+
organizations: [
79+
{
80+
...MockOrganization,
81+
permissions: {
82+
editOrganization: true,
83+
editMembers: true,
84+
editGroups: true,
85+
auditOrganization: true,
86+
assignOrgRole: true,
87+
viewProvisioners: true,
88+
viewIdpSyncSettings: true,
89+
},
90+
},
91+
],
7092
},
7193
};
7294

7395
export const SelectedOrgAdmin: Story = {
7496
args: {
75-
activeOrganizationName: MockOrganization.name,
97+
activeOrganization: MockOrganization,
7698
organizations: [
7799
{
78100
...MockOrganization,
@@ -90,7 +112,7 @@ export const SelectedOrgAdmin: Story = {
90112

91113
export const SelectedOrgAuditor: Story = {
92114
args: {
93-
activeOrganizationName: MockOrganization.name,
115+
activeOrganization: MockOrganization,
94116
permissions: {
95117
...MockPermissions,
96118
createOrganization: false,
@@ -111,7 +133,7 @@ export const SelectedOrgAuditor: Story = {
111133

112134
export const SelectedOrgUserAdmin: Story = {
113135
args: {
114-
activeOrganizationName: MockOrganization.name,
136+
activeOrganization: MockOrganization,
115137
permissions: {
116138
...MockPermissions,
117139
createOrganization: false,
@@ -132,6 +154,7 @@ export const SelectedOrgUserAdmin: Story = {
132154

133155
export const MultiOrgAdminAndUserAdmin: Story = {
134156
args: {
157+
activeOrganization: MockOrganization,
135158
organizations: [
136159
{
137160
...MockOrganization,
@@ -157,7 +180,7 @@ export const MultiOrgAdminAndUserAdmin: Story = {
157180

158181
export const SelectedMultiOrgAdminAndUserAdmin: Story = {
159182
args: {
160-
activeOrganizationName: MockOrganization2.name,
183+
activeOrganization: MockOrganization2,
161184
organizations: [
162185
{
163186
...MockOrganization,

0 commit comments

Comments
 (0)