create rewrite flow-form

apps/hpc-ftsadmin/src/app/app.tsx

@@ -32,6 +32,7 @@ import PagePendingFlowsList from './pages/flows/pending-flows-list';
 import PageOrganizationsList from './pages/organizations/organization-list';
 import PageOrganization from './pages/organizations/organization';
 import FlowEdit from './pages/add-edit/flow-edit';
+import FlowEditRewrite from './pages/add-edit/flow-edit-rewrite/index';
 import * as paths from './paths';
 import { RouteParamsValidator } from './components/route-params-validator';
 import { QueryParamProvider } from 'use-query-params';
@@ -272,6 +273,18 @@ const router = createBrowserRouter(
         path={paths.editFlow()}
         element={<FlowEdit key="edit-flow-route" isEdit />}
       />
+      <Route
+        path={paths.rewriteNewFlow()}
+        element={<FlowEditRewrite key="new-flow-route" isEdit={false} />}
+      />
+      <Route
+        path={paths.rewriteCopyFlow()}
+        element={<FlowEditRewrite key="copy-flow-route" isEdit />}
+      />
+      <Route
+        path={paths.rewriteEditFlow()}
+        element={<FlowEditRewrite key="edit-flow-route" isEdit />}
+      />
       <Route element={<PageNotFound />} />
     </Route>
   )

apps/hpc-ftsadmin/src/app/components/flow-form-rewrite/index.tsx

