From 5e7445b10db70886bba930cfe3c413ae58d30143 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Fri, 10 May 2024 17:07:51 -0700 Subject: [PATCH] add a god damn sidebar --- frontend/index.html | 2 +- frontend/package.json | 1 + frontend/src/components/config/index.tsx | 2 +- frontend/src/components/config/util.tsx | 9 +- frontend/src/components/layouts.tsx | 10 +- .../src/components/resources/build/config.tsx | 5 +- frontend/src/components/resources/common.tsx | 5 +- .../config/components/extra-args.tsx | 5 +- .../deployment/config/components/ports.tsx | 5 +- .../deployment/config/components/volumes.tsx | 5 +- .../resources/server-template/config/aws.tsx | 9 +- frontend/src/components/sidebar.tsx | 93 ++++++++++++++ frontend/src/components/topbar.tsx | 114 ++++++++++-------- frontend/src/lib/utils.ts | 4 +- frontend/src/ui/separator.tsx | 29 +++++ frontend/tailwind.config.js | 2 +- frontend/yarn.lock | 8 ++ 17 files changed, 243 insertions(+), 65 deletions(-) create mode 100644 frontend/src/components/sidebar.tsx create mode 100644 frontend/src/ui/separator.tsx diff --git a/frontend/index.html b/frontend/index.html index ee9b244ea..717020502 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -13,7 +13,7 @@ Monitor - +
diff --git a/frontend/package.json b/frontend/package.json index 0955543c5..cb53bcfea 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-popover": "1.0.7", "@radix-ui/react-progress": "1.0.3", "@radix-ui/react-select": "2.0.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "1.0.2", "@radix-ui/react-switch": "1.0.3", "@radix-ui/react-tabs": "1.0.4", diff --git a/frontend/src/components/config/index.tsx b/frontend/src/components/config/index.tsx index 3e6a3a646..72da67e4d 100644 --- a/frontend/src/components/config/index.tsx +++ b/frontend/src/components/config/index.tsx @@ -144,7 +144,7 @@ export const Config = ({ {snake_case_to_upper_space_case(k)} )} - + ({ disabled: boolean; set: (update: Partial) => void; }) => ( - + 0 ? "items-start" : undefined} + >
{values.map((arg, i) => (
@@ -242,7 +245,7 @@ export const InputList = ({ /> {!disabled && ( + + ); +}; diff --git a/frontend/src/components/topbar.tsx b/frontend/src/components/topbar.tsx index 02d0f4db5..a221de3ec 100644 --- a/frontend/src/components/topbar.tsx +++ b/frontend/src/components/topbar.tsx @@ -1,4 +1,4 @@ -import { useRead, useResourceParamType } from "@lib/hooks"; +import { useRead, useResourceParamType, useUser } from "@lib/hooks"; import { ResourceComponents } from "./resources"; import { AlertTriangle, @@ -34,7 +34,7 @@ import { UsableResource } from "@types"; import { atomWithStorage } from "jotai/utils"; import { useAtom } from "jotai"; import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover"; -import { useState } from "react"; +import { ReactNode, useState } from "react"; import { Command, CommandEmpty, @@ -47,10 +47,10 @@ import { ResourceLink } from "./resources/common"; export const Topbar = () => { return ( -
+
- + MONITOR
@@ -74,6 +74,8 @@ export const Topbar = () => { }; const PrimaryDropdown = () => { + const user = useUser().data; + const type = useResourceParamType(); const Components = type && ResourceComponents[type]; @@ -102,7 +104,7 @@ const PrimaryDropdown = () => { return ( - + - + (o: T): (keyof T)[] => Object.keys(o) as (keyof T)[]; export const RESOURCE_TARGETS: UsableResource[] = [ - "Deployment", "Server", + "Deployment", "Build", - "Procedure", "Repo", + "Procedure", "Builder", "Alerter", "ServerTemplate" diff --git a/frontend/src/ui/separator.tsx b/frontend/src/ui/separator.tsx new file mode 100644 index 000000000..cb3571a23 --- /dev/null +++ b/frontend/src/ui/separator.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 7cb7e37ab..cb3aaefcb 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -13,7 +13,7 @@ module.exports = { center: true, padding: "2rem", screens: { - "2xl": "1400px", + "2xl": "w-full", }, }, extend: { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a866c3390..8ebd7f355 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -825,6 +825,14 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" +"@radix-ui/react-separator@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa" + integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-slot@1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"