fix: orb parsing and workflow modification (#256)

* fix: orb parsing and workflow modification * fix: better config fetching * feat: define orbs on parse * fix: added default logo
CircleCI-Archived · Aug 18, 2022 · 717dca1 · 717dca1
1 parent f5c7361
commit 717dca1
Show file tree

Hide file tree

Showing 8 changed files with 43,775 additions and 215 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0-development",
   "homepage": "https://circleci-public.github.io/visual-config-editor/",
   "dependencies": {
-    "@circleci/circleci-config-sdk": "v0.9.0-alpha.9",
+    "@circleci/circleci-config-sdk": "v0.9.0-alpha.14",
     "@craco/craco": "^6.3.0",
     "@monaco-editor/react": "^4.3.1",
     "algoliasearch": "^4.13.1",
@@ -35,7 +35,6 @@
     "start": "craco start",
     "start-docker": "docker run --rm -p 3000:3000 -v ${PWD}:/app -w /app -it node:16.15.1 yarn install && yarn start",
     "build": "craco build",
-    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

diff --git a/src/components/atoms/OpenConfig.tsx b/src/components/atoms/OpenConfig.tsx
@@ -1,14 +1,11 @@
 import { parsers } from '@circleci/circleci-config-sdk';
-import { OrbImport } from '@circleci/circleci-config-sdk/dist/src/lib/Orb';
+import { OrbImportManifest } from '@circleci/circleci-config-sdk/dist/src/lib/Orb/types/Orb.types';
 import { useRef } from 'react';
 import { parse } from 'yaml';
 import OpenIcon from '../../icons/ui/OpenIcon';
 import { useStoreActions, useStoreState } from '../../state/Hooks';
 import { Button } from '../atoms/Button';
-import {
-  loadOrb,
-  OrbImportWithMeta,
-} from '../menus/definitions/OrbDefinitionsMenu';
+import { loadOrb } from '../menus/definitions/OrbDefinitionsMenu';
 
 export const OpenConfig = () => {
   const inputFile = useRef<HTMLInputElement>(null);
@@ -30,55 +27,55 @@ export const OpenConfig = () => {
 
           const setConfig = (
             yml: string,
-            orbImports?: Record<string, OrbImport>,
+            orbImports?: Record<string, OrbImportManifest>,
           ) => {
-            let config;
+            let parseResult;
             try {
-              config = parsers.parseConfig(yml, orbImports);
+              parseResult = {
+                config: parsers.parseConfig(yml, orbImports),
+                manifests: orbImports,
+              };
             } catch (e) {
-              config = e as Error;
+              parseResult = e as Error;
             }
-            loadConfig(config);
+            loadConfig(parseResult);
           };
 
           e.target.files[0].text().then((yml) => {
             const configBlob = parse(yml);
 
             if ('orbs' in configBlob) {
-              const orbs = parsers.parseOrbImports(configBlob.orbs);
-
-              if (!orbs) {
+              if (!configBlob.orbs) {
                 setConfig(yml);
                 return;
               }
 
-              Promise.all(
-                // get a sneak of the orb imports so we can load the manifests
-                orbs.map((orb) =>
-                  loadOrb(`${orb.namespace}/${orb.name}@${orb.version}`, orb),
-                ),
-              ).then((manifests) => {
-                const orbImports = Object.assign(
-                  {},
-                  ...manifests.map(({ orb, manifest }) => {
-                    if (typeof orb === 'string') {
-                      throw new Error(`Could not load orb ${orb}`);
-                    }
+              const orbPromises = Object.entries(configBlob.orbs).map(
+                ([alias, stanza]) => {
+                  const parsedOrb = parsers.parseOrbImport({ [alias]: stanza });
+
+                  if (!parsedOrb) {
+                    throw new Error(`Could not parse orb ${alias}`);
+                  }
+
+                  return loadOrb(stanza as string, parsedOrb, alias);
+                },
+              );
+
+              Promise.all(orbPromises).then((loadedOrbs) => {
+                const orbImports: Record<string, OrbImportManifest> =
+                  Object.assign(
+                    {},
+                    ...loadedOrbs.map(({ orb, manifest, alias }) => {
+                      if (!alias) {
+                        throw new Error(`Could not load orb ${orb}`);
+                      }
 
-                    return {
-                      [orb.alias]: new OrbImportWithMeta(
-                        orb.alias,
-                        orb.namespace,
-                        orb.name,
-                        manifest,
-                        orb.version,
-                        '',
-                        '', // TODO: implement refetching of url
-                        orb.description,
-                      ),
-                    };
-                  }),
-                );
+                      return {
+                        [alias]: manifest,
+                      };
+                    }),
+                  );
 
                 setConfig(yml, orbImports);
               });

diff --git a/src/components/containers/WorkflowContainer.tsx b/src/components/containers/WorkflowContainer.tsx
@@ -240,7 +240,7 @@ const WorkflowContainer = ({ bgClassName, className }: ElementProps) => {
           }
 
           const workflowNode: Node<any> = {
-            id: v4(),
+            id: data.parameters?.name || data.name || v4(),
             data,
             connectable: true,
             dragHandle: '.node',

diff --git a/src/components/containers/inspector/subtypes/CommandSubtypes.tsx b/src/components/containers/inspector/subtypes/CommandSubtypes.tsx
@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
+import ListProperty from '../../../atoms/form/ListProperty';
 
 export interface CommandSubTypes {
   [command: string]: {
@@ -67,7 +68,14 @@ const commandSubtypes: CommandSubTypes = {
     fields: (
       <>
         <InspectorProperty label="Root" name="parameters.root" required />
-        <InspectorProperty label="Path" name="parameters.path" required />
+        <ListProperty
+          expanded
+          value={['']}
+          label="Paths"
+          addButton
+          name="parameters.paths"
+          required
+        />
       </>
     ),
   },

diff --git a/src/components/menus/definitions/OrbDefinitionsMenu.tsx b/src/components/menus/definitions/OrbDefinitionsMenu.tsx
@@ -53,29 +53,32 @@ export type OrbDefinitionProps = {
   url: string;
 };
 
-export const loadOrb = (orb: string, value?: OrbImport) => {
+export const loadOrb = (orb: string, value?: OrbImport, alias?: string) => {
   const endpoint =
     process.env.NODE_ENV === 'development'
       ? 'http://localhost:3030'
       : 'https://orb-indexer-proxy.herokuapp.com';
 
   return fetch(`${endpoint}/orbs?orb=${orb}`).then(
     (resp) =>
-      new Promise<{ orb: string | OrbImport; manifest: OrbImportManifest }>(
-        (res, rej) => {
-          resp
-            .json()
-            .then((manifest) => {
-              res({
-                orb: value ?? orb,
-                manifest,
-              });
-            })
-            .catch((err) => {
-              rej(err);
+      new Promise<{
+        orb: string | OrbImport;
+        manifest: OrbImportManifest;
+        alias?: string;
+      }>((res, rej) => {
+        resp
+          .json()
+          .then((manifest) => {
+            res({
+              orb: value ?? orb,
+              manifest,
+              alias,
             });
-        },
-      ),
+          })
+          .catch((err) => {
+            rej(err);
+          });
+      }),
   );
 };