diff --git a/src/client/Preview.tsx b/src/client/Preview.tsx index 388c52c..5455e67 100644 --- a/src/client/Preview.tsx +++ b/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 ( { ) : null} - +
+ + +
} {$parameters.length === 0 ? ( @@ -617,3 +629,27 @@ const FormElement: FC = ({ parameter }) => { /> ); }; + +const UserSelect: FC = () => { + const $setWorkspaceOwner = useStore((state) => state.setWorkspaceOwner); + + return ( + + ); +}; diff --git a/src/client/store.tsx b/src/client/store.tsx index 972b568..e0087c3 100644 --- a/src/client/store.tsx +++ b/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; @@ -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()((set) => ({ editor: null, parameters: [], wasmState: "loading", + owner: mockUsers.admin, form: {}, errors: defaultErrorsState, setCode: (code) => set((_) => ({ code })), @@ -70,4 +74,5 @@ export const useStore = create()((set) => ({ }), resetForm: () => set(() => ({ form: {} })), setEditor: (editor) => set(() => ({ editor })), + setWorkspaceOwner: (owner) => set(() => ({ owner })), })); diff --git a/src/owner.ts b/src/owner.ts new file mode 100644 index 0000000..13dd49e --- /dev/null +++ b/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 = { + 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"], + }, +};