feat: mock workspace owners

Author: brettkolodny

src/client/Preview.tsx

@@ -14,7 +14,12 @@ import {
 } from "@/client/diagnostics";
 import { useDebouncedValue } from "@/client/hooks/debounce";
 import { useStore } from "@/client/store";
-import type { ParameterWithSource, ParserLog, PreviewOutput} from "@/gen/types";
+import type {
+ParameterWithSource,
+ParserLog,
+PreviewOutput,
+WorkspaceOwner,
+} from "@/gen/types";
 import { cn } from "@/utils/cn";
 import ReactJsonView from "@microlink/react-json-view";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -31,6 +36,14 @@ import {
 import { AnimatePresence, motion } from "motion/react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
+import {
+Select,
+SelectContent,
+SelectItem,
+SelectTrigger,
+SelectValue,
+} from "@/client/components/Select";
+import { mockUsers } from "@/owner";
 
 export const Preview: FC = () => {
 const $wasmState = useStore((state) => state.wasmState);
@@ -40,6 +53,7 @@ export const Preview: FC = () => {
 const $parameters = useStore((state) => state.parameters);
 const $setParameters = useStore((state) => state.setParameters);
 const $form = useStore((state) => state.form);
+const $owner = useStore((state) => state.owner);
 const $resetForm = useStore((state) => state.resetForm);
 
 const [debouncedCode, isDebouncing] = useDebouncedValue($code, 1000);
@@ -83,16 +97,7 @@ export const Preview: FC = () => {
 {
 "main.tf": debouncedCode,
 },
-{
-id: "8d36e355-e775-4c49-9b8d-ac042ed50440",
-name: "coder",
-full_name: "Coder",
-email: "coder@coder.com",
-ssh_public_key: "",
-groups: ["Everyone"],
-login_type: "password",
-rbac_roles: [{name:"member", org_id:""}, {name:"organization-member",org_id:"09942665-ba1b-4661-be9f-36bf9f738c83"}]
-},
+$owner,
 $form,
 );
 
@@ -133,7 +138,7 @@ export const Preview: FC = () => {
 };
 
 getOutput();
-}, [debouncedCode, $setError, $wasmState, $setParameters, $form]);
+}, [debouncedCode, $setError, $wasmState, $setParameters, $form, $owner]);
 
 return (
 <Tabs.Root
@@ -221,9 +226,16 @@ export const Preview: FC = () => {
 ) : null}
 </AnimatePresence>
 </div>
-<Button variant="destructive" onClick={$resetForm}>
-Reset form
-</Button>
+<div className="flex w-full items-center justify-end gap-3">
+<UserSelect />
+<Button
+variant="destructive"
+onClick={$resetForm}
+className="w-fit"
+>
+Reset form
+</Button>
+</div>
 </div>
 }
 {$parameters.length === 0 ? (
@@ -617,3 +629,27 @@ const FormElement: FC<FormElementProps> = ({ parameter }) => {
 />
 );
 };
+
+const UserSelect: FC = () => {
+const $setWorkspaceOwner = useStore((state) => state.setWorkspaceOwner);
+
+return (
+<Select
+defaultValue="admin"
+onValueChange={(value) => {
+const users: Record<string, WorkspaceOwner | undefined> = mockUsers;
+$setWorkspaceOwner(users[value] ?? mockUsers.admin);
+}}
+>
+<SelectTrigger className="w-fit min-w-40">
+<SelectValue />
+</SelectTrigger>
+<SelectContent>
+<SelectItem value="admin">Administrator</SelectItem>
+<SelectItem value="developer">Developer</SelectItem>
+<SelectItem value="contractor">Contractor</SelectItem>
+<SelectItem value="eu-developer">EU Developer</SelectItem>
+</SelectContent>
+</Select>
+);
+};

src/client/store.tsx

@@ -1,8 +1,9 @@
 import type { Diagnostic } from "@/client/diagnostics";
-import type { ParameterWithSource } from "@/gen/types";
+import type { ParameterWithSource, WorkspaceOwner } from "@/gen/types";
 import type { editor } from "monaco-editor";
 import { create } from "zustand";
 import { defaultCode } from "./snippets";
+import { mockUsers } from "@/owner";
 
 type FormState = Record<string, string>;
 
@@ -23,6 +24,7 @@ type State = {
 parameters: ParameterWithSource[];
 form: FormState;
 wasmState: WasmState;
+owner: WorkspaceOwner;
 errors: ErrorsState;
 setCode: (code: string) => void;
 setError: (diagnostics: Diagnostic[]) => void;
@@ -31,6 +33,7 @@ type State = {
 setParameters: (parameters: ParameterWithSource[]) => void;
 setFormState: (key: string, value: string) => void;
 setEditor: (editor: editor.IStandaloneCodeEditor) => void;
+setWorkspaceOwner: (owner: WorkspaceOwner) => void;
 resetForm: () => void;
 };
 
@@ -39,6 +42,7 @@ export const useStore = create<State>()((set) => ({
 editor: null,
 parameters: [],
 wasmState: "loading",
+owner: mockUsers.admin,
 form: {},
 errors: defaultErrorsState,
 setCode: (code) => set((_) => ({ code })),
@@ -70,4 +74,5 @@ export const useStore = create<State>()((set) => ({
 }),
 resetForm: () => set(() => ({ form: {} })),
 setEditor: (editor) => set(() => ({ editor })),
+setWorkspaceOwner: (owner) => set(() => ({ owner })),
 }));

src/owner.ts

@@ -0,0 +1,51 @@
+import type { WorkspaceOwner } from "./gen/types";
+
+const BaseMockUser: WorkspaceOwner = {
+id: "8d36e355-e775-4c49-9b8d-ac042ed50440",
+name: "coder",
+full_name: "Coder",
+email: "coder@coder.com",
+ssh_public_key: "",
+groups: ["Everyone"],
+login_type: "password",
+rbac_roles: [
+{ name: "member", org_id: "" },
+{
+name: "organization-member",
+org_id: "09942665-ba1b-4661-be9f-36bf9f738c83",
+},
+],
+};
+
+export type User = "admin" | "developer" | "contractor" | "eu-developer";
+
+export const mockUsers: Record<User, WorkspaceOwner> = {
+admin: {
+...BaseMockUser,
+name: "admin",
+full_name: "Admin",
+email: "admin@coder.com",
+groups: ["admin"],
+},
+developer: {
+...BaseMockUser,
+name: "developer",
+full_name: "Developer",
+email: "dev@coder.com",
+groups: ["developer"],
+},
+contractor: {
+...BaseMockUser,
+name: "contractor",
+full_name: "Contractor",
+email: "contractor@coder.com",
+groups: ["contractor"],
+},
+"eu-developer": {
+...BaseMockUser,
+name: "eu-developer",
+full_name: "EU Developer",
+email: "eu.dev@coder.com",
+groups: ["developer", "eu-helsinki"],
+},
+};