@oneuptime/common 7.0.3567 → 7.0.3589

package/Server/Services/ScheduledMaintenanceService.ts

@@ -50,6 +50,8 @@ import StatusPageEventType from "../../Types/StatusPage/StatusPageEventType";
 import ScheduledMaintenanceFeedService from "./ScheduledMaintenanceFeedService";
 import { ScheduledMaintenanceFeedEventType } from "../../Models/DatabaseModels/ScheduledMaintenanceFeed";
 import { Gray500, Red500 } from "../../Types/BrandColors";
+import Label from "../../Models/DatabaseModels/Label";
+import LabelService from "./LabelService";
 
 export class Service extends DatabaseService<Model> {
   public constructor() {
@@ -694,40 +696,219 @@ ${createdItem.description || "No description provided."}
 
     if (updatedItemIds.length > 0) {
       for (const scheduledMaintenanceId of updatedItemIds) {
+        let shouldAddScheduledMaintenanceFeed: boolean = false;
+        let feedInfoInMarkdown: string =
+          "**Scheduled Maintenance was updated.**";
+
+        const createdByUserId: ObjectID | undefined | null =
+          onUpdate.updateBy.props.userId;
+
         if (onUpdate.updateBy.data.title) {
           // add scheduledMaintenance feed.
-          const createdByUserId: ObjectID | undefined | null =
-            onUpdate.updateBy.props.userId;
 
-          await ScheduledMaintenanceFeedService.createScheduledMaintenanceFeed({
-            scheduledMaintenanceId: scheduledMaintenanceId,
-            projectId: onUpdate.updateBy.props.tenantId as ObjectID,
-            scheduledMaintenanceFeedEventType:
-              ScheduledMaintenanceFeedEventType.ScheduledMaintenanceUpdated,
-            displayColor: Gray500,
-            feedInfoInMarkdown: `**Scheduled Maintenance title was updated.** Here's the new title.
-    
+          feedInfoInMarkdown += `\n\n**Title**: 
 ${onUpdate.updateBy.data.title || "No title provided."}
-              `,
-            userId: createdByUserId || undefined,
-          });
+`;
+          shouldAddScheduledMaintenanceFeed = true;
+        }
+
+        if (onUpdate.updateBy.data.startsAt) {
+          // add scheduledMaintenance feed.
+
+          feedInfoInMarkdown += `\n\n**Starts At**: 
+${OneUptimeDate.getDateAsLocalFormattedString(onUpdate.updateBy.data.startsAt as Date) || "No title provided."}
+`;
+          shouldAddScheduledMaintenanceFeed = true;
+        }
+
+        if (onUpdate.updateBy.data.endsAt) {
+          // add scheduledMaintenance feed.
+
+          feedInfoInMarkdown += `\n\n**Ends At**:
+${OneUptimeDate.getDateAsLocalFormattedString(onUpdate.updateBy.data.endsAt as Date) || "No title provided."}
+`;
+          shouldAddScheduledMaintenanceFeed = true;
         }
 
         if (onUpdate.updateBy.data.description) {
           // add scheduledMaintenance feed.
-          const createdByUserId: ObjectID | undefined | null =
-            onUpdate.updateBy.props.userId;
 
+          feedInfoInMarkdown += `\n\n**Scheduled Maintenance Description**: 
+${onUpdate.updateBy.data.description || "No description provided."}
+          `;
+          shouldAddScheduledMaintenanceFeed = true;
+        }
+
+        if (
+          onUpdate.updateBy.data.sendSubscriberNotificationsOnBeforeTheEvent &&
+          Array.isArray(
+            onUpdate.updateBy.data.sendSubscriberNotificationsOnBeforeTheEvent,
+          ) &&
+          onUpdate.updateBy.data.sendSubscriberNotificationsOnBeforeTheEvent
+            .length > 0
+        ) {
+          feedInfoInMarkdown += `\n\n**Notify Subscribers Before Event Starts**: 
+${(
+  onUpdate.updateBy.data
+    .sendSubscriberNotificationsOnBeforeTheEvent as Array<Recurring>
+)
+  .map((recurring: Recurring) => {
+    return `- ${(recurring as Recurring).toString()}`;
+  })
+  .join("\n")}
+          `;
+          shouldAddScheduledMaintenanceFeed = true;
+        }
+
+        if (
+          onUpdate.updateBy.data.monitors &&
+          onUpdate.updateBy.data.monitors.length > 0 &&
+          Array.isArray(onUpdate.updateBy.data.monitors)
+        ) {
+          const monitorIds: Array<ObjectID> = (
+            onUpdate.updateBy.data.monitors as any
+          )
+            .map((monitor: Label) => {
+              if (monitor._id) {
+                return new ObjectID(monitor._id?.toString());
+              }
+
+              return null;
+            })
+            .filter((monitorId: ObjectID | null) => {
+              return monitorId !== null;
+            });
+
+          const monitors: Array<Label> = await MonitorService.findBy({
+            query: {
+              _id: QueryHelper.any(monitorIds),
+            },
+            select: {
+              name: true,
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            props: {
+              isRoot: true,
+            },
+          });
+
+          if (monitors.length > 0) {
+            feedInfoInMarkdown += `\n\n**Resources Affected**:
+
+${monitors
+  .map((monitor: Monitor) => {
+    return `- ${monitor.name}`;
+  })
+  .join("\n")}
+`;
+
+            shouldAddScheduledMaintenanceFeed = true;
+          }
+        }
+
+        if (
+          onUpdate.updateBy.data.statusPages &&
+          onUpdate.updateBy.data.statusPages.length > 0 &&
+          Array.isArray(onUpdate.updateBy.data.statusPages)
+        ) {
+          const statusPageIds: Array<ObjectID> = (
+            onUpdate.updateBy.data.statusPages as any
+          )
+            .map((statusPage: Label) => {
+              if (statusPage._id) {
+                return new ObjectID(statusPage._id?.toString());
+              }
+
+              return null;
+            })
+            .filter((statusPageId: ObjectID | null) => {
+              return statusPageId !== null;
+            });
+
+          const statusPages: Array<Label> = await StatusPageService.findBy({
+            query: {
+              _id: QueryHelper.any(statusPageIds),
+            },
+            select: {
+              name: true,
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            props: {
+              isRoot: true,
+            },
+          });
+
+          if (statusPages.length > 0) {
+            feedInfoInMarkdown += `\n\n**Show on these status pages:**:
+
+${statusPages
+  .map((statusPage: StatusPage) => {
+    return `- ${statusPage.name}`;
+  })
+  .join("\n")}
+`;
+
+            shouldAddScheduledMaintenanceFeed = true;
+          }
+        }
+
+        if (
+          onUpdate.updateBy.data.labels &&
+          onUpdate.updateBy.data.labels.length > 0 &&
+          Array.isArray(onUpdate.updateBy.data.labels)
+        ) {
+          const labelIds: Array<ObjectID> = (
+            onUpdate.updateBy.data.labels as any
+          )
+            .map((label: Label) => {
+              if (label._id) {
+                return new ObjectID(label._id?.toString());
+              }
+
+              return null;
+            })
+            .filter((labelId: ObjectID | null) => {
+              return labelId !== null;
+            });
+
+          const labels: Array<Label> = await LabelService.findBy({
+            query: {
+              _id: QueryHelper.any(labelIds),
+            },
+            select: {
+              name: true,
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            props: {
+              isRoot: true,
+            },
+          });
+
+          if (labels.length > 0) {
+            feedInfoInMarkdown += `\n\n**Labels**:
+
+${labels
+  .map((label: Label) => {
+    return `- ${label.name}`;
+  })
+  .join("\n")}
+`;
+
+            shouldAddScheduledMaintenanceFeed = true;
+          }
+        }
+
+        if (shouldAddScheduledMaintenanceFeed) {
           await ScheduledMaintenanceFeedService.createScheduledMaintenanceFeed({
             scheduledMaintenanceId: scheduledMaintenanceId,
             projectId: onUpdate.updateBy.props.tenantId as ObjectID,
             scheduledMaintenanceFeedEventType:
               ScheduledMaintenanceFeedEventType.ScheduledMaintenanceUpdated,
             displayColor: Gray500,
-            feedInfoInMarkdown: `**Scheduled Maintenance description was updated.** Here's the new description.
-          
-    ${onUpdate.updateBy.data.description || "No description provided."}
-            `,
+            feedInfoInMarkdown: feedInfoInMarkdown,
             userId: createdByUserId || undefined,
           });
         }

package/Types/Domain.ts

@@ -26,7 +26,7 @@ export default class Domain extends DatabaseProperty {
         "|",
       );
     const secondTLDs: Array<string> =
-      "ac|academy|accountant|accountants|actor|adult|aero|ag|agency|ai|airforce|am|amsterdam|apartments|app|archi|army|art|asia|associates|at|attorney|au|auction|auto|autos|baby|band|bar|barcelona|bargains|basketball|bayern|be|beauty|beer|berlin|best|bet|bid|bike|bingo|bio|biz|biz.pl|black|blog|blue|boats|boston|boutique|broker|build|builders|business|buzz|bz|ca|cab|cafe|camera|camp|capital|car|cards|care|careers|cars|casa|cash|casino|catering|cc|center|ceo|ch|charity|chat|cheap|church|city|cl|claims|cleaning|clinic|clothing|cloud|club|cn|co|co.in|co.jp|co.kr|co.nz|co.uk|co.za|coach|codes|coffee|college|com|com.ag|com.au|com.br|com.bz|com.cn|com.co|com.es|com.ky|com.mx|com.pe|com.ph|com.pl|com.ru|com.tw|community|company|computer|condos|construction|consulting|contact|contractors|cooking|cool|country|coupons|courses|credit|creditcard|cricket|cruises|cymru|cz|dance|date|dating|de|deals|degree|delivery|democrat|dental|dentist|design|dev|diamonds|digital|direct|directory|discount|dk|doctor|dog|domains|download|earth|education|email|energy|engineer|engineering|enterprises|equipment|es|estate|eu|events|exchange|expert|exposed|express|fail|faith|family|fan|fans|farm|fashion|film|finance|financial|firm.in|fish|fishing|fit|fitness|flights|florist|fm|football|forsale|foundation|fr|fun|fund|furniture|futbol|fyi|gallery|games|garden|gay|gen.in|gg|gifts|gives|giving|glass|global|gmbh|gold|golf|graphics|gratis|green|gripe|group|gs|guide|guru|hair|haus|health|healthcare|hockey|holdings|holiday|homes|horse|hospital|host|house|idv.tw|immo|immobilien|in|inc|ind.in|industries|info|info.pl|ink|institute|insure|international|investments|io|irish|ist|istanbul|it|jetzt|jewelry|jobs|jp|kaufen|kids|kim|kitchen|kiwi|kr|ky|la|land|lat|law|lawyer|lease|legal|lgbt|life|lighting|limited|limo|live|llc|llp|loan|loans|london|love|ltd|ltda|luxury|maison|makeup|management|market|marketing|mba|me|me.uk|media|melbourne|memorial|men|menu|miami|mobi|moda|moe|money|monster|mortgage|motorcycles|movie|ms|music|mx|nagoya|name|navy|ne.kr|net|net.ag|net.au|net.br|net.bz|net.cn|net.co|net.in|net.ky|net.nz|net.pe|net.ph|net.pl|net.ru|network|news|ninja|nl|no|nom.co|nom.es|nom.pe|nrw|nyc|okinawa|one|onl|online|org|org.ag|org.au|org.cn|org.es|org.in|org.ky|org.nz|org.pe|org.ph|org.pl|org.ru|org.uk|organic|page|paris|partners|parts|party|pe|pet|ph|photography|photos|pictures|pink|pizza|pl|place|plumbing|plus|poker|porn|press|pro|productions|promo|properties|protection|pub|pw|quebec|quest|racing|re.kr|realestate|recipes|red|rehab|reise|reisen|rent|rentals|repair|report|republican|rest|restaurant|review|reviews|rich|rip|rocks|rodeo|rugby|run|ryukyu|sale|salon|sarl|school|schule|science|se|security|services|sex|sg|sh|shiksha|shoes|shop|shopping|show|singles|site|ski|skin|soccer|social|software|solar|solutions|space|storage|store|stream|studio|study|style|supplies|supply|support|surf|surgery|sydney|systems|tax|taxi|team|tech|technology|tel|tennis|theater|theatre|tickets|tienda|tips|tires|today|tokyo|tools|tours|town|toys|trade|trading|training|travel|tube|tv|tw|uk|university|uno|us|vacations|vc|vegas|ventures|vet|viajes|video|villas|vin|vip|vision|vodka|vote|voto|voyage|wales|watch|web|webcam|website|wedding|wiki|win|wine|work|works|world|ws|wtf|xxx|xyz|yachts|yoga|yokohama|zone|移动|dev|com|edu|gov|net|mil|org|nom|sch|sbs|caa|res|off|gob|int|tur|ip6|uri|urn|asn|act|nsw|qld|tas|vic|pro|biz|adm|adv|agr|arq|art|ato|bio|bmd|cim|cng|cnt|ecn|eco|emp|eng|esp|etc|eti|far|fnd|fot|fst|g12|ggf|imb|ind|inf|jor|jus|leg|lel|mat|med|mus|not|ntr|odo|ppg|psc|psi|qsl|rec|slg|srv|teo|tmp|trd|vet|zlg|web|ltd|sld|pol|fin|k12|lib|pri|aip|fie|eun|sci|prd|cci|pvt|mod|idv|rel|sex|gen|nic|abr|bas|cal|cam|emr|fvg|laz|lig|lom|mar|mol|pmn|pug|sar|sic|taa|tos|umb|vao|vda|ven|mie|北海道|和歌山|神奈川|鹿児島|ass|rep|tra|per|ngo|soc|grp|plc|its|air|and|bus|can|ddr|jfk|mad|nrw|nyc|ski|spy|tcm|ulm|usa|war|fhs|vgs|dep|eid|fet|fla|flå|gol|hof|hol|sel|vik|cri|iwi|ing|abo|fam|gok|gon|gop|gos|aid|atm|gsm|sos|elk|waw|est|aca|bar|cpa|jur|law|sec|plo|www|bir|cbg|jar|khv|msk|nov|nsk|ptz|rnd|spb|stv|tom|tsk|udm|vrn|cmw|kms|nkz|snz|pub|fhv|red|ens|nat|rns|rnu|bbs|tel|bel|kep|nhs|dni|fed|isa|nsn|gub|e12|tec|орг|обр|упр|alt|nis|jpn|mex|ath|iki|nid|gda|inc|za|ovh|lol|africa".split(
+      "ac|academy|accountant|accountants|actor|adult|aero|ag|agency|ai|airforce|am|amsterdam|apartments|app|archi|army|art|asia|associates|at|attorney|au|auction|auto|autos|baby|band|bar|barcelona|bargains|basketball|bayern|be|beauty|beer|berlin|best|bet|bid|bike|bingo|bio|biz|biz.pl|black|blog|blue|boats|boston|boutique|broker|build|builders|business|buzz|bz|ca|cab|cafe|camera|camp|capital|car|cards|care|careers|cars|casa|cash|casino|catering|cc|center|ceo|ch|charity|chat|cheap|church|city|cl|claims|cleaning|clinic|clothing|cloud|club|cn|co|co.in|co.jp|co.kr|co.nz|co.uk|co.za|coach|codes|coffee|college|com|com.ag|com.au|com.br|com.bz|com.cn|com.co|com.es|com.ky|com.mx|com.pe|com.ph|com.pl|com.ru|com.tw|community|company|computer|condos|construction|consulting|contact|contractors|cooking|cool|country|coupons|courses|credit|creditcard|cricket|cruises|cymru|cz|dance|date|dating|de|deals|degree|delivery|democrat|dental|dentist|design|dev|diamonds|digital|direct|directory|discount|dk|doctor|dog|domains|download|earth|education|email|energy|engineer|engineering|enterprises|equipment|es|estate|eu|events|exchange|expert|exposed|express|fail|faith|family|fan|fans|farm|fashion|film|finance|financial|firm.in|fish|fishing|fit|fitness|flights|florist|fm|football|forsale|foundation|fr|fun|fund|furniture|futbol|fyi|gallery|games|garden|gay|gen.in|gg|gifts|gives|giving|glass|global|gmbh|gold|golf|graphics|gratis|green|gripe|group|gs|guide|guru|hair|haus|health|healthcare|hockey|holdings|holiday|homes|horse|hospital|host|house|idv.tw|immo|immobilien|in|inc|ind.in|industries|info|info.pl|ink|institute|insure|international|investments|io|irish|ist|istanbul|it|jetzt|jewelry|jobs|jp|kaufen|kids|kim|kitchen|kiwi|kr|ky|la|land|lat|law|lawyer|lease|legal|lgbt|life|lighting|limited|limo|live|llc|llp|loan|loans|london|love|ltd|ltda|luxury|maison|makeup|management|market|marketing|mba|me|me.uk|media|melbourne|memorial|men|menu|miami|mobi|moda|moe|money|monster|mortgage|motorcycles|movie|ms|music|mx|nagoya|name|navy|ne.kr|net|net.ag|net.au|net.br|net.bz|net.cn|net.co|net.in|net.ky|net.nz|net.pe|net.ph|net.pl|net.ru|network|news|ninja|nl|no|nom.co|nom.es|nom.pe|nrw|nyc|okinawa|one|onl|online|org|org.ag|org.au|org.cn|org.es|org.in|org.ky|org.nz|org.pe|org.ph|org.pl|org.ru|org.uk|organic|page|paris|partners|parts|party|pe|pet|ph|photography|photos|pictures|pink|pizza|pl|place|plumbing|plus|poker|porn|press|pro|productions|promo|properties|protection|pub|pw|quebec|quest|racing|re.kr|realestate|recipes|red|rehab|reise|reisen|rent|rentals|repair|report|republican|rest|restaurant|review|reviews|rich|rip|rocks|rodeo|rugby|run|ryukyu|sale|salon|sarl|school|schule|science|se|security|services|sex|sg|sh|shiksha|shoes|shop|shopping|show|singles|site|ski|skin|soccer|social|software|solar|solutions|space|storage|store|stream|studio|study|style|supplies|supply|support|surf|surgery|sydney|systems|tax|taxi|team|tech|technology|tel|tennis|theater|theatre|tickets|tienda|tips|tires|today|tokyo|tools|tours|town|toys|trade|trading|training|travel|tube|tv|tw|uk|university|uno|us|vacations|vc|vegas|ventures|vet|viajes|video|villas|vin|vip|vision|vodka|vote|voto|voyage|wales|watch|web|webcam|website|wedding|wiki|win|wine|work|works|world|ws|wtf|xxx|xyz|yachts|yoga|yokohama|zone|移动|dev|com|edu|gov|net|mil|org|nom|sch|sbs|caa|res|off|gob|int|tur|ip6|uri|urn|asn|act|nsw|qld|tas|vic|pro|biz|adm|adv|agr|arq|art|ato|bio|bmd|cim|cng|cnt|ecn|eco|emp|eng|esp|etc|eti|far|fnd|fot|fst|g12|ggf|imb|ind|inf|jor|jus|leg|lel|mat|med|mus|not|ntr|odo|ppg|psc|psi|qsl|rec|slg|srv|teo|tmp|trd|vet|zlg|web|ltd|sld|pol|fin|k12|lib|pri|aip|fie|eun|sci|prd|cci|pvt|mod|idv|rel|sex|gen|nic|abr|bas|cal|cam|emr|fvg|laz|lig|lom|mar|mol|pmn|pug|sar|sic|taa|tos|umb|vao|vda|ven|mie|北海道|和歌山|神奈川|鹿児島|ass|rep|tra|per|ngo|soc|grp|plc|its|air|and|bus|can|ddr|jfk|mad|nrw|nyc|ski|spy|tcm|ulm|usa|war|fhs|vgs|dep|eid|fet|fla|flå|gol|hof|hol|sel|vik|cri|iwi|ing|abo|fam|gok|gon|gop|gos|aid|atm|gsm|sos|elk|waw|est|aca|bar|cpa|jur|law|sec|plo|www|bir|cbg|jar|khv|msk|nov|nsk|ptz|rnd|spb|stv|tom|tsk|udm|vrn|cmw|kms|nkz|snz|pub|fhv|red|ens|nat|rns|rnu|bbs|tel|bel|kep|nhs|dni|fed|isa|nsn|gub|e12|tec|орг|обр|упр|alt|nis|jpn|mex|ath|iki|nid|gda|inc|za|ovh|lol|africa|top".split(
         "|",
       );
 

package/Types/Events/Recurring.ts

@@ -186,6 +186,10 @@ export default class Recurring extends DatabaseProperty {
     return arrayToReturn;
   }
 
+  public override toString(): string {
+    return `${this.intervalCount} ${this.intervalType}`;
+  }
+
   protected static override toDatabase(
     value: Recurring | Array<Recurring> | FindOperator<Recurring>,
   ): JSONObject | Array<JSONObject> | null {

package/UI/Components/Forms/BasicForm.tsx

@@ -3,9 +3,11 @@ import UiAnalytics from "../../Utils/Analytics";
 import Alert, { AlertType } from "../Alerts/Alert";
 import Button, { ButtonStyleType } from "../Button/Button";
 import ButtonTypes from "../Button/ButtonTypes";
+
 import { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FormField from "./Fields/FormField";
+import FormSummary from "./FormSummary";
 import Steps from "./Steps/Steps";
 import Field from "./Types/Field";
 import Fields from "./Types/Fields";
@@ -48,6 +50,11 @@ export const DefaultValidateFunction: DefaultValidateFunctionType = (
   return {};
 };
 
+export interface FormSummaryConfig {
+  enabled: boolean;
+  defaultStepName?: string | undefined;
+}
+
 export interface BaseComponentProps<T> {
   submitButtonStyleType?: ButtonStyleType | undefined;
   initialValues?: FormValues<T> | undefined;
@@ -73,6 +80,7 @@ export interface BaseComponentProps<T> {
   onIsLastFormStep?: undefined | ((isLastFormStep: boolean) => void);
   onFormValidationErrorChanged?: ((hasError: boolean) => void) | undefined;
   showSubmitButtonOnlyIfSomethingChanged?: boolean | undefined;
+  summary?: FormSummaryConfig | undefined;
 }
 
 export interface ComponentProps<T extends GenericObject>
@@ -104,12 +112,33 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       setIsLoading(props.isLoading);
     }, [props.isLoading]);
 
+    const getFormSteps: () => Array<FormStep<T>> | undefined = () => {
+      if (props.summary && props.summary.enabled) {
+        // add to last step
+        return [
+          ...(props.steps || [
+            {
+              id: props.summary.defaultStepName || "basic",
+              title: props.summary.defaultStepName || "Basic",
+              isSummaryStep: false,
+            },
+          ]),
+          {
+            id: "summary",
+            title: "Summary",
+            isSummaryStep: true,
+          },
+        ];
+      }
+      return props.steps;
+    };
+
     const [submitButtonText, setSubmitButtonText] = useState<string>(
       props.submitButtonText || "Submit",
     );
 
     const [formSteps, setFormSteps] = useState<Array<FormStep<T>> | undefined>(
-      props.steps,
+      getFormSteps(),
     );
 
     const isInitialValuesSet: MutableRefObject<boolean> = useRef(false);
@@ -175,7 +204,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
     useEffect(() => {
       setFormSteps(
-        props.steps?.filter((step: FormStep<T>) => {
+        getFormSteps()?.filter((step: FormStep<T>) => {
           if (!step.showIf) {
             return true;
           }
@@ -240,11 +269,26 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
       for (const item of fields) {
         // if this field is not the current step.
+
+        let shouldSkip: boolean = false;
         if (
           currentFormStepId &&
           item.stepId &&
           item.stepId !== currentFormStepId
         ) {
+          shouldSkip = true;
+        }
+
+        if (
+          props.summary?.enabled &&
+          (!props.steps || props.steps.length === 0)
+        ) {
+          // if summary is enabled and no steps are provided, then all fields belong to the same step and should not be skipped.
+          shouldSkip = false;
+          item.stepId = props.summary.defaultStepName || "basic";
+        }
+
+        if (shouldSkip) {
           continue;
         }
 
@@ -606,6 +650,16 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                             </div>
                           );
                         })}
+
+                    {/* If Summary, show Model detail  */}
+
+                    {currentFormStepId === "summary" && (
+                      <FormSummary
+                        formValues={refCurrentValue.current}
+                        formFields={formFields}
+                        formSteps={formSteps || undefined}
+                      />
+                    )}
                   </div>
                 </div>
 

package/UI/Components/Forms/BasicModelForm.tsx

@@ -3,6 +3,7 @@ import BasicForm, {
   DefaultValidateFunction,
   FormErrors,
   FormProps,
+  FormSummaryConfig,
 } from "./BasicForm";
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
@@ -46,6 +47,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   hideSubmitButton?: undefined | boolean;
   formRef?: undefined | MutableRefObject<FormProps<FormValues<TBaseModel>>>;
   initialValues?: FormValues<TBaseModel> | undefined;
+  summary?: FormSummaryConfig | undefined;
 }
 
 const BasicModelForm: <TBaseModel extends BaseModel>(
@@ -121,6 +123,7 @@ const BasicModelForm: <TBaseModel extends BaseModel>(
       onIsLastFormStep={props.onIsLastFormStep}
       hideSubmitButton={props.hideSubmitButton}
       ref={props.formRef}
+      summary={props.summary}
     ></BasicForm>
   );
 };

package/UI/Components/Forms/FormSummary.tsx

@@ -0,0 +1,118 @@
+import React, { ReactElement } from "react";
+import Detail from "../Detail/Detail";
+import FormValues from "./Types/FormValues";
+import GenericObject from "../../../Types/GenericObject";
+import Fields from "./Types/Fields";
+import FormFieldSchemaTypeUtil from "./Utils/FormFieldSchemaTypeUtil";
+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>(
+  props: ComponentProps<T>,
+) => ReactElement = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  const { formValues, formFields } = props;
+
+  const getDetailForFormFields: <T extends GenericObject>(
+    formValues: FormValues<T>,
+    formFields: Fields<T>,
+  ) => ReactElement = <T extends GenericObject>(
+    formValues: FormValues<T>,
+    formFields: Fields<T>,
+  ): ReactElement => {
+    return (
+      <div>
+        <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>[]
+          }
+        />
+        <HorizontalRule />
+      </div>
+    );
+  };
+
+  const getFormStepTitle: (formStep: FormStep<T>) => ReactElement = (
+    formStep: FormStep<T>,
+  ): ReactElement => {
+    return (
+      <h2 className="text-md font-medium text-gray-900 mb-3">
+        {formStep.title}
+      </h2>
+    );
+  };
+
+  const getDetailForFormStep: (formStep: FormStep<T>) => ReactElement = (
+    formStep: FormStep<T>,
+  ): ReactElement => {
+    const formFields: Fields<T> = props.formFields
+      .filter((field: Field<T>) => {
+        return formStep.id === field.stepId;
+      })
+      .filter((formField: Field<T>) => {
+        if (!formField.showIf) {
+          return true;
+        }
+        return formField.showIf(formValues);
+      });
+
+    if (formFields.length === 0) {
+      return <></>;
+    }
+
+    return (
+      <div>
+        {getFormStepTitle(formStep)}
+        {getDetailForFormFields(formValues, formFields)}
+      </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);
+};
+
+export default FormSummary;

package/UI/Components/Forms/ModelForm.tsx

@@ -15,7 +15,7 @@ import {
 } from "../CategoryCheckbox/CategoryCheckboxTypes";
 import Loader, { LoaderType } from "../Loader/Loader";
 import Pill, { PillSize } from "../Pill/Pill";
-import { FormErrors, FormProps } from "./BasicForm";
+import { FormErrors, FormProps, FormSummaryConfig } from "./BasicForm";
 import BasicModelForm from "./BasicModelForm";
 import Field from "./Types/Field";
 import Fields from "./Types/Fields";
@@ -101,6 +101,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   saveRequestOptions?: RequestOptions | undefined;
   doNotFetchExistingModel?: boolean | undefined;
   modelAPI?: typeof ModelAPI | undefined;
+  summary?: FormSummaryConfig | undefined;
 }
 
 const ModelForm: <TBaseModel extends BaseModel>(
@@ -783,6 +784,7 @@ const ModelForm: <TBaseModel extends BaseModel>(
             | FormValues<TBaseModel>
             | undefined
         }
+        summary={props.summary}
       ></BasicModelForm>
     </div>
   );

package/UI/Components/Forms/Types/Field.ts

@@ -102,4 +102,6 @@ export default interface Field<TEntity> {
   jsonKeysForDictionary?: Array<string> | undefined;
 
   hideOptionalLabel?: boolean | undefined;
+
+  getSummaryElement?: (item: FormValues<TEntity>) => ReactElement | undefined;
 }

package/UI/Components/Forms/Types/FormStep.ts

@@ -10,4 +10,5 @@ export interface FormStep<TEntity> {
   id: string;
   title: string;
   showIf?: ((item: FormValues<TEntity>) => boolean) | undefined;
+  isSummaryStep?: boolean | undefined;
 }

package/UI/Components/Forms/Utils/FormFieldSchemaTypeUtil.ts

@@ -0,0 +1,84 @@
+import FieldType from "../../Types/FieldType";
+import FormFieldSchemaType from "../Types/FormFieldSchemaType";
+
+export default class FormFieldSchemaTypeUtil {
+  public static toFieldType(
+    formFieldSchemaType: FormFieldSchemaType,
+  ): FieldType {
+    switch (formFieldSchemaType) {
+      case FormFieldSchemaType.ObjectID:
+        return FieldType.ObjectID;
+      case FormFieldSchemaType.Name:
+        return FieldType.Name;
+      case FormFieldSchemaType.Hostname:
+        return FieldType.Hostname;
+      case FormFieldSchemaType.ImageFile:
+        return FieldType.ImageFile;
+      case FormFieldSchemaType.URL:
+        return FieldType.URL;
+      case FormFieldSchemaType.Route:
+        return FieldType.Route;
+      case FormFieldSchemaType.Number:
+        return FieldType.Number;
+      case FormFieldSchemaType.Password:
+        return FieldType.Password;
+      case FormFieldSchemaType.Text:
+        return FieldType.Text;
+      case FormFieldSchemaType.Time:
+        return FieldType.DateTime;
+      case FormFieldSchemaType.Email:
+        return FieldType.Email;
+      case FormFieldSchemaType.PositiveNumber:
+        return FieldType.Number;
+      case FormFieldSchemaType.Date:
+        return FieldType.Date;
+      case FormFieldSchemaType.Phone:
+        return FieldType.Phone;
+      case FormFieldSchemaType.DateTime:
+        return FieldType.DateTime;
+      case FormFieldSchemaType.Domain:
+        return FieldType.Text;
+      case FormFieldSchemaType.LongText:
+        return FieldType.LongText;
+      case FormFieldSchemaType.Color:
+        return FieldType.Color;
+      case FormFieldSchemaType.Dropdown:
+        return FieldType.Dropdown;
+      case FormFieldSchemaType.Radio:
+        return FieldType.Text;
+      case FormFieldSchemaType.File:
+        return FieldType.File;
+      case FormFieldSchemaType.MultiSelectDropdown:
+        return FieldType.MultiSelectDropdown;
+      case FormFieldSchemaType.Toggle:
+        return FieldType.Boolean;
+      case FormFieldSchemaType.Port:
+        return FieldType.Port;
+      case FormFieldSchemaType.EncryptedText:
+        return FieldType.HiddenText;
+      case FormFieldSchemaType.Markdown:
+        return FieldType.Markdown;
+      case FormFieldSchemaType.JavaScript:
+        return FieldType.JavaScript;
+      case FormFieldSchemaType.CSS:
+        return FieldType.CSS;
+      case FormFieldSchemaType.HTML:
+        return FieldType.HTML;
+      case FormFieldSchemaType.RadioButton:
+        return FieldType.Element;
+      case FormFieldSchemaType.JSON:
+        return FieldType.JSON;
+      case FormFieldSchemaType.Query:
+        return FieldType.Element;
+      case FormFieldSchemaType.CustomComponent:
+        return FieldType.Element;
+      case FormFieldSchemaType.Checkbox:
+        return FieldType.Boolean;
+      case FormFieldSchemaType.CategoryCheckbox:
+        return FieldType.Boolean;
+
+      default:
+        return FieldType.Text;
+    }
+  }
+}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -30,7 +30,7 @@ import Field from "../Detail/Field";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import ClassicFilterType from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
-import { FormProps } from "../Forms/BasicForm";
+import { FormProps, FormSummaryConfig } from "../Forms/BasicForm";
 import { ModelField } from "../Forms/ModelForm";
 import { FormStep } from "../Forms/Types/FormStep";
 import FormValues from "../Forms/Types/FormValues";
@@ -215,6 +215,8 @@ export interface BaseTableProps<
   initialFilterData?: FilterData<TBaseModel> | undefined;
 
   saveFilterProps?: SaveFilterProps | undefined;
+
+  formSummary?: FormSummaryConfig | undefined;
 }
 
 export interface ComponentProps<