feat: generate job requires connections #106

feat: generate job requires connections

Author: KyleTryon

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "homepage": "https://circleci-public.github.io/visual-config-editor/",
   "dependencies": {
-    "@circleci/circleci-config-sdk": "0.6.0-alpha.2",
+    "@circleci/circleci-config-sdk": "0.6.0",
     "@craco/craco": "^6.3.0",
     "@monaco-editor/react": "^4.3.1",
     "@testing-library/jest-dom": "^5.11.4",

src/components/containers/WorkflowContainer.tsx

@@ -1,4 +1,3 @@
-import { Job } from '@circleci/circleci-config-sdk';
 import { WorkflowJobParameters } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Workflow/types/WorkflowJob.types';
 import { useEffect, useState } from 'react';
 import ReactFlow, {

src/state/Store.tsx

@@ -12,6 +12,7 @@ import { PipelineParameterLiteral } from '@circleci/circleci-config-sdk/dist/src
 import { Action, action } from 'easy-peasy';
 import { MutableRefObject } from 'react';
 import {
+  ElementId,
   Elements,
   FlowElement,
   isNode,
@@ -371,28 +372,55 @@ const Actions: StoreActions = {
         commands: config.commands || [],
       };
 
-      config.workflows.forEach(({ name, jobs }) => {
-        state.workflows = state.workflows.concat({
-          name,
-          id: v4(),
-          elements: [],
-        });
-        const workflow = state.workflows[state.selectedWorkflow];
-        const nodeWidth = 120; // Make this dynamic
-        const elements: Node<any>[] = [];
+      state.workflows = config.workflows.map(({ name, jobs }) => {
+        const nodeWidth = 200; // Make this dynamic
+        const elements: Elements = [];
+        const requireTable: Record<ElementId, ElementId[]> = {};
 
+        // Build workflow and prep requirement connection generation
         jobs.forEach((workflowJob, i) => {
+          const jobName = workflowJob.job.name;
+
           elements.push({
-            id: v4(),
+            id: jobName,
             data: { job: workflowJob.job, parameters: workflowJob.parameters },
             connectable: true,
             dragHandle: '.node',
             type: 'jobs',
             position: { x: i * nodeWidth, y: 0 },
           });
+
+          workflowJob.parameters.requires?.forEach((requiredJob) => {
+            if (!requireTable[requiredJob]) {
+              requireTable[requiredJob] = [jobName];
+              return;
+            }
+
+            requireTable[requiredJob].push(jobName);
+          });
+        });
+
+        // Generate connections
+        Object.entries(requireTable).forEach(([jobName, requiredBy]) => {
+          requiredBy.forEach((requiredId) => {
+            elements.push({
+              id: v4(),
+              source: jobName,
+              target: requiredId,
+              type: 'requires',
+              sourceHandle: `${jobName}_source`,
+              targetHandle: `${requiredId}_target`,
+              animated: false,
+              style: { stroke: '#A3A3A3', strokeWidth: '2px' },
+            });
+          });
         });
 
-        workflow.elements = elements;
+        return {
+          name,
+          id: v4(),
+          elements,
+        };
       });
 
       state.config = config.generate();

yarn.lock

@@ -24,7 +24,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
@@ -1081,13 +1081,14 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@circleci/circleci-config-sdk@0.6.0-alpha.2":
-  version "0.6.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@circleci/circleci-config-sdk/-/circleci-config-sdk-0.6.0-alpha.2.tgz#deb98f2e2e7a0d97b703c4c380dc4a3343d16523"
-  integrity sha512-DqT9/cYpLnz+HoIoQw/xK+1siBGN4DZ+MHPj7f2VhKl20ogvPt8b9Prb7+qDdX5nz2gAA9ADGnyNBXQWen018Q==
+"@circleci/circleci-config-sdk@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@circleci/circleci-config-sdk/-/circleci-config-sdk-0.6.0.tgz#7374b92282a29aaef3efdf5868116f9034c39dcc"
+  integrity sha512-AHWL1h+nwZvqttjIDNsIaenJ5V0Gkc3bj9LCBv9dRJ2325T+XmntIauO5cy9JFYgv9v9GOXlpo/C6cFMHWjOAA==
   dependencies:
     ajv "^8.8.2"
     ajv-merge-patch "^5.0.1"
+    better-ajv-errors "^1.2.0"
     yaml "2.0.0-9"
 
 "@cnakazawa/watch@^1.0.3":
@@ -1193,6 +1194,11 @@
     debug "^4.1.1"
     minimatch "^3.0.4"
 
+"@humanwhocodes/momoa@^2.0.2":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/momoa/-/momoa-2.0.4.tgz#8b9e7a629651d15009c3587d07a222deeb829385"
+  integrity sha512-RE815I4arJFtt+FVeU1Tgp9/Xvecacji8w/V6XtXsWWH/wz/eNkNbhb+ny/+PlVZjV0rxQpRSQKNKE3lcktHEA==
+
 "@humanwhocodes/object-schema@^1.2.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
@@ -2896,6 +2902,17 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
+better-ajv-errors@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/better-ajv-errors/-/better-ajv-errors-1.2.0.tgz#6412d58fa4d460ff6ccbd9e65c5fef9781cc5286"
+  integrity sha512-UW+IsFycygIo7bclP9h5ugkNH8EjCSgqyFB/yQ4Hqqa1OEYDtb0uFIkYE0b6+CjkgJYVM5UKI/pJPxjYe9EZlA==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@humanwhocodes/momoa" "^2.0.2"
+    chalk "^4.1.2"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0 < 4"
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -7195,6 +7212,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonpointer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
+  integrity sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
@@ -7262,7 +7284,7 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
-leven@^3.1.0:
+leven@^3.1.0, "leven@^3.1.0 < 4":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
@@ -8029,7 +8051,7 @@ nwsapi@^2.2.0:
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-copy@^0.1.0:
   version "0.1.0"