From 3909c74c00454668f1da6d4484856a1c70d78128 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:21:03 -0500
Subject: [PATCH] Add new CopyableInput component, use in EmbedModal

---
 app/soapbox/components/copyable-input.tsx     | 42 +++++++++++++++++++
 app/soapbox/components/ui/button/button.tsx   | 10 ++---
 .../features/ui/components/embed-modal.tsx    | 14 ++-----
 3 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 app/soapbox/components/copyable-input.tsx

diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
new file mode 100644
index 000000000..4a42452bb
--- /dev/null
+++ b/app/soapbox/components/copyable-input.tsx
@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button, HStack, Input } from './ui';
+
+interface ICopyableInput {
+  /** Text to be copied. */
+  value?: string,
+}
+
+/** An input with copy abilities. */
+const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
+  const input = useRef<HTMLInputElement>(null);
+
+  const selectInput = () => {
+    input.current?.select();
+  };
+
+  return (
+    <HStack alignItems='center'>
+      <Input
+        ref={input}
+        type='text'
+        value={value}
+        className='rounded-r-none'
+        outerClassName='flex-grow'
+        onClick={selectInput}
+        readOnly
+      />
+
+      <Button
+        theme='primary'
+        className='mt-1 h-full rounded-l-none rounded-r-lg'
+        onClick={selectInput}
+      >
+        <FormattedMessage id='input.copy' defaultMessage='Copy' />
+      </Button>
+    </HStack>
+  );
+};
+
+export default CopyableInput;
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 15826ff2d..e3ae339fc 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -12,8 +13,8 @@ interface IButton {
   block?: boolean,
   /** Elements inside the <button> */
   children?: React.ReactNode,
-  /** @deprecated unused */
-  classNames?: string,
+  /** Extra class names for the button. */
+  className?: string,
   /** Prevent the button from being clicked. */
   disabled?: boolean,
   /** URL to an SVG icon to render inside the button. */
@@ -22,8 +23,6 @@ interface IButton {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
   /** A predefined button size. */
   size?: ButtonSizes,
-  /** @deprecated unused */
-  style?: React.CSSProperties,
   /** Text inside the button. Takes precedence over `children`. */
   text?: React.ReactNode,
   /** Makes the button into a navlink, if provided. */
@@ -47,6 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     theme = 'secondary',
     to,
     type = 'button',
+    className,
   } = props;
 
   const themeClass = useButtonStyles({
@@ -72,7 +72,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
 
   const renderButton = () => (
     <button
-      className={themeClass}
+      className={classNames(themeClass, className)}
       disabled={disabled}
       onClick={handleClick}
       ref={ref}
diff --git a/app/soapbox/features/ui/components/embed-modal.tsx b/app/soapbox/features/ui/components/embed-modal.tsx
index a715b50a7..ae149e138 100644
--- a/app/soapbox/features/ui/components/embed-modal.tsx
+++ b/app/soapbox/features/ui/components/embed-modal.tsx
@@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
+import CopyableInput from 'soapbox/components/copyable-input';
 import SafeEmbed from 'soapbox/components/safe-embed';
-import { Modal, Stack, Text, Input, Divider } from 'soapbox/components/ui';
+import { Modal, Stack, Text, Divider } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 import useEmbed from 'soapbox/queries/embed';
 
@@ -22,10 +23,6 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
     }
   }, [isError]);
 
-  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
-    e.currentTarget.select();
-  };
-
   const handleClose = () => {
     dispatch(closeModal('EMBED'));
   };
@@ -40,12 +37,7 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
           <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
         </Text>
 
-        <Input
-          type='text'
-          readOnly
-          value={embed?.html || ''}
-          onClick={handleInputClick}
-        />
+        <CopyableInput value={embed?.html || ''} />
       </Stack>
 
       <div className='py-9'>