From e9546c70bdc646675e3a15060125872e79283782 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Sat, 6 Mar 2021 16:08:42 -0700
Subject: [PATCH] ui(admin): add CopyOnClick button to
 NodeConfigurationContainer

---
 .../nodes/NodeConfigurationContainer.tsx      | 24 +++++++++++++------
 .../components/elements/CopyOnClick.tsx       |  8 +++++--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx b/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
index 35bb1302e..86e6669ac 100644
--- a/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx
@@ -1,11 +1,12 @@
-import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
-import { Context } from '@/components/admin/nodes/NodeEditContainer';
-import { ApplicationStore } from '@/state';
-import { Actions, useStoreActions } from 'easy-peasy';
 import React, { useEffect, useState } from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
+import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
+import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
 
 export default () => {
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -32,9 +33,18 @@ export default () => {
     return (
         <div>
             <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
-                <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
-                    {configuration}
-                </pre>
+                <div css={tw`relative`}>
+                    <div css={tw`absolute top-0 right-0`}>
+                        <CopyOnClick text={configuration} hideTextInToast={true}>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5 text-neutral-500 hover:text-neutral-400 cursor-pointer mt-1 mr-1`}>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                            </svg>
+                        </CopyOnClick>
+                    </div>
+                    <pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
+                        {configuration}
+                    </pre>
+                </div>
             </AdminBox>
 
             <AdminBox title={'Auto Deploy'} icon={faDragon}>
diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx
index 3d71b0f8e..1597881cb 100644
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@@ -19,7 +19,7 @@ const Toast = styled.div`
     }
 `;
 
-const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
+const CopyOnClick: React.FC<{ text: any, hideTextInToast?: boolean }> = ({ text, hideTextInToast, children }) => {
     const [ copied, setCopied ] = useState(false);
 
     useEffect(() => {
@@ -45,7 +45,11 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
                     {copied ?
                         <Toast>
                             <div>
-                                <p>Copied &quot;{text}&quot; to clipboard.</p>
+                                {hideTextInToast ?
+                                    <p>Copied text to clipboard.</p>
+                                    :
+                                    <p>Copied &quot;{text}&quot; to clipboard.</p>
+                                }
                             </div>
                         </Toast>
                         :