feat: enhance form summary component to support conditional rendering…

… of form steps and improve layout structure
OneUptime · Jan 27, 2025 · bb2f610 · bb2f610
1 parent 9b68513
commit bb2f610
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 34 deletions.
diff --git a/Common/UI/Components/Forms/BasicForm.tsx b/Common/UI/Components/Forms/BasicForm.tsx
@@ -635,6 +635,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                       <FormSummary
                         formValues={refCurrentValue.current}
                         formFields={formFields}
+                        formSteps={formSteps || undefined}
                       />
                     )}
                   </div>

diff --git a/Common/UI/Components/Forms/FormSummary.tsx b/Common/UI/Components/Forms/FormSummary.tsx
@@ -8,10 +8,13 @@ import FormFieldSchemaType from "./Types/FormFieldSchemaType";
 import DetailField from "../Detail/Field";
 import Field from "./Types/Field";
 import FieldType from "../Types/FieldType";
+import { FormStep } from "./Types/FormStep";
+import HorizontalRule from "../HorizontalRule/HorizontalRule";
 
 export interface ComponentProps<T> {
   formValues: FormValues<T>;
   formFields: Fields<T>;
+  formSteps: FormStep<T>[] | undefined;
 }
 
 const FormSummary: <T extends GenericObject>(
@@ -29,30 +32,81 @@ const FormSummary: <T extends GenericObject>(
     formFields: Fields<T>,
   ): ReactElement => {
     return (
-      <Detail
-        item={formValues as T}
-        fields={
-          formFields.map((field: Field<T>) => {
-            const detailField: DetailField<T> = {
-              title: field.title || "",
-              fieldType: field.getSummaryElement
-                ? FieldType.Element
-                : FormFieldSchemaTypeUtil.toFieldType(
-                    field.fieldType || FormFieldSchemaType.Text,
-                  ),
-              description: field.description || "",
-              getElement: field.getSummaryElement as any,
-              sideLink: field.sideLink,
-              key: (Object.keys(field.field || {})[0]?.toString() ||
-                "") as keyof T,
-            };
-            return detailField;
-          }) as DetailField<GenericObject>[]
-        }
-      />
+      <div>
+        <Detail
+          item={formValues as T}
+          fields={
+            formFields
+              .filter((formField: Field<T>) => {
+                if (!formField.showIf) {
+                  return true;
+                }
+                return formField.showIf(formValues);
+              })
+              .map((field: Field<T>) => {
+                const detailField: DetailField<T> = {
+                  title: field.title || "",
+                  fieldType: field.getSummaryElement
+                    ? FieldType.Element
+                    : FormFieldSchemaTypeUtil.toFieldType(
+                        field.fieldType || FormFieldSchemaType.Text,
+                      ),
+                  description: field.description || "",
+                  getElement: field.getSummaryElement as any,
+                  sideLink: field.sideLink,
+                  key: (Object.keys(field.field || {})[0]?.toString() ||
+                    "") as keyof T,
+                };
+                return detailField;
+              }) as DetailField<GenericObject>[]
+          }
+        />
+        <HorizontalRule />
+      </div>
     );
   };
 
+  const getFormStepTitle: (formStep: FormStep<T>) => ReactElement = (
+    formStep: FormStep<T>,
+  ): ReactElement => {
+    return (
+      <h2 className="text-lg font-medium text-gray-900">{formStep.title}</h2>
+    );
+  };
+
+  const getDetailForFormStep: (formStep: FormStep<T>) => ReactElement = (
+    formStep: FormStep<T>,
+  ): ReactElement => {
+    return (
+      <div>
+        {getFormStepTitle(formStep)}
+        {getDetailForFormFields(
+          formValues,
+          props.formFields.filter((field: Field<T>) => {
+            return formStep.id === field.stepId;
+          }),
+        )}
+      </div>
+    );
+  };
+
+  if (props.formSteps && props.formSteps.length > 0) {
+    return (
+      <div>
+        {props.formSteps
+          .filter((step: FormStep<T>) => {
+            if (!step.showIf) {
+              return true;
+            }
+            return step.showIf(props.formValues);
+          })
+          .map((formStep: FormStep<T>) => {
+            return getDetailForFormStep(formStep);
+          })}
+      </div>
+    );
+  }
+
   return getDetailForFormFields(formValues, formFields);
 };
 

