allow editing isEnum on fields

Author: Pascal-Delange

packages/app-builder/public/locales/en/data.json

@@ -37,7 +37,7 @@
   "create_field.type_bool": "Boolean",
   "create_field.type_timestamp": "Timestamp",
   "edit_field.button_accept": "Save changes",
-  "edit_field.title": "Edit description",
+  "edit_field.title": "Edit field",
   "edit_table.button_accept": "Save changes",
   "edit_table.title": "Edit description",
   "empty_description": "No description",

packages/app-builder/src/routes/__builder/data.tsx

@@ -143,26 +143,22 @@ function TableDetails({
         header: t('data:description'),
         size: 500,
         cell: ({ cell }) => {
-          return canEditDataModel ? (
-            <EditableText key={cell.row.original.id} className="group">
-              <EditField
-                fieldId={cell.row.original.id}
-                description={cell.row.original.description}
-              >
-                <div className="flex flex-row gap-5">
-                  <FormatDescription
-                    description={cell.row.original.description}
-                  />
-                  <Edit
-                    className="text-grey-00 group-hover:text-grey-100 relative bg-transparent transition-colors ease-in-out"
-                    width={'24px'}
-                    height={'24px'}
-                  />
-                </div>
-              </EditField>
-            </EditableText>
-          ) : (
-            <FormatDescription description={cell.row.original.description} />
+          return (
+            <div className="flex flex-row items-center justify-between">
+              <FormatDescription description={cell.row.original.description} />
+              {canEditDataModel && (
+                <EditField
+                  key={cell.row.original.id}
+                  fieldId={cell.row.original.id}
+                  description={cell.row.original.description}
+                  isEnum={cell.row.original.isEnum}
+                >
+                  <div className="text-grey-00 group-hover:text-grey-100 relative rounded border-2 border-solid bg-transparent p-2 transition-colors ease-in-out">
+                    <Edit width={'24px'} height={'24px'} />
+                  </div>
+                </EditField>
+              )}
+            </div>
           );
         },
       },

packages/app-builder/src/routes/ressources/data/editField.tsx

@@ -6,11 +6,16 @@ import {
   FormLabel,
 } from '@app-builder/components/Form';
 import { serverServices } from '@app-builder/services/init.server';
-import { parseFormSafe } from '@app-builder/utils/input-validation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type ActionArgs, json } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
-import { Button, HiddenInputs, Input, Modal } from '@ui-design-system';
+import {
+  Button,
+  Checkbox,
+  HiddenInputs,
+  Input,
+  Modal,
+} from '@ui-design-system';
 import { type Namespace } from 'i18next';
 import { useEffect, useState } from 'react';
 import { Form, FormProvider, useForm } from 'react-hook-form';
@@ -24,6 +29,7 @@ export const handle = {
 const editFieldFormSchema = z.object({
   description: z.string(),
   fieldId: z.string().uuid(),
+  isEnum: z.boolean(),
 });
 
 export async function action({ request }: ActionArgs) {
@@ -32,43 +38,47 @@ export async function action({ request }: ActionArgs) {
     failureRedirect: '/login',
   });
 
-  const parsedForm = await parseFormSafe(request, editFieldFormSchema);
-  if (!parsedForm.success) {
-    parsedForm.error.flatten((issue) => issue);
+  const parsedData = editFieldFormSchema.safeParse(await request.json());
+
+  if (!parsedData.success) {
+    parsedData.error.flatten((issue) => issue);
 
     return json({
       success: false as const,
-      values: parsedForm.formData,
-      error: parsedForm.error.format(),
+      values: null,
+      error: parsedData.error.format(),
     });
   }
-  const { description, fieldId } = parsedForm.data;
+  const { description, fieldId, isEnum } = parsedData.data;
 
   try {
     await apiClient.patchDataModelField(fieldId, {
       description,
+      is_enum: isEnum,
     });
     return json({
       success: true as const,
-      values: parsedForm.data,
+      values: parsedData.data,
       error: null,
     });
   } catch (error) {
     return json({
       success: false as const,
-      values: parsedForm.data,
-      error: error,
+      values: parsedData.data,
+      error,
     });
   }
 }
 
 export function EditField({
   fieldId,
   description,
+  isEnum,
   children,
 }: {
   fieldId: string;
   description: string;
+  isEnum: boolean;
   children: React.ReactNode;
 }) {
   const { t } = useTranslation(handle.i18n);
@@ -80,6 +90,7 @@ export function EditField({
     defaultValues: {
       description,
       fieldId,
+      isEnum,
     },
   });
   const { control, register, setValue } = formMethods;
@@ -97,10 +108,11 @@ export function EditField({
       <Modal.Content>
         <Form
           control={control}
-          onSubmit={({ formData }) => {
-            fetcher.submit(formData, {
+          onSubmit={({ formDataJson }) => {
+            fetcher.submit(formDataJson, {
               method: 'POST',
               action: '/ressources/data/editField',
+              encType: 'application/json',
             });
           }}
         >
@@ -130,6 +142,29 @@ export function EditField({
                   )}
                 />
               </div>
+              <FormField
+                name="isEnum"
+                control={control}
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center gap-4">
+                    <FormControl>
+                      <Checkbox
+                        defaultChecked={isEnum}
+                        onCheckedChange={(checked) => {
+                          field.onChange(checked);
+                        }}
+                      />
+                    </FormControl>
+                    <FormLabel>
+                      <p>{t('data:create_field.is_enum.title')}</p>
+                      <p className="text-xs">
+                        {t('data:create_field.is_enum.subtitle')}
+                      </p>
+                    </FormLabel>
+                    <FormError />
+                  </FormItem>
+                )}
+              />
               <div className="flex flex-1 flex-row gap-2">
                 <Modal.Close asChild>
                   <Button className="flex-1" variant="secondary">

packages/marble-api/scripts/openapi.yaml

@@ -1930,6 +1930,8 @@ components:
       properties:
         description:
           type: string
+        is_enum:
+          type: boolean
     CreateTableLinkBody:
       type: object
       required:

packages/marble-api/src/generated/marble-api.ts

@@ -283,6 +283,7 @@ export type CreateTableFieldBody = {
 };
 export type UpdateTableFieldBody = {
     description?: string;
+    is_enum?: boolean;
 };
 export type CreateTableLinkBody = {
     name: string;