@@ -0,0 +1,32 @@
+import { Form, Formik } from 'formik';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+
+export const FlowRewriteForm = () => {
+  const initialValues = {
+    inputValue: '', // Initial value for the input field
+  };
+
+  const handleSubmit = (values: any) => {
+    console.log('Form values:', values);
+  };
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {(
+        { values } // Destructure handleChange and values from Formik props
+      ) => (
+        <Form>
+          <TextField
+            name="inputValue"
+            label="Input Field"
+            variant="outlined"
+            value={values.inputValue} // Set value prop to form values
+          />
+
+          <Button type="submit">submit</Button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+export default FlowRewriteForm;

apps/hpc-ftsadmin/src/app/pages/add-edit/flow-edit-rewrite/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import FlowRewriteForm from '../../../components/flow-form-rewrite/index';
+
+interface Props {
+  className?: string;
+  isEdit: boolean;
+}
+
+export default (props: Props) => {
+  return <FlowRewriteForm />;
+};

apps/hpc-ftsadmin/src/app/paths.ts

@@ -9,6 +9,8 @@ const ADD_ORGANIZATION = `${ORGANIZATIONS}/add`;
 const KEYWORDS = '/keywords';
 const NEW_FLOW = '/flows/add';
 const EDIT_FLOW = '/flows/edit/:flowId/version/:versionId';
+const REWRITE_NEW_FLOW = '/flows/test/add';
+const REWRITE_EDIT_FLOW = '/flows/test/edit/:flowId/version/:versionId';
 
 const replacePlaceholders = (
   path: string,
@@ -49,3 +51,14 @@ export const editFlowSetting = (flowId: number, versionId: number) =>
   });
 
 export const editFlow = () => EDIT_FLOW;
+
+export const rewriteNewFlow = () => replacePlaceholders(REWRITE_NEW_FLOW, {});
+export const rewriteCopyFlow = () => replacePlaceholders(REWRITE_NEW_FLOW, {});
+
+export const rewriteEditFlowSetting = (flowId: number, versionId: number) =>
+  replacePlaceholders(REWRITE_EDIT_FLOW, {
+    flowId,
+    versionId,
+  });
+
+export const rewriteEditFlow = () => REWRITE_EDIT_FLOW;

libs/hpc-ui/src/lib/components/form-fields/async-single-select-field.tsx

@@ -34,6 +34,7 @@ const CircularProgressBox = tw.div`
 const StyledIconButton = tw(IconButton)`
   me-6
 `;
+const StyledFormControl = tw(FormControl)`w-full`;
 
 const FormikError = ({ name }: { name: string }) => (
   <ErrorMessage name={name}>
@@ -204,7 +205,7 @@ const AsyncSingleSelect = memo(
 
     return (
       <>
-        <FormControl sx={{ width: '100%' }} size="small">
+        <StyledFormControl size="small">
           <InputLabel
             id={`${label.toLowerCase().replace(' ', '-').trim()}-label`}
           >
@@ -238,7 +239,7 @@ const AsyncSingleSelect = memo(
             )}
           </StyledSelect>
           <FormikError name={name} />
-        </FormControl>
+        </StyledFormControl>
         {entryInfo && rejectInputEntry && (
           <InputEntry
             info={entryInfo}

libs/hpc-ui/src/lib/components/form-fields/checkbox.tsx

@@ -5,7 +5,7 @@ import {
   CheckboxProps,
 } from '@mui/material';
 import { useField, useFormikContext } from 'formik';
-import React, { useCallback, useMemo, memo } from 'react';
+import React, { useMemo, memo } from 'react';
 
 const FormikCheckBox = memo(
   ({
@@ -79,6 +79,22 @@ const CheckBox = memo(
     withoutFormik?: boolean;
     [key: string]: any;
   }) => {
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(event);
+      }
+    };
+    const configCheckBox = useMemo(
+      () => ({
+        ...otherProps,
+        label: label,
+        id: name,
+        control: (
+          <Checkbox onChange={handleChange} size={size} disabled={disabled} />
+        ),
+      }),
+      [label, name, size, disabled, otherProps]
+    );
     if (!withoutFormik) {
       return (
         <FormikCheckBox
@@ -92,19 +108,6 @@ const CheckBox = memo(
         />
       );
     }
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (onChange) {
-        const values = onChange(event);
-      }
-    };
-    const configCheckBox: FormControlLabelProps = {
-      ...otherProps,
-      label: label,
-      id: name,
-      control: (
-        <Checkbox onChange={handleChange} size={size} disabled={disabled} />
-      ),
-    };
 
     return <FormControlLabel {...configCheckBox} />;
   }

libs/hpc-ui/src/lib/components/form-fields/date-picker.tsx

@@ -6,6 +6,8 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import tw from 'twin.macro';
 import dayjs, { Dayjs } from 'dayjs';
+import { DateValidationError } from '@mui/x-date-pickers/models/validation';
+import { TextFieldProps } from '@mui/material/TextField';
 
 const StyledDatePicker = tw.div`
   flex
@@ -36,6 +38,12 @@ const DatePicker = memo(
     const [field, meta, helpers] = useField(name);
     const [cleared, setCleared] = useState(false);
 
+    const linkStyles = {
+      height: '100%',
+      lineHeight: '40px',
+      cursor: 'pointer',
+    };
+
     const onBlur = useCallback(() => {
       helpers.setTouched(true);
     }, [helpers]);
@@ -73,49 +81,70 @@ const DatePicker = memo(
       helpers.setValue(dayjs());
     }, [helpers]);
 
+    const memoizedValue = useMemo(() => {
+      if (enableButton) {
+        return field.value === null ? null : dayjs(field.value, 'DD/MM/YYYY');
+      } else {
+        return dayjs();
+      }
+    }, [enableButton, field.value]);
+
+    const handleError = useCallback(
+      (error: DateValidationError, value: Dayjs | null) => {
+        if (error) {
+          console.error(`Date validation error: ${error} for value: ${value}`);
+        }
+      },
+      []
+    );
+
+    const renderInput = useCallback(
+      (params: TextFieldProps) => (
+        <TextField
+          {...params}
+          InputLabelProps={{ shrink: true }}
+          onBlur={onBlur}
+          error={!!errorMsg}
+          helperText={errorMsg}
+          size="small"
+        />
+      ),
+      [onBlur, errorMsg]
+    );
+
+    const slots = useMemo(
+      () => ({
+        textField: renderInput,
+      }),
+      [renderInput]
+    );
+
+    const slotProps = useMemo(
+      () => ({
+        field: { clearable: true, onClear: handleClear },
+      }),
+      [handleClear]
+    );
+
     return (
       <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={lang}>
         <StyledDatePicker>
           <BaseDatePicker
             {...field}
             {...otherProps}
             format="DD/MM/YYYY"
-            value={
-              enableButton
-                ? field.value === null
-                  ? null
-                  : dayjs(field.value, 'DD/MM/YYYY')
-                : dayjs()
-            }
-            onError={(error) => {
-              console.error(error);
-            }}
+            value={memoizedValue}
+            onError={handleError}
             onChange={handleDateChange}
             label={label}
-            slots={{
-              textField: useMemo(
-                () => (params) => (
-                  <TextField
-                    {...params}
-                    InputLabelProps={{ shrink: true }}
-                    onBlur={onBlur}
-                    error={!!errorMsg}
-                    helperText={errorMsg}
-                    size="small"
-                  />
-                ),
-                [onBlur, errorMsg]
-              ),
-            }}
-            slotProps={{
-              field: { clearable: true, onClear: handleClear },
-            }}
+            slots={slots}
+            slotProps={slotProps}
           />
           {enableButton && (
             <StyledLink
               variant="body2"
               onClick={handleSetToday}
-              sx={{ height: '100%', lineHeight: '40px', cursor: 'pointer' }}
+              sx={linkStyles}
             >
               Today
             </StyledLink>

libs/hpc-ui/src/lib/components/form-fields/file-upload.tsx

@@ -28,6 +28,28 @@ const VisuallyHiddenInput = styled('input')({
   width: 1,
 });
 
+const StyledDiv = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const StyledContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  border: '1px solid grey',
+  width: '80%',
+  backgroundColor: 'hsla(0, 50%, 90%, 0.3)',
+  alignItems: 'center',
+  borderRadius: '5px',
+  marginTop: '6px',
+});
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginLeft: '5px',
+  textDecoration: 'underline',
+}));
+
 type FileUploadProps = {
   name?: string;
   label: string;
@@ -81,13 +103,7 @@ const FileUpload = React.memo(
     }, [fileDownName, name]);
 
     return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
+      <StyledDiv>
         {!(value && fileName) && (
           <StyledFileUpload
             component="label"
@@ -111,28 +127,13 @@ const FileUpload = React.memo(
           </StyledFileUpload>
         )}
         {value && fileName && (
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              border: '1px solid grey',
-              width: '80%',
-              backgroundColor: 'hsla(0, 50%, 90%, 0.3)',
-              alignItems: 'center',
-              borderRadius: '5px',
-              marginTop: '6px',
-            }}
-          >
-            <Button
-              style={{
-                marginLeft: '5px',
-                textDecoration: 'underline',
-              }}
+          <StyledContainer>
+            <StyledButton
               onClick={handleDownload}
               startIcon={<FileDownloadIcon />}
             >
               {fileName}
-            </Button>
+            </StyledButton>
             <IconButton
               aria-label="delete"
               size="small"
@@ -141,9 +142,9 @@ const FileUpload = React.memo(
             >
               <DeleteIcon />
             </IconButton>
-          </div>
+          </StyledContainer>
         )}
-      </div>
+      </StyledDiv>
     );
   }
 );