fix to docker build command parsing

frontend/src/components/build/tabs/build-config/BuildArgs.tsx

@@ -0,0 +1,89 @@
+import { Component, createEffect, createSignal, Show } from "solid-js";
+import {
+  combineClasses,
+  parseDotEnvToEnvVars,
+  parseEnvVarseToDotEnv,
+} from "../../../../util/helpers";
+import { useToggle } from "../../../../util/hooks";
+import Flex from "../../../shared/layout/Flex";
+import Grid from "../../../shared/layout/Grid";
+import CenterMenu from "../../../shared/menu/CenterMenu";
+import TextArea from "../../../shared/TextArea";
+import { useConfig } from "../Provider";
+
+const BuildArgs: Component<{}> = (p) => {
+  const { build, userCanUpdate } = useConfig();
+  return (
+    <Grid class={combineClasses("config-item shadow")}>
+      <Flex alignItems="center" justifyContent="space-between">
+        <h1>build args</h1>
+        <Flex alignItems="center" gap="0.2rem">
+          <Show
+            when={
+              !build.docker_build_args?.build_args ||
+              build.docker_build_args.build_args.length === 0
+            }
+          >
+            <div>none</div>
+          </Show>
+          <Show when={userCanUpdate()}>
+            <EditBuildArgs />
+          </Show>
+        </Flex>
+      </Flex>
+    </Grid>
+  );
+};
+
+const EditBuildArgs: Component<{}> = (p) => {
+  const [show, toggle] = useToggle();
+  const [buildArgs, setBuildArgs] = createSignal("");
+  const { build, setBuild } = useConfig();
+  createEffect(() => {
+    setBuildArgs(
+      parseEnvVarseToDotEnv(
+        build.docker_build_args?.build_args
+          ? build.docker_build_args.build_args
+          : []
+      )
+    );
+  });
+  const toggleShow = () => {
+    if (show()) {
+      setBuild("docker_build_args", {
+        build_args: parseDotEnvToEnvVars(buildArgs()),
+      });
+    }
+    toggle();
+  };
+  return (
+    <CenterMenu
+      show={show}
+      toggleShow={toggleShow}
+      title={`${build.name} build args`}
+      target="edit"
+      targetClass="blue"
+      leftOfX={() => (
+        <button class="green" onClick={toggleShow}>
+          confirm
+        </button>
+      )}
+      content={() => (
+        <TextArea
+          class="scroller"
+          value={buildArgs()}
+          onEdit={setBuildArgs}
+          style={{
+            width: "700px",
+            "max-width": "90vw",
+            height: "80vh",
+            padding: "1rem",
+          }}
+          spellcheck={false}
+        />
+      )}
+    />
+  );
+};
+
+export default BuildArgs;

frontend/src/components/build/tabs/build-config/BuildConfig.tsx

@@ -7,6 +7,7 @@ import CliBuild from "./CliBuild";
 import Docker from "./Docker";
 import { useConfig } from "../Provider";
 import Loading from "../../../shared/loading/Loading";
+import BuildArgs from "./BuildArgs";
 
 const BuildConfig: Component<{}> = (p) => {
   const { build, reset, save, userCanUpdate } = useConfig();
@@ -15,6 +16,7 @@ const BuildConfig: Component<{}> = (p) => {
       <Grid class="config">
         <Grid class="config-items scroller">
           <Docker />
+          <BuildArgs />
           <CliBuild />
         </Grid>
         <Show when={userCanUpdate() && build.updated}>

lib/helpers/src/docker/build.rs

@@ -103,9 +103,13 @@ fn image_tags(image_name: &str, version: &Version) -> String {
 }
 
 fn parse_build_args(build_args: &Vec<EnvironmentVar>) -> String {
-    build_args
+    let mut args = build_args
         .iter()
         .map(|p| format!(" --build-arg {}={}", p.variable, p.value))
         .collect::<Vec<String>>()
-        .join("")
+        .join("");
+    if args.len() > 0 {
+        args.push(' ');
+    }
+    args
 }