chore: migrate ClipboardButton to common

Author: AbhishekA1509

src/components/common/ClipboardButton/ClipboardButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
 import * as DOMPurify from 'dompurify'
-import ClipboardButton from '../ClipboardButton/ClipboardButton'
+import { ClipboardButton } from '@devtron-labs/devtron-fe-common-lib'
 import { SuggestionsItemProps } from './types'
 import { NO_DEFINED_DESCRIPTION } from './constants'
 
@@ -38,7 +38,7 @@ export default function SuggestionItem({
 
         return (
             <p
-                className="m-0 fs-12 fw-4 lh-18"
+                className="m-0 fs-12 fw-4 lh-18 dc__word-break-all"
                 dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(highlightedText(description)) }}
             />
         )

src/components/common/ClipboardButton/__tests__/ClipboardButton.test.tsx

@@ -4,14 +4,12 @@ import SuggestionItem from '../SuggestionItem'
 import { NO_DEFINED_DESCRIPTION } from '../constants'
 
 // mocking ClipboardButton since its already tested
-jest.mock(
-    '../../ClipboardButton/ClipboardButton',
-    () =>
-        function ClipboardButton(triggerCopy) {
-            if (triggerCopy) return <div>Copied</div>
-            return <div>ClipboardButton</div>
-        },
-)
+jest.mock('@devtron-labs/devtron-fe-common-lib', () => ({
+    ClipboardButton: function ClipboardButton(triggerCopy) {
+        if (triggerCopy) return <div>Copied</div>
+        return <div>ClipboardButton</div>
+    },
+}))
 
 describe('When SuggestionsItem mounts', () => {
     beforeEach(() => {

src/components/common/ClipboardButton/types.ts

@@ -37,5 +37,4 @@ export * from './DetectBottom'
 export * from './hooks/ClickOutside'
 export * from './hooks/FileReader'
 export { default as FloatingVariablesSuggestions } from './FloatingVariablesSuggestions/FloatingVariablesSuggestions'
-export { default as CopyClipboard } from './ClipboardButton/ClipboardButton'
 export { default as HiddenInput } from './HiddenInput/HiddenInput'

src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx

@@ -1381,6 +1381,7 @@ button.anchor {
     line-height: 1.6;
     border: 1px solid rgba(255, 255, 255, 0.4);
     background-color: var(--N900);
+    word-break: break-all;
 }
 
 .tippy-box.default-white {