Merge pull request #255 from Tauffer-Consulting/dev

Dev
Tauffer-Consulting · Mar 27, 2024 · 90f9b66 · 90f9b66
2 parents 9d21ea7 + 99fe800
commit 90f9b66
Show file tree

Hide file tree

Showing 19 changed files with 170 additions and 94 deletions.
diff --git a/frontend/src/@types/piece/schema.d.ts b/frontend/src/@types/piece/schema.d.ts
@@ -18,6 +18,7 @@ export interface Schema {
   type: "object";
 
   properties: Properties;
+  required?: string[];
   $defs: Definitions;
 }
 
@@ -139,7 +140,7 @@ export interface ObjectDefinition {
   description: string;
   type: "object";
   properties: Record<string, EnumDefinition | SimpleProperty | AnyOfProperty>;
-  required: string[];
+  required?: string[];
 }
 
 export {};
diff --git a/frontend/src/components/SelectInput/index.tsx b/frontend/src/components/SelectInput/index.tsx
@@ -16,32 +16,22 @@ import {
 } from "react-hook-form";
 import { fetchFromObject } from "utils";
 
-type Props<T> =
-  | (SelectProps & {
-      name: Path<T>;
-      label: string;
-      options: string[] | Array<{ label: string; value: string }>;
+type Props<T> = SelectProps & {
+  name: Path<T>;
+  label: string;
+  options: string[] | Array<{ label: string; value: string }>;
 
-      emptyValue: true;
-      defaultValue?: string;
-      registerOptions?:
-        | RegisterOptions<FieldValues, (string | undefined) & Path<T>>
-        | undefined;
-    })
-  | (SelectProps & {
-      name: Path<T>;
-      label: string;
-      options: string[] | Array<{ label: string; value: string }>;
-
-      emptyValue?: boolean;
-      registerOptions?: RegisterOptions<FieldValues>;
-    });
+  defaultValue?: string;
+  registerOptions?: RegisterOptions<
+    FieldValues,
+    (string | undefined) & Path<T>
+  >;
+};
 
 function SelectInput<T extends FieldValues>({
   options,
   label,
   name,
-  emptyValue,
   ...rest
 }: Props<T>) {
   const {
@@ -70,11 +60,9 @@ function SelectInput<T extends FieldValues>({
               field.onChange(e.target.value as any);
             }}
           >
-            {emptyValue && (
-              <MenuItem value="" disabled>
-                <em>None</em>
-              </MenuItem>
-            )}
+            <MenuItem value="" disabled>
+              <em>None</em>
+            </MenuItem>
             {options.map((option) => {
               if (typeof option === "object") {
                 return (

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunsTable.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunsTable.tsx
@@ -12,6 +12,7 @@ import React, {
   useState,
 } from "react";
 import { useNavigate } from "react-router-dom";
+import { secondsToHMS } from "utils";
 
 import { States } from "./States";
 import { WorkflowRunTableFooter } from "./WorkflowRunTableFooter";
@@ -78,13 +79,13 @@ export const WorkflowRunsTable = forwardRef<WorkflowRunsTableRef, Props>(
           valueFormatter: ({ value }) => new Date(value).toLocaleString(),
         },
         {
-          field: "execution_date",
-          headerName: "Execution Date",
+          field: "duration_in_seconds",
+          headerName: "Duration",
           headerAlign: "center",
           align: "center",
           minWidth: 150,
           flex: 1,
-          valueFormatter: ({ value }) => new Date(value).toLocaleString(),
+          valueFormatter: ({ value }) => (value ? secondsToHMS(value) : "N/A"),
         },
         {
           field: "state",

diff --git a/frontend/src/features/myWorkflows/components/WorkflowsList/index.tsx b/frontend/src/features/myWorkflows/components/WorkflowsList/index.tsx
@@ -90,8 +90,9 @@ export const WorkflowList: React.FC = () => {
         align: "center",
         headerAlign: "center",
         sortable: false,
+        minWidth: 100,
       },
-      { field: "name", headerName: "Workflow Name", flex: 2 },
+      { field: "name", headerName: "Workflow Name", flex: 2, minWidth: 220 },
       {
         field: "start_date",
         headerName: (
@@ -104,15 +105,35 @@ export const WorkflowList: React.FC = () => {
         ) as any,
         flex: 1,
         align: "center",
+        minWidth: 220,
 
         valueFormatter: ({ value }) => new Date(value).toLocaleString(),
         headerAlign: "center",
       },
+      {
+        field: "end_date",
+        headerName: (
+          <Tooltip title="End Date is the date when your workflow stop to be scheduled. You cannot run workflows after end date.">
+            <span style={{ display: "flex", alignItems: "center" }}>
+              End Date{" "}
+              <InfoOutlined style={{ marginLeft: "5px" }} fontSize="small" />
+            </span>
+          </Tooltip>
+        ) as any,
+        headerAlign: "center",
+        align: "center",
+        type: "string",
+        flex: 1,
+        minWidth: 220,
+        valueFormatter: ({ value }) =>
+          value ? new Date(value).toLocaleString() : "None",
+      },
       {
         field: "created_at",
         headerName: "Created At",
         flex: 1,
         align: "center",
+        minWidth: 220,
 
         valueFormatter: ({ value }) => new Date(value).toLocaleString(),
         headerAlign: "center",
@@ -124,6 +145,7 @@ export const WorkflowList: React.FC = () => {
         align: "center",
         valueFormatter: ({ value }) => new Date(value).toLocaleString(),
         headerAlign: "center",
+        minWidth: 220,
       },
       {
         field: "schedule",
@@ -132,13 +154,15 @@ export const WorkflowList: React.FC = () => {
         align: "center",
         headerAlign: "center",
         sortable: false,
+        minWidth: 100,
       },
       {
         field: "next_dagrun",
         headerName: "Next Run",
         flex: 1,
         align: "center",
         headerAlign: "center",
+        minWidth: 220,
         sortable: false,
         valueFormatter: ({ value }) =>
           value ? new Date(value).toLocaleString() : "none",
@@ -168,6 +192,7 @@ export const WorkflowList: React.FC = () => {
         headerAlign: "center",
         align: "center",
         sortable: false,
+        minWidth: 150,
       },
     ],
     [],

diff --git a/...tor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/EnumInput.tsx b/...tor/components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/EnumInput.tsx
@@ -24,7 +24,6 @@ export const EnumInput: React.FC<EnumInputProps> = ({
   return (
     <SelectInput<WorkflowPieceData>
       label={definition?.title ?? itemKey.split(".").pop() ?? ""}
-      emptyValue
       name={itemKey}
       options={enumOptions}
     />

diff --git a/.../components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/InputElement.tsx b/.../components/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/InputElement.tsx
@@ -47,7 +47,7 @@ const InputElement: React.FC<Props> = React.memo(
     checkedFromUpstream,
     definitions,
     isItemArray,
-    isItemObject,
+    isItemObject = false,
   }) => {
     const optionalType = getOptionalType(schema);
 
@@ -64,14 +64,15 @@ const InputElement: React.FC<Props> = React.memo(
     if (checkedFromUpstream === true) {
       const options = upstreamOptions[upstreamKey];
       const checkboxKey = isItemObject
-        ? itemKey.replace(/(\.value)(?!.*\.value)/, "fromUpstream")
+        ? itemKey.replace(/(\.value)(?!.*\.value)/, ".upstreamValue")
         : itemKey.replace(/\.value$/, "");
 
       return (
         <SelectUpstreamInput
           name={checkboxKey as any}
           label={schema?.title}
           options={options ?? []}
+          object={isItemObject}
         />
       );
     } else if (isEnumType(schema, definitions)) {
@@ -158,8 +159,6 @@ const InputElement: React.FC<Props> = React.memo(
         />
       );
     } else {
-      console.log("optionalType", optionalType);
-
       return (
         <div style={{ color: "red", fontWeight: "bold" }}>
           Unknown widget type for {schema.title}

diff --git a/...ents/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/SelectUpstreamInput.tsx b/...ents/Drawers/PieceFormDrawer/PieceForm/PieceFormItem/InputElement/SelectUpstreamInput.tsx
@@ -9,30 +9,33 @@ import {
 import { type WorkflowPieceData } from "features/workflowEditor/context/types";
 import { type Option } from "features/workflowEditor/utils";
 import React, { useCallback } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, type FieldValues, useFormContext } from "react-hook-form";
 import { fetchFromObject } from "utils";
 
 type ObjectName = `inputs.${string}.value.${number}.upstreamValue.${string}`;
 type Name = `inputs.${string}`;
-type Props =
-  | {
-      label: string;
-      name: Name;
-      options: Option[];
-      object?: false;
-    }
-  | {
-      label: string;
-      name: ObjectName;
-      options: Option[];
-      object: true;
-    };
+type Props = FieldValues &
+  (
+    | {
+        label: string;
+        name: Name;
+        options: Option[];
+        object?: false;
+      }
+    | {
+        label: string;
+        name: ObjectName;
+        options: Option[];
+        object: true;
+      }
+  );
 
 const SelectUpstreamInput: React.FC<Props> = ({
   options,
   label,
   name,
   object,
+  ...rest
 }) => {
   const {
     setValue,
@@ -48,8 +51,8 @@ const SelectUpstreamInput: React.FC<Props> = ({
       let nameId = "";
 
       if (object) {
-        nameArgument = name.replace(`.upstreamValue.`, ".upstreamArgument.");
-        nameId = name.replace(`.upstreamValue.`, ".upstreamId.");
+        nameArgument = name.replace(`upstreamValue`, ".upstreamArgument");
+        nameId = name.replace(`upstreamValue`, ".upstreamId");
       } else {
         nameArgument = `${name}.upstreamArgument`;
         nameId = `${name}.upstreamId`;
@@ -72,19 +75,18 @@ const SelectUpstreamInput: React.FC<Props> = ({
 
   return (
     <FormControl fullWidth>
-      <InputLabel error={!!error} id={name}>
+      <InputLabel id={name} error={!!error}>
         {label}
       </InputLabel>
       <Controller
-        control={control}
         name={object ? name : `${name}.upstreamValue`}
+        control={control}
         render={({ field }) => (
           <Select
-            fullWidth
-            defaultValue={""}
             labelId={name}
             label={label}
             error={!!error}
+            {...rest}
             {...field}
             onChange={(event) => {
               handleSelectChange(event, field.onChange);

diff --git a/frontend/src/features/workflowEditor/components/Drawers/PiecesDrawer/pieceDocsPopover.tsx b/frontend/src/features/workflowEditor/components/Drawers/PiecesDrawer/pieceDocsPopover.tsx
@@ -1,6 +1,7 @@
 import CloseIcon from "@mui/icons-material/Close";
 import DragHandleIcon from "@mui/icons-material/DragHandle";
 import { Popover, IconButton, Typography } from "@mui/material";
+import theme from "providers/theme.config";
 import React from "react";
 import Draggable from "react-draggable";
 
@@ -84,7 +85,7 @@ const PieceDocsPopover: React.FC<PieceDocsPopoverProps> = ({
           paddingBottom: "2rem",
           overflow: "hidden",
           "& .popover-handle": {
-            backgroundColor: "#323C3D",
+            backgroundColor: theme.palette.primary.main,
             padding: "0.5rem",
             "& .drag-handle": {
               cursor: "move",

diff --git a/frontend/src/features/workflowEditor/components/Drawers/PiecesDrawer/sidebarNode.tsx b/frontend/src/features/workflowEditor/components/Drawers/PiecesDrawer/sidebarNode.tsx
@@ -1,5 +1,6 @@
 import HelpIcon from "@mui/icons-material/Help";
 import { Box, Typography, IconButton } from "@mui/material";
+import theme from "providers/theme.config";
 import React, { type FC, useState } from "react";
 
 import PieceDocsPopover from "./pieceDocsPopover";
@@ -60,7 +61,9 @@ const PiecesSidebarNode: FC<{
         </Typography>
 
         <IconButton sx={{ padding: 0 }} onClick={handlePopoverOpen}>
-          <HelpIcon sx={{ height: "20px" }} />
+          <HelpIcon
+            sx={{ height: "20px", color: theme.palette.primary.main }}
+          />
         </IconButton>
       </div>
 

diff --git a/frontend/src/features/workflowEditor/components/Drawers/SettingsFormDrawer/index.tsx b/frontend/src/features/workflowEditor/components/Drawers/SettingsFormDrawer/index.tsx
@@ -1,4 +1,4 @@
-import { Drawer, Grid, Typography, Tooltip } from "@mui/material";
+import { Drawer, Grid, Typography } from "@mui/material";
 import DatetimeInput from "components/DatetimeInput";
 import SelectInput from "components/SelectInput";
 import TextInput from "components/TextInput";

diff --git a/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx b/frontend/src/features/workflowEditor/components/WorkflowEditor/index.tsx
@@ -84,6 +84,8 @@ export const WorkflowsEditorComponent: React.FC = () => {
         }, {}),
       ) as any;
 
+      console.log("validationSchema", validationSchema);
+
       const resolver = yupResolver(validationSchema);
 
       const validatedData = await resolver(payload.workflowPiecesData);

diff --git a/frontend/src/features/workflowEditor/utils/upstreamOptions.ts b/frontend/src/features/workflowEditor/utils/upstreamOptions.ts
@@ -45,7 +45,9 @@ function generateOptions(
     const options: UpstreamOptions = {};
     const addOptions = (opts: Option[] | UpstreamOptions, key: string = "") => {
       if (Array.isArray(opts)) {
-        options[key] = opts;
+        const otherOpts = options[key] ?? [];
+
+        options[key] = [...otherOpts, ...opts];
       } else {
         Object.entries(opts).forEach(([subKey, subOpts]) => {
           if (subKey) {