@oneuptime/common 12.0.6 → 12.0.7

package/Types/API/Hostname.ts

@@ -5,6 +5,27 @@ import Port from "../Port";
 import Typeof from "../Typeof";
 import { FindOperator } from "typeorm";
 
+/*
+ * A chain of DNS labels (which also covers IPv4 literals). Labels are
+ * alphanumeric plus "-" and "_", may not start or end with "-", and are
+ * capped at 63 characters; a single trailing dot (the fully-qualified form)
+ * is allowed. "_" is permitted because internal and service-discovery names
+ * use it and it is not a URL delimiter.
+ */
+const HOST_REGEX: RegExp =
+  /^[a-zA-Z0-9_](?:[a-zA-Z0-9_-]{0,61}[a-zA-Z0-9_])?(?:\.[a-zA-Z0-9_](?:[a-zA-Z0-9_-]{0,61}[a-zA-Z0-9_])?)*\.?$/;
+
+/*
+ * Anything that is not a URL delimiter. The point is not to validate
+ * credentials, it is to make sure userinfo cannot smuggle a path, a query, a
+ * fragment or a second authority past the host check.
+ */
+const USER_INFO_REGEX: RegExp = /^[^@/?#\s[\]]*$/;
+
+const IPV6_CHARS_REGEX: RegExp = /^[0-9a-fA-F:.]+$/;
+
+const PORT_REGEX: RegExp = /^\d{1,5}$/;
+
 export default class Hostname extends DatabaseProperty {
   private _route: string = "";
   public get hostname(): string {
@@ -31,13 +52,80 @@ export default class Hostname extends DatabaseProperty {
     }
   }
 
+  /*
+   * True when the value is a usable authority: an optional "userinfo@"
+   * prefix, a host (DNS name, IPv4, or IPv6 literal) and an optional ":port".
+   *
+   * The old check was a character allowlist that permitted "/", "?", "#" and
+   * "@" anywhere, which made "169.254.169.254/latest/meta-data/#" a valid
+   * Hostname. Anything that stores a Hostname and later interpolates it into
+   * a URL therefore inherited full control of the host, port and path of the
+   * resulting request. Structure, not a charset, is what rules that out.
+   *
+   * Userinfo is still accepted because "https://user:token@host/path" is a
+   * real thing customers put in webhook URLs, and those values are already in
+   * the database — rejecting them here would fail on read, not just on write.
+   * Callers that need the bare host must not split this string themselves;
+   * SSRFProtection.getBareHostname exists for that.
+   */
   public static isValid(value: string): boolean {
-    const re: RegExp = /^[a-zA-Z-\d!#$&'*+,/:;=?@[\].]*$/;
-    const isValid: boolean = re.test(value);
-    if (!isValid) {
+    const authorityWithUserInfo: string = value.trim();
+
+    /*
+     * 253 for a DNS name, plus room for ":65535" and a userinfo prefix.
+     * A bound here also keeps the label regex from being handed something
+     * pathological.
+     */
+    if (!authorityWithUserInfo || authorityWithUserInfo.length > 512) {
+      return false;
+    }
+
+    /*
+     * Split on the LAST "@": userinfo may itself contain "@" percent-encoded
+     * or not, and everything after the final one is the authority.
+     */
+    const atIndex: number = authorityWithUserInfo.lastIndexOf("@");
+
+    if (atIndex !== -1) {
+      const userInfo: string = authorityWithUserInfo.substring(0, atIndex);
+      if (!USER_INFO_REGEX.test(userInfo)) {
+        return false;
+      }
+    }
+
+    const authority: string = authorityWithUserInfo.substring(atIndex + 1);
+
+    if (!authority) {
       return false;
     }
-    return true;
+
+    // Bracketed IPv6, with or without a port: "[::1]", "[::1]:8080".
+    const bracketedIpv6Match: RegExpMatchArray | null = authority.match(
+      /^\[([0-9a-fA-F:.]+)\](?::(\d{1,5}))?$/,
+    );
+    if (bracketedIpv6Match) {
+      return true;
+    }
+
+    /*
+     * Unbracketed IPv6 literal. Two or more colons cannot be a "host:port",
+     * so the colons must be part of the address itself.
+     */
+    if ((authority.match(/:/g) || []).length > 1) {
+      return IPV6_CHARS_REGEX.test(authority);
+    }
+
+    const colonIndex: number = authority.indexOf(":");
+    const host: string =
+      colonIndex === -1 ? authority : authority.substring(0, colonIndex);
+    const port: string =
+      colonIndex === -1 ? "" : authority.substring(colonIndex + 1);
+
+    if (colonIndex !== -1 && !PORT_REGEX.test(port)) {
+      return false;
+    }
+
+    return HOST_REGEX.test(host);
   }
 
   public constructor(hostname: string, port?: Port | string | number) {

package/Types/API/URL.ts

@@ -131,37 +131,55 @@ export default class URL extends DatabaseProperty {
   public static fromString(url: string): URL {
     let protocol: Protocol = Protocol.HTTPS;
 
-    if (url.startsWith("https://")) {
-      protocol = Protocol.HTTPS;
-      url = url.replace("https://", "");
-    }
-
-    if (url.startsWith("http://")) {
-      protocol = Protocol.HTTP;
-      url = url.replace("http://", "");
-    }
-
-    if (url.startsWith("wss://")) {
-      protocol = Protocol.WSS;
-      url = url.replace("wss://", "");
+    /*
+     * Schemes are case-insensitive (RFC 3986), so match on a lower-cased
+     * copy and strip by length. Matching the literal prefix left "HTTPS://"
+     * in place, which then read as an authority of "HTTPS:".
+     *
+     * Longest-first: "https://" has to be tested before "http://", and only
+     * the first match is stripped.
+     */
+    const schemePrefixes: Array<[string, Protocol]> = [
+      ["https://", Protocol.HTTPS],
+      ["http://", Protocol.HTTP],
+      ["wss://", Protocol.WSS],
+      ["ws://", Protocol.WS],
+      ["mongodb://", Protocol.MONGO_DB],
+      ["mailto:", Protocol.MAIL],
+    ];
+
+    const lowerCasedUrl: string = url.toLowerCase();
+
+    for (const [prefix, prefixProtocol] of schemePrefixes) {
+      if (lowerCasedUrl.startsWith(prefix)) {
+        protocol = prefixProtocol;
+        url = url.substring(prefix.length);
+        break;
+      }
     }
 
-    if (url.startsWith("ws://")) {
-      protocol = Protocol.WS;
-      url = url.replace("ws://", "");
-    }
+    if (protocol === Protocol.MAIL) {
+      /*
+       * Hand the bare address to the constructor so it is recognised as an
+       * Email. Routing it through Hostname instead would ask a host validator
+       * to accept an email address — and "?subject=..." along with it.
+       */
+      const address: string = url.split("?")[0] || "";
+      const mailQueryString: string = url.split("?")[1] || "";
 
-    if (url.startsWith("mongodb://")) {
-      protocol = Protocol.MONGO_DB;
-      url = url.replace("mongodb://", "");
+      return new URL(protocol, address, undefined, mailQueryString);
     }
 
-    if (url.startsWith("mailto:")) {
-      protocol = Protocol.MAIL;
-      url = url.replace("mailto:", "");
-    }
+    /*
+     * The authority ends at the first "/", "?" or "#". Splitting on "/" alone
+     * left the query and fragment glued to the host for URLs with no path
+     * ("https://host?token=x" parsed to a host of "host?token=x"), which both
+     * round-tripped wrong and handed anything that later interpolated the
+     * host a way to smuggle a path.
+     */
+    const authority: string = (url.split("/")[0] || "").split(/[?#]/)[0] || "";
 
-    const hostname: Hostname = new Hostname(url.split("/")[0] || "");
+    const hostname: Hostname = new Hostname(authority);
 
     let route: Route | undefined;
 

package/Types/Billing/BalanceAdjustmentType.ts

@@ -0,0 +1,14 @@
+/*
+ * How a manual balance adjustment is applied. Add and Deduct are relative and
+ * land as a single atomic SQL delta, so they cannot lose a usage charge that
+ * is being written at the same moment. Set is absolute - last writer wins -
+ * and is only there for the case where staff need the balance to read a
+ * specific number regardless of what it holds now.
+ */
+enum BalanceAdjustmentType {
+  Add = "Add",
+  Deduct = "Deduct",
+  Set = "Set",
+}
+
+export default BalanceAdjustmentType;

package/Types/Billing/ProjectBalanceType.ts

@@ -0,0 +1,13 @@
+/*
+ * The prepaid balances a project carries. Each one maps to its own column on
+ * the project and is drawn down by a different kind of usage, so they are
+ * topped up and corrected independently.
+ */
+enum ProjectBalanceType {
+  // Drawn down by SMS, voice calls, WhatsApp messages and incoming numbers.
+  SmsOrCall = "SmsOrCall",
+  // Drawn down by LLM spend - AI agents, investigations and code fixes.
+  AI = "AI",
+}
+
+export default ProjectBalanceType;

package/Types/Domain.ts

@@ -67,6 +67,32 @@ export default class Domain extends DatabaseProperty {
     return domainRegex.test(domain);
   }
 
+  /**
+   * Validates a subdomain: one or more DNS labels, no scheme, no port, no
+   * path, no userinfo.
+   *
+   * This is a security control, not a nicety. A subdomain is concatenated
+   * with a verified base domain to build fullDomain, and fullDomain is
+   * interpolated into a URL that the certificate-provisioning cron fetches
+   * unattended. URL parsing takes everything before the first "/" as the
+   * host, so a subdomain of "169.254.169.254/latest/meta-data/#" yields a URL
+   * whose host, port and path are all attacker-chosen. Restricting the value
+   * to DNS labels removes the ability to smuggle any of those.
+   *
+   * The empty string is NOT valid here: callers use "" (or "@") to mean the
+   * apex and must check for that before calling.
+   */
+  public static isValidSubdomain(subdomain: string): boolean {
+    if (!subdomain || subdomain.length > 253) {
+      return false;
+    }
+
+    const subdomainRegex: RegExp =
+      /^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
+    return subdomainRegex.test(subdomain);
+  }
+
   public constructor(domain: string) {
     super();
     this.domain = domain;

package/Types/File/MimeType.ts

@@ -8,6 +8,17 @@ enum MimeType {
   svg = "image/svg+xml",
   gif = "image/gif",
   webp = "image/webp",
+  /*
+   * Raster formats a browser or an API client can legitimately report but the
+   * file picker never names. Listed so those uploads are not rejected outright
+   * now that FileService validates fileType against this enum, and so rows
+   * written before the picker normalised types are still servable.
+   */
+  ico = "image/x-icon",
+  bmp = "image/bmp",
+  tiff = "image/tiff",
+  avif = "image/avif",
+  heic = "image/heic",
   pdf = "application/pdf",
   doc = "application/msword",
   docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",

package/Types/JSONFunctions.ts

@@ -297,6 +297,21 @@ export default class JSONFunctions {
       Object.keys(ObjectType).includes((val as JSONObject)["_type"] as string)
     ) {
       return val;
+    } else if (Array.isArray(val)) {
+      /*
+       * This has to be checked before the plain-object branch below: arrays are
+       * typeof "object", so falling through to serialize() would walk them by
+       * key and hand back { "0": ..., "1": ... } instead of an array. That
+       * silently corrupts every nested array persisted into a JSON column —
+       * e.g. the [facetKey, value] filter tuples of a telemetry saved view.
+       */
+      const arr: Array<JSONValue> = [];
+
+      for (const v of val) {
+        arr.push(this.serializeValue(v));
+      }
+
+      return arr;
     } else if (typeof val === Typeof.Object) {
       return this.serialize(val as JSONObject);
     }

package/Types/Telemetry/TelemetrySavedViewState.ts

@@ -19,7 +19,15 @@ export interface TelemetrySavedViewTimeRange {
 export default interface TelemetrySavedViewState {
   // Submitted search string from the explorer search bar.
   search?: string | undefined;
-  // Active facet filters as [facetKey, value] tuples.
+  /*
+   * Active facet filters as [facetKey, value] tuples.
+   *
+   * Read these with readSavedViewFilters (Common/Utils/Telemetry/
+   * SavedViewFilters) rather than destructuring them. Rows written before
+   * JSONFunctions.serializeValue learned to preserve nested arrays hold
+   * { "0": facetKey, "1": value } instead, and destructuring one of those
+   * throws — which is what this type asserting otherwise once cost us.
+   */
   filters?: Array<[string, string]> | undefined;
   // Selected time range.
   timeRange?: TelemetrySavedViewTimeRange | undefined;

package/Types/Workflow/Components/BaseModel.ts

@@ -1,4 +1,5 @@
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Route from "../../API/Route";
 import IconProp from "../../Icon/IconProp";
 import Text from "../../Text";
 import ComponentMetadata, {
@@ -14,6 +15,29 @@ export default class BaseModelComponent {
       return [];
     }
 
+    /*
+     * Every one of these arguments is keyed on column names, and the single
+     * most common way to get one wrong is to write "id" - which is what an ID
+     * is called everywhere else in the product - when the column is "_id".
+     * Both spellings work now, but the hint has to say so where the builder is
+     * actually typing, because the Query argument is a bare JSON editor with
+     * no field picker behind it.
+     */
+    const columnHint: string = `Keys are column names on ${model.singularName}. The ID column is "_id" (the "id" spelling is accepted too).`;
+
+    const queryDescription: string = `Query that selects which ${model.pluralName} this component acts on. ${columnHint}`;
+
+    const queryPlaceholder: string =
+      'Example: {"_id": "00000000-0000-0000-0000-000000000000"}';
+
+    const selectPlaceholder: string = 'Example: {"_id": true, "name": true}';
+
+    const dataDescription: string = `${model.singularName} fields to write, as a JSON object. ${columnHint}`;
+
+    const documentationLink: Route = Route.fromString(
+      "/workflow/docs/DatabaseComponents.md",
+    );
+
     if (model.enableWorkflowOn.read) {
       components.push({
         id: `${Text.pascalCaseToDashes(model.tableName!)}-find-one`,
@@ -23,22 +47,23 @@ export default class BaseModelComponent {
         iconProp: IconProp.ArrowCircleDown,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Query",
-            description: `Query on ${model.singularName}`,
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
           },
           {
             type: ComponentInputType.Select,
             name: "Select Fields",
-            description: `Select on ${model.singularName}`,
+            description: `Fields to read from ${model.singularName}. ${columnHint}`,
             required: true,
             id: "select",
-            placeholder: 'Example: {"columnName": true, ...}',
+            placeholder: selectPlaceholder,
           },
         ],
         returnValues: [
@@ -82,22 +107,23 @@ export default class BaseModelComponent {
         iconProp: IconProp.ArrowCircleDown,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Query",
-            description: "Please fill out this query",
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
           },
           {
             type: ComponentInputType.Select,
             name: "Select Fields",
-            description: `Select on ${model.singularName}`,
+            description: `Fields to read from ${model.singularName}. ${columnHint}`,
             required: true,
             id: "select",
-            placeholder: 'Example: {"columnName": true, ...}',
+            placeholder: selectPlaceholder,
           },
           {
             type: ComponentInputType.Number,
@@ -196,17 +222,26 @@ export default class BaseModelComponent {
         iconProp: IconProp.Trash,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Delete by",
-            description: "Please fill out this query",
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
+          },
+        ],
+        returnValues: [
+          {
+            id: "items-deleted",
+            name: "Items Deleted",
+            description: `How many ${model.pluralName} the query matched and deleted. Zero is not an error - it means nothing matched.`,
+            type: ComponentInputType.Number,
+            required: false,
           },
         ],
-        returnValues: [],
         inPorts: [
           {
             title: "In",
@@ -239,14 +274,15 @@ export default class BaseModelComponent {
         iconProp: IconProp.Trash,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Delete by",
-            description: "Please fill out this query",
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
           },
           {
             type: ComponentInputType.Number,
@@ -263,7 +299,15 @@ export default class BaseModelComponent {
             id: "limit",
           },
         ],
-        returnValues: [],
+        returnValues: [
+          {
+            id: "items-deleted",
+            name: "Items Deleted",
+            description: `How many ${model.pluralName} the query matched and deleted. Zero is not an error - it means nothing matched.`,
+            type: ComponentInputType.Number,
+            required: false,
+          },
+        ],
         inPorts: [
           {
             title: "In",
@@ -312,10 +356,10 @@ export default class BaseModelComponent {
           {
             type: ComponentInputType.Select,
             name: "Select Fields",
-            description: `Select on ${model.singularName}`,
+            description: `Fields to read from ${model.singularName}. ${columnHint}`,
             required: true,
             id: "select",
-            placeholder: 'Example: {"columnName": true, ...}',
+            placeholder: selectPlaceholder,
           },
         ],
         returnValues: [
@@ -346,12 +390,13 @@ export default class BaseModelComponent {
         iconProp: IconProp.Database,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             id: "json",
             placeholder: 'Example: {"columnName": "value", ...}',
             name: "JSON Object",
-            description: `${model.singularName} represented as JSON`,
+            description: `${model.singularName} represented as JSON. ${columnHint}`,
             type: ComponentInputType.JSON,
             required: true,
           },
@@ -397,12 +442,13 @@ export default class BaseModelComponent {
         iconProp: IconProp.Database,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             id: "json-array",
             name: "JSON Array",
             placeholder: 'Example: [{"columnName": "value", ...}, {...}]',
-            description: "List of models represented as JSON array",
+            description: `List of ${model.pluralName} represented as a JSON array. ${columnHint}`,
             type: ComponentInputType.JSONArray,
             required: true,
           },
@@ -472,10 +518,10 @@ export default class BaseModelComponent {
           {
             type: ComponentInputType.Select,
             name: "Select Fields",
-            description: `Select on ${model.singularName}`,
+            description: `Fields to read from ${model.singularName}. ${columnHint}`,
             required: true,
             id: "select",
-            placeholder: 'Example: {"columnName": true, ...}',
+            placeholder: selectPlaceholder,
           },
         ],
         returnValues: [
@@ -505,25 +551,34 @@ export default class BaseModelComponent {
         iconProp: IconProp.ArrowCircleUp,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Query",
-            description: "Please fill out this query",
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
           },
           {
             id: "data",
             placeholder: 'Example: {"columnName": "value", ...}',
             name: "Data (JSON Object)",
-            description: `${model.singularName} represented as JSON`,
+            description: dataDescription,
             type: ComponentInputType.JSON,
             required: true,
           },
         ],
-        returnValues: [],
+        returnValues: [
+          {
+            id: "items-updated",
+            name: "Items Updated",
+            description: `How many ${model.pluralName} the query matched and updated. Zero is not an error - it means nothing matched.`,
+            type: ComponentInputType.Number,
+            required: false,
+          },
+        ],
         inPorts: [
           {
             title: "In",
@@ -556,20 +611,21 @@ export default class BaseModelComponent {
         iconProp: IconProp.ArrowCircleUp,
         tableName: model.tableName!,
         componentType: ComponentType.Component,
+        documentationLink: documentationLink,
         arguments: [
           {
             type: ComponentInputType.Query,
             name: "Query",
-            description: "Please fill out this query",
+            description: queryDescription,
             required: true,
             id: "query",
-            placeholder: 'Example: {"columnName": "value", ...}',
+            placeholder: queryPlaceholder,
           },
           {
             id: "data",
             name: "Data (JSON Object)",
             placeholder: 'Example: {"columnName": "value", ...}',
-            description: `${model.singularName} represented as JSON`,
+            description: dataDescription,
             type: ComponentInputType.JSON,
             required: true,
           },
@@ -588,7 +644,15 @@ export default class BaseModelComponent {
             id: "limit",
           },
         ],
-        returnValues: [],
+        returnValues: [
+          {
+            id: "items-updated",
+            name: "Items Updated",
+            description: `How many ${model.pluralName} the query matched and updated. Zero is not an error - it means nothing matched.`,
+            type: ComponentInputType.Number,
+            required: false,
+          },
+        ],
         inPorts: [
           {
             title: "In",

package/Typings/Index.d.ts

@@ -1,3 +1,15 @@
 declare module "*.png";
 declare module "*.jpg";
 declare module "*.gif";
+
+/*
+ * i18next-browser-languagedetector is an App-only browser dependency that a
+ * few Common tests reach through imported App/FeatureSet sources (e.g. the
+ * StatusPage detail pages via their Utils/i18n). It is not installed in
+ * Common/node_modules — Common's jest moduleNameMapper mocks it at runtime —
+ * so the type checker has nothing to resolve when it compiles those App files
+ * from within the Common Test job (which installs Common alone). This ambient
+ * shim gives the type checker an `any` module so the suite compiles; the mock
+ * supplies the behaviour at runtime.
+ */
+declare module "i18next-browser-languagedetector";

package/UI/Components/GanttChart/ChartContainer.tsx

@@ -36,9 +36,10 @@ const ChartContainer: FunctionComponent<ComponentProps> = (
     /*
      * `isolate` creates a new stacking context so the chart's internal
      * z-indexes (e.g. a highlighted/matched bar uses z-30, see Bar/Index.tsx)
-     * stay trapped inside the chart. Without it those bars paint above
-     * page-level overlays like the span-details SideOver (z-10), making a
-     * matched span "show above" the sidebar.
+     * stay trapped inside the chart. Without it those bars compete directly
+     * with page-level overlays such as the span-details SideOver (z-30, and
+     * portalled to the end of <body>), and a matched span would "show above"
+     * the sidebar.
      */
     <div ref={divRef} className={"w-full"} style={{ isolation: "isolate" }}>
       {props.children}

package/UI/Components/Modal/ConfirmModal.tsx

@@ -15,6 +15,8 @@ export interface ComponentProps {
   isLoading?: boolean;
   error?: string | undefined;
   disableSubmitButton?: boolean | undefined;
+  // Rendered under the description - for confirmations that also ask something.
+  children?: ReactElement | undefined;
 }
 
 const ConfirmModal: FunctionComponent<ComponentProps> = (
@@ -51,11 +53,14 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
        * a long confirmation two nested scrollbars, and the inner one clipped
        * the text well short of the space the modal had spare.
        */}
-      <div
-        data-testid="confirm-modal-description"
-        className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-600"
-      >
-        {translatedDescription}
+      <div>
+        <div
+          data-testid="confirm-modal-description"
+          className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-600"
+        >
+          {translatedDescription}
+        </div>
+        {props.children ? <div className="mt-4">{props.children}</div> : <></>}
       </div>
     </Modal>
   );