From b1b0a7646523658d595d61560b42daf0e142ee7e Mon Sep 17 00:00:00 2001
From: itsconquest <william.conquest@portainer.io>
Date: Fri, 29 Apr 2022 09:44:34 +1200
Subject: [PATCH] fix(edge): fix formatting of scripts for release [EE-2987]
 (#6794)

* fix(edge) fix formatting for release [EE-2987]

* fix(edge) EE-2987 fix edge agent command formatting

Co-authored-by: Simon Meng <simon.meng@portainer.io>
---
 .../components/EdgeScriptForm/EdgeScriptForm.tsx   |  4 ++--
 .../EdgeScriptForm/{Scripts.tsx => ScriptTabs.tsx} | 14 ++++++--------
 .../components/Button/CopyButton/useCopy.ts        |  5 ++---
 app/portainer/components/Code/Code.module.css      |  3 ++-
 4 files changed, 12 insertions(+), 14 deletions(-)
 rename app/edge/components/EdgeScriptForm/{Scripts.tsx => ScriptTabs.tsx} (96%)

diff --git a/app/edge/components/EdgeScriptForm/EdgeScriptForm.tsx b/app/edge/components/EdgeScriptForm/EdgeScriptForm.tsx
index aa3d33c65..dcf0da033 100644
--- a/app/edge/components/EdgeScriptForm/EdgeScriptForm.tsx
+++ b/app/edge/components/EdgeScriptForm/EdgeScriptForm.tsx
@@ -5,7 +5,7 @@ import { r2a } from '@/react-tools/react2angular';
 import { useSettings } from '@/portainer/settings/settings.service';
 
 import { EdgePropertiesForm } from './EdgePropertiesForm';
-import { Scripts } from './Scripts';
+import { ScriptTabs } from './ScriptTabs';
 import { EdgeProperties } from './types';
 
 interface Props {
@@ -43,7 +43,7 @@ export function EdgeScriptForm({ edgeKey, edgeId }: Props) {
         hideIdGetter={edgeId !== undefined}
       />
 
-      <Scripts
+      <ScriptTabs
         values={edgeProperties}
         agentVersion={agentVersion}
         edgeKey={edgeKey}
diff --git a/app/edge/components/EdgeScriptForm/Scripts.tsx b/app/edge/components/EdgeScriptForm/ScriptTabs.tsx
similarity index 96%
rename from app/edge/components/EdgeScriptForm/Scripts.tsx
rename to app/edge/components/EdgeScriptForm/ScriptTabs.tsx
index ccf7bd561..dc300a941 100644
--- a/app/edge/components/EdgeScriptForm/Scripts.tsx
+++ b/app/edge/components/EdgeScriptForm/ScriptTabs.tsx
@@ -49,7 +49,7 @@ interface Props {
   onPlatformChange(platform: Platform): void;
 }
 
-export function Scripts({
+export function ScriptTabs({
   agentVersion,
   values,
   edgeKey,
@@ -134,7 +134,7 @@ function buildLinuxStandaloneCommand(
     )
   );
 
-  return `${edgeIdScript ? `PORTAINER_EDGE_ID=$(${edgeIdScript}) \n\n` : ''}
+  return `${edgeIdScript ? `PORTAINER_EDGE_ID=$(${edgeIdScript}) \n\n` : ''}\
 docker run -d \\
   -v /var/run/docker.sock:/var/run/docker.sock \\
   -v /var/lib/docker/volumes:/var/lib/docker/volumes \\
@@ -168,7 +168,7 @@ function buildWindowsStandaloneCommand(
 
   return `${
     edgeIdScript ? `$Env:PORTAINER_EDGE_ID = "@(${edgeIdScript})" \n\n` : ''
-  }
+  }\
 docker run -d \\
   --mount type=npipe,src=\\\\.\\pipe\\docker_engine,dst=\\\\.\\pipe\\docker_engine \\
   --mount type=bind,src=C:\\ProgramData\\docker\\volumes,dst=C:\\ProgramData\\docker\\volumes \\
@@ -199,7 +199,7 @@ function buildLinuxSwarmCommand(
     'AGENT_CLUSTER_ADDR=tasks.portainer_edge_agent',
   ]);
 
-  return `${edgeIdScript ? `PORTAINER_EDGE_ID=$(${edgeIdScript}) \n\n` : ''}
+  return `${edgeIdScript ? `PORTAINER_EDGE_ID=$(${edgeIdScript}) \n\n` : ''}\
 docker network create \\
   --driver overlay \\
   portainer_agent_network;
@@ -270,13 +270,11 @@ function buildKubernetesCommand(
   const idEnvVar = edgeIdScript
     ? `PORTAINER_EDGE_ID=$(${edgeIdScript}) \n\n`
     : '';
+  const envVarsTrimmed = envVars.trim();
   const edgeIdVar = !edgeIdScript && edgeId ? edgeId : '$PORTAINER_EDGE_ID';
   const selfSigned = allowSelfSignedCerts ? '1' : '0';
 
-  return `${idEnvVar}curl https://downloads.portainer.io/ce${agentShortVersion}/portainer-edge-agent-setup.sh | 
-  bash -s -- "${edgeIdVar}" \\
-    "${edgeKey}" \\
-    "${selfSigned}" "${agentSecret}" "${envVars}"`;
+  return `${idEnvVar}curl https://downloads.portainer.io/ce${agentShortVersion}/portainer-edge-agent-setup.sh | bash -s -- "${edgeIdVar}" "${edgeKey}" "${selfSigned}" "${agentSecret}" "${envVarsTrimmed}"`;
 }
 
 function buildDefaultEnvVars(
diff --git a/app/portainer/components/Button/CopyButton/useCopy.ts b/app/portainer/components/Button/CopyButton/useCopy.ts
index b7712790f..edaf8ff7e 100644
--- a/app/portainer/components/Button/CopyButton/useCopy.ts
+++ b/app/portainer/components/Button/CopyButton/useCopy.ts
@@ -21,13 +21,12 @@ export function useCopy(copyText: string, fadeDelay = 1000) {
       navigator.clipboard.writeText(copyText);
     } else {
       // https://stackoverflow.com/a/57192718
-      const inputEl = document.createElement('input');
+      const inputEl = document.createElement('textarea');
       inputEl.value = copyText;
-      inputEl.type = 'text';
       document.body.appendChild(inputEl);
       inputEl.select();
       document.execCommand('copy');
-      inputEl.type = 'hidden';
+      inputEl.hidden = true;
       document.body.removeChild(inputEl);
     }
     setCopiedSuccessfully(true);
diff --git a/app/portainer/components/Code/Code.module.css b/app/portainer/components/Code/Code.module.css
index 572f48326..f5e5da4b3 100644
--- a/app/portainer/components/Code/Code.module.css
+++ b/app/portainer/components/Code/Code.module.css
@@ -1,7 +1,8 @@
 .code {
   display: block;
   white-space: pre-wrap;
-  padding: 16px 90px;
+  word-break: break-word;
+  padding: 20px;
 }
 
 .root {