Chore: upgraded to newest sdk alpha

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.5.0-alpha.11",
+    "@circleci/circleci-config-sdk": "0.6.0-alpha.2",
     "@craco/craco": "^6.3.0",
     "@monaco-editor/react": "^4.3.1",
     "@testing-library/jest-dom": "^5.11.4",

src/components/atoms/Definition.tsx

@@ -1,8 +1,9 @@
+import { Generable } from '@circleci/circleci-config-sdk/dist/src/lib/Components';
 import ComponentMapping from '../../mappings/ComponentMapping';
 import { useStoreActions } from '../../state/Hooks';
 import { InspectorDefinitionMenuNav } from '../menus/definitions/InspectorDefinitionMenu';
 
-const Definition = (props: { data: any; type: ComponentMapping }) => {
+const Definition = (props: { data: Generable; type: ComponentMapping }) => {
   const Summary = props.type.components.summary;
   const navigateTo = useStoreActions((actions) => actions.navigateTo);
   const setDragging = useStoreActions((actions) => actions.setDragging);
@@ -20,9 +21,16 @@ const Definition = (props: { data: any; type: ComponentMapping }) => {
         }
       }}
       onClick={(e) => {
+        // this generated object should always have a single key
+        const generated = props.data.generate() as { [key: string]: object };
+        const flattened = Object.entries(generated).map(([key, value]) => ({
+          name: key,
+          ...value,
+        }))[0];
+
         navigateTo({
           component: InspectorDefinitionMenuNav,
-          props: { editing: true, values: props.data, dataType: props.type },
+          props: { editing: true, values: flattened, dataType: props.type },
         });
       }}
     >

src/components/atoms/form/ListProperty.tsx

@@ -1,4 +1,4 @@
-import { FieldArray, useField } from 'formik';
+import { ArrayHelpers, FieldArray, useField } from 'formik';
 import { ReactElement } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
@@ -14,6 +14,47 @@ export type ListPropertyProps = InspectorFieldProps & {
   emptyText?: string;
 };
 
