feat: visualize jobs (WIP)

packages/plugin-visual-jobs/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.env
+dist
+demo/uploads
+build
+.DS_Store
+package-lock.json

packages/plugin-visual-jobs/.prettierignore

@@ -0,0 +1,12 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp
+**/docs/**
+tsconfig.json

packages/plugin-visual-jobs/.swcrc

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": true,
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

packages/plugin-visual-jobs/README.md

@@ -0,0 +1 @@
+# Payload Visual Jobs Plugin

packages/plugin-visual-jobs/eslint.config.js

@@ -0,0 +1,18 @@
+import { rootEslintConfig, rootParserOptions } from '../../eslint.config.js'
+
+/** @typedef {import('eslint').Linter.Config} Config */
+
+/** @type {Config[]} */
+export const index = [
+  ...rootEslintConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        ...rootParserOptions,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]
+
+export default index

packages/plugin-visual-jobs/license.md

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018-2024 Payload CMS, Inc. <info@payloadcms.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/plugin-visual-jobs/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@payloadcms/plugin-visual-jobs",
+  "version": "3.2.2",
+  "description": "Visual Jobs plugin for Payload",
+  "keywords": [
+    "payload",
+    "cms",
+    "plugin",
+    "typescript",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms/payload.git",
+    "directory": "packages/plugin-visual-jobs"
+  },
+  "license": "MIT",
+  "author": "Payload <dev@payloadcms.com> (https://payloadcms.com)",
+  "maintainers": [
+    {
+      "name": "Payload",
+      "email": "info@payloadcms.com",
+      "url": "https://payloadcms.com"
+    }
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./client": {
+      "import": "./src/exports/client.ts",
+      "types": "./src/exports/client.ts",
+      "default": "./src/exports/client.ts"
+    },
+    "./rsc": {
+      "import": "./src/exports/rsc.ts",
+      "types": "./src/exports/rsc.ts",
+      "default": "./src/exports/rsc.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
+  },
+  "dependencies": {
+    "@payloadcms/translations": "workspace:*",
+    "@payloadcms/ui": "workspace:*",
+    "@xyflow/react": "^12.3.6"
+  },
+  "devDependencies": {
+    "@payloadcms/eslint-config": "workspace:*",
+    "@payloadcms/next": "workspace:*",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "payload": "workspace:*"
+  },
+  "peerDependencies": {
+    "payload": "workspace:*",
+    "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
+    "react-dom": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./client": {
+        "import": "./dist/exports/client.js",
+        "types": "./dist/exports/client.d.ts",
+        "default": "./dist/exports/client.js"
+      },
+      "./rsc": {
+        "import": "./dist/exports/rsc.js",
+        "types": "./dist/exports/rsc.d.ts",
+        "default": "./dist/exports/rsc.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "registry": "https://registry.npmjs.org/",
+    "types": "./dist/index.d.ts"
+  },
+  "homepage:": "https://payloadcms.com"
+}

packages/plugin-visual-jobs/src/exports/client.ts

@@ -0,0 +1 @@
+'use client'

packages/plugin-visual-jobs/src/exports/rsc.ts

@@ -0,0 +1 @@
+export { JobsView } from '../ui/JobsView/index.js'

packages/plugin-visual-jobs/src/index.ts

@@ -0,0 +1,42 @@
+import type { Config } from 'payload'
+
+import type { VisualJobsPluginConfig } from './types.js'
+
+export const visualJobsPlugin =
+  (pluginConfig: VisualJobsPluginConfig) =>
+  (config: Config): Config => {
+    return {
+      ...config,
+      jobs: {
+        ...config.jobs,
+
+        jobsCollectionOverrides: ({ defaultJobsCollection }) => {
+          return {
+            ...defaultJobsCollection,
+
+            admin: {
+              ...(defaultJobsCollection.admin || {}),
+              components: {
+                ...(defaultJobsCollection.admin?.components || {}),
+                views: {
+                  ...(defaultJobsCollection.admin?.components?.views || {}),
+                  edit: {
+                    jobs: {
+                      Component: '@payloadcms/plugin-visual-jobs/rsc#JobsView',
+                      path: '/visualize',
+                      tab: {
+                        href: '/visualize',
+                        label: 'Visualize',
+                      },
+                    },
+                  },
+                },
+              },
+              hidden: false,
+            },
+          }
+        },
+        tasks: [...(config.jobs?.tasks || [])],
+      },
+    }
+  }