diff --git a/Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx b/Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx
@@ -15,11 +15,7 @@ const IncidentSeveritiesElement: FunctionComponent<ComponentProps> = (
       items={props.incidentSeverities}
       moreText="more Incident Severities"
       getEachElement={(incidentSeverity: IncidentSeverity) => {
-        return (
-          <IncidentSeverityElement
-            incidentSeverity={incidentSeverity}
-          />
-        );
+        return <IncidentSeverityElement incidentSeverity={incidentSeverity} />;
       }}
       noItemsMessage="No Incident Severities."
     />

diff --git a/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx b/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx
@@ -15,7 +15,7 @@ import Exception from "Common/Types/Exception/Exception";
 
 export interface ComponentProps {
   monitorStatusIds: Array<ObjectID>;
-  shouldAnimate: boolean; 
+  shouldAnimate: boolean;
 }
 
 const FetchMonitorStatuses: FunctionComponent<ComponentProps> = (
@@ -71,7 +71,12 @@ const FetchMonitorStatuses: FunctionComponent<ComponentProps> = (
     return <ComponentLoader />;
   }
 
-  return <MonitorStatusesElement monitorStatuses={monitorStatus} shouldAnimate={props.shouldAnimate} />;
+  return (
+    <MonitorStatusesElement
+      monitorStatuses={monitorStatus}
+      shouldAnimate={props.shouldAnimate}
+    />
+  );
 };
 
 export default FetchMonitorStatuses;
diff --git a/Dashboard/src/Components/MonitorStatus/GetMonitorStatusElement.tsx b/Dashboard/src/Components/MonitorStatus/GetMonitorStatusElement.tsx
@@ -82,7 +82,12 @@ const GetMonitorStatusElement: FunctionComponent<ComponentProps> = (
     return <p>Monitor status not found</p>;
   }
 
-  return <MonitorStatusElement monitorStatus={monitorStatus} shouldAnimate={props.shouldAnimate} />;
+  return (
+    <MonitorStatusElement
+      monitorStatus={monitorStatus}
+      shouldAnimate={props.shouldAnimate}
+    />
+  );
 };
 
 export default GetMonitorStatusElement;
diff --git a/Dashboard/src/Components/MonitorStatus/MonitorStatusElement.tsx b/Dashboard/src/Components/MonitorStatus/MonitorStatusElement.tsx
@@ -17,7 +17,7 @@ const TeamElement: FunctionComponent<ComponentProps> = (
       color={props.monitorStatus.color || Black}
       text={props.monitorStatus.name || "Unknown"}
     />
-  )
+  );
 };
 
 export default TeamElement;
diff --git a/Dashboard/src/Components/MonitorStatus/MonitorStatusesElement.tsx b/Dashboard/src/Components/MonitorStatus/MonitorStatusesElement.tsx
@@ -19,9 +19,10 @@ const MonitorStatusesElement: FunctionComponent<ComponentProps> = (
       {props.monitorStatuses.map((monitorStatus: MonitorStatus, i: number) => {
         return (
           <span key={i}>
-            <MonitorStatusElement shouldAnimate={
-              props.shouldAnimate || false
-            } monitorStatus={monitorStatus} />
+            <MonitorStatusElement
+              shouldAnimate={props.shouldAnimate || false}
+              monitorStatus={monitorStatus}
+            />
             {i !== props.monitorStatuses.length - 1 && <span>,&nbsp;</span>}
           </span>
         );

diff --git a/Dashboard/src/Pages/Incidents/Create.tsx b/Dashboard/src/Pages/Incidents/Create.tsx
@@ -224,7 +224,7 @@ const IncidentCreate: FunctionComponent<
                         ]}
                       />
                     );
-                  }
+                  },
                 },
                 {
                   field: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -224,7 +224,7 @@ const IncidentCreate: FunctionComponent< @@
                             ]}
                           />
                         );
-                      }
+                      },
                     },
                     {
                       field: {
@@ Expand Down @@