feat: copy text clipboard

src/components/icons/copy-icon/index.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+const CopyIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className="w-6 h-6 group-hover:text-indigo-400"
+    >
+      <path
+        strokeWidth="2"
+        d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z"
+      />
+      <path
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z"
+      />
+    </svg>
+  )
+}
+
+export default CopyIcon

src/components/modal/index.tsx

@@ -1,16 +1,41 @@
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
+import CopyIcon from '../icons/copy-icon'
 import { Store } from '../../store'
 
 const Modal = () => {
   const { state } = useContext(Store)
+  const [showCopyClickedText, setShowCopyClickedText] = useState(false)
+  const handleOnCopyClick = () => {
+    setShowCopyClickedText(true)
+    state.modal.onCopyClick && state.modal.onCopyClick()
+    setTimeout(() => {
+      setShowCopyClickedText(false)
+    }, 3000)
+  }
   return (
     <>
       {state.modal.showModal && (
         <div className="bg-slate-800 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
           <div className="shadow-lg bg-white rounded px-20 py-16 rounded-md text-center z-10">
-            <h1 className="text-l mb-4 font-bold text-grey-900">
-              {state.modal.message}
-            </h1>
+            {state.modal.onCopyClick ? (
+              <div className="flex space-x-2 items-start relative">
+                <h1 className="text-l mb-4 font-bold text-grey-900">
+                  {state.modal.message}
+                </h1>
+                {showCopyClickedText && (
+                  <span className="font-bold absolute bottom-12 right-0">
+                    Copied!
+                  </span>
+                )}
+                <button onClick={handleOnCopyClick}>
+                  <CopyIcon />
+                </button>
+              </div>
+            ) : (
+              <h1 className="text-l mb-4 font-bold text-grey-900">
+                {state.modal.message}
+              </h1>
+            )}
             <div className="flex flex-col mt-4 sm:flex-row sm:items-center sm:justify-center">
               {state.modal.onCancel && (
                 <button

src/pages/analysis-jobs/index.tsx

@@ -71,6 +71,9 @@ const AnalysisJobsPage = (): ReactElement => {
             dispatch({ type: ModalActionType.REMOVE_MODAL })
             setCreateAnalysisJobformValues({ postcode: '' })
             getAnalysisJobs()
+          },
+          onCopyClick: () => {
+            navigator.clipboard.writeText(ingestJobId)
           }
         }
       })

src/store/index.tsx

@@ -17,6 +17,7 @@ export type AppState = {
     message: string
     onConfirm?: () => void
     onCancel?: () => void
+    onCopyClick?: () => void
   }
   user:
     | User
@@ -52,6 +53,7 @@ type Action =
         message: string
         onConfirm: () => void
         onCancel?: () => void
+        onCopyClick?: () => void
       }
     }
   | {
@@ -101,7 +103,8 @@ function reducer(state: AppState, action: Action): AppState {
           showModal: true,
           message: action.payload.message,
           onCancel: action.payload.onCancel,
-          onConfirm: action.payload.onConfirm
+          onConfirm: action.payload.onConfirm,
+          onCopyClick: action.payload.onCopyClick
         }
       }
     case ModalActionType.REMOVE_MODAL: