@oneuptime/common 10.0.38 → 10.0.40

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -3,11 +3,10 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
 import SideOver from "../SideOver/SideOver";
-import ComponentElement from "./Component";
+import IconProp from "../../../Types/Icon/IconProp";
 import ComponentMetadata, {
   ComponentCategory,
   ComponentType,
-  NodeType,
 } from "../../../Types/Workflow/Component";
 import React, {
   FunctionComponent,
@@ -38,11 +37,12 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
 
   const [isSearching, setIsSearching] = useState<boolean>(false);
 
+  const [selectedComponentMetadata, setSelectedComponentMetadata] =
+    useState<ComponentMetadata | null>(null);
+
   useEffect(() => {
     setComponents(props.components);
-
     setComponentsToShow([...props.components]);
-
     setCategories(props.categories);
   }, []);
 
@@ -76,14 +76,11 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     ]);
   }, [search]);
 
-  const [selectedComponentMetadata, setSelectedComponentMetadata] =
-    useState<ComponentMetadata | null>(null);
-
   return (
     <SideOver
-      submitButtonText="Create"
-      title={`Select a ${props.componentsType}`}
-      description={`Please select a component to add to your workflow.`}
+      submitButtonText="Add to Workflow"
+      title={`Add ${props.componentsType}`}
+      description={`Choose a ${props.componentsType.toLowerCase()} to add to your workflow.`}
       onClose={props.onCloseModal}
       submitButtonDisabled={!selectedComponentMetadata}
       onSubmit={() => {
@@ -95,107 +92,197 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     >
       <>
         <div className="flex flex-col h-full">
-          {/** Search box here */}
-
-          <div className="mt-5">
-            <Input
-              placeholder="Search..."
-              onChange={(text: string) => {
-                setIsSearching(true);
-                setSearch(text);
-              }}
-            />
+          {/* Search box */}
+          <div className="mt-4 mb-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Icon
+                  icon={IconProp.Search}
+                  className="h-4 w-4 text-gray-400"
+                />
+              </div>
+              <div className="pl-9">
+                <Input
+                  placeholder={`Search ${props.componentsType.toLowerCase()}s...`}
+                  onChange={(text: string) => {
+                    setIsSearching(true);
+                    setSearch(text);
+                  }}
+                />
+              </div>
+            </div>
           </div>
 
-          <div className="overflow-y-auto overflow-x-hidden my-5">
+          <div className="overflow-y-auto overflow-x-hidden flex-1">
             {!componentsToShow ||
               (componentsToShow.length === 0 && (
-                <div className="w-full flex justify-center mt-20">
-                  <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like. If you are an enterprise customer, feel free to talk to us and we will build it for you." />
+                <div className="w-full flex justify-center mt-20 px-4">
+                  <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like." />
                 </div>
               ))}
 
             {categories &&
               categories.length > 0 &&
               categories.map((category: ComponentCategory, i: number) => {
-                if (
-                  componentsToShow &&
-                  componentsToShow.length > 0 &&
+                const categoryComponents: Array<ComponentMetadata> =
                   componentsToShow.filter(
                     (componentMetadata: ComponentMetadata) => {
                       return componentMetadata.category === category.name;
                     },
-                  ).length > 0
-                ) {
-                  return (
-                    <div key={i}>
-                      <h4 className="text-gray-500 text-base mt-5 flex">
-                        {" "}
+                  );
+
+                if (categoryComponents.length === 0) {
+                  return <div key={i}></div>;
+                }
+
+                return (
+                  <div key={i} className="mb-6">
+                    {/* Category header */}
+                    <div className="flex items-center gap-2 mb-3 px-1">
+                      <div
+                        className="flex items-center justify-center rounded-md"
+                        style={{
+                          width: "28px",
+                          height: "28px",
+                          backgroundColor: "#f1f5f9",
+                        }}
+                      >
                         <Icon
                           icon={category.icon}
-                          className="h-5 w-5 text-gray-500"
-                        />{" "}
-                        <span className="ml-2">{category.name}</span>
-                      </h4>
-                      <p className="text-gray-400 text-sm mb-5">
-                        {category.description}
-                      </p>
-                      <div className="flex flex-wrap ml-2">
-                        {components &&
-                          components.length > 0 &&
-                          components
-                            .filter((componentMetadata: ComponentMetadata) => {
-                              return (
-                                componentMetadata.category === category.name
-                              );
-                            })
-                            .map(
-                              (
-                                componentMetadata: ComponentMetadata,
-                                i: number,
-                              ) => {
-                                return (
-                                  <div
-                                    key={i}
-                                    onClick={() => {
-                                      setSelectedComponentMetadata(
-                                        componentMetadata,
-                                      );
-                                    }}
-                                    className={`m-5 ml-0 mt-0 ${
-                                      selectedComponentMetadata &&
-                                      selectedComponentMetadata.id ===
-                                        componentMetadata.id
-                                        ? "rounded ring-offset-2 ring ring-indigo-500"
-                                        : ""
-                                    }`}
-                                  >
-                                    <ComponentElement
-                                      key={i}
-                                      selected={false}
-                                      data={{
-                                        metadata: componentMetadata,
-                                        metadataId: componentMetadata.id,
-                                        internalId: "",
-                                        nodeType: NodeType.Node,
-                                        componentType:
-                                          componentMetadata.componentType,
-                                        returnValues: {},
-                                        isPreview: true,
-                                        id: "",
-                                        error: "",
-                                        arguments: {},
-                                      }}
-                                    />
-                                  </div>
-                                );
-                              },
-                            )}
+                          className="h-4 w-4 text-gray-500"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold text-gray-700 leading-tight">
+                          {category.name}
+                        </h4>
+                        <p className="text-xs text-gray-400 leading-tight">
+                          {category.description}
+                        </p>
                       </div>
                     </div>
-                  );
-                }
-                return <div key={i}></div>;
+
+                    {/* Component cards grid */}
+                    <div className="grid grid-cols-1 gap-2">
+                      {categoryComponents.map(
+                        (componentMetadata: ComponentMetadata, j: number) => {
+                          const isSelected: boolean =
+                            selectedComponentMetadata !== null &&
+                            selectedComponentMetadata.id ===
+                              componentMetadata.id;
+
+                          return (
+                            <div
+                              key={j}
+                              onClick={() => {
+                                setSelectedComponentMetadata(componentMetadata);
+                              }}
+                              className="cursor-pointer transition-all duration-150"
+                              style={{
+                                padding: "0.75rem",
+                                borderRadius: "10px",
+                                border: isSelected
+                                  ? "2px solid #6366f1"
+                                  : "1px solid #e2e8f0",
+                                backgroundColor: isSelected
+                                  ? "#eef2ff"
+                                  : "#ffffff",
+                                display: "flex",
+                                alignItems: "flex-start",
+                                gap: "0.75rem",
+                                boxShadow: isSelected
+                                  ? "0 0 0 3px rgba(99, 102, 241, 0.1)"
+                                  : "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
+                              }}
+                            >
+                              {/* Icon */}
+                              <div
+                                style={{
+                                  width: "36px",
+                                  height: "36px",
+                                  borderRadius: "8px",
+                                  backgroundColor: isSelected
+                                    ? "#6366f1"
+                                    : "#f1f5f9",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  flexShrink: 0,
+                                  transition: "all 0.15s ease",
+                                }}
+                              >
+                                <Icon
+                                  icon={componentMetadata.iconProp}
+                                  style={{
+                                    color: isSelected ? "#ffffff" : "#64748b",
+                                    width: "1rem",
+                                    height: "1rem",
+                                  }}
+                                />
+                              </div>
+
+                              {/* Text */}
+                              <div style={{ minWidth: 0, flex: 1 }}>
+                                <p
+                                  style={{
+                                    fontSize: "0.8125rem",
+                                    fontWeight: 600,
+                                    color: isSelected ? "#4338ca" : "#1e293b",
+                                    margin: 0,
+                                    lineHeight: "1.25rem",
+                                  }}
+                                >
+                                  {componentMetadata.title}
+                                </p>
+                                <p
+                                  style={{
+                                    fontSize: "0.75rem",
+                                    color: isSelected ? "#6366f1" : "#94a3b8",
+                                    margin: 0,
+                                    marginTop: "2px",
+                                    lineHeight: "1rem",
+                                    display: "-webkit-box",
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: "vertical",
+                                    overflow: "hidden",
+                                  }}
+                                >
+                                  {componentMetadata.description}
+                                </p>
+                              </div>
+
+                              {/* Selection indicator */}
+                              {isSelected && (
+                                <div
+                                  style={{
+                                    width: "20px",
+                                    height: "20px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#6366f1",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    flexShrink: 0,
+                                    marginTop: "2px",
+                                  }}
+                                >
+                                  <Icon
+                                    icon={IconProp.Check}
+                                    style={{
+                                      color: "#ffffff",
+                                      width: "0.625rem",
+                                      height: "0.625rem",
+                                    }}
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  </div>
+                );
               })}
           </div>
         </div>

package/UI/Components/Workflow/Utils.ts

@@ -8,7 +8,10 @@ import ComponentMetadata, {
 import Components, { Categories } from "../../../Types/Workflow/Components";
 import BaseModelComponentFactory from "../../../Types/Workflow/Components/BaseModel";
 import Entities from "../../../Models/DatabaseModels/Index";
-import { ConditionOperator } from "../../../Types/Workflow/Components/Condition";
+import {
+  ConditionOperator,
+  ConditionValueType,
+} from "../../../Types/Workflow/Components/Condition";
 
 type LoadComponentsAndCategoriesFunction = () => {
   components: Array<ComponentMetadata>;
@@ -230,6 +233,34 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
+    if (componentInputType === ComponentInputType.ValueType) {
+      return {
+        fieldType: FormFieldSchemaType.Dropdown,
+        dropdownOptions: [
+          {
+            label: "Text",
+            value: ConditionValueType.Text,
+          },
+          {
+            label: "Boolean",
+            value: ConditionValueType.Boolean,
+          },
+          {
+            label: "Number",
+            value: ConditionValueType.Number,
+          },
+          {
+            label: "Null",
+            value: ConditionValueType.Null,
+          },
+          {
+            label: "Undefined",
+            value: ConditionValueType.Undefined,
+          },
+        ],
+      };
+    }
+
     if (componentInputType === ComponentInputType.Date) {
       return {
         fieldType: FormFieldSchemaType.Date,

package/UI/Components/Workflow/Workflow.tsx

@@ -22,6 +22,7 @@ import React, {
 } from "react";
 import ReactFlow, {
   Background,
+  BackgroundVariant,
   Connection,
   Controls,
   Edge,
@@ -75,9 +76,9 @@ const edgeStyle: React.CSSProperties = {
 };
 
 const selectedEdgeStyle: React.CSSProperties = {
-  strokeWidth: "2px",
-  stroke: "#818cf8",
-  color: "#818cf8",
+  strokeWidth: "2.5px",
+  stroke: "#6366f1",
+  color: "#6366f1",
 };
 
 type GetEdgeDefaultPropsFunction = (selected: boolean) => JSONObject;
@@ -87,9 +88,14 @@ export const getEdgeDefaultProps: GetEdgeDefaultPropsFunction = (
 ): JSONObject => {
   return {
     type: "smoothstep",
+    animated: selected,
     markerEnd: {
-      type: MarkerType.Arrow,
-      color: edgeStyle.color?.toString() || "",
+      type: MarkerType.ArrowClosed,
+      color: selected
+        ? selectedEdgeStyle.color?.toString() || ""
+        : edgeStyle.color?.toString() || "",
+      width: 20,
+      height: 20,
     },
     style: selected ? { ...selectedEdgeStyle } : { ...edgeStyle },
   };
@@ -271,7 +277,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           {
             ...oldEdge,
             markerEnd: {
-              type: MarkerType.Arrow,
+              type: MarkerType.ArrowClosed,
               color: edgeStyle.color?.toString() || "",
             },
             style: edgeStyle,
@@ -398,7 +404,65 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   };
 
   return (
-    <div className="h-[48rem]">
+    <div
+      style={{
+        height: "calc(100vh - 220px)",
+        minHeight: "600px",
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid #e2e8f0",
+      }}
+    >
+      <style>
+        {`
+          .react-flow__minimap {
+            border-radius: 8px !important;
+            border: 1px solid #e2e8f0 !important;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
+            overflow: hidden !important;
+            background: #ffffff !important;
+          }
+          .react-flow__controls {
+            border-radius: 8px !important;
+            border: 1px solid #e2e8f0 !important;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
+            overflow: hidden !important;
+          }
+          .react-flow__controls-button {
+            border-bottom: 1px solid #f1f5f9 !important;
+            width: 32px !important;
+            height: 32px !important;
+          }
+          .react-flow__controls-button:hover {
+            background: #f8fafc !important;
+          }
+          .react-flow__controls-button svg {
+            max-width: 14px !important;
+            max-height: 14px !important;
+          }
+          .react-flow__edge:hover .react-flow__edge-path {
+            stroke: #6366f1 !important;
+            stroke-width: 2.5px !important;
+          }
+          .react-flow__handle:hover {
+            transform: scale(1.3) !important;
+          }
+          .react-flow__connection-line {
+            stroke: #6366f1 !important;
+            stroke-width: 2px !important;
+            stroke-dasharray: 5 5 !important;
+          }
+          @keyframes flow-dash {
+            to {
+              stroke-dashoffset: -10;
+            }
+          }
+          .react-flow__edge.animated .react-flow__edge-path {
+            animation: flow-dash 0.5s linear infinite !important;
+            stroke-dasharray: 5 5 !important;
+          }
+        `}
+      </style>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -418,10 +482,42 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         nodeTypes={nodeTypes}
         onEdgeUpdateStart={onEdgeUpdateStart}
         onEdgeUpdateEnd={onEdgeUpdateEnd}
+        snapToGrid={true}
+        snapGrid={[16, 16]}
+        connectionLineStyle={{
+          stroke: "#6366f1",
+          strokeWidth: 2,
+          strokeDasharray: "5 5",
+        }}
+        defaultEdgeOptions={{
+          type: "smoothstep",
+          style: { ...edgeStyle },
+        }}
       >
-        <MiniMap />
+        <MiniMap
+          nodeStrokeWidth={3}
+          nodeColor={(node: Node) => {
+            if (
+              node.data &&
+              node.data.metadata &&
+              node.data.metadata.componentType === ComponentType.Trigger
+            ) {
+              return "#f59e0b";
+            }
+            return "#6366f1";
+          }}
+          maskColor="rgba(241, 245, 249, 0.7)"
+          style={{
+            backgroundColor: "#ffffff",
+          }}
+        />
         <Controls />
-        <Background color="#111827" />
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          color="#cbd5e1"
+        />
       </ReactFlow>
 
       {showComponentsModal && (

package/UI/Config.ts

@@ -11,6 +11,7 @@ import {
   ProbeIngestRoute,
   IntegrationRoute,
   NotificationRoute,
+  PublicDashboardRoute,
   RealtimeRoute,
   StatusPageApiRoute,
   StatusPageRoute,
@@ -159,6 +160,12 @@ export const DASHBOARD_URL: URL = new URL(
   new Route(DashboardRoute.toString()),
 );
 
+export const PUBLIC_DASHBOARD_URL: URL = new URL(
+  HTTP_PROTOCOL,
+  DASHBOARD_HOSTNAME,
+  new Route(PublicDashboardRoute.toString()),
+);
+
 export const INTEGRATION_URL: URL = new URL(
   HTTP_PROTOCOL,
   INTEGRATION_HOSTNAME,
@@ -193,6 +200,8 @@ export const SubscriptionPlans: Array<SubscriptionPlan> =
 export const StatusPageCNameRecord: string =
   env("STATUS_PAGE_CNAME_RECORD") || "";
 
+export const DashboardCNameRecord: string = env("DASHBOARD_CNAME_RECORD") || "";
+
 export const AnalyticsKey: string = env("ANALYTICS_KEY") || "";
 export const AnalyticsHost: string = env("ANALYTICS_HOST");