refactor(environment/edge): show copy token button [EE-3691] (#8497)

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;

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>

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) {

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>
+  );
+}

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}