From b72aaa56b01f20ef26e22b44ba880bf463f11094 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 29 Nov 2023 17:27:01 +0000
Subject: [PATCH] add copied message to copy button on input (#15366)

relates to #14090

adds copied message when user click on the copy button on inputs.


![image](https://github.com/fleetdm/fleet/assets/1153709/b5d89630-37a3-4b05-9678-ac62da2e6109)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-14090-add-copied-message        |  1 +
 .../forms/fields/InputField/InputField.jsx    | 28 +++++++++++++++----
 .../forms/fields/InputField/_styles.scss      | 16 +++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 changes/issue-14090-add-copied-message

diff --git a/changes/issue-14090-add-copied-message b/changes/issue-14090-add-copied-message
new file mode 100644
index 0000000000..1db5a13294
--- /dev/null
+++ b/changes/issue-14090-add-copied-message
@@ -0,0 +1 @@
+- add "copied!" message to copy button on inputs
diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx
index b6aa74a804..6d7236048f 100644
--- a/frontend/components/forms/fields/InputField/InputField.jsx
+++ b/frontend/components/forms/fields/InputField/InputField.jsx
@@ -60,6 +60,13 @@ class InputField extends Component {
     ignore1password: false,
   };
 
+  constructor() {
+    super();
+    this.state = {
+      copied: false,
+    };
+  }
+
   componentDidMount() {
     const { autofocus } = this.props;
     const { input } = this;
@@ -121,8 +128,12 @@ class InputField extends Component {
 
     const copyValue = (e) => {
       e.preventDefault();
-
-      stringToClipboard(value);
+      stringToClipboard(value).then(() => {
+        this.setState({ copied: true });
+        setTimeout(() => {
+          this.setState({ copied: false });
+        }, 2000);
+      });
     };
 
     if (type === "textarea") {
@@ -175,8 +186,8 @@ class InputField extends Component {
             autoComplete={blockAutoComplete ? "new-password" : ""}
             data-1p-ignore={ignore1password}
           />
-          <div className={`${baseClass}__copy-wrapper`}>
-            {this.props.enableCopy && (
+          {this.props.enableCopy && (
+            <div className={`${baseClass}__copy-wrapper`}>
               <Button
                 variant="text-icon"
                 onClick={copyValue}
@@ -184,8 +195,13 @@ class InputField extends Component {
               >
                 <Icon name="copy" /> Copy
               </Button>
-            )}
-          </div>
+              {this.state.copied && (
+                <span className={`${baseClass}__copied-confirmation`}>
+                  Copied!
+                </span>
+              )}
+            </div>
+          )}
         </div>
       </FormField>
     );
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index a5ee1ad514..76b7a8384f 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -81,10 +81,26 @@
     }
   }
 
+  &__copy-wrapper {
+    position: relative
+  }
+
   &__input-container.copy-enabled {
     display: flex;
     align-items: center;
     gap: $pad-medium;
+
+  }
+
+  &__copied-confirmation {
+    position: absolute;
+    background-color: $ui-light-grey;
+    border: solid 1px $ui-fleet-black-10;
+    border-radius: $border-radius-xlarge;
+    padding: $pad-xxsmall 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -90px;
   }
 }