Merge pull request #29 from tsdataclinic/feature/filetype

Add file type check validation

src/components/SingleWorkflowView/OperationEditor/FieldsetSchemaValidationEditor/index.tsx

@@ -1,4 +1,4 @@
-import { TextInput, Button } from '@mantine/core';
+import { TextInput, Button, Stack, Box } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
   FieldsetSchema_Output,
@@ -12,19 +12,19 @@ type Props = {
   onAddOperation: (operation: FieldsetSchemaValidation) => void;
   onUpdateOperation: (operation: FieldsetSchemaValidation) => void;
   onClose: () => void;
+  defaultOperation: FieldsetSchemaValidation;
   fieldsetSchemas: FieldsetSchema_Output[];
   workflowParams: WorkflowParam[];
-  defaultOperation: FieldsetSchemaValidation;
 };
 
 export function FieldsetSchemaValidationEditor({
   mode,
   onClose,
   onAddOperation,
   onUpdateOperation,
+  defaultOperation,
   fieldsetSchemas,
   workflowParams,
-  defaultOperation,
 }: Props): JSX.Element {
   const fieldsetSchemaValidationForm = useForm<FieldsetSchemaValidation>({
     mode: 'uncontrolled',
@@ -43,28 +43,31 @@ export function FieldsetSchemaValidationEditor({
           onClose();
         },
       )}
-      className="space-y-2"
     >
-      <TextInput
-        required
-        key={fieldsetSchemaValidationForm.key('title')}
-        {...fieldsetSchemaValidationForm.getInputProps('title')}
-        label="Custom Title"
-      />
-      <TextInput
-        key={fieldsetSchemaValidationForm.key('description')}
-        {...fieldsetSchemaValidationForm.getInputProps('description')}
-        label="Description"
-      />
+      <Stack>
+        <TextInput
+          required
+          key={fieldsetSchemaValidationForm.key('title')}
+          {...fieldsetSchemaValidationForm.getInputProps('title')}
+          label="Custom Title"
+        />
+        <TextInput
+          key={fieldsetSchemaValidationForm.key('description')}
+          {...fieldsetSchemaValidationForm.getInputProps('description')}
+          label="Description"
+        />
 
-      <FieldsetSchemaSelect
-        key={fieldsetSchemaValidationForm.key('fieldsetSchema')}
-        {...fieldsetSchemaValidationForm.getInputProps('fieldsetSchema')}
-        fieldsetSchemas={fieldsetSchemas}
-        workflowParams={workflowParams}
-      />
+        <FieldsetSchemaSelect
+          key={fieldsetSchemaValidationForm.key('fieldsetSchema')}
+          {...fieldsetSchemaValidationForm.getInputProps('fieldsetSchema')}
+          fieldsetSchemas={fieldsetSchemas}
+          workflowParams={workflowParams}
+        />
 
-      <Button type="submit">{mode === 'add' ? 'Add' : 'Update'}</Button>
+        <Box>
+          <Button type="submit">{mode === 'add' ? 'Add' : 'Update'}</Button>
+        </Box>
+      </Stack>
     </form>
   );
 }

src/components/SingleWorkflowView/OperationEditor/FileTypeValidationEditor/index.tsx

@@ -0,0 +1,69 @@
+import { useForm } from '@mantine/form';
+import { Box, Button, Group, Select, Stack, TextInput } from '@mantine/core';
+import { FileTypeValidation } from '../../../../client';
+import { InfoTooltip } from '../../../ui/InfoTooltip';
+
+type Props = {
+  mode: 'add' | 'update';
+  onAddOperation: (operation: FileTypeValidation) => void;
+  onUpdateOperation: (operation: FileTypeValidation) => void;
+  onClose: () => void;
+  defaultOperation: FileTypeValidation;
+};
+
+const FILE_TYPE_OPTIONS = [{ value: '.csv', label: 'CSV' }];
+
+export function FileTypeValidationEditor({
+  mode,
+  onClose,
+  onAddOperation,
+  onUpdateOperation,
+  defaultOperation,
+}: Props): JSX.Element {
+  const fileTypeValidationForm = useForm<FileTypeValidation>({
+    mode: 'uncontrolled',
+    initialValues: defaultOperation,
+  });
+
+  return (
+    <form
+      onSubmit={fileTypeValidationForm.onSubmit(
+        (operationConfig: FileTypeValidation) => {
+          if (mode === 'add') {
+            onAddOperation(operationConfig);
+          } else {
+            onUpdateOperation(operationConfig);
+          }
+          onClose();
+        },
+      )}
+    >
+      <Stack>
+        <TextInput
+          key={fileTypeValidationForm.key('title')}
+          {...fileTypeValidationForm.getInputProps('title')}
+          required
+          label="Custom Title"
+        />
+        <TextInput
+          key={fileTypeValidationForm.key('description')}
+          {...fileTypeValidationForm.getInputProps('description')}
+          label="Description"
+        />
+        <Select
+          key={fileTypeValidationForm.key('expectedFileType')}
+          {...fileTypeValidationForm.getInputProps('expectedFileType')}
+          required
+          allowDeselect={false}
+          label="File Type"
+          description="Only CSV is supported for now"
+          placeholder="Select a file type"
+          data={FILE_TYPE_OPTIONS}
+        />
+        <Box>
+          <Button type="submit">{mode === 'add' ? 'Add' : 'Update'}</Button>
+        </Box>
+      </Stack>
+    </form>
+  );
+}

