feat(TicketEditor): Enhance Copy Button functionality

MahtabBukhari · Dec 18, 2024 · f9b588c · f9b588c
1 parent fe52184
commit f9b588c
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/src/components/common/TicketEditor/TicketEditor.tsx b/src/components/common/TicketEditor/TicketEditor.tsx
@@ -10,7 +10,11 @@ import {
   EuiBadge
 } from '@elastic/eui';
 import { phaseTicketStore } from '../../../store/phase';
-import { ActionButton, TicketButtonGroup } from '../../../people/widgetViews/workspace/style';
+import {
+  ActionButton,
+  CopyButtonGroup,
+  TicketButtonGroup
+} from '../../../people/widgetViews/workspace/style';
 import {
   TicketContainer,
   TicketHeader,
@@ -49,6 +53,7 @@ const TicketEditor = observer(
     );
     const [selectedVersion, setSelectedVersion] = useState<number>(latestTicket?.version as number);
     const [versionTicketData, setVersionTicketData] = useState<Ticket>(latestTicket as Ticket);
+    const [isCopying, setIsCopying] = useState(false);
     const { main } = useStores();
 
     const groupTickets = useMemo(
@@ -207,6 +212,33 @@ const TicketEditor = observer(
         }
       }
     };
+    const handleCopy = async () => {
+      if (isCopying) return;
+
+      setIsCopying(true);
+      try {
+        await navigator.clipboard.writeText(versionTicketData.description);
+        setToasts([
+          {
+            id: `${Date.now()}-copy-success`,
+            title: 'Hive',
+            color: 'success',
+            text: 'Description copied to clipboard!'
+          }
+        ]);
+      } catch (err) {
+        setToasts([
+          {
+            id: `${Date.now()}-copy-error`,
+            title: 'Hive',
+            color: 'danger',
+            text: 'Failed to copy description'
+          }
+        ]);
+      } finally {
+        setIsCopying(false);
+      }
+    };
 
     return (
       <TicketContainer>
@@ -238,6 +270,16 @@ const TicketEditor = observer(
               <EuiBadge color="success" style={{ marginBottom: '12px' }}>
                 Version {selectedVersion}
               </EuiBadge>
+              <CopyButtonGroup>
+                <ActionButton
+                  color="primary"
+                  onClick={handleCopy}
+                  disabled={isCopying}
+                  data-testid="copy-description-btn"
+                >
+                  Copy
+                </ActionButton>
+              </CopyButtonGroup>
             </TicketHeaderInputWrap>
             <TicketTextArea
               value={versionTicketData.description}

diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
@@ -1635,3 +1635,29 @@ export const Select = styled.select`
 export const Option = styled.option`
   font-size: 14px;
 `;
+
+export const CopyButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-top: calc(100px - 134px);
+
+  ${ActionButton} {
+    transition: background-color 0.2s ease;
+    width: auto;
+    min-width: 100px;
+
+    &[color='primary'] {
+      background-color: #618aff;
+
+      &:hover {
+        background-color: #7599ff;
+      }
+
+      &:active {
+        background-color: #4b7bff;
+      }
+    }
+  }
+`;