Update copy functionality (#849)

* remove copy button from docker image tag

* cleanup configuration copy button

* add copy button for azure identity fields

src/components/compact-copy-button/index.tsx

@@ -0,0 +1,29 @@
+import { Button, Icon, IconProps, Tooltip } from '@equinor/eds-core-react';
+import { copy } from '@equinor/eds-icons';
+import { FunctionComponent, useState } from 'react';
+
+import { copyToClipboard } from '../../utils/string';
+
+export const CompactCopyButton: FunctionComponent<{
+  content: string;
+  size?: IconProps['size'] | 14 | 12;
+}> = ({ content, size = 16 }) => {
+  const [copyTitle, setCopyTitle] = useState('Copy');
+  const buttonSize = size + 8 + Math.floor(size / 8);
+
+  return (
+    <Tooltip title={copyTitle} placement="top" enterDelay={300}>
+      <Button
+        variant="ghost_icon"
+        style={{ width: `${buttonSize}px`, height: `${buttonSize}px` }}
+        onMouseLeave={() => setCopyTitle('Copy')}
+        onClick={() => {
+          copyToClipboard(content);
+          setCopyTitle('Copied');
+        }}
+      >
+        <Icon data={copy} size={size as IconProps['size']} />
+      </Button>
+    </Tooltip>
+  );
+};

src/components/configure-application-github/index.tsx

@@ -2,12 +2,10 @@ import {
   Accordion,
   Button,
   Checkbox,
-  Icon,
   List,
   Progress,
   Typography,
 } from '@equinor/eds-core-react';
-import { copy } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import { FunctionComponent, useEffect, useState } from 'react';
 
@@ -19,14 +17,14 @@ import { useRegenerateDeployKeyAndSecret } from './use-regenerate-deploy-key-and
 
 import { Alert } from '../alert';
 import { Code } from '../code';
+import { CompactCopyButton } from '../compact-copy-button';
 import { externalUrls } from '../../externalUrls';
 import {
   ApplicationRegistrationModel,
   ApplicationRegistrationModelValidationMap,
 } from '../../models/radix-api/applications/application-registration';
 import { RequestState } from '../../state/state-utils/request-states';
 import { configVariables } from '../../utils/config';
-import { copyToClipboard } from '../../utils/string';
 
 import './style.css';
 
@@ -245,25 +243,15 @@ export const ConfigureApplicationGithub: FunctionComponent<
                     <List variant="numbered">
                       <List.Item>
                         As Payload URL, use <code>{webhookURL}</code>{' '}
-                        <Button
-                          variant="ghost"
-                          onClick={() => copyToClipboard(webhookURL)}
-                        >
-                          <Icon data={copy} /> Copy
-                        </Button>
+                        <CompactCopyButton content={webhookURL} />
                       </List.Item>
                       <List.Item>
                         Choose <code>application/json</code> as Content type
                       </List.Item>
                       <List.Item>
                         The Shared Secret for this application is{' '}
                         <code>{savedSharedSecret}</code>{' '}
-                        <Button
-                          variant="ghost"
-                          onClick={() => copyToClipboard(savedSharedSecret)}
-                        >
-                          <Icon data={copy} /> Copy
-                        </Button>
+                        <CompactCopyButton content={savedSharedSecret} />
                       </List.Item>
                       <List.Item>Press "Add webhook"</List.Item>
                     </List>

src/components/docker-image/index.tsx

@@ -1,23 +1,13 @@
-import { Button, Icon } from '@equinor/eds-core-react';
-import { copy } from '@equinor/eds-icons';
 import { FunctionComponent, useEffect, useState } from 'react';
 
 import { parseImageTag } from '../../utils/docker';
-import { copyToClipboard } from '../../utils/string';
 
 export const DockerImage: FunctionComponent<{ path: string }> = ({ path }) => {
   const [tag, setTag] = useState('');
 
   useEffect(() => {
-    setTag(parseImageTag(path)?.image);
+    setTag(parseImageTag(path)?.image || '');
   }, [path]);
 
-  return (
-    <>
-      <strong>{tag}</strong>{' '}
-      <Button variant="ghost" onClick={() => copyToClipboard(tag)}>
-        <Icon data={copy} /> Copy
-      </Button>
-    </>
-  );
+  return <strong>{tag}</strong>;
 };

src/components/identity/azure-identity.tsx

@@ -4,6 +4,7 @@ import * as PropTypes from 'prop-types';
 import { FunctionComponent } from 'react';
 
 import { Alert } from '../alert';
+import { CompactCopyButton } from '../compact-copy-button';
 import { externalUrls } from '../../externalUrls';
 
 export interface AzureIdentityProps {
@@ -39,37 +40,47 @@ export const AzureIdentity: FunctionComponent<AzureIdentityProps> = ({
   serviceAccountName,
   clientId,
 }) => (
-  <>
-    <div className="grid grid--gap-medium">
-      <div className="grid grid--gap-small">
+  <div className="grid grid--gap-medium">
+    <div className="grid grid--gap-small">
+      <div>
+        <Typography group="input" variant="label">
+          Client ID (Managed Identity or App Registration)
+        </Typography>
         <div>
-          <Typography group="input" variant="label">
-            Client ID (Managed Identity or App Registration)
-          </Typography>
-          <Typography>{clientId}</Typography>
+          <Typography as="span">{clientId}</Typography>
+          <CompactCopyButton content={clientId} size={14} />
         </div>
+      </div>
+      <div>
+        <Typography group="input" variant="label">
+          Cluster Issuer URL
+        </Typography>
         <div>
-          <Typography group="input" variant="label">
-            Cluster Issuer URL
-          </Typography>
-          <Typography>{oidcIssuerUrl}</Typography>
+          <Typography as="span">{oidcIssuerUrl}</Typography>
+          <CompactCopyButton content={oidcIssuerUrl} size={14} />
         </div>
+      </div>
+      <div>
+        <Typography group="input" variant="label">
+          Namespace
+        </Typography>
         <div>
-          <Typography group="input" variant="label">
-            Namespace
-          </Typography>
-          <Typography>{namespace}</Typography>
+          <Typography as="span">{namespace}</Typography>
+          <CompactCopyButton content={namespace} size={14} />
         </div>
+      </div>
+      <div>
+        <Typography group="input" variant="label">
+          Service Account Name
+        </Typography>
         <div>
-          <Typography group="input" variant="label">
-            Service Account Name
-          </Typography>
-          <Typography>{serviceAccountName}</Typography>
+          <Typography as="span">{serviceAccountName}</Typography>
+          <CompactCopyButton content={serviceAccountName} size={14} />
         </div>
       </div>
-      <WorkloadIdentityHelp />
     </div>
-  </>
+    <WorkloadIdentityHelp />
+  </div>
 );
 
 AzureIdentity.propTypes = {

src/components/page-configuration/change-repository-form.tsx

@@ -3,12 +3,10 @@ import {
   Button,
   Checkbox,
   CircularProgress,
-  Icon,
   List,
   TextField,
   Typography,
 } from '@equinor/eds-core-react';
-import { copy } from '@equinor/eds-icons';
 import * as PropTypes from 'prop-types';
 import {
   ChangeEvent,
@@ -26,14 +24,14 @@ import imageWebhook from '../configure-application-github/webhook01.png';
 import { Alert } from '../alert';
 import { SimpleAsyncResource } from '../async-resource/simple-async-resource';
 import { Code } from '../code';
+import { CompactCopyButton } from '../compact-copy-button';
 import { usePollDeployKeyAndSecret } from '../configure-application-github/use-poll-deploy-key-and-secrets';
 import {
   ApplicationRegistrationModel,
   ApplicationRegistrationModelValidationMap,
 } from '../../models/radix-api/applications/application-registration';
 import { RequestState } from '../../state/state-utils/request-states';
 import { configVariables } from '../../utils/config';
-import { copyToClipboard } from '../../utils/string';
 
 const radixZoneDNS = configVariables.RADIX_CLUSTER_BASE;
 
@@ -265,25 +263,15 @@ export const ChangeRepositoryForm: FunctionComponent<
                     <List variant="numbered" start="8">
                       <List.Item>
                         As Payload URL, use <code>{webhookURL}</code>{' '}
-                        <Button
-                          variant="ghost"
-                          onClick={() => copyToClipboard(webhookURL)}
-                        >
-                          <Icon data={copy} size={24} /> Copy
-                        </Button>
+                        <CompactCopyButton content={webhookURL} />
                       </List.Item>
                       <List.Item>
                         Choose <code>application/json</code> as Content type
                       </List.Item>
                       <List.Item>
                         The Shared Secret for this application is{' '}
                         <code>{app.sharedSecret}</code>{' '}
-                        <Button
-                          variant="ghost"
-                          onClick={() => copyToClipboard(app.sharedSecret)}
-                        >
-                          <Icon data={copy} size={24} /> Copy
-                        </Button>
+                        <CompactCopyButton content={app.sharedSecret} />
                       </List.Item>
                       <List.Item>Press "Add webhook"</List.Item>
                     </List>