NEOS-956 adds ability to pop column that no longer exists (#1836)

nucleuscloud · Apr 25, 2024 · c5490a3 · c5490a3
1 parent 14f011c
commit c5490a3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/frontend/apps/web/components/ListBox/ListBox.tsx b/frontend/apps/web/components/ListBox/ListBox.tsx
@@ -123,7 +123,7 @@ export default function ListBox<TData, TValue>(
         >
           {rows.length === 0 && !!noDataMessage && (
             <TableRow className="flex justify-center items-center py-10 text-gray-500">
-              <div className="px-4">{noDataMessage}</div>
+              <td className="px-4">{noDataMessage}</td>
             </TableRow>
           )}
           {rowVirtualizer.getVirtualItems().map((virtualRow) => {

diff --git a/frontend/apps/web/components/jobs/SchemaTable/SchemaColumns.tsx b/frontend/apps/web/components/jobs/SchemaTable/SchemaColumns.tsx
@@ -19,7 +19,7 @@ import { SystemTransformer, TransformerSource } from '@neosync/sdk';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { HTMLProps, ReactElement, useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { Row as RowData } from './SchemaPageTable';
 import TransformerSelect from './TransformerSelect';
@@ -51,13 +51,14 @@ function toColKey(schema: string, table: string, column: string): ColumnKey {
   };
 }
 
-interface RowAlertProps {
+interface SchemaRowAlertProps {
   row: Row<RowData>;
   handler: SchemaConstraintHandler;
+  onRemoveClick(): void;
 }
 
-function RowAlert(props: RowAlertProps): ReactElement {
-  const { row, handler } = props;
+function SchemaRowAlert(props: SchemaRowAlertProps): ReactElement {
+  const { row, handler, onRemoveClick } = props;
   const key: ColumnKey = {
     schema: row.getValue('schema'),
     table: row.getValue('table'),
@@ -79,9 +80,10 @@ function RowAlert(props: RowAlertProps): ReactElement {
     <TooltipProvider delayDuration={100}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className="cursor-default">
-            <ExclamationTriangleIcon className="text-yellow-600 dark:text-yellow-300" />
-          </div>
+          <ExclamationTriangleIcon
+            className="text-yellow-600 dark:text-yellow-300 cursor-pointer"
+            onClick={() => onRemoveClick()}
+          />
         </TooltipTrigger>
         <TooltipContent>
           <p>{messages.join('\n')}</p>
@@ -145,9 +147,24 @@ export function getSchemaColumns(props: Props): ColumnDef<RowData>[] {
         <SchemaColumnHeader column={column} title="Table" />
       ),
       cell: ({ row, getValue }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const form = useFormContext<
+          SchemaFormValues | SingleTableSchemaFormValues
+        >();
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { remove } = useFieldArray<
+          SchemaFormValues | SingleTableSchemaFormValues
+        >({
+          control: form.control,
+          name: 'mappings',
+        });
         return (
           <div className="flex flex-row gap-2 items-center">
-            <RowAlert row={row} handler={constraintHandler} />
+            <SchemaRowAlert
+              row={row}
+              handler={constraintHandler}
+              onRemoveClick={() => remove(row.index)}
+            />
             <span className="max-w-[500px] truncate font-medium">
               {getValue<string>()}
             </span>

diff --git a/frontend/apps/web/components/jobs/SchemaTable/SchemaTable.tsx b/frontend/apps/web/components/jobs/SchemaTable/SchemaTable.tsx
@@ -118,7 +118,7 @@ export function SchemaTable(props: Props): ReactElement {
   }
 
   const extractedFormErrors = formErrorsToMessages(
-    extractAllErrors(form.formState.errors, form.getValues('mappings'))
+    extractAllFormErrors(form.formState.errors, form.getValues('mappings'))
   );
   return (
     <div className="flex flex-col gap-3">
@@ -220,7 +220,7 @@ interface FormError {
   path: string;
 }
 
-function extractAllErrors(
+function extractAllFormErrors(
   errors: FieldErrors<SchemaFormValues | SingleTableSchemaFormValues>,
   values: JobMappingFormValues[],
   path = ''
@@ -250,7 +250,7 @@ function extractAllErrors(
         type: error.type,
       });
     } else {
-      messages = messages.concat(extractAllErrors(error, values, newPath));
+      messages = messages.concat(extractAllFormErrors(error, values, newPath));
     }
   }
   return messages;