feat: custom data for projects (#1571)

apps/client/src/common/models/ProjectData.ts

@@ -8,4 +8,5 @@ export const projectDataPlaceholder: ProjectData = {
   backstageUrl: '',
   backstageInfo: '',
   projectLogo: null,
+  custom: [],
 };

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>
   );

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

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
-import { useForm } from 'react-hook-form';
-import { IoDownloadOutline, IoTrash } from 'react-icons/io5';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
 import { Button, Input, Textarea } from '@chakra-ui/react';
 import { type ProjectData } from 'ontime-types';
 
@@ -25,6 +25,7 @@ export default function ProjectData() {
     formState: { isSubmitting, isValid, isDirty, errors },
     setError,
     watch,
+    control,
     setValue,
   } = useForm({
     defaultValues: data,
@@ -32,6 +33,12 @@ export default function ProjectData() {
     resetOptions: {
       keepDirtyValues: true,
     },
+    mode: 'onChange',
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'custom',
   });
 
   // reset form values if data changes
@@ -77,6 +84,10 @@ export default function ProjectData() {
     });
   };
 
+  const handleAddCustom = () => {
+    append({ title: '', value: '' });
+  };
+
   const onSubmit = async (formData: ProjectData) => {
     try {
       await postProjectData(formData);
@@ -231,6 +242,69 @@ export default function ProjectData() {
               {...register('backstageUrl')}
             />
           </label>
+          <Panel.Section style={{ marginTop: 0 }}>
+            <Panel.ListItem>
+              <Panel.Field title='Custom data' description='' />
+              <Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
+                Add
+              </Button>
+            </Panel.ListItem>
+            {fields.length > 0 &&
+              fields.map((field, idx) => {
+                const rowErrors = errors.custom?.[idx] as
+                  | {
+                      title?: { message?: string };
+                      value?: { message?: string };
+                    }
+                  | undefined;
+                return (
+                  <div key={field.id} className={style.customDataItem}>
+                    <div>
+                      <div className={style.titleRow}>
+                        <label>
+                          Title
+                          <Input
+                            variant='ontime-filled'
+                            size='sm'
+                            defaultValue={field.title}
+                            placeholder='Title of your custom data'
+                            autoComplete='off'
+                            {...register(`custom.${idx}.title`, {
+                              required: { value: true, message: 'Field cannot be empty' },
+                            })}
+                          />
+                        </label>
+                        <Button
+                          size='sm'
+                          variant='ontime-subtle'
+                          color='#FA5656' // $red-500
+                          onClick={() => remove(idx)}
+                          leftIcon={<IoTrash />}
+                        >
+                          Delete Entry
+                        </Button>
+                      </div>
+                      {rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
+                    </div>
+                    <label>
+                      Value
+                      <Textarea
+                        variant='ontime-filled'
+                        resize='none'
+                        size='sm'
+                        defaultValue={field.value}
+                        autoComplete='off'
+                        placeholder='Text of your custom data'
+                        {...register(`custom.${idx}.value`, {
+                          required: { value: true, message: 'Field cannot be empty' },
+                        })}
+                      />
+                      {rowErrors?.value?.message && <Panel.Error>{rowErrors.value.message}</Panel.Error>}
+                    </label>
+                  </div>
+                );
+              })}
+          </Panel.Section>
         </Panel.Section>
       </Panel.Card>
     </Panel.Section>

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -57,3 +57,18 @@
     height: auto;
   }
 }
+
+.customDataItem {
+  display: contents;
+  width: 100%;
+
+  .titleRow{
+    display: flex;
+    gap: 1rem;
+    align-items: end;
+
+    label {
+      flex: 1;
+    }
+  }
+}

apps/client/src/views/project-info/ProjectInfo.scss

@@ -25,7 +25,9 @@
     flex: 1;
     max-height: 100%;
     overflow-y: auto;
-    width: min(calc(100vw - 4rem), 800px);
+    width: min(calc(100vw - 4rem), 960px);
+
+    padding-bottom: 10vh;
   }
 
   .info__label {
@@ -33,11 +35,15 @@
     color: var(--label-color-override, $viewer-label-color);
     text-transform: uppercase;
     margin-top: $view-element-gap;
-    white-space: pre;
+  }
+
+  .info__value {
+    white-space: break-spaces;
   }
 
   a.info__value {
     color: $action-text-color;
+  
     &:hover {
       color: $ontime-color;
     }

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -8,6 +8,7 @@ import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { useTranslation } from '../../translation/TranslationProvider';
 
 import BackstageInfo from './backstage-info/BackstageInfo';
+import CustomInfo from './custom-info/CustomInfo';
 import PublicInfo from './public-info/PublicInfo';
 import { projectInfoOptions } from './projectInfo.options';
 
@@ -66,6 +67,7 @@ export default function ProjectInfo(props: ProjectInfoProps) {
         )}
         <BackstageInfo general={general} />
         <PublicInfo general={general} />
+        <CustomInfo general={general} />
       </div>
     </div>
   );

apps/client/src/views/project-info/custom-info/CustomInfo.tsx

@@ -0,0 +1,36 @@
+import { Fragment } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { ProjectData } from 'ontime-types';
+
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+interface CustomInfoProps {
+  general: ProjectData;
+}
+
+export default function CustomInfo(props: CustomInfoProps) {
+  const { general } = props;
+  const [searchParams] = useSearchParams();
+
+  const showCustom = isStringBoolean(searchParams.get('showCustom'));
+
+  if (!showCustom || general.custom === undefined || general.custom.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {general.custom.map((info, idx) => {
+        if (!info.title || !info.value) {
+          return null;
+        }
+        return (
+          <Fragment key={`${info.title}-${idx}`}>
+            <div className='info__label'>{info.title}</div>
+            <div className='info__value'>{info.value}</div>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

apps/client/src/views/project-info/projectInfo.options.ts

@@ -9,14 +9,21 @@ export const projectInfoOptions: ViewOption[] = [
       {
         id: 'showBackstage',
         title: 'Show backstage Data',
-        description: 'Weather to show fields related to the backstage views',
+        description: 'Whether to show fields related to the backstage views',
         type: 'boolean',
         defaultValue: false,
       },
       {
         id: 'showPublic',
         title: 'Show Public Data',
-        description: 'Weather to show fields related to the public views',
+        description: 'Whether to show fields related to the public views',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      {
+        id: 'showCustom',
+        title: 'Show Custom Data',
+        description: 'Whether to show fields related to the custom data',
         type: 'boolean',
         defaultValue: false,
       },