feat: custom data for projects (#1571)

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { IoTrash } from 'react-icons/io5';
 import { Button, Input, Textarea } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -23,6 +24,7 @@ type ProjectCreateFormValues = {
   publicUrl?: string;
   backstageInfo?: string;
   backstageUrl?: string;
+  custom?: { title: string; value: string }[];
 };
 
 export default function ProjectCreateForm(props: ProjectCreateFromProps) {
@@ -34,6 +36,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   const {
     handleSubmit,
     register,
+    control,
     formState: { isSubmitting, isValid },
     setFocus,
   } = useForm<ProjectCreateFormValues>({
@@ -44,6 +47,11 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     },
   });
 
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'custom',
+  });
+
   // set focus to first field
   useEffect(() => {
     setFocus('title');
@@ -59,6 +67,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
         ...values,
         filename,
       });
+
       await queryClient.invalidateQueries({ queryKey: PROJECT_LIST });
       onClose();
     } catch (error) {
@@ -66,6 +75,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     }
   };
 
+  const handleAddCustom = () => {
+    append({ title: '', value: '' });
+  };
+
   return (
     <Panel.Section
       as='form'
@@ -151,6 +164,42 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
             {...register('backstageUrl')}
           />
         </label>
+        <Panel.Section>
+          <Panel.ListItem>
+            <Panel.Field title='Custom data' description='Add custom data for your project' />
+            <Button variant='ontime-subtle' onClick={handleAddCustom}>
+              +
+            </Button>
+          </Panel.ListItem>
+          {fields.map((field, idx) => (
+            <div key={field.id} className={style.customDataItem}>
+              <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
+              <label>
+                Title
+                <Input
+                  variant='ontime-filled'
+                  size='sm'
+                  placeholder={field.title}
+                  autoComplete='off'
+                  {...register(`custom.${idx}.title` as const)}
+                />
+              </label>
+              <label>
+                Value
+                <Input
+                  variant='ontime-filled'
+                  size='sm'
+                  placeholder={field.value}
+                  autoComplete='off'
+                  {...register(`custom.${idx}.value` as const)}
+                />
+              </label>
+              <Button variant='ontime-ghosted' onClick={() => remove(idx)}>
+                <IoTrash />
+              </Button>
+            </div>
+          ))}
+        </Panel.Section>
       </Panel.Section>
     </Panel.Section>
   );