Prettify UI code

Netflix · Mar 14, 2022 · 4b0f818 · 4b0f818
1 parent 58125a2
commit 4b0f818
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 88 deletions.
diff --git a/ui/src/components/DataTable.jsx b/ui/src/components/DataTable.jsx
@@ -42,7 +42,8 @@ export default function DataTable(props) {
 
   // If no defaultColumns passed - use all columns
   const defaultColumns = useMemo(
-    () => props.defaultShowColumns || props.columns.map((col) => getColumnId(col)),
+    () =>
+      props.defaultShowColumns || props.columns.map((col) => getColumnId(col)),
     [props.defaultShowColumns, props.columns]
   );
 

diff --git a/ui/src/components/Dropdown.jsx b/ui/src/components/Dropdown.jsx
@@ -4,12 +4,21 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
 
-export default function ({ label, className, style, error, helperText, ...props }) {
+export default function ({
+  label,
+  className,
+  style,
+  error,
+  helperText,
+  ...props
+}) {
   return (
     <FormControl style={style} className={className}>
       {label && <InputLabel error={!!error}>{label}</InputLabel>}
       <Autocomplete
-        renderInput={(params) => <Input {...params} error={!!error} helperText={helperText}/>}
+        renderInput={(params) => (
+          <Input {...params} error={!!error} helperText={helperText} />
+        )}
         {...props}
       />
     </FormControl>

diff --git a/ui/src/components/formik/FormikCronEditor.jsx b/ui/src/components/formik/FormikCronEditor.jsx
@@ -1,20 +1,22 @@
 import React from "react";
 import { InputLabel } from "@material-ui/core";
 import { useField } from "formik";
-import Cron from 'react-cron-generator'
+import Cron from "react-cron-generator";
 
-import './cron.css';
+import "./cron.css";
 
 export default function (props) {
-  const [field, /*meta*/, helper] = useField(props);
-  
+  const [field /*meta*/, , helper] = useField(props);
+
   return (
     <div className={props.className}>
-    <InputLabel variant="outlined">Cron Expression</InputLabel>
-    <Cron value={field.value} onChange={value => helper.setValue(value)}
-      showResultText={true}
-      showResultCron={true}
-    />
+      <InputLabel variant="outlined">Cron Expression</InputLabel>
+      <Cron
+        value={field.value}
+        onChange={(value) => helper.setValue(value)}
+        showResultText={true}
+        showResultCron={true}
+      />
     </div>
   );
 }
diff --git a/ui/src/components/formik/FormikInput.jsx b/ui/src/components/formik/FormikInput.jsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { TextField} from "@material-ui/core";
+import { TextField } from "@material-ui/core";
 import { useField } from "formik";
 
-
 export default function (props) {
   const [field, meta] = useField(props);
-  
+
   return (
     <TextField
       error={!!(meta.touched && meta.error)}

diff --git a/ui/src/components/formik/FormikJsonInput.jsx b/ui/src/components/formik/FormikJsonInput.jsx
@@ -16,13 +16,13 @@ const useStyles = makeStyles({
       margin: -2,
       borderColor: "rgb(73, 105, 228)",
       borderStyle: "solid",
-      borderWidth: 2
-    }
+      borderWidth: 2,
+    },
   },
   label: {
-    display: 'block',
-    marginBottom: 8
-  }
+    display: "block",
+    marginBottom: 8,
+  },
 });
 
 export default function ({ className, label, height, ...props }) {
@@ -65,16 +65,16 @@ export default function ({ className, label, height, ...props }) {
           overviewRulerLanes: 0,
           hideCursorInOverviewRuler: true,
           scrollbar: {
-            vertical: 'hidden'
+            vertical: "hidden",
           },
-          overviewRulerBorder: false
+          overviewRulerBorder: false,
         }}
       />
       {meta.touched && meta.error ? (
-        <FormHelperText variant="outlined" error>{meta.error}</FormHelperText>
+        <FormHelperText variant="outlined" error>
+          {meta.error}
+        </FormHelperText>
       ) : null}
     </div>
   );
 }
-
-
diff --git a/ui/src/components/formik/FormikSwitch.jsx b/ui/src/components/formik/FormikSwitch.jsx
@@ -2,19 +2,18 @@ import React from "react";
 import { Switch, InputLabel } from "@material-ui/core";
 import { useField } from "formik";
 
