add copy to clipboard to web editor (#9009)

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -15,6 +15,7 @@ export interface Props {
   displayText?: string;
   className?: string;
   color?: ComponentProps<typeof Button>['color'];
+  indicatorPosition?: 'left' | 'right';
 }
 
 export function CopyButton({
@@ -23,12 +24,30 @@ export function CopyButton({
   displayText = 'copied',
   className,
   color,
+  indicatorPosition = 'right',
   children,
 }: PropsWithChildren<Props>) {
   const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
 
+  function copiedIndicator() {
+    return (
+      <span
+        className={clsx(
+          copiedSuccessfully && styles.fadeout,
+          styles.copyButton,
+          'mx-1',
+          'vertical-center'
+        )}
+      >
+        <Icon icon={Check} />
+        {displayText && <span className="space-left">{displayText}</span>}
+      </span>
+    );
+  }
+
   return (
     <div className={styles.container}>
+      {indicatorPosition === 'left' && copiedIndicator()}
       <Button
         className={className}
         color={color}
@@ -37,21 +56,11 @@ export function CopyButton({
         title="Copy Value"
         type="button"
         icon={Copy}
+        disabled={!copyText}
       >
         {children}
       </Button>
-
-      <span
-        className={clsx(
-          copiedSuccessfully && styles.fadeout,
-          styles.copyButton,
-          'space-left',
-          'vertical-center'
-        )}
-      >
-        <Icon icon={Check} />
-        {displayText && <span className="space-left">{displayText}</span>}
-      </span>
+      {indicatorPosition === 'right' && copiedIndicator()}
     </div>
   );
 }