Fix style inconsistencies (#400)

* frontend changes on doc

* fix instance edit mode

* fix up icons

* remove invalidate + revert success page temporarily

* remove some unusued code, add loading indicator for form instances, change form instances color palette

* fix nits

---------

Co-authored-by: Elvin Cheng <elvincheng3@gmail.com>
Co-authored-by: Kaiyang Zheng <kaiyang.zheng@gmail.com>

Author: 3 people

apps/web/src/components/ActiveFormList.tsx

@@ -217,7 +217,7 @@ export const ActiveFormList = ({ title }: { title: string }) => {
                           <Status.Root
                             size="lg"
                             width="100px"
-                            colorPalette="yellow"
+                            colorPalette="green"
                           >
                             <Status.Indicator />
                             Complete
@@ -226,7 +226,7 @@ export const ActiveFormList = ({ title }: { title: string }) => {
                           <Status.Root
                             size="lg"
                             width="100px"
-                            colorPalette="green"
+                            colorPalette="yellow"
                           >
                             <Status.Indicator />
                             Pending

apps/web/src/components/NavBar.tsx

@@ -10,8 +10,9 @@ import {
   DropdownDownArrow,
   DropdownUpArrow,
   TemplateFolder,
-  EmployeeDirectory,
+  EmployeeDirectoryIcon,
   InstancesIcon,
+  InstancesIconActive,
 } from 'apps/web/src/static/icons.tsx';
 import Link from 'next/link';
 import {
@@ -59,12 +60,14 @@ const icons = {
   testActive: <GrayPencilIcon boxSize="24px" mr="2" />,
   template: <TemplateFolder boxSize="24px" mr="2" fill="#5E5E5E" />,
   templateActive: <TemplateFolder boxSize="24px" mr="2" fill="black" />,
-  employeeDirectory: <EmployeeDirectory boxSize="24px" mr="2" />,
-  employeeDirectoryActive: <EmployeeDirectory boxSize="24px" mr="2" />,
-  instances: <InstancesIcon boxSize="24px" mr="2" />,
-  instancesActive: (
-    <InstancesIcon boxSize="24px" mr="2" stroke="#5E5E5E" fill="#5E5E5E" />
+  employeeDirectory: (
+    <EmployeeDirectoryIcon boxSize="24px" mr="2" stroke="#5E5E5E" />
+  ),
+  employeeDirectoryActive: (
+    <EmployeeDirectoryIcon boxSize="24px" mr="2" stroke="black" />
   ),
+  instances: <InstancesIcon boxSize="24px" mr="2" />,
+  instancesActive: <InstancesIconActive boxSize="24px" mr="2" />,
 };
 
 type IconKeys = keyof typeof icons;

apps/web/src/components/createForm/FormButtons.tsx

@@ -60,6 +60,7 @@ export const FormButtons = ({
     formInstanceName,
     formTemplate,
     formInstanceDescription,
+    formInstanceUseId,
   } = useCreateFormInstance();
   const [createFormLoading, setCreateFormLoading] = useState(false);
   const { nextSignFormPage, signFormInstanceLoading } = useSignFormInstance();
@@ -212,6 +213,8 @@ export const FormButtons = ({
               type: 'error',
               duration: 3000,
             });
+
+            setCreateFormLoading(false);
           }
         });
     else if (type == FormInteractionType.EditFormTemplate) {
@@ -254,6 +257,9 @@ export const FormButtons = ({
           }
         });
     }
+
+    // always set loading to false
+    setCreateFormLoading(false);
   };
 
   /**
@@ -278,7 +284,7 @@ export const FormButtons = ({
 
     setCreateFormLoading(true);
 
-    if (FormInteractionType.CreateFormInstance) {
+    if (type == FormInteractionType.CreateFormInstance) {
       await createFormInstanceMutation
         .mutateAsync({
           body: {
@@ -400,8 +406,11 @@ export const FormButtons = ({
               case FormInteractionType.EditFormTemplate:
                 _submitFormTemplate();
                 break;
-              default:
+              case FormInteractionType.SignFormInstance:
                 nextSignFormPage(submitLink, review);
+                break;
+              default:
+                throw new Error('Invalid form interaction type');
             }
           }}
         >

apps/web/src/components/createForm/FormLayout.tsx

@@ -65,21 +65,21 @@ export const FormLayout = ({
         flexDirection="column"
         justifyContent={'center'}
         alignItems={
-          FormInteractionType.CreateFormInstance && pageNumber == 1
+          type === FormInteractionType.CreateFormInstance && pageNumber === 1
             ? 'auto'
             : 'center'
         }
         gap="20px"
         borderRadius="12px"
         border={
-          FormInteractionType.CreateFormInstance && pageNumber == 1
+          type === FormInteractionType.CreateFormInstance && pageNumber === 1
             ? 'transparent'
             : '1px solid #E5E5E5'
         }
         height="auto"
         margin="16px 36px 16px 36px"
         backgroundColor={
-          FormInteractionType.CreateFormInstance && pageNumber == 1
+          type === FormInteractionType.CreateFormInstance && pageNumber === 1
             ? 'transparent'
             : '#FFF'
         }
@@ -92,11 +92,11 @@ export const FormLayout = ({
         heading={
           type === FormInteractionType.CreateFormTemplate
             ? 'Create form template'
-            : type == FormInteractionType.CreateFormInstance
+            : type === FormInteractionType.CreateFormInstance
             ? 'Create form instance'
-            : type == FormInteractionType.EditFormTemplate
+            : type === FormInteractionType.EditFormTemplate
             ? 'Edit form template'
-            : type == FormInteractionType.EditFormInstance
+            : type === FormInteractionType.EditFormInstance
             ? 'Edit form instance'
             : 'Submit form'
         }

apps/web/src/components/createFormTemplate/UploadBox.tsx

@@ -39,7 +39,12 @@ export const UploadBox = ({
   });
 
   return (
-    <Flex flexDirection="column" gap="20px">
+    <Flex
+      flexDirection="column"
+      gap="20px"
+      alignItems={'center'}
+      justifyContent={'center'}
+    >
       <Flex
         /* dashed bordered box */
         borderRadius="8px"
@@ -52,6 +57,7 @@ export const UploadBox = ({
         alignItems={'center'}
         backgroundColor={pdfFile ? '#F1F7FF' : '#FFF'}
         {...getRootProps()}
+        width={'420px'}
       >
         <input {...getInputProps()} />
         <UploadIcon
@@ -84,7 +90,7 @@ export const UploadBox = ({
               textDecoration="underline"
               color="#1367EA"
             >
-              Browse
+              browse
             </Text>
           </Flex>
           <Text

apps/web/src/context/CreateFormTemplateContext.tsx

@@ -43,7 +43,8 @@ export const CreateFormTemplateProvider = ({ children }: any) => {
     if (
       !pdfFile &&
       router.pathname !== '/create-template/upload' &&
-      router.pathname !== '/template-directory'
+      router.pathname !== '/template-directory' &&
+      router.pathname !== '/create-template/success'
     ) {
       router.push('/create-template/upload');
     }

apps/web/src/context/SignFormInstanceContext.tsx

@@ -50,7 +50,9 @@ export const SignFormInstanceContextProvider = ({
   const [originalPdf, setOriginalPdf] = useState<ArrayBuffer | null>(null);
   const [modifiedPdf, setModifiedPdf] = useState<ArrayBuffer | null>(null);
   const [assignedGroupId, setAssignedGroupId] = useState<string>();
+  const [signFormInstanceLoading, setSignFormInstanceLoading] = useState(false);
   const router = useRouter();
+
   const signFormInstanceMutation = useMutation({
     ...formInstancesControllerSignFormInstanceMutation(),
     onSuccess: async () => {
@@ -248,6 +250,8 @@ export const SignFormInstanceContextProvider = ({
   };
 
   const submitPdf = async (submitLink: string, pdfDoc: PDFDocument) => {
+    setSignFormInstanceLoading(true);
+
     const form = pdfDoc.getForm();
     form.getFields().forEach((fieldOnForm) => {
       fieldOnForm.disableReadOnly();
@@ -265,9 +269,14 @@ export const SignFormInstanceContextProvider = ({
         },
       });
       if (res) {
-        router.push(submitLink);
+        router.push(submitLink).then(() => {
+          setSignFormInstanceLoading(false);
+        });
       }
     }
+
+    // in case of error, set loading to false
+    setSignFormInstanceLoading(false);
   };
 
   const nextSignFormPage = async (
@@ -298,7 +307,7 @@ export const SignFormInstanceContextProvider = ({
         groupNumber,
         nextSignFormPage,
         updateField,
-        signFormInstanceLoading: isLoading,
+        signFormInstanceLoading,
       }}
     >
       {children}

apps/web/src/pages/_app.tsx

@@ -90,12 +90,12 @@ export default function App({
   const createFormTemplatePath = '/create-template';
   const createFormInstancePath = '/create-instance';
   const signFormInstancePath = '/sign-form';
-  const excludeLayoutPaths = [
-    '/signin',
-    '/register',
-    '/create-template/success',
-    '/create-instance/success',
-  ];
+  // paths that do not include layout or require context
+  // success pages require context and no layout, so they are in a unique paths
+  const excludeLayoutPaths = ['/signin', '/register', 'sign-form/success'];
+  const createFormTemplateSuccessPath = '/create-template/success';
+  const createFormInstanceSuccessPath = '/create-instance/success';
+
   // to allow template context to be populated before moving into edit mode
   const formDirectoryPath = '/template-directory';
   const previewForm = '/preview-form';
@@ -136,6 +136,30 @@ export default function App({
     );
   }
 
+  if (appProps.router.pathname.includes(createFormTemplateSuccessPath)) {
+    return (
+      <>
+        <WrapperComponent>
+          <CreateFormTemplateProvider>
+            <Component {...pageProps} />
+          </CreateFormTemplateProvider>
+        </WrapperComponent>
+      </>
+    );
+  }
+
+  if (appProps.router.pathname.includes(createFormInstanceSuccessPath)) {
+    return (
+      <>
+        <WrapperComponent>
+          <CreateFormInstanceProvider>
+            <Component {...pageProps} />
+          </CreateFormInstanceProvider>
+        </WrapperComponent>
+      </>
+    );
+  }
+
   if (appProps.router.pathname.includes(createFormTemplatePath)) {
     return (
       <>

apps/web/src/pages/create-instance/success.tsx

@@ -1,16 +1,34 @@
 import { Scope } from '@web/client/types.gen';
 import { SuccessPage } from '@web/components/createForm/SuccessPage';
 import isAuth from '@web/components/isAuth';
+import { useCreateFormInstance } from '@web/context/CreateFormInstanceContext';
 import { useRouter } from 'next/router';
 
 function Success() {
   const router = useRouter();
+  const { formInstanceUseId, setFormInstanceUseId } = useCreateFormInstance();
+  // use id to indicate whether first creation or previous edit
+  const create: Boolean = formInstanceUseId?.substring(0, 6) == 'create';
+
+  // navigates to edit mode
+  function submit() {
+    // remove create prefix if present
+    if (create && formInstanceUseId) {
+      setFormInstanceUseId(formInstanceUseId.substring(6));
+    }
+    // navigate to edit mode
+    router.push('/create-instance/description');
+  }
 
   return (
     <SuccessPage
-      message={'Your form instance has been created!'}
+      message={
+        create
+          ? 'Your form instance has been created!'
+          : 'Your form instance has been updated!'
+      }
       linkText={'Edit Form'}
-      linkAction={() => router.push('/create-instance/description')}
+      linkAction={submit}
     />
   );
 }