-
 export default function ({ label, ...props }) {
-  const [field, /*meta*/, helper] = useField(props);
+  const [field /*meta*/, , helper] = useField(props);
 
   return (
     <div>
-    <InputLabel variant="outlined">{label}</InputLabel>
-    <Switch
-      color="primary"
-      checked={field.value}
-      onChange={e => helper.setValue(e.target.checked)}
-      {...props}
-    />
+      <InputLabel variant="outlined">{label}</InputLabel>
+      <Switch
+        color="primary"
+        checked={field.value}
+        onChange={(e) => helper.setValue(e.target.checked)}
+        {...props}
+      />
     </div>
   );
 }
diff --git a/ui/src/components/formik/FromikDropdown.jsx b/ui/src/components/formik/FromikDropdown.jsx
@@ -2,11 +2,18 @@ import React from "react";
 import { useField } from "formik";
 import { Dropdown } from "..";
 
-
 export default function (props) {
   const [field, meta, helper] = useField(props);
   const touchedError = meta.touched && meta.error;
-  return <>
-    <Dropdown {...field} onChange={(e, value)=> helper.setValue(value)} {...props} error={touchedError} helperText={touchedError}/>
-  </>
+  return (
+    <>
+      <Dropdown
+        {...field}
+        onChange={(e, value) => helper.setValue(value)}
+        {...props}
+        error={touchedError}
+        helperText={touchedError}
+      />
+    </>
+  );
 }
diff --git a/ui/src/components/formik/cron.css b/ui/src/components/formik/cron.css
@@ -10,7 +10,8 @@
   list-style: none;
 }
 
-.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
   color: #495057;
   background-color: #fff;
   border-color: #dee2e6 #dee2e6 #fff;
@@ -52,4 +53,4 @@
 .cron_builder .row {
   display: flex;
   flex-direction: row;
-}
+}
diff --git a/ui/src/pages/execution/RightPanel.jsx b/ui/src/pages/execution/RightPanel.jsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Tabs, Tab, Paper, ReactJson, Dropdown, Banner } from "../../components";
+import {
+  Tabs,
+  Tab,
+  Paper,
+  ReactJson,
+  Dropdown,
+  Banner,
+} from "../../components";
 
 import TaskSummary from "./TaskSummary";
 import TaskLogs from "./TaskLogs";
