@oneuptime/common 7.0.3206 → 7.0.3211

package/Models/DatabaseModels/Index.ts

@@ -154,6 +154,8 @@ import AlertNoteTemplate from "./AlertNoteTemplate";
 import TableView from "./TableView";
 import Dashboard from "./Dashboard";
 
+import MonitorTest from "./MonitorTest";
+
 const AllModelTypes: Array<{
   new (): BaseModel;
 }> = [
@@ -331,6 +333,8 @@ const AllModelTypes: Array<{
 
   // Dashboards
   Dashboard,
+
+  MonitorTest,
 ];
 
 const modelTypeMap: { [key: string]: { new (): BaseModel } } = {};

package/Models/DatabaseModels/MonitorTest.ts

@@ -0,0 +1,477 @@
+import Project from "./Project";
+import User from "./User";
+import BaseModel from "./DatabaseBaseModel/DatabaseBaseModel";
+import Route from "../../Types/API/Route";
+import ColumnAccessControl from "../../Types/Database/AccessControl/ColumnAccessControl";
+import TableAccessControl from "../../Types/Database/AccessControl/TableAccessControl";
+import ColumnLength from "../../Types/Database/ColumnLength";
+import ColumnType from "../../Types/Database/ColumnType";
+import CrudApiEndpoint from "../../Types/Database/CrudApiEndpoint";
+import EnableWorkflow from "../../Types/Database/EnableWorkflow";
+import SlugifyColumn from "../../Types/Database/SlugifyColumn";
+import TableColumn from "../../Types/Database/TableColumn";
+import TableColumnType from "../../Types/Database/TableColumnType";
+import TableMetadata from "../../Types/Database/TableMetadata";
+import TenantColumn from "../../Types/Database/TenantColumn";
+import IconProp from "../../Types/Icon/IconProp";
+import MonitorSteps from "../../Types/Monitor/MonitorSteps";
+import MonitorType from "../../Types/Monitor/MonitorType";
+import ObjectID from "../../Types/ObjectID";
+import Permission from "../../Types/Permission";
+import { Column, Entity, Index, JoinColumn, ManyToOne } from "typeorm";
+import { MonitorStepProbeResponse } from "./MonitorProbe";
+import Probe from "./Probe";
+
+@TenantColumn("projectId")
+@TableAccessControl({
+  create: [
+    Permission.ProjectOwner,
+    Permission.ProjectAdmin,
+    Permission.ProjectMember,
+    Permission.CreateProjectMonitor,
+  ],
+  read: [
+    Permission.ProjectOwner,
+    Permission.ProjectAdmin,
+    Permission.ProjectMember,
+    Permission.ReadProjectMonitor,
+  ],
+  delete: [
+    Permission.ProjectOwner,
+    Permission.ProjectAdmin,
+    Permission.ProjectMember,
+    Permission.DeleteProjectMonitor,
+  ],
+  update: [
+    Permission.ProjectOwner,
+    Permission.ProjectAdmin,
+    Permission.ProjectMember,
+    Permission.EditProjectMonitor,
+  ],
+})
+@EnableWorkflow({
+  create: true,
+  delete: true,
+  update: true,
+  read: true,
+})
+@CrudApiEndpoint(new Route("/monitor-test"))
+@SlugifyColumn("name", "slug")
+@Entity({
+  name: "MonitorTest",
+})
+@TableMetadata({
+  tableName: "MonitorTest",
+  singularName: "Monitor Test",
+  pluralName: "Monitor Tests",
+  icon: IconProp.AltGlobe,
+  tableDescription:
+    "Monitor Test allows you to test monitor configurations before you save them.",
+})
+export default class MonitorTest extends BaseModel {
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [],
+  })
+  @TableColumn({
+    manyToOneRelationColumn: "projectId",
+    type: TableColumnType.Entity,
+    modelType: Project,
+    title: "Project",
+    description: "Relation to Project Resource in which this object belongs",
+  })
+  @ManyToOne(
+    () => {
+      return Project;
+    },
+    {
+      eager: false,
+      nullable: true,
+      onDelete: "CASCADE",
+      orphanedRowAction: "nullify",
+    },
+  )
+  @JoinColumn({ name: "projectId" })
+  public project?: Project = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [],
+  })
+  @Index()
+  @TableColumn({
+    type: TableColumnType.ObjectID,
+    required: true,
+    canReadOnRelationQuery: true,
+    title: "Project ID",
+    description: "ID of your OneUptime Project in which this object belongs",
+  })
+  @Column({
+    type: ColumnType.ObjectID,
+    nullable: false,
+    transformer: ObjectID.getDatabaseTransformer(),
+  })
+  public projectId?: ObjectID = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [],
+  })
+  @TableColumn({
+    manyToOneRelationColumn: "createdByUserId",
+    type: TableColumnType.Entity,
+    modelType: User,
+    title: "Created by User",
+    description:
+      "Relation to User who created this object (if this object was created by a User)",
+  })
+  @ManyToOne(
+    () => {
+      return User;
+    },
+    {
+      eager: false,
+      nullable: true,
+      onDelete: "SET NULL",
+      orphanedRowAction: "nullify",
+    },
+  )
+  @JoinColumn({ name: "createdByUserId" })
+  public createdByUser?: User = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [],
+  })
+  @TableColumn({
+    type: TableColumnType.ObjectID,
+    title: "Created by User ID",
+    description:
+      "User ID who created this object (if this object was created by a User)",
+  })
+  @Column({
+    type: ColumnType.ObjectID,
+    nullable: true,
+    transformer: ObjectID.getDatabaseTransformer(),
+  })
+  public createdByUserId?: ObjectID = undefined;
+
+  @ColumnAccessControl({
+    create: [],
+    read: [],
+    update: [],
+  })
+  @TableColumn({
+    manyToOneRelationColumn: "deletedByUserId",
+    type: TableColumnType.Entity,
+    title: "Deleted by User",
+    description:
+      "Relation to User who deleted this object (if this object was deleted by a User)",
+  })
+  @ManyToOne(
+    () => {
+      return User;
+    },
+    {
+      cascade: false,
+      eager: false,
+      nullable: true,
+      onDelete: "SET NULL",
+      orphanedRowAction: "nullify",
+    },
+  )
+  @JoinColumn({ name: "deletedByUserId" })
+  public deletedByUser?: User = undefined;
+
+  @ColumnAccessControl({
+    create: [],
+    read: [],
+    update: [],
+  })
+  @TableColumn({
+    type: TableColumnType.ObjectID,
+    title: "Deleted by User ID",
+    description:
+      "User ID who deleted this object (if this object was deleted by a User)",
+  })
+  @Column({
+    type: ColumnType.ObjectID,
+    nullable: true,
+    transformer: ObjectID.getDatabaseTransformer(),
+  })
+  public deletedByUserId?: ObjectID = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [],
+  })
+  @TableColumn({
+    required: true,
+    type: TableColumnType.MonitorType,
+    title: "Monitor Type",
+    description: "What is the type of this monitor? Website? API? etc.",
+  })
+  @Column({
+    nullable: false,
+    type: ColumnType.ShortText,
+    length: ColumnLength.ShortText,
+  })
+  public monitorType?: MonitorType = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @TableColumn({
+    type: TableColumnType.JSON,
+    required: false,
+    title: "Monitor Steps",
+    description: "What would you like to monitor and what is the criteria?",
+  })
+  @Column({
+    type: ColumnType.JSON,
+    nullable: true,
+    transformer: MonitorSteps.getDatabaseTransformer(),
+  })
+  public monitorSteps?: MonitorSteps = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @TableColumn({
+    manyToOneRelationColumn: "probeId",
+    type: TableColumnType.Entity,
+    modelType: Probe,
+    title: "Probe",
+    description: "Relation to Probe Resource in which this object belongs",
+  })
+  @ManyToOne(
+    () => {
+      return Probe;
+    },
+    {
+      eager: false,
+      nullable: true,
+      onDelete: "CASCADE",
+      orphanedRowAction: "nullify",
+    },
+  )
+  @JoinColumn({ name: "probeId" })
+  public probe?: Probe = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @Index()
+  @TableColumn({
+    type: TableColumnType.ObjectID,
+    required: true,
+    canReadOnRelationQuery: true,
+    title: "Probe ID",
+    description: "ID of your OneUptime Probe in which this object belongs",
+  })
+  @Column({
+    type: ColumnType.ObjectID,
+    nullable: false,
+    transformer: ObjectID.getDatabaseTransformer(),
+  })
+  public probeId?: ObjectID = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @TableColumn({ type: TableColumnType.Date })
+  @Column({
+    type: ColumnType.Date,
+    nullable: true,
+    unique: false,
+  })
+  public testedAt?: Date = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @TableColumn({
+    isDefaultValueColumn: false,
+    required: false,
+    type: TableColumnType.JSON,
+  })
+  @Column({
+    type: ColumnType.JSON,
+    nullable: true,
+    unique: false,
+  })
+  public monitorStepProbeResponse?: MonitorStepProbeResponse = undefined;
+
+  @ColumnAccessControl({
+    create: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.CreateProjectMonitor,
+    ],
+    read: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.ReadProjectMonitor,
+    ],
+    update: [
+      Permission.ProjectOwner,
+      Permission.ProjectAdmin,
+      Permission.ProjectMember,
+      Permission.EditProjectMonitor,
+    ],
+  })
+  @TableColumn({
+    isDefaultValueColumn: false,
+    required: true,
+    type: TableColumnType.Boolean,
+  })
+  @Column({
+    type: ColumnType.Boolean,
+    nullable: true,
+    unique: false,
+    default: true,
+  })
+  public isInQueue?: boolean = undefined;
+}

