From 5a375ff05565863c3fc3a49d96125460ddc0ffba Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 16 Feb 2023 09:13:30 +0530
Subject: [PATCH] refactor(environment/edge): show copy token button [EE-3691]
 (#8497)

---
 app/portainer/react/components/index.ts       |  4 ++-
 .../views/endpoints/edit/endpoint.html        | 24 +-----------------
 .../endpoints/edit/endpointController.js      | 11 --------
 .../environments/ItemView/EdgeKeyDisplay.tsx  | 25 +++++++++++++++++++
 .../shared/EdgeAgentTab/EdgeAgentTab.tsx      |  9 +++++++
 5 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx

diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index b176fbd2a..e99e57fdd 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -19,6 +19,7 @@ import { PorAccessControlFormTeamSelector } from '@/react/portainer/access-contr
 import { PorAccessControlFormUserSelector } from '@/react/portainer/access-control/PorAccessControlForm/UsersSelector';
 import { PorAccessManagementUsersSelector } from '@/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector';
 import { AccessTypeSelector } from '@/react/portainer/access-control/EditDetails/AccessTypeSelector';
+import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
 
 import { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
@@ -230,4 +231,5 @@ export const componentsModule = angular
   .component(
     'porAccessManagementUsersSelector',
     r2a(PorAccessManagementUsersSelector, ['onChange', 'options', 'value'])
-  ).name;
+  )
+  .component('edgeKeyDisplay', r2a(EdgeKeyDisplay, ['edgeKey'])).name;
diff --git a/app/portainer/views/endpoints/edit/endpoint.html b/app/portainer/views/endpoints/edit/endpoint.html
index 9b18ec587..97ef69383 100644
--- a/app/portainer/views/endpoints/edit/endpoint.html
+++ b/app/portainer/views/endpoints/edit/endpoint.html
@@ -53,29 +53,7 @@
             hide-async-mode="!endpoint.IsEdgeDevice"
           ></edge-script-form>
 
-          <span class="small text-muted">
-            <div class="col-sm-12 form-section-title" style="margin-top: 25px"> Join token </div>
-            <p class="vertical-center">
-              <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
-              For those pre-staging the edge agent, use the following join token to associate the Edge agent with this environment.
-            </p>
-            <p> You can read more about pre-staging in the userguide available <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a> </p>
-            <div style="margin-top: 10px; overflow-wrap: break-word">
-              <code>
-                {{ endpoint.EdgeKey }}
-              </code>
-              <div class="mt-2">
-                <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()">
-                  <pr-icon icon="'copy'"></pr-icon>
-                  Copy token
-                </span>
-                <span id="copyNotificationEdgeKey" class="vertical-center" style="margin-left: 7px; display: none; color: #23ae89">
-                  <pr-icon icon="'check'"></pr-icon>
-                  copied
-                </span>
-              </div>
-            </div>
-          </span>
+          <edge-key-display edge-key="endpoint.EdgeKey"> </edge-key-display>
         </rd-widget-body>
       </rd-widget>
     </div>
diff --git a/app/portainer/views/endpoints/edit/endpointController.js b/app/portainer/views/endpoints/edit/endpointController.js
index 743398da0..2e38972b2 100644
--- a/app/portainer/views/endpoints/edit/endpointController.js
+++ b/app/portainer/views/endpoints/edit/endpointController.js
@@ -103,17 +103,6 @@ function EndpointController(
     SecurityFormData: new EndpointSecurityFormData(),
   };
 
-  $scope.copyEdgeAgentKey = function () {
-    clipboard.copyText($scope.endpoint.EdgeKey);
-    $('#copyNotificationEdgeKey').show().fadeOut(2500);
-  };
-
-  $scope.onToggleAllowSelfSignedCerts = function onToggleAllowSelfSignedCerts(checked) {
-    return $scope.$evalAsync(() => {
-      $scope.state.allowSelfSignedCerts = checked;
-    });
-  };
-
   $scope.onDisassociateEndpoint = async function () {
     confirmDisassociate().then((confirmed) => {
       if (confirmed) {
diff --git a/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx b/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx
new file mode 100644
index 000000000..5b6860e03
--- /dev/null
+++ b/app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx
@@ -0,0 +1,25 @@
+import { CopyButton } from '@@/buttons';
+import { FormSection } from '@@/form-components/FormSection';
+import { TextTip } from '@@/Tip/TextTip';
+
+export function EdgeKeyDisplay({ edgeKey }: { edgeKey: string }) {
+  return (
+    <FormSection title="Join token">
+      <TextTip color="blue">
+        For those pre-staging the edge agent, use the following join token to
+        associate the Edge agent with this environment.
+      </TextTip>
+
+      <p className="small text-muted">
+        You can read more about pre-staging in the user-guide available{' '}
+        <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a>
+      </p>
+
+      <div className="mt-2 break-words">
+        <code>{edgeKey}</code>
+      </div>
+
+      <CopyButton copyText={edgeKey}>Copy token</CopyButton>
+    </FormSection>
+  );
+}
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
index 118efb107..2133e1ffd 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
@@ -5,6 +5,7 @@ import { Environment } from '@/react/portainer/environments/types';
 import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
 import { CommandTab } from '@/react/edge/components/EdgeScriptForm/scripts';
 import { OS, EdgeInfo } from '@/react/edge/components/EdgeScriptForm/types';
+import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
 
 import { Button } from '@@/buttons';
 
@@ -38,6 +39,14 @@ export function EdgeAgentTab({
 
       {edgeInfo && (
         <>
+          <div className="clear-both" />
+
+          <hr />
+
+          <EdgeKeyDisplay edgeKey={edgeInfo.key} />
+
+          <hr />
+
           <EdgeScriptForm
             edgeInfo={edgeInfo}
             commands={commands}