Success message when link to online editor is copied.

apache · Jan 7, 2020 · c4a1bbf · c4a1bbf
1 parent 6d8a3e0
commit c4a1bbf
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git a/packages/chrome-extension/resources/style.css b/packages/chrome-extension/resources/style.css
@@ -112,6 +112,19 @@
   color: #959595;
 }
 
+.kogito-github-action-alert {
+  background-color: #1F1F1F;
+  color: #FFFFFF;
+  text-align: center;
+  padding: 3px 10px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.kogito-github-action-alert:after {
+  border-bottom-color: #1F1F1F;
+}
+
 .info-icon-container {
   margin-left: -9px !important;
   font-size: 0.8em;

diff --git a/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx b/packages/chrome-extension/src/app/components/single/SingleEditorToolbar.tsx
@@ -17,6 +17,11 @@
 import * as React from "react";
 import { useRef } from "react";
 import { useGlobals } from "../common/GlobalContext";
+import { useState } from "react";
+import { useCallback } from "react";
+import { useEffect } from "react";
+
+const ALERT_AUTO_CLOSE_TIMEOUT = 3000;
 
 export function SingleEditorToolbar(props: {
   readonly: boolean;
@@ -29,7 +34,9 @@ export function SingleEditorToolbar(props: {
   linkToExternalEditor: string | undefined;
 }) {
   const globals = useGlobals();
+  const [copyLinkSuccessAlertVisible, setCopyLinkSuccessAlertVisible] = useState(false);
   const linkToExternalEditorTextAreaRef = useRef<HTMLTextAreaElement>(null);
+  const copyLinkSuccessAlertRef = useRef<HTMLDivElement>(null);
 
   const goFullScreen = (e: any) => {
     e.preventDefault();
@@ -54,10 +61,25 @@ export function SingleEditorToolbar(props: {
   const copyLinkToExternalEditor = (e: any) => {
     e.preventDefault();
     linkToExternalEditorTextAreaRef.current?.select();
-    document.execCommand("copy");
+    if (document.execCommand("copy")) {
+      setCopyLinkSuccessAlertVisible(true);
+    }
     e.target.focus();
   };
 
+  const closeCopyLinkSuccessAlert = useCallback(() => setCopyLinkSuccessAlertVisible(false), []);
+
+  useEffect(() => {
+    if (closeCopyLinkSuccessAlert) {
+      const autoCloseCopyLinkSuccessAlert = setTimeout(closeCopyLinkSuccessAlert, ALERT_AUTO_CLOSE_TIMEOUT);
+      return () => clearInterval(autoCloseCopyLinkSuccessAlert);
+    }
+
+    return () => {
+      /* Do nothing */
+    };
+  }, [copyLinkSuccessAlertVisible]);
+
   return (
     <>
       <div style={{ display: "flex" }}>
@@ -77,9 +99,22 @@ export function SingleEditorToolbar(props: {
           </button>
         )}
         {globals.externalEditorManager && props.linkToExternalEditor && (
-          <button className={"btn btn-sm kogito-button"} onClick={copyLinkToExternalEditor}>
-            Copy link to {globals.externalEditorManager.name}
-          </button>
+          <div className={"position-relative"}>
+            <button className={"btn btn-sm kogito-button"} onClick={copyLinkToExternalEditor}>
+              Copy link to {globals.externalEditorManager.name}
+            </button>
+            {copyLinkSuccessAlertVisible && (
+              <div
+                ref={copyLinkSuccessAlertRef}
+                className={"position-absolute"}
+                style={{ marginTop: "34px", right: "0" }}
+              >
+                <div className={"dropdown-menu dropdown-menu-sw kogito-github-action-alert"}>
+                  <span>Link copied to clipboard</span>
+                </div>
+              </div>
+            )}
+          </div>
         )}
         {!props.textMode && (
           <button className={"btn btn-sm kogito-button"} onClick={goFullScreen}>

diff --git a/packages/online-editor/src/editor/EditorPage.tsx b/packages/online-editor/src/editor/EditorPage.tsx
@@ -128,7 +128,9 @@ export function EditorPage(props: Props) {
       return () => clearInterval(autoCloseCopySuccessAlert);
     }
 
-    return () => { /* Do nothing */ };
+    return () => {
+      /* Do nothing */
+    };
   }, [copySuccessAlertVisible]);
 
   useEffect(() => {