@oneuptime/common 10.0.39 → 10.0.41

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -1,4 +1,3 @@
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import { Port } from "../../../Types/Workflow/Component";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -12,37 +11,75 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="mt-5 mb-5">
-      <h2 className="text-base font-medium text-gray-500">{props.name}</h2>
-      <p className="text-sm font-medium text-gray-400">{props.description}</p>
+    <div className="mt-3 mb-3">
+      <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
+      <p className="text-xs text-gray-400 mb-2">{props.description}</p>
       {props.ports && props.ports.length === 0 && (
-        <ErrorMessage message={"This component does not have any ports."} />
+        <p className="text-xs text-gray-400 italic">No ports configured.</p>
       )}
-      <div className="mt-3">
+      <div>
         {props.ports &&
           props.ports.length > 0 &&
           props.ports.map((port: Port, i: number) => {
             return (
               <div
                 key={i}
-                className="mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.625rem",
+                  padding: "0.5rem 0.75rem",
+                  borderRadius: "8px",
+                  backgroundColor: "#f8fafc",
+                  border: "1px solid #f1f5f9",
+                  marginBottom: "0.375rem",
+                }}
               >
-                <div className="min-w-0 flex-1">
-                  <div className="focus:outline-none">
+                <div
+                  style={{
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: "#94a3b8",
+                    flexShrink: 0,
+                  }}
+                />
+                <div style={{ minWidth: 0, flex: 1 }}>
+                  <p
+                    style={{
+                      fontSize: "0.8125rem",
+                      fontWeight: 500,
+                      color: "#334155",
+                      margin: 0,
+                      lineHeight: "1.25rem",
+                    }}
+                  >
+                    {port.title}
                     <span
-                      className="absolute inset-0"
-                      aria-hidden="true"
-                    ></span>
-                    <p className="text-sm font-medium text-gray-900">
-                      {port.title}{" "}
-                      <span className="text-gray-500 font-normal">
-                        (ID: {port.id})
-                      </span>
-                    </p>
-                    <p className="truncate text-sm text-gray-500">
+                      style={{
+                        color: "#94a3b8",
+                        fontWeight: 400,
+                        fontSize: "0.6875rem",
+                        marginLeft: "0.375rem",
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                      }}
+                    >
+                      {port.id}
+                    </span>
+                  </p>
+                  {port.description && (
+                    <p
+                      style={{
+                        fontSize: "0.75rem",
+                        color: "#94a3b8",
+                        margin: 0,
+                        lineHeight: "1rem",
+                      }}
+                    >
                       {port.description}
                     </p>
-                  </div>
+                  )}
                 </div>
               </div>
             );

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -1,6 +1,3 @@
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
-import Pill from "../Pill/Pill";
-import { Black } from "../../../Types/BrandColors";
 import { ReturnValue } from "../../../Types/Workflow/Component";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -14,41 +11,84 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="mt-5 mb-5">
-      <h2 className="text-base font-medium text-gray-500">{props.name}</h2>
-      <p className="text-sm font-medium text-gray-400">{props.description}</p>
+    <div className="mt-3 mb-3">
+      <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
+      <p className="text-xs text-gray-400 mb-2">{props.description}</p>
       {props.returnValues && props.returnValues.length === 0 && (
-        <ErrorMessage message={"This component does not return any value."} />
+        <p className="text-xs text-gray-400 italic">
+          This component does not return any values.
+        </p>
       )}
-      <div className="mt-3">
+      <div>
         {props.returnValues &&
           props.returnValues.length > 0 &&
           props.returnValues.map((returnValue: ReturnValue, i: number) => {
             return (
               <div
                 key={i}
-                className="mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: "0.625rem",
+                  padding: "0.5rem 0.75rem",
+                  borderRadius: "8px",
+                  backgroundColor: "#f8fafc",
+                  border: "1px solid #f1f5f9",
+                  marginBottom: "0.375rem",
+                }}
               >
-                <div className="min-w-0 flex-1 flex justify-between">
-                  <div className="focus:outline-none">
+                <div style={{ minWidth: 0, flex: 1 }}>
+                  <p
+                    style={{
+                      fontSize: "0.8125rem",
+                      fontWeight: 500,
+                      color: "#334155",
+                      margin: 0,
+                      lineHeight: "1.25rem",
+                    }}
+                  >
+                    {returnValue.name}
                     <span
-                      className="absolute inset-0"
-                      aria-hidden="true"
-                    ></span>
-                    <p className="text-sm font-medium text-gray-900">
-                      {returnValue.name}{" "}
-                      <span className="text-gray-500 font-normal">
-                        (ID: {returnValue.id})
-                      </span>
-                    </p>
-                    <p className="truncate text-sm text-gray-500">
+                      style={{
+                        color: "#94a3b8",
+                        fontWeight: 400,
+                        fontSize: "0.6875rem",
+                        marginLeft: "0.375rem",
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                      }}
+                    >
+                      {returnValue.id}
+                    </span>
+                  </p>
+                  {returnValue.description && (
+                    <p
+                      style={{
+                        fontSize: "0.75rem",
+                        color: "#94a3b8",
+                        margin: 0,
+                        lineHeight: "1rem",
+                      }}
+                    >
                       {returnValue.description}
                     </p>
-                  </div>
-                  <div>
-                    <Pill color={Black} text={returnValue.type} />
-                  </div>
+                  )}
                 </div>
+                <span
+                  style={{
+                    fontSize: "0.6875rem",
+                    fontWeight: 500,
+                    color: "#6366f1",
+                    backgroundColor: "#eef2ff",
+                    padding: "0.125rem 0.5rem",
+                    borderRadius: "100px",
+                    whiteSpace: "nowrap",
+                    border: "1px solid #e0e7ff",
+                  }}
+                >
+                  {returnValue.type}
+                </span>
               </div>
             );
           })}

