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

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}