+export type ListItemProps = {
+  index: number;
+  name: string;
+  arrayHelper: ArrayHelpers;
+};
+
+const ListItem = ({ index, name, arrayHelper }: ListItemProps) => {
+  return (
+    <Draggable key={index} draggableId={`${index}`} index={index}>
+      {(provided, snapshot) => (
+        <div
+          className="w-full mb-2 p-1 px-3 text-sm 
+bg-white border border-circle-gray-300 rounded-md2 flex flex-row"
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+        >
+          <button
+            className="flex-1 cursor-pointer text-left text-circle-black leading-6"
+            type="button"
+          >
+            {name}
+          </button>
+          <div className="ml-auto mr-3" {...provided.dragHandleProps}>
+            <DragListIcon className="w-4 h-6 py-1" color="#AAAAAA" />
+          </div>
+          <button
+            onClick={() => {
+              arrayHelper.remove(index);
+            }}
+            type="button"
+            className="my-auto"
+          >
+            <DeleteItemIcon className="w-3 h-3" color="#AAAAAA" />
+          </button>
+        </div>
+      )}
+    </Draggable>
+  );
+};
+
+// TODO: Refactor
 const ListProperty = ({
   label,
   values,
@@ -51,48 +92,11 @@ const ListProperty = ({
                     className="p-2 pr-0"
                   >
                     {values?.map((cmd: any, index: number) => (
-                      <Draggable
-                        key={index}
-                        draggableId={`${index}`}
+                      <ListItem
+                        name={cmd.name}
                         index={index}
-                      >
-                        {(provided, snapshot) => (
-                          <div
-                            className="w-full mb-2 p-1 px-3 text-sm 
-                      bg-white border border-circle-gray-300 rounded-md2 flex flex-row"
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                          >
-                            <button
-                              className="flex-1 cursor-pointer text-left text-circle-black leading-6"
-                              type="button"
-                            >
-                              {cmd.name}
-                            </button>
-                            <div
-                              className="ml-auto mr-3"
-                              {...provided.dragHandleProps}
-                            >
-                              <DragListIcon
-                                className="w-4 h-6 py-1"
-                                color="#AAAAAA"
-                              />
-                            </div>
-                            <button
-                              onClick={() => {
-                                arrayHelper.remove(index);
-                              }}
-                              type="button"
-                              className="my-auto"
-                            >
-                              <DeleteItemIcon
-                                className="w-3 h-3"
-                                color="#AAAAAA"
-                              />
-                            </button>
-                          </div>
-                        )}
-                      </Draggable>
+                        arrayHelper={arrayHelper}
+                      />
                     ))}
                     {provided.placeholder}
                   </div>

src/components/atoms/summaries/ExecutorSummary.tsx

@@ -1,4 +1,4 @@
-import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
+import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
 import ExecutorIcon from '../../../icons/components/ExecutorIcon';
 
 const ExecutorSummary: React.FunctionComponent<{ data: ReusableExecutor }> = (

src/components/containers/DefinitionsContainer.tsx

@@ -42,12 +42,12 @@ const DefinitionsContainer = (props: DefinitionsProps) => {
                       props: {
                         typePage: props.type.subtypes?.component,
                         menuPage: InspectorDefinitionMenu,
-                        menuProps: { dataType: props.type },
+                        menuProps: { dataType: props.type, flatten: true },
                       },
                     }
                   : {
                       component: InspectorDefinitionMenuNav,
-                      props: { dataType: props.type },
+                      props: { dataType: props.type, flatten: true },
                     },
               )
             }

src/components/containers/inspector/CommandInspector.tsx

@@ -8,11 +8,37 @@ import StepPropertiesMenu from '../../menus/definitions/StepDefinitionMenu';
 import StepTypePageNav from '../../menus/definitions/subtypes/StepTypePage';
 import SubTypeMenuNav from '../../menus/SubTypeMenu';
 
-const CommandInspector = (
-  props: FormikValues & { definitions: DefinitionModel },
+const NewButton = (
+  props: FormikValues & {
+    definitions: DefinitionModel;
+  },
 ) => {
   const navigateTo = useStoreActions((actions) => actions.navigateTo);
+  return (
+    <button
+      type="button"
+      onClick={() => {
+
+        navigateTo({
+          component: SubTypeMenuNav,
+          props: {
+            typePage: StepTypePageNav,
+            menuPage: StepPropertiesMenu,
+            passThrough: { dataType: CommandMapping },
+          },
+          values: props.values,
+        });
+      }}
+      className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
+    >
+      New
+    </button>
+  );
+};
 
+const CommandInspector = (
+  props: FormikValues & { definitions: DefinitionModel },
+) => {
   return (
     <div>
       <InspectorProperty
@@ -29,26 +55,8 @@ const CommandInspector = (
         expanded
         required
         emptyText="No steps defined yet. At least one step is required."
-        titleExpanded={
-          <button
-            type="button"
-            onClick={() => {
-              navigateTo({
-                component: SubTypeMenuNav,
-                props: {
-                  typePage: StepTypePageNav,
-                  menuPage: StepPropertiesMenu,
-                  passThrough: { dataType: CommandMapping },
-                },
-                values: props.values,
-              });
-            }}
-            className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
-          >
-            New
-          </button>
-        }
-      ></ListProperty>
+        titleExpanded={<NewButton values={props.values} definitions={props.definitions} />}
+      />
     </div>
   );
 };

src/components/containers/inspector/ExecutorInspector.tsx

@@ -4,29 +4,48 @@ import InspectorProperty from '../../atoms/form/InspectorProperty';
 import { executorSubtypes } from './subtypes/ExecutorSubtypes';
 
 const ExecutorInspector = (
-  props: FormikValues & { definitions: DefinitionModel },
+  props: FormikValues & {
+    definitions: DefinitionModel;
+    subtype?: string;
+  },
 ) => {
+  if (!props.subtype) {
+    return <div>
+      Something went wrong!
+    </div>;
+  }
+
   return (
     <div>
       <InspectorProperty label="Name" name="name" required />
-      <InspectorProperty label="Description" name="executor.parameters.description" as="textarea" />
+      <InspectorProperty
+        label="Description"
+        name={`${props.values.type}.parameters.description`}
+        as="textarea"
+      />
       <InspectorProperty
         label="Resource Class"
         name="resource_class"
         required
         as="select"
       >
-        {executorSubtypes[props.values.type]?.resourceClasses?.map(
+        {executorSubtypes[props.subtype]?.resourceClasses?.map(
           (resourceClass) => (
             <option value={resourceClass} key={resourceClass}>
               {resourceClass}
             </option>
           ),
         )}
       </InspectorProperty>
-      {executorSubtypes[props.values.type]?.fields}
-      <InspectorProperty label="Shell" name="executor.parameters.shell" />
-      <InspectorProperty label="Working Directory" name="executor.parameters.working_directory" />
+      {executorSubtypes[props.subtype]?.fields}
+      <InspectorProperty
+        label="Shell"
+        name={`${props.values.type}.parameters.shell`}
+      />
+      <InspectorProperty
+        label="Working Directory"
+        name={`${props.values.type}.parameters.working_directory`}
+      />
     </div>
   );
 };

src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx

@@ -1,18 +1,17 @@
-import { executor } from '@circleci/circleci-config-sdk';
-import { DockerExecutor, MachineExecutor, MacOSExecutor, WindowsExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
+import { executors } from '@circleci/circleci-config-sdk';
 import { SubTypeMapping } from '../../../../mappings/ComponentMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 
 export interface ExecutorSubTypes {
   [type: string]: SubTypeMapping & {
     resourceClasses: string[];
-  };  
+  };
 }
 
 const executorSubtypes: ExecutorSubTypes = {
   docker: {
     text: 'Docker',
-    component: executor.DockerExecutor,
+    component: executors.DockerExecutor,
     resourceClasses: [
       'small',
       'medium',
@@ -23,34 +22,35 @@ const executorSubtypes: ExecutorSubTypes = {
       '2xlarge+',
     ],
     fields: (
-      <InspectorProperty label="Image" name="executor.image.image" required />
+      <InspectorProperty label="Image" name="docker[0].image" required />
     ),
     docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-docker',
     description: 'Steps run in container with provided image',
   },
   machine: {
     text: 'Machine',
-    component: executor.MachineExecutor,
+    component: executors.MachineExecutor,
     resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
-    fields: <InspectorProperty label="Image" name="executor.image" required />,
+    fields: <InspectorProperty label="Image" name="machine.image" required />,
     docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-machine',
     description: 'Steps run on Linux Virtual Machine',
   },
   macos: {
     text: 'MacOS',
-    component: executor.MacOSExecutor,
+    component: executors.MacOSExecutor,
     resourceClasses: ['medium', 'large'],
-    fields: <InspectorProperty label="Xcode" name="executor.xcode" required />,
+    fields: <InspectorProperty label="Xcode" name="macos.xcode" required />,
     docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-macos',
     description:
       'Steps run on macOS Virtual Machine with specific Xcode version',
   },
   windows: {
     text: 'Windows',
-    component: executor.WindowsExecutor,
-    resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
-    fields: <InspectorProperty label="Image" name="executor.image" required />,
-    docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-the-windows-executor',
+    component: executors.WindowsExecutor,
+    resourceClasses: ['windows.medium', 'windows.large', 'windows.xlarge', 'windows.2xlarge'],
+    fields: <InspectorProperty label="Image" name="machine.image" required />,
+    docsLink:
+      'https://circleci.com/docs/2.0/executor-types/#using-the-windows-executor',
     description: 'Steps run on Windows Virtual Machine',
   },
 };

src/components/containers/inspector/subtypes/ParameterSubtypes.tsx

@@ -1,4 +1,4 @@
-import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
+import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
 import { SubTypeMapping } from '../../../../mappings/ComponentMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 

src/components/menus/SubTypeMenu.tsx

@@ -14,7 +14,7 @@ export type SubTypeSelectPageProps<T> = {
 };
 export type SubTypeMenuPageProps<T> = {
   subtype: SubTypeReference<T>;
-  selectSubtype: () => void;
+  onSelectSubtype: () => void;
 };
 export interface SelectedSubType<T> {
   current?: SubTypeReference<T>;
@@ -42,7 +42,7 @@ const SubTypeMenu = <SubTypeRef,>(props: SubTypeMenuProps<SubTypeRef>) => {
       {subtype?.current ? (
         <SubTypeMenuPage
           subtype={subtype.current}
-          selectSubtype={navBack}
+          onSelectSubtype={navBack}
           {...props.menuProps}
         />
       ) : (