packages/plugin-visual-jobs/src/types.ts

@@ -0,0 +1 @@
+export type VisualJobsPluginConfig = {}

packages/plugin-visual-jobs/src/ui/JobsView/components/NodePanel/Tabs.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { TabComponent, TabsProvider } from '@payloadcms/ui'
+import React, { useEffect, useState } from 'react'
+
+export type PanelTab = {
+  Content: React.ReactNode
+  name: string
+}
+const baseClass = 'tabs-field'
+
+type Props = {
+  tabs: PanelTab[]
+}
+export const Tabs: React.FC<Props> = (props) => {
+  const { tabs } = props
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0)
+
+  useEffect(() => {
+    setActiveTabIndex(0)
+  }, [tabs])
+
+  return (
+    <TabsProvider>
+      <div className={`${baseClass}__tabs-wrap`}>
+        <div className={`${baseClass}__tabs`}>
+          {tabs.map((tab, tabIndex) => {
+            return (
+              <TabComponent
+                isActive={activeTabIndex === tabIndex}
+                key={tabIndex}
+                parentPath={''}
+                setIsActive={() => {
+                  setActiveTabIndex(tabIndex)
+                }}
+                tab={{ name: tab.name, fields: [] }}
+              />
+            )
+          })}
+        </div>
+      </div>
+      <div className={`${baseClass}__content-wrap`}>{tabs[activeTabIndex]?.Content}</div>
+    </TabsProvider>
+  )
+}

packages/plugin-visual-jobs/src/ui/JobsView/components/NodePanel/index.scss

@@ -0,0 +1,98 @@
+@import '~@payloadcms/ui/scss';
+
+.nodePanel {
+  display: flex;
+  flex-direction: column;
+  padding: base(1);
+  border: 1px solid var(--theme-elevation-100);
+  background: var(--theme-input-bg);
+  width: 400px;
+
+  .tabs-field__tabs::before {
+    content: none;
+  }
+
+  .tabs-field__content-wrap {
+    padding-left: 0;
+    padding-right: 0;
+    max-height: 800px;
+    overflow-y: auto;
+  }
+
+  .task-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .detail-row {
+      display: flex;
+      align-items: flex-start;
+
+      .label {
+        min-width: 100px;
+        font-weight: 600;
+      }
+
+      .value {
+        flex: 1;
+
+        &.state {
+          text-transform: capitalize;
+          font-weight: 600;
+
+          &.succeeded {
+            color: #2ecc71;
+          }
+
+          &.failed {
+            color: #e74c3c;
+          }
+
+          &.running {
+            color: #3498db;
+          }
+        }
+      }
+    }
+  }
+
+  .error-container {
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--theme-error-300);
+    color: var(--theme-elevation-1000);
+    border: 1px solid var(--theme-error-100);
+    border-radius: 6px;
+    max-width: 400px;
+
+    .error-type {
+      font-weight: 600;
+    }
+
+    .stack-trace {
+      margin-top: 8px;
+
+      .stack-header {
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+
+      .stack-content {
+        background: var(--theme-error-200);
+        border: 1px solid var(--theme-error-400);
+        border-radius: 4px;
+        padding: 8px;
+        font-family: monospace;
+        font-size: 12px;
+        max-height: 200px;
+        overflow-y: auto;
+
+        .stack-line {
+          padding: 2px 0;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}