package/Server/Infrastructure/Postgres/SchemaMigrations/1730209089495-MigrationName.ts

@@ -0,0 +1,51 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class MigrationName1730209089495 implements MigrationInterface {
+  public name = "MigrationName1730209089495";
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "MonitorTest" ("_id" uuid NOT NULL DEFAULT uuid_generate_v4(), "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(), "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(), "deletedAt" TIMESTAMP WITH TIME ZONE, "version" integer NOT NULL, "projectId" uuid NOT NULL, "createdByUserId" uuid, "deletedByUserId" uuid, "monitorType" character varying(100) NOT NULL, "monitorSteps" jsonb, "probeId" uuid NOT NULL, "testedAt" TIMESTAMP WITH TIME ZONE, "lastMonitoringLog" jsonb, CONSTRAINT "PK_7ce3477c7bb3d7b8961c8465935" PRIMARY KEY ("_id"))`,
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_6de87954a2a0587defe52aeb86" ON "MonitorTest" ("projectId") `,
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_fd6b1e330eb08de988307b6052" ON "MonitorTest" ("probeId") `,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD CONSTRAINT "FK_6de87954a2a0587defe52aeb86c" FOREIGN KEY ("projectId") REFERENCES "Project"("_id") ON DELETE CASCADE ON UPDATE NO ACTION`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD CONSTRAINT "FK_f94c5a7356b7b55785e3a3dac5b" FOREIGN KEY ("createdByUserId") REFERENCES "User"("_id") ON DELETE SET NULL ON UPDATE NO ACTION`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD CONSTRAINT "FK_b92a71b1f5f6c072455cd242ed6" FOREIGN KEY ("deletedByUserId") REFERENCES "User"("_id") ON DELETE SET NULL ON UPDATE NO ACTION`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD CONSTRAINT "FK_fd6b1e330eb08de988307b60524" FOREIGN KEY ("probeId") REFERENCES "Probe"("_id") ON DELETE CASCADE ON UPDATE NO ACTION`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP CONSTRAINT "FK_fd6b1e330eb08de988307b60524"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP CONSTRAINT "FK_b92a71b1f5f6c072455cd242ed6"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP CONSTRAINT "FK_f94c5a7356b7b55785e3a3dac5b"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP CONSTRAINT "FK_6de87954a2a0587defe52aeb86c"`,
+    );
+    await queryRunner.query(
+      `DROP INDEX "public"."IDX_fd6b1e330eb08de988307b6052"`,
+    );
+    await queryRunner.query(
+      `DROP INDEX "public"."IDX_6de87954a2a0587defe52aeb86"`,
+    );
+    await queryRunner.query(`DROP TABLE "MonitorTest"`);
+  }
+}

