Fix validation error handling in workflow editor

- Rev version. Keep moment upgrade.
Netflix · Apr 12, 2022 · a5034eb · a5034eb
1 parent 4b5317f
commit a5034eb
Show file tree

Hide file tree

Showing 16 changed files with 320 additions and 290 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "3.6.1",
+  "version": "3.7.1",
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
@@ -16,7 +16,7 @@
     "immutability-helper": "^3.1.1",
     "json-bigint-string": "^1.0.0",
     "lodash": "^4.17.20",
-    "moment": "^2.29.1",
+    "moment": "^2.29.2",
     "parse-svg-path": "^0.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.0",

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Route, Switch } from "react-router-dom";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 import { Button, AppBar, Toolbar } from "@material-ui/core";
 import AppLogo from "./plugins/AppLogo";
 import NavLink from "./components/NavLink";

diff --git a/ui/src/components/Dropdown.jsx b/ui/src/components/Dropdown.jsx
@@ -3,6 +3,7 @@ import { Input } from "./";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
+import CloseIcon from "@material-ui/icons/Close";
 
 export default function ({
   label,
@@ -18,6 +19,8 @@ export default function ({
     <FormControl style={style} className={className}>
       {label && <InputLabel error={!!error}>{label}</InputLabel>}
       <Autocomplete
+        {...props}
+        closeIcon={<CloseIcon />}
         renderInput={(params) => (
           <Input
             {...params}
@@ -27,7 +30,6 @@ export default function ({
           />
         )}
         value={value === undefined ? null : value} // convert undefined to null
-        {...props}
       />
     </FormControl>
   );

diff --git a/ui/src/components/KeyValueTable.jsx b/ui/src/components/KeyValueTable.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";

diff --git a/ui/src/components/ReactJson.jsx b/ui/src/components/ReactJson.jsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles({
     position: "relative",
   },
   label: {
-    marginTop: 5,
+    marginTop: 13,
     marginBottom: 10,
     flex: 1,
   },
@@ -67,17 +67,17 @@ export default function ReactJson({ className, label, src }) {
         </InputLabel>
 
         <Tooltip title="Collapse All">
-          <IconButton size="small" onClick={handleCollapse}>
+          <IconButton onClick={handleCollapse}>
             <ExpandLessIcon />
           </IconButton>
         </Tooltip>
         <Tooltip title="Expand All">
-          <IconButton size="small" onClick={handleExpandAll}>
+          <IconButton onClick={handleExpandAll}>
             <ExpandMoreIcon />
           </IconButton>
         </Tooltip>
         <Tooltip title="Copy All">
-          <IconButton size="small" onClick={handleCopyAll}>
+          <IconButton onClick={handleCopyAll}>
             <FileCopyIcon />
           </IconButton>
         </Tooltip>

diff --git a/ui/src/data/workflow.js b/ui/src/data/workflow.js
@@ -85,23 +85,19 @@ export function useWorkflowDefs() {
   const workflows = useMemo(() => {
     if (data) {
       const unique = new Map();
-      const types = new Set();
       for (let workflowDef of data) {
         if (!unique.has(workflowDef.name)) {
           unique.set(workflowDef.name, workflowDef);
         } else if (unique.get(workflowDef.name).version < workflowDef.version) {
           unique.set(workflowDef.name, workflowDef);
         }
-
-        for (let task of workflowDef.tasks) {
-          types.add(task.type);
-        }
       }
 
       return Array.from(unique.values());
     }
   }, [data]);
 
+  console.log(workflows);
   return {
     data: workflows,
     ...rest,

diff --git a/ui/src/pages/definition/SaveTaskDialog.jsx b/ui/src/pages/definition/SaveTaskDialog.jsx
@@ -49,8 +49,11 @@ export default function SaveTaskDialog({ onSuccess, onCancel, document }) {
     },
     onError: (err) => {
       console.log("onerror", err);
+      let errStr = _.isString(err.body)
+        ? err.body
+        : JSON.stringify(err.body, null, 2);
       setErrorMsg({
-        message: `${TASK_SAVE_FAILED} - Error: ${err}`,
+        message: `${TASK_SAVE_FAILED}: ${errStr}`,
         dismissible: true,
       });
     },

diff --git a/ui/src/pages/definition/SaveWorkflowDialog.jsx b/ui/src/pages/definition/SaveWorkflowDialog.jsx
@@ -81,7 +81,10 @@ export default function SaveWorkflowDialog({ onSuccess, onCancel, document }) {
     },
     onError: (err) => {
       console.log("onerror", err);
-      setErrorMsg(`${WORKFLOW_SAVE_FAILED} - Error: ${err}`);
+      let errStr = _.isString(err.body)
+        ? err.body
+        : JSON.stringify(err.body, null, 2);
+      setErrorMsg(`${WORKFLOW_SAVE_FAILED}: ${errStr}`);
     },
   });
 

diff --git a/ui/src/pages/execution/Execution.jsx b/ui/src/pages/execution/Execution.jsx
@@ -10,7 +10,7 @@ import {
   Heading,
 } from "../../components";
 import { Tooltip } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 import { useRouteMatch } from "react-router-dom";
 import TaskDetails from "./TaskDetails";
 import ExecutionSummary from "./ExecutionSummary";

diff --git a/ui/src/pages/executions/TaskSearch.jsx b/ui/src/pages/executions/TaskSearch.jsx
@@ -105,7 +105,6 @@ export default function TaskSearchPanel() {
     setQueryFT(newQuery);
 
     if (oldQuery === newQuery) {
-      console.log("refetching");
       refetch();
     }
   }

diff --git a/ui/src/pages/kitchensink/KitchenSink.jsx b/ui/src/pages/kitchensink/KitchenSink.jsx
@@ -35,7 +35,7 @@ import DataTableDemo from "./DataTableDemo";
 import top100Films from "./sampleMovieData";
 import Dropdown from "../../components/Dropdown";
 import sharedStyles from "../styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/styles";
 import clsx from "clsx";
 import FormikInput from "../../components/formik/FormikInput";
 import FormikJsonInput from "../../components/formik/FormikJsonInput";

diff --git a/ui/src/pages/workbench/RunHistory.tsx b/ui/src/pages/workbench/RunHistory.tsx
@@ -83,8 +83,6 @@ const RunHistory = forwardRef((props: RunHistoryProps, ref) => {
       return newRun;
     },
     updateRun: (createTime: number, workflowId: string) => {
-      console.log("updating run", createTime, workflowId);
-
       const idx = runHistory.findIndex((v) => v.createTime === createTime);
       const currRun = runHistory[idx];
       const oldRecords = currRun.workflowRecords;

diff --git a/ui/src/pages/workbench/WorkbenchForm.jsx b/ui/src/pages/workbench/WorkbenchForm.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Text, Pill } from "../../components";
-import { Toolbar, IconButton } from "@material-ui/core";
+import { Toolbar, IconButton, Tooltip } from "@material-ui/core";
 import FormikInput from "../../components/formik/FormikInput";
 import FormikJsonInput from "../../components/formik/FormikJsonInput";
 import FormikDropdown from "../../components/formik/FormikDropdown";
@@ -146,7 +146,6 @@ function WorkbenchForm(props) {
     validateForm().then((errors) => {
       if (Object.keys(errors).length === 0) {
         const payload = formDataToRunPayload(values);
-        console.log(payload);
         saveRun(payload);
       } else {
         setTouched(setNestedObjectValues(errors, true));
@@ -158,18 +157,30 @@ function WorkbenchForm(props) {
     <Form className={classes.main}>
       <Toolbar className={classes.toolbar}>
         <Text className={classes.workflowName}>Workflow Workbench</Text>
-        <IconButton onClick={handleRun}>
-          <PlayArrowIcon />
-        </IconButton>
-        <IconButton disabled={!dirty} onClick={handleSave}>
-          <SaveIcon />
-        </IconButton>
-        <IconButton
-          disabled={!values.workflowName}
-          onClick={triggerPopulateInput}
-        >
-          <PlaylistAddIcon />
-        </IconButton>
+        <Tooltip title="Execute Workflow">
+          <IconButton onClick={handleRun}>
+            <PlayArrowIcon />
+          </IconButton>
+        </Tooltip>
+
+        <Tooltip title="Save Workflow Trigger">
+          <div>
+            <IconButton disabled={!dirty} onClick={handleSave}>
+              <SaveIcon />
+            </IconButton>
+          </div>
+        </Tooltip>
+
+        <Tooltip title="Populate Input Parameters">
+          <div>
+            <IconButton
+              disabled={!values.workflowName}
+              onClick={triggerPopulateInput}
+            >
+              <PlaylistAddIcon />
+            </IconButton>
+          </div>
+        </Tooltip>
 
         {dirty && <Pill label="Modified" />}
         {createTime && <Text>Created: {timestampRenderer(createTime)}</Text>}

diff --git a/ui/src/plugins/fetch.js b/ui/src/plugins/fetch.js
@@ -7,7 +7,12 @@ export function useFetchContext() {
     ready: true,
   };
 }
-export function fetchWithContext(path, context, fetchParams, isJsonResponse) {
+export function fetchWithContext(
+  path,
+  context,
+  fetchParams,
+  isJsonResponse = true
+) {
   const newParams = { ...fetchParams };
 
   const newPath = `/api/${path}`;

diff --git a/ui/src/theme/theme.js b/ui/src/theme/theme.js
@@ -617,7 +617,6 @@ const overrides = {
       },
       clearIndicator: {
         fontSize: fontSizes.fontSize5,
-        color: baseTheme.palette.text.primary,
       },
       inputRoot: {
         padding: "0px !important",