synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-12 00:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add breadcrumbs to admin settings pages (#15865)

Browse Source 
resolves coder/internal#174

Uses shadcn/ui for admin settings breadcrumbs

Figma:
https://www.figma.com/design/OR75XeUI0Z3ksqt1mHsNQw/Dashboard-v1?node-id=139-1380&m=dev

<img width="1180" alt="Screenshot 2024-12-13 at 21 37 18"
src="https://github.com/user-attachments/assets/7ab5faa0-dcc9-437e-9ecf-5365cea5d69e"
/>
<img width="1178" alt="Screenshot 2024-12-13 at 21 37 27"
src="https://github.com/user-attachments/assets/b0b55ec2-8a9e-4316-a850-a37480173f9c"
/>
This commit is contained in:
Jaayden Halko
2024-12-18 22:35:31 +00:00
committed by GitHub
parent 8e61e4a0be
commit cdc1978f4d
4 changed files with 242 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
site/src/components/Breadcrumb/Breadcrumb.stories.tsx Normal file
View File

@ -0,0 +1,47 @@
import type { Meta, StoryObj } from "@storybook/react";
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "components/Breadcrumb/Breadcrumb";
import { MockOrganization } from "testHelpers/entities";
const meta: Meta<typeof Breadcrumb> = {
title: "components/Breadcrumb",
component: Breadcrumb,
};
export default meta;
type Story = StoryObj<typeof Breadcrumb>;
export const Default: Story = {
args: {
children: (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Admin Settings</BreadcrumbPage>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/organizations">Organizations</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="text-content-primary">
{MockOrganization.name}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
),
},
};

115
site/src/components/Breadcrumb/Breadcrumb.tsx Normal file
View File

@ -0,0 +1,115 @@
/**
* Copied from shadc/ui on 12/13/2024
* @see {@link https://ui.shadcn.com/docs/components/breadcrumb}
*/
import { Slot } from "@radix-ui/react-slot";
import { MoreHorizontal } from "lucide-react";
import {
type ComponentProps,
type ComponentPropsWithoutRef,
type FC,
type ReactNode,
forwardRef,
} from "react";
import { cn } from "utils/cn";
export const Breadcrumb = forwardRef<
HTMLElement,
ComponentPropsWithoutRef<"nav"> & {
separator?: ReactNode;
}
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
Breadcrumb.displayName = "Breadcrumb";
export const BreadcrumbList = forwardRef<
HTMLOListElement,
ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center text-sm pl-12 my-4 gap-1.5 break-words font-medium list-none sm:gap-2.5",
className,
)}
{...props}
/>
));
export const BreadcrumbItem = forwardRef<
HTMLLIElement,
ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
<li
ref={ref}
className={cn(
"inline-flex items-center gap-1.5 text-content-secondary",
className,
)}
{...props}
/>
));
export const BreadcrumbLink = forwardRef<
HTMLAnchorElement,
ComponentPropsWithoutRef<"a"> & {
asChild?: boolean;
}
>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a";
return (
<Comp
ref={ref}
className={cn(
"text-content-secondary transition-colors hover:text-content-primary no-underline hover:underline",
className,
)}
{...props}
/>
);
});
export const BreadcrumbPage = forwardRef<
HTMLSpanElement,
ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
<span
ref={ref}
aria-current="page"
className={cn("flex items-center gap-2 text-content-secondary", className)}
{...props}
/>
));
export const BreadcrumbSeparator: FC<ComponentProps<"li">> = ({
children,
className,
...props
}) => (
<li
role="presentation"
aria-hidden="true"
className={cn(
"text-content-disabled [&>svg]:w-3.5 [&>svg]:h-3.5",
className,
)}
{...props}
>
{"/"}
</li>
);
export const BreadcrumbEllipsis: FC<ComponentProps<"span">> = ({
className,
...props
}) => (
<span
role="presentation"
aria-hidden="true"
className={cn("flex h-9 w-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
);

39
site/src/modules/management/DeploymentSettingsLayout.tsx
View File

@ -1,3 +1,10 @@
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "components/Breadcrumb/Breadcrumb";
import { Loader } from "components/Loader/Loader";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
@ -17,14 +24,30 @@ const DeploymentSettingsLayout: FC = () => {
return (
<RequirePermission isFeatureVisible={canViewDeploymentSettingsPage}>
<div className="px-10 max-w-screen-2xl">
<div className="flex flex-row gap-12 py-10">
<DeploymentSidebar />
<main css={{ flexGrow: 1 }}>
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</main>
<div>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Admin Settings</BreadcrumbPage>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="text-content-primary">
Deployment
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<hr className="h-px border-none bg-border" />
<div className="px-10 max-w-screen-2xl">
<div className="flex flex-row gap-12 py-10">
<DeploymentSidebar />
<main css={{ flexGrow: 1 }}>
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</main>
</div>
</div>
</div>
</RequirePermission>

57
site/src/modules/management/OrganizationSettingsLayout.tsx
View File

@ -1,5 +1,14 @@
import type { AuthorizationResponse, Organization } from "api/typesGenerated";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "components/Breadcrumb/Breadcrumb";
import { Loader } from "components/Loader/Loader";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
import { useDashboard } from "modules/dashboard/useDashboard";
@ -64,14 +73,46 @@ const OrganizationSettingsLayout: FC = () => {
organization,
}}
>
<div className="px-10 max-w-screen-2xl">
<div className="flex flex-row gap-12 py-10">
<OrganizationSidebar />
<main css={{ flexGrow: 1 }}>
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</main>
<div>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage>Admin Settings</BreadcrumbPage>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/organizations">
Organizations
</BreadcrumbLink>
</BreadcrumbItem>
{organization && (
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="text-content-primary">
<UserAvatar
key={organization.id}
size="xs"
username={organization.display_name}
avatarURL={organization.icon}
/>
{organization?.name}
</BreadcrumbPage>
</BreadcrumbItem>
</>
)}
</BreadcrumbList>
</Breadcrumb>
<hr className="h-px border-none bg-border" />
<div className="px-10 max-w-screen-2xl">
<div className="flex flex-row gap-12 py-10">
<OrganizationSidebar />
<main css={{ flexGrow: 1 }}>
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</main>
</div>
</div>
</div>
</OrganizationSettingsContext.Provider>