@@ -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 (
-
+
-
-
-
- Home
-
-
+ }
+ to="/"
+ />
@@ -126,58 +127,75 @@ const PrimaryDropdown = () => {
const RTIcon = ResourceComponents[type].Icon;
const name = type === "ServerTemplate" ? "Template" : type;
return (
-
-
-
- {name}s
-
-
+ }
+ to={`/${usableResourcePath(type)}`}
+ />
);
})}
-
-
-
- Alerts
-
-
+ }
+ to="/alerts"
+ />
-
-
-
- Updates
-
-
+ }
+ to="/updates"
+ />
-
-
-
- Tags
-
-
+ }
+ to="/tags"
+ />
-
-
-
- Api Keys
-
-
-
-
-
- Users
-
-
+ }
+ to="/keys"
+ />
+
+ {user?.admin && (
+ }
+ to="/users"
+ />
+ )}
);
};
+const DropdownLinkItem = ({
+ label,
+ icon,
+ to,
+}: {
+ label: string;
+ icon: ReactNode;
+ to: string;
+}) => {
+ return (
+
+
+ {icon}
+ {label}
+
+
+ );
+};
+
export type HomeView = "Dashboard" | "Tree" | "Resources";
export const homeViewAtom = atomWithStorage
(
@@ -260,7 +278,7 @@ const ResourcesDropdown = ({ type }: { type: UsableResource }) => {
{selected ? selected.name : `All ${type}s`}
-
+
(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"