@oneuptime/common 10.2.18 → 10.2.21

package/UI/Components/Workflow/ComponentSettingsModal.tsx

@@ -3,7 +3,7 @@ import BasicForm from "../Forms/BasicForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import FormValues from "../Forms/Types/FormValues";
 import ConfirmModal from "../Modal/ConfirmModal";
-import SideOver from "../SideOver/SideOver";
+import Modal, { ModalWidth } from "../Modal/Modal";
 import ArgumentsForm from "./ArgumentsForm";
 import ComponentPortViewer from "./ComponentPortViewer";
 import ComponentReturnValueViewer from "./ComponentReturnValueViewer";
@@ -28,6 +28,36 @@ export interface ComponentProps {
   webhookSecretKey?: string | undefined;
 }
 
+interface SectionCardProps {
+  icon: IconProp;
+  title: string;
+  children: ReactElement | Array<ReactElement>;
+  tone?: "default" | "info" | undefined;
+}
+
+const SectionCard: FunctionComponent<SectionCardProps> = (
+  props: SectionCardProps,
+): ReactElement => {
+  const isInfo: boolean = props.tone === "info";
+  const containerClass: string = isInfo
+    ? "rounded-lg border border-blue-100 bg-blue-50/40 p-4"
+    : "rounded-lg border border-gray-200 bg-white p-4";
+  const iconClass: string = isInfo ? "text-blue-500" : "text-gray-400";
+  const titleClass: string = isInfo
+    ? "text-[11px] font-semibold uppercase tracking-wider text-blue-700"
+    : "text-[11px] font-semibold uppercase tracking-wider text-gray-500";
+
+  return (
+    <div className={containerClass}>
+      <div className="flex items-center gap-1.5 mb-3">
+        <Icon icon={props.icon} className={`h-3.5 w-3.5 ${iconClass}`} />
+        <span className={titleClass}>{props.title}</span>
+      </div>
+      {props.children}
+    </div>
+  );
+};
+
 const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -38,17 +68,113 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
   const [showDeleteConfirmation, setShowDeleteConfirmation] =
     useState<boolean>(false);
 
+  const argumentsSection: ReactElement = (
+    <SectionCard icon={IconProp.Settings} title="Configuration">
+      <ArgumentsForm
+        graphComponents={props.graphComponents}
+        workflowId={props.workflowId}
+        component={component}
+        onFormChange={(c: NodeDataProp) => {
+          setComponent({ ...c });
+        }}
+        onHasFormValidationErrors={(value: Dictionary<boolean>) => {
+          setHasFormValidationErrors({
+            ...hasFormValidationErrors,
+            ...value,
+          });
+        }}
+      />
+    </SectionCard>
+  );
+
+  const identitySection: ReactElement = (
+    <SectionCard
+      icon={IconProp.Label}
+      title={`${component.metadata.componentType} ID`}
+    >
+      <BasicForm
+        hideSubmitButton={true}
+        initialValues={{ id: component?.id }}
+        onChange={(values: FormValues<JSONObject>) => {
+          setComponent({ ...component, ...values });
+        }}
+        onFormValidationErrorChanged={(hasError: boolean) => {
+          setHasFormValidationErrors({
+            ...hasFormValidationErrors,
+            id: hasError,
+          });
+        }}
+        fields={[
+          {
+            title: "Identifier",
+            description: `Used to reference this ${component.metadata.componentType.toLowerCase()} from other components.`,
+            field: { id: true },
+            required: true,
+            fieldType: FormFieldSchemaType.Text,
+          },
+        ]}
+      />
+    </SectionCard>
+  );
+
+  const documentationSection: ReactElement | null = component.metadata
+    .documentationLink ? (
+    <SectionCard icon={IconProp.Book} title="Documentation" tone="info">
+      <DocumentationViewer
+        documentationLink={component.metadata.documentationLink}
+        workflowId={props.workflowId}
+        webhookSecretKey={props.webhookSecretKey}
+      />
+    </SectionCard>
+  ) : null;
+
+  const connectionsSection: ReactElement = (
+    <SectionCard icon={IconProp.Link} title="Connections">
+      <>
+        <ComponentPortViewer
+          name="In Ports"
+          description="Input connections for this component"
+          ports={component.metadata.inPorts}
+        />
+        <ComponentPortViewer
+          name="Out Ports"
+          description="Output connections from this component"
+          ports={component.metadata.outPorts}
+        />
+      </>
+    </SectionCard>
+  );
+
+  const outputSection: ReactElement = (
+    <SectionCard icon={IconProp.ArrowCircleRight} title="Output">
+      <ComponentReturnValueViewer
+        name="Return Values"
+        description="Values this component produces for downstream use"
+        returnValues={component.metadata.returnValues}
+      />
+    </SectionCard>
+  );
+
+  const hasErrors: boolean = Object.values(hasFormValidationErrors).some(
+    (v: boolean) => {
+      return v;
+    },
+  );
+
   return (
-    <SideOver
+    <Modal
       title={props.title}
       description={props.description}
       onClose={props.onClose}
       onSubmit={() => {
         return component && props.onSave(component);
       }}
+      submitButtonText="Save"
+      modalWidth={ModalWidth.Large}
+      disableSubmitButton={hasErrors}
       leftFooterElement={
         <Button
-          title={`Delete`}
+          title="Delete"
           icon={IconProp.Trash}
           buttonStyle={ButtonStyleType.DANGER_OUTLINE}
           onClick={() => {
@@ -65,7 +191,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
             onClose={() => {
               setShowDeleteConfirmation(false);
             }}
-            submitButtonText={"Delete"}
+            submitButtonText="Delete"
             onSubmit={() => {
               props.onDelete(component);
               setShowDeleteConfirmation(false);
@@ -75,260 +201,22 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
           />
         )}
 
-        {/* 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={{
-              id: component?.id,
-            }}
-            onChange={(values: FormValues<JSONObject>) => {
-              setComponent({ ...component, ...values });
-            }}
-            onFormValidationErrorChanged={(hasError: boolean) => {
-              setHasFormValidationErrors({
-                ...hasFormValidationErrors,
-                id: hasError,
-              });
-            }}
-            fields={[
-              {
-                title: `${component.metadata.componentType} ID`,
-                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
-            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}
-              webhookSecretKey={props.webhookSecretKey}
-            />
-          </div>
-        )}
-
-        {/* Arguments 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.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>
-
-        {/* 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="Input connections for this component"
-            ports={component.metadata.inPorts}
-          />
-          <ComponentPortViewer
-            name="Out Ports"
-            description="Output connections from this component"
-            ports={component.metadata.outPorts}
-          />
-        </div>
-
-        {/* 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>
+        {/*
+         * Two-column layout: arguments take the main column (2/3 width on
+         * md+), metadata sits in a narrower sidebar. Collapses to one
+         * column below md.
+         */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="md:col-span-2 space-y-4">{argumentsSection}</div>
+          <div className="md:col-span-1 space-y-4">
+            {identitySection}
+            {documentationSection}
+            {connectionsSection}
+            {outputSection}
           </div>
-          <ComponentReturnValueViewer
-            name="Return Values"
-            description="Values this component produces for downstream use"
-            returnValues={component.metadata.returnValues}
-          />
         </div>
       </>
-    </SideOver>
+    </Modal>
   );
 };