src/components/SingleWorkflowView/OperationEditor/index.tsx

@@ -1,12 +1,14 @@
 import { Text } from '@mantine/core';
 import { FieldsetSchemaValidationEditor } from './FieldsetSchemaValidationEditor';
-import { match, P } from 'ts-pattern';
+import { match } from 'ts-pattern';
 import { Operation } from './types';
 import {
   FieldsetSchema_Output,
   FieldsetSchemaValidation,
+  FileTypeValidation,
   WorkflowParam,
 } from '../../../client';
+import { FileTypeValidationEditor } from './FileTypeValidationEditor';
 
 type Props = {
   mode: 'add' | 'update';
@@ -37,14 +39,25 @@ export function OperationEditor({
             onClose={onClose}
             onAddOperation={onAddOperation}
             onUpdateOperation={onUpdateOperation}
+            defaultOperation={operation}
             fieldsetSchemas={fieldsetSchemas}
             workflowParams={workflowParams}
-            defaultOperation={operation}
           />
         );
       },
     )
-    .with({ type: P.union('rowCountValidation', 'fileTypeValidation') }, () => {
+    .with({ type: 'fileTypeValidation' }, (operation: FileTypeValidation) => {
+      return (
+        <FileTypeValidationEditor
+          mode={mode}
+          onClose={onClose}
+          onAddOperation={onAddOperation}
+          onUpdateOperation={onUpdateOperation}
+          defaultOperation={operation}
+        />
+      );
+    })
+    .with({ type: 'rowCountValidation' }, () => {
       return <Text>This validation type has not been implemented yet.</Text>;
     })
     .exhaustive();

src/components/SingleWorkflowView/Workspace/index.tsx

@@ -21,9 +21,10 @@ import {
   WorkflowParam,
   WorkflowSchema_Output,
 } from '../../../client';
-
+import { v4 as uuid } from 'uuid';
 import { Operation } from '../OperationEditor/types';
 import { InfoTooltip } from '../../ui/InfoTooltip';
+
 type Props = {
   workflowSchema: WorkflowSchema_Output;
   onWorkflowSchemaChange: (workflowSchema: WorkflowSchema_Output) => void;
@@ -72,10 +73,6 @@ export function Workspace({
     [workflowSchema, onWorkflowSchemaChange],
   );
 
-  function uuid(): string {
-    throw new Error('Function not implemented.');
-  }
-
   return (
     <>
       <Grid>
@@ -127,7 +124,7 @@ export function Workspace({
                       setOperationToEdit({
                         type: 'fieldsetSchemaValidation',
                         id: uuid(),
-                        title: 'Apply column rulesets',
+                        title: 'Apply column ruleset',
                         description: '',
                         fieldsetSchema: '',
                       });
@@ -136,7 +133,21 @@ export function Workspace({
                   >
                     Apply column rulesets
                   </Menu.Item>
-                  <Menu.Item disabled>Check file type</Menu.Item>
+                  <Menu.Item
+                    onClick={() => {
+                      setOperationEditorMode('add');
+                      setOperationToEdit({
+                        type: 'fileTypeValidation',
+                        id: uuid(),
+                        title: 'Check file type',
+                        description: '',
+                        expectedFileType: '.csv',
+                      });
+                      bottomDrawerActions.open();
+                    }}
+                  >
+                    Check file type
+                  </Menu.Item>
                   <Menu.Item disabled>Check row counts</Menu.Item>
                 </Menu.Dropdown>
               </Menu>