fix: Render step names correctly (#96)

* refactor: Upgraded steps to use parsing

* refactor: removed nullish from map

Author: Jaryt

src/components/atoms/form/ListProperty.tsx

@@ -54,7 +54,6 @@ bg-white border border-circle-gray-300 rounded-md2 flex flex-row"
   );
 };
 
-// TODO: Refactor
 const ListProperty = ({
   label,
   values,
@@ -63,6 +62,7 @@ const ListProperty = ({
   ...props
 }: InspectorFieldProps & ListPropertyProps) => {
   const [field] = useField(props);
+
   return (
     <CollapsibleList
       title={label}
@@ -91,9 +91,9 @@ const ListProperty = ({
                     ref={provided.innerRef}
                     className="p-2 pr-0"
                   >
-                    {values?.map((cmd: any, index: number) => (
+                    {Object.keys(values[0]).map((cmd: any, index: number) => (
                       <ListItem
-                        name={cmd.name}
+                        name={cmd}
                         index={index}
                         arrayHelper={arrayHelper}
                       />

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, flatten: true },
+                        menuProps: { dataType: props.type },
                       },
                     }
                   : {
                       component: InspectorDefinitionMenuNav,
-                      props: { dataType: props.type, flatten: true },
+                      props: { dataType: props.type },
                     },
               )
             }

src/components/containers/inspector/CommandInspector.tsx

@@ -18,7 +18,6 @@ const NewButton = (
     <button
       type="button"
       onClick={() => {
-
         navigateTo({
           component: SubTypeMenuNav,
           props: {

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

@@ -1,22 +1,19 @@
-import { commands } from '@circleci/circleci-config-sdk';
-import { Command } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Commands/exports/Command';
 import { Field } from 'formik';
 import { ReactElement } from 'react';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 
 export interface CommandSubTypes {
   [command: string]: {
-    text: string;
+    name: string;
     description?: string;
     summary?: (command: any) => ReactElement;
     fields: ReactElement;
-    generate: (values: any) => Command;
   };
 }
 
 const commandSubtypes: CommandSubTypes = {
   run: {
-    text: 'Run a command',
+    name: 'Run a command',
     description: 'Used for invoking all command-line programs',
     summary: (command) => (
       <p className="inline">{command.parameters.command}</p>
@@ -51,17 +48,15 @@ const commandSubtypes: CommandSubTypes = {
         </InspectorProperty>
       </div>
     ),
-    generate: (values) => new commands.Run({ ...values.parameters }),
   },
   checkout: {
-    text: 'Checkout',
+    name: 'Checkout',
     description:
       'A special step used to check out source code to the configured path',
     fields: <InspectorProperty label="Path" name="parameters.path" />,
-    generate: (values) => new commands.Checkout({ ...values.parameters }),
   },
   persist_to_workspace: {
-    text: 'Persist To Workspace',
+    name: 'Persist To Workspace',
     description:
       'Persist a temporary file to be used by another job in the workflow',
     fields: (
@@ -70,21 +65,14 @@ const commandSubtypes: CommandSubTypes = {
         <InspectorProperty label="Path" name="parameters.path" required />
       </div>
     ),
-    generate: (values) =>
-      new commands.workspace.Persist({
-        root: values.parameters.root,
-        paths: [values.parameters.path],
-      }),
   },
   attach_workspace: {
-    text: 'Attach Workspace',
+    name: 'Attach Workspace',
     description: 'Attach the workflow’s workspace to the current container',
     fields: <InspectorProperty label="At" name="parameters.at" required />,
-    generate: (values) =>
-      new commands.workspace.Attach({ ...values.parameters }),
   },
   store_artifacts: {
-    text: 'Store Artifacts',
+    name: 'Store Artifacts',
     description: 'Step to store artifacts such as logs and binaries',
     fields: (
       <div>
@@ -102,17 +90,14 @@ const commandSubtypes: CommandSubTypes = {
         ></Field>
       </div>
     ),
-    generate: (values) => new commands.StoreArtifacts({ ...values.parameters }),
   },
   store_test_results: {
-    text: 'Store Test Results',
+    name: 'Store Test Results',
     description: 'Upload and store test results for a build',
     fields: <InspectorProperty label="Path" name="parameters.path" required />,
-    generate: (values) =>
-      new commands.StoreTestResults({ ...values.parameters }),
   },
   save_cache: {
-    text: 'Save Cache',
+    name: 'Save Cache',
     description:
       'Generates and stores a cache of a file or directory in object storage',
     fields: (
@@ -127,12 +112,6 @@ const commandSubtypes: CommandSubTypes = {
         </InspectorProperty>
       </div>
     ),
-    generate: (values) =>
-      new commands.cache.Save({
-        paths: [values.parameters.path],
-        key: values.parameters.key,
-        when: values.parameters.when,
-      }),
   },
 };
 

src/components/menus/SubTypeMenu.tsx

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

src/components/menus/definitions/InspectorDefinitionMenu.tsx

@@ -1,5 +1,4 @@
 import { Form, Formik } from 'formik';
-import GenerableMapping from '../../../mappings/ComponentMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
 import { DataModel, NavigationComponent } from '../../../state/Store';
 import BreadCrumbs from '../../containers/BreadCrumbs';
@@ -42,8 +41,10 @@ const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
       return props.values;
     }
 
-    return props.subtype ? dataMapping?.defaults[props.subtype] : dataMapping?.defaults;
-  }
+    return props.subtype
+      ? dataMapping?.defaults[props.subtype]
+      : dataMapping?.defaults;
+  };
 
   const tabs = ['PROPERTIES'];
   const unpacked = getValues();
@@ -134,7 +135,7 @@ const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
                         className="p-4 mb-4 w-full border-circle-gray-300 border-2 rounded text-left"
                         type="button"
                         onClick={() => {
-                          props.onSelectSubtype();
+                          props.selectSubtype();
                         }}
                       >
                         <p className="font-bold">

src/components/menus/definitions/StepDefinitionMenu.tsx

@@ -25,16 +25,19 @@ const StepPropertiesMenu = (
         <h1 className="ml-6 text-2xl py-2 font-bold">New Step</h1>
       </header>
       <Formik
-        initialValues={{}}
+        initialValues={{ parameters: undefined }}
         enableReinitialize={true}
-        onSubmit={(parameters) => {
+        onSubmit={(step) => {
+
           navigateBack({
             distance: 1,
             apply: (values: any) => {
+              const name = builtIn ? props.subtype: customCommand?.name;
+
               values.steps = [
                 ...values.steps,
                 {
-                  [props.subtype as string]: parameters,
+                  [name as string]: step.parameters,
                 },
               ];
 
@@ -51,12 +54,12 @@ const StepPropertiesMenu = (
                   className="p-4 mb-4 w-full border-circle-gray-300 border-2 rounded text-left"
                   type="button"
                   onClick={() => {
-                    props.onSelectSubtype();
+                    props.selectSubtype();
                   }}
                 >
                   <p className="font-bold">
                     {builtInSubtype
-                      ? builtInSubtype?.text
+                      ? builtInSubtype?.name
                       : customCommand?.name}
                   </p>
                   <p className="text-sm mt-1 leading-4 text-circle-gray-500">
@@ -82,9 +85,5 @@ const StepPropertiesMenu = (
     </div>
   );
 };
-// const StepPropertiesMenuNav: NavigationComponent = {
-//   Component: StepPropertiesMenu,
-//   Label: () => <p>New Step</p>,
-// };
 
 export default StepPropertiesMenu;

src/components/menus/definitions/subtypes/StepTypePage.tsx

@@ -27,7 +27,7 @@ const StepTypePage = (props: SubTypeSelectPageProps<string | CustomCommand>) =>
                 props.setSubtype(subtype);
               }}
             >
-              <p className="font-bold">{commandSubtypes[subtype].text}</p>
+              <p className="font-bold">{commandSubtypes[subtype].name}</p>
               <p className="text-sm mt-1 leading-4 text-circle-gray-500">
                 {commandSubtypes[subtype].description}
               </p>