@oneuptime/common 9.2.27 → 9.3.1

package/UI/Components/Card/Card.tsx

@@ -32,16 +32,18 @@ const Card: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div data-testid="card" className={`mb-4 ${props.className || ""}`}>
-        <div className="shadow md:rounded-md">
-          <div className="bg-white py-6 px-4 md:p-6">
-            <div className="flex flex-col md:flex-row md:justify-between">
-              <div className={`${noRightElementsOrButtons ? "w-full" : ""}`}>
+      <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
+        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+          <div className="py-6 px-5 md:px-6">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-start">
+              <div
+                className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
+              >
                 {props.title && (
                   <h2
                     data-testid="card-details-heading"
                     id="card-details-heading"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-semibold leading-6 text-gray-900"
                   >
                     {props.title}
                   </h2>
@@ -49,7 +51,7 @@ const Card: FunctionComponent<ComponentProps> = (
                 {props.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
+                    className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
                   >
                     {props.description}
                   </p>
@@ -57,21 +59,21 @@ const Card: FunctionComponent<ComponentProps> = (
               </div>
               {(props.rightElement ||
                 (props.buttons && props.buttons.length > 0)) && (
-                <div className="flex flex-col md:flex-row md:w-fit mt-4 md:mt-0 gap-2 md:gap-0">
+                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0">
                   {props.rightElement && (
-                    <div className="mb-2 md:mb-0 md:mr-2">
+                    <div className="mb-2 md:mb-0 md:mr-3">
                       {props.rightElement}
                     </div>
                   )}
                   {props.buttons && props.buttons.length > 0 && (
-                    <div className="flex flex-wrap gap-2 md:gap-0">
+                    <div className="flex flex-wrap items-center gap-2">
                       {props.buttons.map(
                         (
                           button: CardButtonSchema | ReactElement,
                           i: number,
                         ) => {
                           return (
-                            <div className="md:ml-2 first:md:ml-0" key={i}>
+                            <div key={i}>
                               {React.isValidElement(button) ? button : null}
                               {React.isValidElement(button) ? null : (
                                 <Button
@@ -112,7 +114,7 @@ const Card: FunctionComponent<ComponentProps> = (
             </div>
 
             {props.children && (
-              <div className={props.bodyClassName || "mt-6"}>
+              <div className={props.bodyClassName || "mt-4"}>
                 {props.children}
               </div>
             )}

package/UI/Components/CodeBlock/CodeBlock.tsx

@@ -1,19 +1,62 @@
 import "highlight.js/styles/a11y-dark.css";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 import Highlight from "react-highlight";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   code: string | ReactElement;
   language: string;
+  maxHeight?: string | undefined;
+  showCopyButton?: boolean | undefined;
 }
 
 const CodeBlock: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy: () => void = (): void => {
+    if (typeof props.code === "string") {
+      navigator.clipboard.writeText(props.code).catch(() => {
+        /* ignore clipboard errors */
+      });
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+  };
+
+  const maxHeight: string = props.maxHeight || "500px";
+  const showCopyButton: boolean = props.showCopyButton !== false;
+
   return (
-    <Highlight className={`p-3 language-${props.language} rounded-md shadow`}>
-      {props.code}
-    </Highlight>
+    <div className="relative group">
+      {showCopyButton && typeof props.code === "string" && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10"
+          title={copied ? "Copied!" : "Copy to clipboard"}
+          type="button"
+        >
+          <Icon
+            icon={copied ? IconProp.Check : IconProp.Copy}
+            className="h-4 w-4"
+          />
+        </button>
+      )}
+      <div
+        className="overflow-auto rounded-lg border border-gray-700"
+        style={{ maxHeight: maxHeight }}
+      >
+        <Highlight
+          className={`p-4 language-${props.language} text-sm leading-relaxed`}
+        >
+          {props.code}
+        </Highlight>
+      </div>
+    </div>
   );
 };
 

package/UI/Components/Detail/Detail.tsx

@@ -1,18 +1,18 @@
 import AlignItem from "../../Types/AlignItem";
 import { Logger } from "../../Utils/Logger";
-import CodeEditor from "../CodeEditor/CodeEditor";
+import CodeBlock from "../CodeBlock/CodeBlock";
 import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
 import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
 import { DropdownOption } from "../Dropdown/Dropdown";
 import HiddenText from "../HiddenText/HiddenText";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
+import ObjectIDView from "../ObjectID/ObjectIDView";
 import FieldType from "../Types/FieldType";
 import Field from "./Field";
 import FieldLabelElement from "./FieldLabel";
 import PlaceholderText from "./PlaceholderText";
 import FileModel from "../../../Models/DatabaseModels/DatabaseBaseModel/FileModel";
-import CodeType from "../../../Types/Code/CodeType";
 import Color from "../../../Types/Color";
 import DatabaseProperty from "../../../Types/Database/DatabaseProperty";
 import OneUptimeDate from "../../../Types/Date";
@@ -21,11 +21,18 @@ import BadDataException from "../../../Types/Exception/BadDataException";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement, useEffect, useState } from "react";
 
+export enum DetailStyle {
+  Default = "default",
+  Card = "card",
+  Minimal = "minimal",
+}
+
 export interface ComponentProps<T extends GenericObject> {
   item: T;
   fields: Array<Field<T>>;
   id?: string | undefined;
   showDetailsInNumberOfColumns?: number | undefined;
+  style?: DetailStyle | undefined;
 }
 
 type DetailFunction = <T extends GenericObject>(
@@ -75,25 +82,40 @@ const Detail: DetailFunction = <T extends GenericObject>(
     placeholder: string,
   ): ReactElement => {
     if (!options) {
-      return <div>No options found</div>;
+      return (
+        <span className="text-gray-400 italic text-sm">No options found</span>
+      );
     }
 
-    if (
-      !options.find((i: DropdownOption) => {
+    const selectedOption: DropdownOption | undefined = options.find(
+      (i: DropdownOption) => {
         return i.value === data;
-      })
-    ) {
-      return <div>{placeholder}</div>;
+      },
+    );
+
+    if (!selectedOption) {
+      return (
+        <span className="text-gray-400 italic text-sm">{placeholder}</span>
+      );
     }
 
     return (
-      <div>
-        {
-          options.find((i: DropdownOption) => {
-            return i.value === data;
-          })?.label as string
-        }
-      </div>
+      <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 border border-indigo-100 text-indigo-700 text-sm font-medium">
+        <svg
+          className="w-3.5 h-3.5 text-indigo-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 5l7 7-7 7"
+          />
+        </svg>
+        {selectedOption.label as string}
+      </span>
     );
   };
 
@@ -122,7 +144,34 @@ const Detail: DetailFunction = <T extends GenericObject>(
       return <></>;
     }
 
-    return <div className="text-gray-900">{usdCents / 100} USD</div>;
+    const formattedAmount: string = (usdCents / 100).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+
+    return (
+      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-50 border border-emerald-100">
+        <svg
+          className="w-4 h-4 text-emerald-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span className="font-semibold text-emerald-700">
+          ${formattedAmount}
+        </span>
+        <span className="text-xs text-emerald-600 uppercase tracking-wide font-medium">
+          USD
+        </span>
+      </div>
+    );
   };
 
   type GetMinutesFieldFunction = (minutes: number | null) => ReactElement;
@@ -135,8 +184,24 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     return (
-      <div className="text-gray-900">
-        {minutes} {minutes > 1 ? "minutes" : "minute"}
+      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-100">
+        <svg
+          className="w-4 h-4 text-blue-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span className="font-semibold text-blue-700">{minutes}</span>
+        <span className="text-xs text-blue-600 font-medium">
+          {minutes > 1 ? "minutes" : "minute"}
+        </span>
       </div>
     );
   };
@@ -178,9 +243,28 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
     if (field.fieldType === FieldType.Date) {
       if (data) {
-        data = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          data as string,
-          true,
+        const formattedDate: string =
+          OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+            data as string,
+            true,
+          );
+        data = (
+          <span className="inline-flex items-center gap-2 text-gray-700">
+            <svg
+              className="w-4 h-4 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+            <span className="font-medium">{formattedDate}</span>
+          </span>
         );
       } else {
         data = field.placeholder || "-";
@@ -189,17 +273,46 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
     if (field.fieldType === FieldType.Boolean) {
       if (data) {
-        data = "Yes";
+        data = (
+          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-sm font-medium">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+            Yes
+          </span>
+        );
       } else {
-        data = "No";
+        data = (
+          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-sm font-medium">
+            <span className="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
+            No
+          </span>
+        );
       }
     }
 
     if (field.fieldType === FieldType.DateTime) {
       if (data) {
-        data = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          data as string,
-          false,
+        const formattedDateTime: string =
+          OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+            data as string,
+            false,
+          );
+        data = (
+          <span className="inline-flex items-center gap-2 text-gray-700">
+            <svg
+              className="w-4 h-4 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span className="font-medium">{formattedDateTime}</span>
+          </span>
         );
       } else {
         data = field.placeholder || "-";
@@ -274,13 +387,18 @@ const Detail: DetailFunction = <T extends GenericObject>(
         const url: string = URL.createObjectURL(blob);
 
         data = (
-          <img
-            src={url}
-            className={"rounded"}
-            style={{
-              height: "100px",
-            }}
-          />
+          <div className="group/image relative inline-block">
+            <div className="overflow-hidden rounded-xl shadow-md border border-gray-200 bg-white p-1">
+              <img
+                src={url}
+                className="rounded-lg object-cover transition-all duration-300 hover:scale-105"
+                style={{
+                  height: "100px",
+                }}
+                alt=""
+              />
+            </div>
+          </div>
         );
       } else {
         data = "";
@@ -318,14 +436,14 @@ const Detail: DetailFunction = <T extends GenericObject>(
         field.fieldType === FieldType.JavaScript ||
         field.fieldType === FieldType.Code)
     ) {
-      let codeType: CodeType = CodeType.HTML;
+      let language: string = "html";
 
       if (field.fieldType === FieldType.CSS) {
-        codeType = CodeType.CSS;
+        language = "css";
       }
 
       if (field.fieldType === FieldType.JSON) {
-        codeType = CodeType.JSON;
+        language = "json";
 
         //make sure json is well formatted.
 
@@ -343,26 +461,62 @@ const Detail: DetailFunction = <T extends GenericObject>(
                 e,
             );
           }
+        } else if (typeof data === "object" && data !== null) {
+          // If data is already an object, convert it to a formatted JSON string
+          try {
+            data = JSON.stringify(data, null, 2);
+          } catch (e) {
+            Logger.error(
+              "Cant stringify json object for field: " +
+                field.title +
+                " Error: " +
+                e,
+            );
+            data = String(data);
+          }
         }
       }
 
       if (field.fieldType === FieldType.JavaScript) {
-        codeType = CodeType.JavaScript;
+        language = "javascript";
       }
 
       if (field.fieldType === FieldType.Code) {
-        codeType = CodeType.Text;
+        language = "plaintext";
       }
 
       data = (
-        <CodeEditor
-          type={codeType}
-          readOnly={true}
-          initialValue={data as string}
+        <CodeBlock
+          code={data as string}
+          language={language}
+          maxHeight="400px"
         />
       );
     }
 
+    if (data && field.fieldType === FieldType.InlineCode) {
+      data = (
+        <code className="px-2 py-1 bg-gray-100 text-gray-800 rounded font-mono text-sm border border-gray-200 break-all">
+          {data as string}
+        </code>
+      );
+    }
+
+    if (data && field.fieldType === FieldType.ObjectID) {
+      const objectIdValue: string = data.toString();
+      data = <ObjectIDView objectId={objectIdValue} />;
+    }
+
+    if (data && field.fieldType === FieldType.Heading) {
+      data = (
+        <div className="inline-flex items-center">
+          <span className="text-2xl font-bold text-gray-900 tracking-tight">
+            {data.toString()}
+          </span>
+        </div>
+      );
+    }
+
     if (field.getElement) {
       data = field.getElement(props.item);
     }
@@ -387,9 +541,29 @@ const Detail: DetailFunction = <T extends GenericObject>(
       data = data.toString();
     }
 
+    // Determine style-based classes
+    const styleType: DetailStyle = props.style || DetailStyle.Default;
+    const isCardStyle: boolean = styleType === DetailStyle.Card;
+    const isMinimalStyle: boolean = styleType === DetailStyle.Minimal;
+
+    /* Container classes based on style - uses first:pt-0 to remove top padding from first field */
+    let containerClasses: string =
+      "group transition-all duration-200 ease-in-out";
+
+    if (isCardStyle) {
+      containerClasses +=
+        " bg-gradient-to-br from-white to-gray-50/50 rounded-xl border border-gray-100 p-4 shadow-sm hover:shadow-md hover:border-gray-200";
+    } else if (isMinimalStyle) {
+      containerClasses +=
+        " py-3 first:pt-0 last:pb-0 border-b border-gray-50 last:border-b-0 hover:bg-gray-50/50 px-2 -mx-2 rounded-lg";
+    } else {
+      containerClasses +=
+        " py-5 first:pt-0 last:pb-0 border-b border-gray-100 last:border-b-0 hover:bg-gray-50/30 px-3 -mx-3 rounded-lg";
+    }
+
     return (
       <div
-        className={className}
+        className={`${className} ${containerClasses}`}
         key={index}
         id={props.id}
         style={
@@ -406,20 +580,29 @@ const Detail: DetailFunction = <T extends GenericObject>(
           description={field.description}
           sideLink={field.sideLink}
           alignClassName={alignClassName}
+          isCardStyle={isCardStyle}
         />
 
-        <div className={`mt-1 text-sm text-gray-900 ${alignClassName}`}>
+        <div
+          className={`mt-3 text-sm leading-relaxed ${alignClassName} ${
+            isCardStyle ? "text-gray-800" : "text-gray-700"
+          }`}
+        >
           {data && (
             <div
-              className={`${field.contentClassName} w-full ${
-                field.opts?.isCopyable ? "flex" : ""
+              className={`${field.contentClassName || ""} w-full ${
+                field.opts?.isCopyable
+                  ? "flex items-center gap-3 group/copyable"
+                  : ""
               }`}
             >
-              <div>{data}</div>
+              <div className="break-words leading-relaxed">{data}</div>
 
               {field.opts?.isCopyable &&
                 field.fieldType !== FieldType.HiddenText && (
-                  <CopyableButton textToBeCopied={data.toString()} />
+                  <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
+                    <CopyableButton textToBeCopied={data.toString()} />
+                  </div>
                 )}
             </div>
           )}
@@ -430,9 +613,16 @@ const Detail: DetailFunction = <T extends GenericObject>(
     );
   };
 
+  // Determine grid gap based on style
+  const styleType: DetailStyle = props.style || DetailStyle.Default;
+  const isCardStyle: boolean = styleType === DetailStyle.Card;
+
+  // Grid gap classes - cards need more gap, others less since they have internal padding
+  const gapClasses: string = isCardStyle ? "gap-4" : "gap-0";
+
   return (
     <div
-      className={`grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-${
+      className={`grid grid-cols-1 ${gapClasses} sm:grid-cols-${
         props.showDetailsInNumberOfColumns || 1
       } w-full`}
     >

package/UI/Components/Detail/FieldLabel.tsx

@@ -5,7 +5,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 export enum Size {
   Normal = "text-sm",
   Medium = "text-base",
-  Large = "text-=lg",
+  Large = "text-lg",
 }
 
 export interface ComponentProps {
@@ -14,33 +14,57 @@ export interface ComponentProps {
   alignClassName?: string | undefined;
   sideLink?: DetailSideLink | undefined;
   size?: Size | undefined;
+  isCardStyle?: boolean | undefined;
 }
 
 const FieldLabelElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const isCardStyle: boolean = props.isCardStyle || false;
+
   return (
-    <>
+    <div className="space-y-1">
       {props.title && (
         <label
-          className={`${props.size || "text-sm"} font-medium text-gray-500`}
+          className={`${props.size || "text-xs"} font-semibold uppercase tracking-widest ${
+            isCardStyle ? "text-gray-500" : "text-gray-500"
+          } flex items-center gap-2`}
         >
-          <span className={props.alignClassName}>{props.title}</span>
+          <span className={`${props.alignClassName} flex items-center gap-1.5`}>
+            {props.title}
+            <span className="w-1 h-1 rounded-full bg-gray-300"></span>
+          </span>
           {props.sideLink && props.sideLink?.text && props.sideLink?.url && (
-            <span>
-              <Link to={props.sideLink?.url} className="hover:underline">
-                {props.sideLink?.text}
-              </Link>
-            </span>
+            <Link
+              to={props.sideLink?.url}
+              className="inline-flex items-center gap-1 text-indigo-500 hover:text-indigo-600 transition-all duration-200 font-medium normal-case tracking-normal text-xs hover:underline underline-offset-2"
+            >
+              {props.sideLink?.text}
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </Link>
           )}
         </label>
       )}
       {props.description && (
-        <p className={`${props.alignClassName} text-sm text-gray-400`}>
+        <p
+          className={`${props.alignClassName} text-xs text-gray-400 leading-relaxed mt-0.5`}
+        >
           {props.description}
         </p>
       )}
-    </>
+    </div>
   );
 };
 

package/UI/Components/Detail/PlaceholderText.tsx

@@ -7,7 +7,24 @@ export interface ComponentProps {
 const PlaceholderText: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  return <div className="text-gray-500">{props.text}</div>;
+  return (
+    <span className="inline-flex items-center gap-1.5 text-gray-400 italic text-sm select-none px-2 py-0.5 rounded-md bg-gray-50 border border-dashed border-gray-200">
+      <svg
+        className="w-3.5 h-3.5 text-gray-300"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M20 12H4"
+        />
+      </svg>
+      {props.text}
+    </span>
+  );
 };
 
 export default PlaceholderText;