@@ -14,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
   dfSelect: {
     padding: 15,
     backgroundColor: "#efefef",
-  }
+  },
 }));
 
 export default function RightPanel({
@@ -122,16 +129,20 @@ export default function RightPanel({
             title="Task Input"
           />
         )}
-        {tabIndex === 2 && (<>
-          {taskResult.externalOutputPayloadStoragePath && 
-          <Banner className={classes.margin}>
-            This task has externalized output. Please reference <code>externalOutputPayloadStoragePath</code> for the storage location.
-          </Banner>}
-          <ReactJson
-            className={classes.margin}
-            src={taskResult.outputData}
-            title="Task Output"
-          />
+        {tabIndex === 2 && (
+          <>
+            {taskResult.externalOutputPayloadStoragePath && (
+              <Banner className={classes.margin}>
+                This task has externalized output. Please reference{" "}
+                <code>externalOutputPayloadStoragePath</code> for the storage
+                location.
+              </Banner>
+            )}
+            <ReactJson
+              className={classes.margin}
+              src={taskResult.outputData}
+              title="Task Output"
+            />
           </>
         )}
         {tabIndex === 3 && <TaskLogs task={taskResult} />}

diff --git a/ui/src/pages/execution/TaskLogs.jsx b/ui/src/pages/execution/TaskLogs.jsx
@@ -13,8 +13,17 @@ export default function TaskLogs({ task }) {
     <DataTable
       data={log}
       columns={[
-        { name: "createdTime", type: "date", label: "Timestamp", width: "180px" },
-        { name: "log", label: "Entry", style: "div:first-child { white-space: pre-wrap }" },
+        {
+          name: "createdTime",
+          type: "date",
+          label: "Timestamp",
+          width: "180px",
+        },
+        {
+          name: "log",
+          label: "Entry",
+          style: "div:first-child { white-space: pre-wrap }",
+        },
       ]}
       title="Task Logs"
     />

diff --git a/ui/src/pages/kitchensink/KitchenSink.jsx b/ui/src/pages/kitchensink/KitchenSink.jsx
@@ -29,7 +29,7 @@ import {
   Button,
 } from "../../components";
 import ZoomInIcon from "@material-ui/icons/ZoomIn";
-import * as Yup from 'yup';
+import * as Yup from "yup";
 import EnhancedTable from "./EnhancedTable";
 import DataTableDemo from "./DataTableDemo";
 import top100Films from "./sampleMovieData";
@@ -40,7 +40,6 @@ import clsx from "clsx";
 import FormikInput from "../../components/formik/FormikInput";
 import FormikJsonInput from "../../components/formik/FormikJsonInput";
 
-
 const useStyles = makeStyles(sharedStyles);
 
 export default function KitchenSink() {
@@ -98,33 +97,32 @@ const FormikSection = () => {
     <Paper padded>
       <Heading level={3}>Formik</Heading>
       <Formik
-         initialValues={{
-           firstName: '',
-           lastName: '',
-           description: '',
-         }}
-         validationSchema={Yup.object({
+        initialValues={{
+          firstName: "",
+          lastName: "",
+          description: "",
+        }}
+        validationSchema={Yup.object({
           firstName: Yup.string()
-            .min(15, 'Must be 15 characters or more')
-            .required('Required')
-          })}
-         onSubmit={values => setFormState(values)}
+            .min(15, "Must be 15 characters or more")
+            .required("Required"),
+        })}
+        onSubmit={(values) => setFormState(values)}
       >
         <Form>
           <FormikInput label="First Name" name="firstName" />
-           <FormikInput label="Last Name" name="lastName" />
-           <FormikJsonInput label="Description" name="description" />
-           <Button type="submit">Submit</Button>
-        </Form>        
+          <FormikInput label="Last Name" name="lastName" />
+          <FormikJsonInput label="Description" name="description" />
+          <Button type="submit">Submit</Button>
+        </Form>
       </Formik>
-    <code>
-      <pre>{JSON.stringify(formState)}</pre>
-    </code>
+      <code>
+        <pre>{JSON.stringify(formState)}</pre>
+      </code>
     </Paper>
   );
 };
 
-
 const ToolbarSection = () => {
   return (
     <Paper padded style={{ backgroundColor: "gray" }}>
@@ -448,4 +446,4 @@ const Selects = () => {
       />
     </Paper>
   );
-};
+};
diff --git a/ui/src/pages/styles.js b/ui/src/pages/styles.js
@@ -15,7 +15,7 @@ export default {
     zIndex: 1,
   },
   paddingBottom: {
-    paddingBottom: 25
+    paddingBottom: 25,
   },
   tabContent: {
     padding: 30,
@@ -26,6 +26,6 @@ export default {
     justifyContent: "flex-end",
   },
   field: {
-    marginBottom: 15
-  }
+    marginBottom: 15,
+  },
 };
diff --git a/ui/src/plugins/CustomAppBarButtons.jsx b/ui/src/plugins/CustomAppBarButtons.jsx
@@ -1,4 +1,3 @@
 export default function CustomAppBarButtons() {
-  return <>
-  </>
+  return <></>;
 }
diff --git a/ui/src/plugins/CustomRoutes.jsx b/ui/src/plugins/CustomRoutes.jsx
@@ -1,4 +1,3 @@
-export default function CustomRoutes(){
-return <>
-  </>
-}
+export default function CustomRoutes() {
+  return <></>;
+}
diff --git a/ui/src/schema/task.js b/ui/src/schema/task.js
@@ -17,4 +17,4 @@ export const NEW_TASK_TEMPLATE = {
 
 export function configureMonaco(monaco) {
   // No-op
-}
+}
diff --git a/ui/src/theme/theme.js b/ui/src/theme/theme.js
@@ -130,7 +130,7 @@ const baseThemeOptions = {
     caption: {
       fontSize: fontSizes.fontSize2,
       lineHeight: lineHeights.lineHeight1,
-      fontWeight: fontWeights.fontWeight1
+      fontWeight: fontWeights.fontWeight1,
     },
     button: {
       fontSize: fontSizes.fontSize2,
@@ -268,8 +268,8 @@ const overrides = {
         },
       },
       containedPrimary: {
-        color: `${colors.white} !important`
-      }
+        color: `${colors.white} !important`,
+      },
     },
     MuiCheckbox: {
       root: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ export const NEW_TASK_TEMPLATE = { @@
     export function configureMonaco(monaco) {
       // No-op
-    }
+    }