change how we create/edit clients

apps/dashboard/src/modals/AddClient.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { useState } from 'react';
+import AnimateHeight from '@/components/animate-height';
 import { CreateClientSuccess } from '@/components/clients/create-client-success';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { DialogFooter } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Switch } from '@/components/ui/switch';
 import { useAppParams } from '@/hooks/useAppParams';
 import { api, handleError } from '@/trpc/client';
 import { cn } from '@/utils/cn';
@@ -21,21 +23,12 @@ import { z } from 'zod';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-const validation = z
-  .object({
-    name: z.string().min(1),
-    cors: z.string().nullable(),
-    tab: z.string(),
-    projectId: z.string(),
-  })
-  .refine(
-    (data) =>
-      data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
-    {
-      message: 'Cors is required',
-      path: ['cors'],
-    }
-  );
+const validation = z.object({
+  name: z.string().min(1),
+  cors: z.string().url().or(z.literal('')),
+  projectId: z.string(),
+  type: z.enum(['read', 'write', 'root']),
+});
 
 type IForm = z.infer<typeof validation>;
 
@@ -50,10 +43,11 @@ export default function AddClient(props: Props) {
     defaultValues: {
       name: '',
       cors: '',
-      tab: 'website',
       projectId: props.projectId ?? projectId,
+      type: 'write',
     },
   });
+  const [hasDomain, setHasDomain] = useState(true);
   const mutation = api.client.create.useMutation({
     onError: handleError,
     onSuccess() {
@@ -67,7 +61,7 @@ export default function AddClient(props: Props) {
   const onSubmit: SubmitHandler<IForm> = (values) => {
     mutation.mutate({
       name: values.name,
-      cors: values.tab === 'website' ? values.cors : null,
+      cors: hasDomain ? values.cors : null,
       projectId: values.projectId,
       organizationSlug,
     });
@@ -134,29 +128,64 @@ export default function AddClient(props: Props) {
                 {...form.register('name')}
               />
             </div>
-            <Tabs
-              defaultValue="website"
-              onValueChange={(val) => form.setValue('tab', val)}
-              className="h-28"
-            >
-              <TabsList className="bg-slate-200">
-                <TabsTrigger value="website">Website</TabsTrigger>
-                <TabsTrigger value="other">Other</TabsTrigger>
-              </TabsList>
-              <TabsContent value="website">
-                <Label>Cors</Label>
+
+            <div>
+              <Label className="flex items-center justify-between">
+                <span>Domain</span>
+                <Switch checked={hasDomain} onCheckedChange={setHasDomain} />
+              </Label>
+              <AnimateHeight open={hasDomain}>
                 <Input
                   placeholder="https://example.com"
                   error={form.formState.errors.cors?.message}
                   {...form.register('cors')}
                 />
-              </TabsContent>
-              <TabsContent value="other">
-                <div className="rounded bg-background p-2 px-3 text-sm">
-                  🔑 You will get a secret to use for your API requests.
-                </div>
-              </TabsContent>
-            </Tabs>
+              </AnimateHeight>
+            </div>
+
+            <div>
+              <Controller
+                control={form.control}
+                name="type"
+                render={({ field }) => {
+                  return (
+                    <div>
+                      <Label>Type of client</Label>
+                      <Combobox
+                        {...field}
+                        className="w-full"
+                        onChange={(value) => {
+                          field.onChange(value);
+                        }}
+                        items={[
+                          {
+                            value: 'write',
+                            label: 'Write (for ingestion)',
+                          },
+                          {
+                            value: 'read',
+                            label: 'Read (access export API)',
+                          },
+                          {
+                            value: 'root',
+                            label: 'Root (access export API)',
+                          },
+                        ]}
+                        placeholder="Select a project"
+                      />
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {field.value === 'write' &&
+                          'Write: Is the default client type and is used for ingestion of data'}
+                        {field.value === 'read' &&
+                          'Read: You can access the current projects data from the export API'}
+                        {field.value === 'root' &&
+                          'Root: You can access any projects data from the export API'}
+                      </p>
+                    </div>
+                  );
+                }}
+              />
+            </div>
             <DialogFooter>
               <Button
                 type="button"

apps/dashboard/src/modals/EditClient.tsx

@@ -18,7 +18,7 @@ type EditClientProps = IServiceClient;
 const validator = z.object({
   id: z.string().min(1),
   name: z.string().min(1),
-  cors: z.string().min(1),
+  cors: z.string().nullable(),
 });
 
 type IForm = z.infer<typeof validator>;
@@ -59,13 +59,11 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
             label="Name"
             placeholder="Name"
             {...register('name')}
-            defaultValue={name}
           />
           <InputWithLabel
             label="Cors"
             placeholder="Cors"
             {...register('cors')}
-            defaultValue={cors}
           />
         </div>
         <ButtonContainer>