package/Server/Infrastructure/Postgres/SchemaMigrations/1730223198692-MigrationName.ts

@@ -0,0 +1,29 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class MigrationName1730223198692 implements MigrationInterface {
+  public name = "MigrationName1730223198692";
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP COLUMN "lastMonitoringLog"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD "monitorStepProbeResponse" jsonb`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD "isInQueue" boolean DEFAULT true`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP COLUMN "isInQueue"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" DROP COLUMN "monitorStepProbeResponse"`,
+    );
+    await queryRunner.query(
+      `ALTER TABLE "MonitorTest" ADD "lastMonitoringLog" jsonb`,
+    );
+  }
+}

package/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts

@@ -76,6 +76,8 @@ import { MigrationName1727906598804 } from "./1727906598804-MigrationName";
 import { MigrationName1728472625805 } from "./1728472625805-MigrationName";
 import { MigrationName1729682875503 } from "./1729682875503-MigrationName";
 import { MigrationName1730117995642 } from "./1730117995642-MigrationName";
+import { MigrationName1730209089495 } from "./1730209089495-MigrationName";
+import { MigrationName1730223198692 } from "./1730223198692-MigrationName";
 
 export default [
   InitialMigration,
@@ -156,4 +158,6 @@ export default [
   MigrationName1728472625805,
   MigrationName1729682875503,
   MigrationName1730117995642,
+  MigrationName1730209089495,
+  MigrationName1730223198692,
 ];

package/Server/Services/MonitorTestService.ts

@@ -0,0 +1,11 @@
+import DatabaseService from "./DatabaseService";
+import MonitorTest from "Common/Models/DatabaseModels/MonitorTest";
+
+export class Service extends DatabaseService<MonitorTest> {
+  public constructor() {
+    super(MonitorTest);
+    this.hardDeleteItemsOlderThanInDays("createdAt", 2); // this is temporary data. Clear it after 2 days.
+  }
+}
+
+export default new Service();

package/Server/Utils/Monitor/MonitorResource.ts

@@ -674,6 +674,36 @@ export default class MonitorResourceUtil {
       itemsToSave.push(monitorMetricsByMinute);
     }
 
+    if (
+      (data.dataToProcess as ProbeMonitorResponse) &&
+      (data.dataToProcess as ProbeMonitorResponse).syntheticMonitorResponse &&
+      (
+        (data.dataToProcess as ProbeMonitorResponse).syntheticMonitorResponse ||
+        []
+      ).length > 0
+    ) {
+      for (const syntheticMonitorResponse of (
+        data.dataToProcess as ProbeMonitorResponse
+      ).syntheticMonitorResponse || []) {
+        const monitorMetricsByMinute: MonitorMetricsByMinute =
+          new MonitorMetricsByMinute();
+        monitorMetricsByMinute.monitorId = data.monitorId;
+        monitorMetricsByMinute.projectId = data.projectId;
+        monitorMetricsByMinute.metricType = CheckOn.ExecutionTime;
+        monitorMetricsByMinute.metricValue =
+          syntheticMonitorResponse.executionTimeInMS;
+        monitorMetricsByMinute.miscData = {
+          probeId: (
+            data.dataToProcess as ProbeMonitorResponse
+          ).probeId.toString(),
+          browserType: syntheticMonitorResponse.browserType,
+          screenSizeType: syntheticMonitorResponse.screenSizeType,
+        };
+
+        itemsToSave.push(monitorMetricsByMinute);
+      }
+    }
+
     if ((data.dataToProcess as ProbeMonitorResponse).responseTimeInMs) {
       const monitorMetricsByMinute: MonitorMetricsByMinute =
         new MonitorMetricsByMinute();

package/Types/Monitor/CriteriaFilter.ts

@@ -166,7 +166,10 @@ export class CriteriaFilterUtil {
         CheckOn.CPUUsagePercent,
         CheckOn.MemoryUsagePercent,
       ];
-    } else if (monitorType === MonitorType.CustomJavaScriptCode) {
+    } else if (
+      monitorType === MonitorType.CustomJavaScriptCode ||
+      monitorType === MonitorType.SyntheticMonitor
+    ) {
       return [CheckOn.ExecutionTime];
     }
     return [];

package/UI/Components/Loader/Loader.tsx

@@ -13,18 +13,20 @@ export interface ComponentProps {
   size?: undefined | number;
   color?: undefined | Color;
   loaderType?: undefined | LoaderType;
+  className?: string;
 }
 
 const Loader: FunctionComponent<ComponentProps> = ({
   size = 50,
   color = VeryLightGray,
   loaderType = LoaderType.Bar,
+  className = "",
 }: ComponentProps) => {
   if (loaderType === LoaderType.Bar) {
     return (
       <div
-        role="bar-loader mt-1"
-        className="justify-center"
+        role={`bar-loader mt-1 ${className}`}
+        className="flex justify-center"
         data-testid="loader"
       >
         <BarLoader height={4} width={size} color={color.toString()} />

package/UI/Components/Modal/Modal.tsx

@@ -59,7 +59,7 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
 
       <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div className="flex min-h-screen items-end justify-center p-4 text-center sm:items-center sm:p-0">
           <div
             className={`relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${
               props.modalWidth && props.modalWidth === ModalWidth.Large