Merge pull request #345 from Phillezi/fix-docker-cli-command-windows

small fix for docker-cli command if user is on windows, escape $ with ` instad of \
kthcloud · Feb 4, 2025 · 8e12821 · 8e12821
2 parents 130eaf1 + 881290b
commit 8e12821
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/.env b/.env
@@ -6,4 +6,6 @@ VITE_KEYCLOAK_CLIENT_ID="landing"
 VITE_RANCHER_URL="https://mgmt.cloud.cbh.kth.se"
 VITE_DNS_URL="https://dns.cloud.cbh.kth.se"
 VITE_MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
+# can be comma separated to add more
+VITE_SERVER_PLATFORM="linux/amd64"
 GENERATE_SOURCEMAP=false 
diff --git a/Dockerfile b/Dockerfile
@@ -47,6 +47,8 @@ ENV KEYCLOAK_CLIENT_ID="landing"
 ENV RANCHER_URL="https://mgmt.cloud.cbh.kth.se"
 ENV DNS_URL="https://dns.cloud.cbh.kth.se"
 ENV MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
+# can be comma separated to add more
+ENV SERVER_PLATFORM="linux/amd64"
 
 EXPOSE 3000
 ENTRYPOINT ["/entrypoint.sh"]
diff --git a/src/pages/edit/deployments/GHActions.tsx b/src/pages/edit/deployments/GHActions.tsx
@@ -13,11 +13,13 @@ import {
   Link,
   Paper,
   Stack,
+  Tab,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
   TableRow,
+  Tabs,
   TextareaAutosize,
   Typography,
   useTheme,
@@ -34,17 +36,29 @@ type Secret = {
   value: string;
 };
 
+const MACOS_LINUX_INDEX: number = 0;
+const WINDOWS_INDEX: number = 1;
+
 const GHActions = ({ resource }: { resource: Deployment }) => {
   const { t } = useTranslation();
   const { keycloak, initialized } = useKeycloak();
   const [actionsFile, setActionsFile] = useState<string>("");
   const [cliCommands, setCliCommands] = useState<string>("");
+  const [cliCommandsPS, setCliCommandsPS] = useState<string>("");
   const [redacted, setRedacted] = useState<string>("");
+  const [redactedPS, setRedactedPS] = useState<string>("");
   const [secrets, setSecrets] = useState<Secret[]>([]);
   const [showSecrets, setShowSecrets] = useState(false);
   const [showCliSecrets, setShowCliSecrets] = useState(false);
   const theme: CustomTheme = useTheme();
 
+  const [tabIndex, setTabIndex] = useState(0);
+
+  useEffect(() => {
+    const isWindows = navigator.platform.toLowerCase().includes("win");
+    setTabIndex(isWindows ? WINDOWS_INDEX : MACOS_LINUX_INDEX);
+  }, []);
+
   const loadYaml = async () => {
     if (!(initialized && keycloak.token)) return;
     try {
@@ -60,20 +74,29 @@ const GHActions = ({ resource }: { resource: Deployment }) => {
 
       const commands = [
         `docker login ${registry} -u ${username} -p ${password}`,
-        `docker build -t ${tag} .`,
-        `docker push ${tag}`,
+        `docker buildx build --platform="${import.meta.env.VITE_SERVER_PLATFORM || "linux/amd64"}" -t ${tag} --push .`,
       ];
 
       // escape $ for bash
       const commandString = commands.join("\n").replace(/\$/g, "\\$");
+      // on windows use ` to escape it in powershell
+      const commandStringPS = commands.join("\n").replace(/\$/g, "`$");
       setCliCommands(commandString);
+      setCliCommandsPS(commandStringPS);
       setRedacted(
         commandString
           .replace(password, "********")
           .replace(username, "********")
           .replace(registry, "********")
           .replace(tag, "********")
       );
+      setRedactedPS(
+        commandStringPS
+          .replace(password, "********")
+          .replace(username, "********")
+          .replace(registry, "********")
+          .replace(tag, "********")
+      );
 
       // Get the secrets
       const secrets = [
@@ -119,17 +142,29 @@ const GHActions = ({ resource }: { resource: Deployment }) => {
   return (
     <>
       <Card sx={{ boxShadow: 20 }}>
+        <Tabs
+          value={tabIndex}
+          onChange={(_: any, newIndex: number) => setTabIndex(newIndex)}
+        >
+          <Tab label="MacOS/Linux" value={MACOS_LINUX_INDEX} />
+          <Tab label="Windows" value={WINDOWS_INDEX} />
+        </Tabs>
         <CardHeader
           title={t("deploy-with-docker-cli")}
           subheader={t("deploy-with-docker-cli-subheader")}
         />
+
         <CardContent>
           <TextareaAutosize
             value={
-              cliCommands
+              (tabIndex === WINDOWS_INDEX ? cliCommandsPS : cliCommands)
                 ? showCliSecrets
-                  ? cliCommands
-                  : redacted
+                  ? tabIndex === WINDOWS_INDEX
+                    ? cliCommandsPS
+                    : cliCommands
+                  : tabIndex === WINDOWS_INDEX
+                    ? redactedPS
+                    : redacted
                 : t("loading")
             }
             style={{
@@ -140,8 +175,11 @@ const GHActions = ({ resource }: { resource: Deployment }) => {
             }}
           />
         </CardContent>
+
         <CardActions>
-          <CopyButton content={cliCommands} />
+          <CopyButton
+            content={tabIndex === WINDOWS_INDEX ? cliCommandsPS : cliCommands}
+          />
 
           <Button
             onClick={() => setShowCliSecrets(!showCliSecrets)}