GrafanaUI: Add success state to ClipboardButton (#52069)

* User Experience: apply the same pattern feedback for all copy to clipboard buttons

* add copy icon to all ClipboardButton use cases

* Change primary color for copy to clipboard in create token

* Add success button variant

* Remove copy confirmation from TableCellInspectModal because it's in the base component now

* Design tweaks to copy confirmation

 - Only change the icon to tick to avoid the button changing size
 - Change button to success green
 - Only show copy confirmation state for 2 seconds

* revert TabelCellInspectModal text button back

* revert accidental change to ShareLink

Co-authored-by: joshhunt <josh@trtr.co>

public/app/features/api-keys/ApiKeysAddedModal.tsx

@@ -2,11 +2,7 @@
 import React, { useCallback } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Field, Modal, useStyles2, Input, Icon, ClipboardButton } from '@grafana/ui';
-
-import { notifyApp } from '../../core/actions';
-import { createSuccessNotification } from '../../core/copy/appNotification';
-import { dispatch } from '../../store/store';
+import { Alert, Field, Modal, useStyles2, Input, ClipboardButton } from '@grafana/ui';
 
 export interface Props {
   onDismiss: () => void;
@@ -17,9 +13,7 @@ export interface Props {
 export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.Element {
   const styles = useStyles2(getStyles);
   const getClipboardText = useCallback(() => apiKey, [apiKey]);
-  const onClipboardCopy = () => {
-    dispatch(notifyApp(createSuccessNotification('Content copied to clipboard')));
-  };
+
   return (
     <Modal title="API Key Created" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>
       <Field label="Key">
@@ -28,8 +22,8 @@ export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.E
           value={apiKey}
           readOnly
           addonAfter={
-            <ClipboardButton variant="primary" getText={getClipboardText} onClipboardCopy={onClipboardCopy}>
-              <Icon name="copy" /> Copy
+            <ClipboardButton icon="copy" variant="primary" getText={getClipboardText}>
+              Copy
             </ClipboardButton>
           }
         />