package/UI/Components/Workflow/ComponentSettingsModal.tsx

@@ -1,5 +1,4 @@
 import Button, { ButtonStyleType } from "../Button/Button";
-import Divider from "../Divider/Divider";
 import BasicForm from "../Forms/BasicForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import FormValues from "../Forms/Types/FormValues";
@@ -15,6 +14,7 @@ import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import { NodeDataProp } from "../../../Types/Workflow/Component";
 import React, { FunctionComponent, ReactElement, useState } from "react";
+import Icon from "../Icon/Icon";
 
 export interface ComponentProps {
   title: string;
@@ -47,7 +47,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
       }}
       leftFooterElement={
         <Button
-          title={`Delete ${component.metadata.componentType}`}
+          title={`Delete`}
           icon={IconProp.Trash}
           buttonStyle={ButtonStyleType.DANGER_OUTLINE}
           onClick={() => {
@@ -73,7 +73,44 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
             submitButtonType={ButtonStyleType.DANGER}
           />
         )}
-        <div className="mb-3 mt-3">
+
+        {/* Component ID Section */}
+        <div
+          style={{
+            backgroundColor: "#f8fafc",
+            borderRadius: "10px",
+            border: "1px solid #e2e8f0",
+            padding: "1rem",
+            marginTop: "0.75rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              marginBottom: "0.5rem",
+            }}
+          >
+            <Icon
+              icon={IconProp.Label}
+              style={{
+                color: "#64748b",
+                width: "0.875rem",
+                height: "0.875rem",
+              }}
+            />
+            <span
+              style={{
+                fontSize: "0.8125rem",
+                fontWeight: 600,
+                color: "#334155",
+              }}
+            >
+              Identity
+            </span>
+          </div>
           <BasicForm
             hideSubmitButton={true}
             initialValues={{
@@ -91,23 +128,54 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
             fields={[
               {
                 title: `${component.metadata.componentType} ID`,
-                description: `${component.metadata.componentType} ID will make it easier for you to connect to other components.`,
+                description: `Unique identifier used to reference this ${component.metadata.componentType.toLowerCase()} from other components.`,
                 field: {
                   id: true,
                 },
-
                 required: true,
-
                 fieldType: FormFieldSchemaType.Text,
               },
             ]}
           />
         </div>
 
+        {/* Documentation Section */}
         {component.metadata.documentationLink && (
-          <div>
-            <Divider />
-
+          <div
+            style={{
+              backgroundColor: "#eff6ff",
+              borderRadius: "10px",
+              border: "1px solid #bfdbfe",
+              padding: "1rem",
+              marginBottom: "1rem",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                marginBottom: "0.5rem",
+              }}
+            >
+              <Icon
+                icon={IconProp.Book}
+                style={{
+                  color: "#3b82f6",
+                  width: "0.875rem",
+                  height: "0.875rem",
+                }}
+              />
+              <span
+                style={{
+                  fontSize: "0.8125rem",
+                  fontWeight: 600,
+                  color: "#1e40af",
+                }}
+              >
+                Documentation
+              </span>
+            </div>
             <DocumentationViewer
               documentationLink={component.metadata.documentationLink}
               workflowId={props.workflowId}
@@ -115,48 +183,145 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
           </div>
         )}
 
-        <Divider />
-
-        <ArgumentsForm
-          graphComponents={props.graphComponents}
-          workflowId={props.workflowId}
-          component={component}
-          onFormChange={(component: NodeDataProp) => {
-            setComponent({ ...component });
-          }}
-          onHasFormValidationErrors={(value: Dictionary<boolean>) => {
-            setHasFormValidationErrors({
-              ...hasFormValidationErrors,
-              ...value,
-            });
+        {/* Arguments Section */}
+        <div
+          style={{
+            backgroundColor: "#ffffff",
+            borderRadius: "10px",
+            border: "1px solid #e2e8f0",
+            padding: "1rem",
+            marginBottom: "1rem",
           }}
-        />
-
-        <Divider />
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              marginBottom: "0.75rem",
+            }}
+          >
+            <Icon
+              icon={IconProp.Settings}
+              style={{
+                color: "#64748b",
+                width: "0.875rem",
+                height: "0.875rem",
+              }}
+            />
+            <span
+              style={{
+                fontSize: "0.8125rem",
+                fontWeight: 600,
+                color: "#334155",
+              }}
+            >
+              Configuration
+            </span>
+          </div>
+          <ArgumentsForm
+            graphComponents={props.graphComponents}
+            workflowId={props.workflowId}
+            component={component}
+            onFormChange={(component: NodeDataProp) => {
+              setComponent({ ...component });
+            }}
+            onHasFormValidationErrors={(value: Dictionary<boolean>) => {
+              setHasFormValidationErrors({
+                ...hasFormValidationErrors,
+                ...value,
+              });
+            }}
+          />
+        </div>
 
-        <div className="mb-3 mt-3">
+        {/* Ports Section */}
+        <div
+          style={{
+            backgroundColor: "#ffffff",
+            borderRadius: "10px",
+            border: "1px solid #e2e8f0",
+            padding: "1rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              marginBottom: "0.25rem",
+            }}
+          >
+            <Icon
+              icon={IconProp.Link}
+              style={{
+                color: "#64748b",
+                width: "0.875rem",
+                height: "0.875rem",
+              }}
+            />
+            <span
+              style={{
+                fontSize: "0.8125rem",
+                fontWeight: 600,
+                color: "#334155",
+              }}
+            >
+              Connections
+            </span>
+          </div>
           <ComponentPortViewer
             name="In Ports"
-            description="Here  is a list of inports for this component"
+            description="Input connections for this component"
             ports={component.metadata.inPorts}
           />
-        </div>
-
-        <Divider />
-
-        <div className="mb-3 mt-3">
           <ComponentPortViewer
             name="Out Ports"
-            description="Here  is a list of outports for this component"
+            description="Output connections from this component"
             ports={component.metadata.outPorts}
           />
         </div>
 
-        <Divider />
-        <div className="mb-3 mt-3">
+        {/* Return Values Section */}
+        <div
+          style={{
+            backgroundColor: "#ffffff",
+            borderRadius: "10px",
+            border: "1px solid #e2e8f0",
+            padding: "1rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              marginBottom: "0.25rem",
+            }}
+          >
+            <Icon
+              icon={IconProp.ArrowCircleRight}
+              style={{
+                color: "#64748b",
+                width: "0.875rem",
+                height: "0.875rem",
+              }}
+            />
+            <span
+              style={{
+                fontSize: "0.8125rem",
+                fontWeight: 600,
+                color: "#334155",
+              }}
+            >
+              Output
+            </span>
+          </div>
           <ComponentReturnValueViewer
             name="Return Values"
-            description="Here  is a list of values that this component returns"
+            description="Values this component produces for downstream use"
             returnValues={component.metadata.returnValues}
           />
         </div>