Style fixes in TaskEditor

tapis-project · Aug 12, 2024 · 7c1dc8c · 7c1dc8c
1 parent e45f75a
commit 7c1dc8c
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 40 deletions.
diff --git a/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx b/src/app/Workflows/Pipelines/Pipeline/_components/DagView/DagView.tsx
@@ -125,7 +125,7 @@ const DagViewDrawer: React.FC<DagViewDrawerProps> = ({
                   event.stopPropagation();
                 }}
               >
-                Add Predefined Tasks
+                Add predefined tasks to the workflow
               </ListSubheader>
             }
           >

diff --git a/src/app/Workflows/Pipelines/_components/Sidebar/Sidebar.module.scss b/src/app/Workflows/Pipelines/_components/Sidebar/Sidebar.module.scss
@@ -1,5 +1,6 @@
 .sidebar {
-  width: 30%;
+  min-width: 30%;
+  max-width: 30%;
   border: 1px solid #cccccc;
   background-color: #ffffff;
 }

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/CodeTab/CodeTab.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/CodeTab/CodeTab.module.scss
@@ -12,6 +12,10 @@
 
 .code-container-header {
   padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
 }
 
 .code-container-header-item {

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/CodeTab/CodeTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/CodeTab/CodeTab.tsx
@@ -22,44 +22,42 @@ const CodeTab: React.FC<CodeTabProps> = ({ featured }) => {
   return (
     <div
       className={`${styles['code-container']} ${
-        featured
+        !featured
           ? baseStyles['body-with-sidebar']
           : baseStyles['body-wo-sidebar']
       }`}
     >
       <div className={`${styles['code-container-header']}`}>
-        <Stack direction="row" spacing={'8px'}>
-          <Chip
-            color="primary"
-            label={`runtime:${taskPatch.runtime}`}
-            size="small"
-            onClick={() => {
-              setModal('runtime');
-            }}
-          />
-          {(taskPatch.git_repositories ? taskPatch.git_repositories : []).map(
-            (repo) => {
-              return (
-                <Chip
-                  size="small"
-                  label={`repo:${repo.url!.replace(
-                    'https://github.com/',
-                    ''
-                  )}:${repo.branch} ${repo.directory}`}
-                  onDelete={() => {
-                    setTaskPatch(task, {
-                      git_repositories: [
-                        ...(taskPatch.git_repositories || []).filter(
-                          (r) => repo.url !== r.url
-                        ),
-                      ],
-                    });
-                  }}
-                />
-              );
-            }
-          )}
-        </Stack>
+        <Chip
+          color="primary"
+          label={`runtime:${taskPatch.runtime}`}
+          size="small"
+          onClick={() => {
+            setModal('runtime');
+          }}
+        />
+        {(taskPatch.git_repositories ? taskPatch.git_repositories : []).map(
+          (repo) => {
+            return (
+              <Chip
+                size="small"
+                label={`repo:${repo.url!.replace(
+                  'https://github.com/',
+                  ''
+                )}:${repo.branch} ${repo.directory}`}
+                onDelete={() => {
+                  setTaskPatch(task, {
+                    git_repositories: [
+                      ...(taskPatch.git_repositories || []).filter(
+                        (r) => repo.url !== r.url
+                      ),
+                    ],
+                  });
+                }}
+              />
+            );
+          }
+        )}
       </div>
       <CodeMirror
         value={(task.code !== undefined && decode(task.code)) || ''}

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/GitTab/GitTab.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import styles from './GitTab.module.scss';
 import { Button, Chip } from '@mui/material';
 import { AddGitRepoModal } from 'app/Workflows/_components/Modals';
+import { Add } from '@mui/icons-material';
 
 const GitTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
   const {
@@ -51,6 +52,7 @@ const GitTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
           onClick={() => {
             setModal('git');
           }}
+          startIcon={<Add />}
         >
           Add Git Repo
         </Button>

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.module.scss
@@ -1,4 +1,4 @@
-.form {
+.container {
   width: 100%;
   padding: 16px;
   display: grid;

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/Tabs/IOTab/IOTab.tsx
@@ -1,14 +1,124 @@
 import React from 'react';
 import { Workflows } from '@tapis/tapis-typescript';
 import { Sidebar } from '../../../Sidebar';
+import styles from "./IOTab.module.scss"
 import { usePatchTask } from 'app/Workflows/_hooks';
+import { Button, List, Box, ListItem, ListItemButton, ListSubheader, ListItemText } from '@mui/material';
+import { Add } from '@mui/icons-material';
 
 const IOTab: React.FC<{ toggle: () => void }> = ({ toggle }) => {
   const { taskPatch } = usePatchTask<Workflows.Task>();
+  const getValueSource = (value: Workflows.SpecWithValue) => {
+    if (value.value) {
+      return `from literal: ${value.value}`
+    }
+
+    const sourceKey = Object.keys(value.value_from!)[0]
+    let source: string | undefined = undefined
+    console.log({sourceKey})
+    switch (sourceKey) {
+      case "args":
+        source = value.value_from?.args;
+        break;
+      case "env":
+        source = value.value_from?.env
+        break
+      default:
+        source = "unknown"
+    }
+
+    return `from '${source}' in '${sourceKey}'`
+  }
+
+  const input = Object.entries(taskPatch.input || {})
+  const output = Object.entries(taskPatch.output || {})
+
   return (
     <Sidebar title={'Inputs & Outputs'} toggle={toggle}>
-      {JSON.stringify(taskPatch.input)}
-      {JSON.stringify(taskPatch.output)}
+      <Box>
+        <List
+          subheader={
+            <ListSubheader
+              component="div"
+              id="inputs"
+            >
+              Inputs
+            </ListSubheader>
+          }
+        >
+        {input.length < 1 && (
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText
+                primary={"No inputs"}
+                secondary={"Press the button below to add an input"}
+              />
+            </ListItemButton>
+          </ListItem>
+        )}
+        {
+          input.map(([key, value]) => {
+            return (
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemText
+                    primary={`'${key}' as ${value.type} ${getValueSource(value)}`}
+                    secondary={value.description}
+                  />
+                </ListItemButton>
+              </ListItem>
+            )
+          })
+        }
+        </List>
+      </Box>
+      <div className={styles["container"]}>
+        <Button startIcon={<Add />} onClick={() => {}}>
+          Add Input
+        </Button>
+      </div>
+      <Box>
+        <List
+          subheader={
+            <ListSubheader
+              component="div"
+              id="inputs"
+            >
+              Outputs
+            </ListSubheader>
+          }
+        >
+          {output.length < 1 && (
+            <ListItem disablePadding>
+              <ListItemButton>
+                <ListItemText
+                  primary={"No outputs"}
+                  secondary={"Press the button below to add an output"}
+                />
+              </ListItemButton>
+            </ListItem>
+          )}
+          {
+            output.map(([key, value]) => {
+              return (
+                <ListItem disablePadding>
+                  <ListItemButton>
+                    <ListItemText
+                      primary={`'${key}' as ${value} ${getValueSource(value)}`}
+                      secondary={(value as any).type!}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              )
+            })
+          }
+        </List>
+      </Box>
+      <div className={styles["container"]}>
+        <Button startIcon={<Add />} onClick={() => {}}>
+          Add Output
+        </Button>
+      </div>
     </Sidebar>
   );
 };

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.module.scss
@@ -38,6 +38,7 @@
 
 .body-with-sidebar {
   width: 70%;
+  max-width: 70%;
 }
 
 .body-wo-sidebar {

diff --git a/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx b/src/app/Workflows/Pipelines/_components/TaskEditor/TaskEditor.tsx
@@ -81,7 +81,7 @@ const TaskEditor: React.FC<TaskEditorProps> = ({
     <div>
       <Box sx={{ width: '100%', typography: 'body1' }}>
         <TabContext value={tab}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Box>
             <TabList onChange={handleChangeTab}>
               {tabs.includes('general') && (
                 <Tab label="General" value="general" />
@@ -244,7 +244,8 @@ const TaskEditor: React.FC<TaskEditorProps> = ({
         {(tab === 'code' || featuredTab === 'code') &&
           tabs.includes('code') && (
             <CodeTab featured={task.type === Workflows.EnumTaskType.Function} />
-          )}
+          )
+        }
         {(tab === 'jobdef' || featuredTab === 'jobdef') &&
           tabs.includes('jobdef') && (
             <TapisJobDefTab