Jupyterlab Workflows frontend plugin initial commit (#526)

* Jupyterlab Workflows frontend plugin initial commit

* Fix minor UI issues and refactor duplicate styled components

---------

Co-authored-by: Sathish Kumar Thangaraj <sathishlxg@gmail.com>

Author: sathishlxg

.eslintignore

@@ -3,6 +3,7 @@ dist
 coverage
 **/*.d.ts
 tests
+lib
 
 **/__tests__
 ui-tests

package.json

@@ -59,6 +59,8 @@
     "@emotion/styled": "^11.10.4",
     "@jupyterlab/application": "^4",
     "@jupyterlab/apputils": "^4",
+    "@jupyterlab/codeeditor": "^4",
+    "@jupyterlab/codemirror": "^4",
     "@jupyterlab/coreutils": "^6",
     "@jupyterlab/filebrowser": "^4",
     "@jupyterlab/launcher": "^4",
@@ -72,21 +74,35 @@
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.6",
     "@mui/system": "^5.10.6",
+    "@mui/x-date-pickers": "^6.19.3",
     "@types/react-dom": "^18.0.5",
     "cronstrue": "^2.12.0",
+    "elkjs": "^0.9.1",
+    "email-validator": "^2.0.4",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "nanoid": "^3.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tzdata": "^1.0.33"
+    "react-hook-form": "^7.50.1",
+    "react-resizable-panels": "^2.0.9",
+    "react-router-dom": "^6.22.0",
+    "react-show-more-text": "^1.7.1",
+    "reactflow": "^11.10.3",
+    "tzdata": "^1.0.33",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@jupyterlab/builder": "^4",
     "@jupyterlab/testutils": "^4",
     "@types/jest": "^29",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "eslint": "^7.14.0",
+    "@types/lodash": "4.14.192",
+    "@types/react-show-more-text": "^1.4.5",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "jest": "^29",
@@ -100,7 +116,8 @@
     "stylelint-config-standard": "~24.0.0",
     "stylelint-prettier": "^2.0.0",
     "ts-jest": "^29",
-    "typescript": "~4.3.0"
+    "typescript": "~5.1.6",
+    "zustand-types": "^0.1.0"
   },
   "resolutions": {
     "@types/react": "^17.0.1",

schema/plugin.json

@@ -8,6 +8,11 @@
         "command": "scheduling:create-from-filebrowser",
         "selector": ".jp-DirListing-item[data-file-type=\"notebook\"]",
         "rank": 3.9
+      },
+      {
+        "command": "workflows:create-from-filebrowser",
+        "selector": ".jp-DirListing-item[data-file-type=\"notebook\"]",
+        "rank": 4
       }
     ]
   },
@@ -17,6 +22,11 @@
         "name": "create-job",
         "command": "scheduling:create-from-notebook",
         "rank": 46
+      },
+      {
+        "name": "create-workflow",
+        "command": "workflows:create-from-notebook",
+        "rank": 47
       }
     ]
   },

src/dag-scheduler/components/advanced-table/advanced-table-header.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { caretDownIcon, caretUpIcon, LabIcon } from '@jupyterlab/ui-components';
+import TableHead from '@mui/material/TableHead';
+import TableCell from '@mui/material/TableCell';
+
+import { AdvancedTableColumn, AdvancedTableQuery } from './advanced-table';
+import { Scheduler } from '../../handler';
+
+type AdvancedTableHeaderProps<Q extends AdvancedTableQuery> = {
+  columns: AdvancedTableColumn[];
+  query: Q;
+  setQuery: React.Dispatch<React.SetStateAction<Q>>;
+};
+
+export function AdvancedTableHeader<Q extends AdvancedTableQuery>(
+  props: AdvancedTableHeaderProps<Q>
+): JSX.Element {
+  return (
+    <TableHead>
+      {props.columns.map((column, idx) => (
+        <AdvancedTableHeaderCell
+          key={idx}
+          column={column}
+          query={props.query}
+          setQuery={props.setQuery}
+        />
+      ))}
+    </TableHead>
+  );
+}
+
+const sortAscendingIcon = (
+  <LabIcon.resolveReact icon={caretUpIcon} tag="span" />
+);
+const sortDescendingIcon = (
+  <LabIcon.resolveReact icon={caretDownIcon} tag="span" />
+);
+
+type AdvancedTableHeaderCellProps<Q extends AdvancedTableQuery> = Pick<
+  AdvancedTableHeaderProps<Q>,
+  'query' | 'setQuery'
+> & {
+  column: AdvancedTableColumn;
+};
+
+function AdvancedTableHeaderCell<Q extends AdvancedTableQuery>(
+  props: AdvancedTableHeaderCellProps<Q>
+): JSX.Element {
+  const sort = props.query.sort_by;
+  const defaultSort = sort?.[0];
+
+  const headerIsDefaultSort =
+    defaultSort && defaultSort.name === props.column.sortField;
+  const isSortedAscending =
+    headerIsDefaultSort &&
+    defaultSort &&
+    defaultSort.direction === Scheduler.SortDirection.ASC;
+  const isSortedDescending =
+    headerIsDefaultSort &&
+    defaultSort &&
+    defaultSort.direction === Scheduler.SortDirection.DESC;
+
+  const sortByThisColumn = () => {
+    // If this field is not sortable, do nothing.
+    if (!props.column.sortField) {
+      return;
+    }
+
+    // Change the sort of this column.
+    // If not sorted at all or if sorted descending, sort ascending. If sorted ascending, sort descending.
+    const newSortDirection = isSortedAscending
+      ? Scheduler.SortDirection.DESC
+      : Scheduler.SortDirection.ASC;
+
+    // Set the new sort direction.
+    const newSort: Scheduler.ISortField = {
+      name: props.column.sortField,
+      direction: newSortDirection
+    };
+
+    // If this field is already present in the sort list, remove it.
+    const oldSortList = sort || [];
+    const newSortList = [
+      newSort,
+      ...oldSortList.filter(item => item.name !== props.column.sortField)
+    ];
+
+    // Sub the new sort list in to the query.
+    props.setQuery(query => ({ ...query, sort_by: newSortList }));
+  };
+
+  return (
+    <TableCell
+      onClick={sortByThisColumn}
+      sx={props.column.sortField ? { cursor: 'pointer' } : {}}
+    >
+      {props.column.name}
+      {isSortedAscending && sortAscendingIcon}
+      {isSortedDescending && sortDescendingIcon}
+    </TableCell>
+  );
+}