fix: Access parameters on components without error (#112)

Author: Jaryt

src/components/containers/ParametersContainer.tsx

@@ -41,30 +41,33 @@ const ParameterContainer = (props: {
           >
             Add Parameter
           </button>
-          {props.values.parameters?.map((parameter: any) => (
-            <div
-              key={parameter.name}
-              className="p-4 mb-4 w-full border-circle-gray-300 border-2 rounded text-left"
-            >
-              <div className="flex">
-                <p className="font-bold">{parameter.name}</p>
-              </div>
-              {parameter.description && (
-                <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
-                  {parameter.description}
-                </p>
-              )}
-              {parameter.defaultValue ? (
-                <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
-                  {parameter.description}
-                </p>
-              ) : (
-                <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
-                  Required
-                </p>
-              )}
-            </div>
-          ))}
+          {props.values.parameters &&
+            Object.entries(props.values.parameters).map(
+              ([name, parameter]: [string, any]) => (
+                <div
+                  key={name}
+                  className="p-4 mb-4 w-full border-circle-gray-300 border-2 rounded text-left"
+                >
+                  <div className="flex">
+                    <p className="font-bold">{name}</p>
+                  </div>
+                  {parameter.description && (
+                    <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
+                      {parameter.description}
+                    </p>
+                  )}
+                  {parameter.defaultValue ? (
+                    <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
+                      {parameter.description}
+                    </p>
+                  ) : (
+                    <p className="text-sm mt-1 leading-4 whitespace-pre-wrap text-circle-gray-500">
+                      Required
+                    </p>
+                  )}
+                </div>
+              ),
+            )}
         </div>
       )}
     />

src/components/menus/definitions/InspectorDefinitionMenu.tsx

@@ -81,12 +81,12 @@ const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
           }}
           enableReinitialize
           onSubmit={(values) => {
-            const newDefinition = dataMapping.transform(values, definitions);
-            const submitData = props.editing
-              ? { old: unpacked, new: newDefinition }
-              : newDefinition;
-
             if (!props.passBackKey) {
+              const newDefinition = dataMapping.transform(values, definitions);
+              const submitData = props.editing
+                ? { old: unpacked, new: newDefinition }
+                : newDefinition;
+
               submitToStore(submitData);
             }
 
@@ -100,14 +100,18 @@ const InspectorDefinitionMenu = (props: InspectorDefinitionProps) => {
 
             navigateBack({
               distance: 1,
-              apply: (values) => {
+              apply: (parentValues) => {
                 if (props.passBackKey) {
-                  values[props.passBackKey] = [
-                    ...(values[props.passBackKey] || []),
-                    newDefinition,
-                  ];
+                  const { name, ...args } = values;
+
+                  if (parentValues[props.passBackKey]) {
+                    parentValues[props.passBackKey][name] = args;
+                  } else {
+                    parentValues[props.passBackKey] = { [name]: args };
+                  }
                 }
-                return values;
+
+                return parentValues;
               },
             });
             generateConfig();

src/mappings/JobMapping.tsx

@@ -22,6 +22,8 @@ const JobMapping: ComponentMapping<Job, WorkflowJob> = {
    dependsOn: (definitions) => [definitions.commands, definitions.executors],
    */
   transform: ({ name, ...values }, definitions) => {
+    console.log(values)
+
     return parsers.parseJob(
       name,
       values,

src/state/Store.tsx

@@ -247,13 +247,16 @@ const Actions: StoreActions = {
         }
       }
 
+      const values =
+        payload?.apply?.(travelTo.props.values) || travelTo.props.values;
+      const props = {
+        ...travelTo.props,
+        values: values,
+      };
+
       state.navigation = {
         ...travelTo,
-        props: {
-          ...travelTo.props,
-          values:
-            payload?.apply?.(travelTo.props.values) || travelTo.props.values,
-        },
+        props: props,
         jumpedFrom: distance > 1 ? state.navigation : undefined,
       };
     } else {