chore: review comments

Author: Elessar1802

.eslintignore

@@ -10,7 +10,6 @@ src/Common/BreadCrumb/BreadcrumbStore.tsx
 src/Common/CIPipeline.Types.ts
 src/Common/ChartVersionAndTypeSelector.tsx
 src/Common/Checkbox.tsx
-src/Common/ClipboardButton/ClipboardButton.tsx
 src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
 src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -15,8 +15,8 @@
  */
 
 import { useState, useEffect, useRef } from 'react'
-import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import Tooltip from '@Common/Tooltip/Tooltip'
+import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -29,14 +29,14 @@ import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
  * @param rootClassName - additional classes to add to button
  * @param iconSize - size of svg icon to be shown, default 16 (icon-dim-16)
  */
-export default function ClipboardButton({
+export const ClipboardButton = ({
     content,
     copiedTippyText = 'Copied!',
     duration = 1000,
     copyToClipboardPromise,
     rootClassName = '',
     iconSize = 16,
-}: ClipboardProps) {
+}: ClipboardProps) => {
     const [copied, setCopied] = useState<boolean>(false)
     const setCopiedFalseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(-1)
 
@@ -80,21 +80,20 @@ export default function ClipboardButton({
         handleAwaitCopyToClipboardPromise().catch(noop)
     }, [copyToClipboardPromise])
 
-    useEffect(() => {
-        return () => {
+    useEffect(
+        () => () => {
             if (setCopiedFalseTimeoutRef.current > -1) {
                 clearTimeout(setCopiedFalseTimeoutRef.current)
             }
-        }
-    }, [])
+        },
+        [],
+    )
 
     const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
 
     return (
-        <Tooltip
-            content={'Copy'}
-            alwaysShowTippyOnHover={!copied}
-        >
+        <Tooltip content="Copy" alwaysShowTippyOnHover={!copied}>
+            {/* TODO: semantically buttons should not be nested; fix later */}
             <button
                 type="button"
                 className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}

src/Common/CodeEditor/CodeEditor.tsx

@@ -31,7 +31,7 @@ import { YAMLStringify, cleanKubeManifest, useJsonYaml } from '../Helper'
 import { useWindowSize } from '../Hooks'
 import Select from '../Select/Select'
 import RadioGroup from '../RadioGroup/RadioGroup'
-import ClipboardButton from '../ClipboardButton/ClipboardButton'
+import { ClipboardButton } from '../ClipboardButton/ClipboardButton'
 import { Progressing } from '../Progressing'
 import {
     CodeEditorComposition,

src/Common/index.ts

@@ -55,7 +55,7 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
 // export { default as CodeEditor } from './CodeEditor/CodeEditor'
 export { default as Select } from './Select/Select'
-export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
+export { ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
 export * from './RJSF'
 export * from './DevtronProgressing'

src/Shared/Components/GitCommitInfoGeneric/GitCommitInfoGeneric.tsx

@@ -18,7 +18,7 @@
 import { useState } from 'react'
 import moment from 'moment'
 import Tippy from '@tippyjs/react'
-import ClipboardButton from '@Common/ClipboardButton/ClipboardButton'
+import { ClipboardButton } from '@Common/ClipboardButton/ClipboardButton'
 import { ReactComponent as Circle } from '@Icons/ic-circle.svg'
 import { ReactComponent as Commit } from '@Icons/ic-commit.svg'
 import { ReactComponent as CommitIcon } from '@Icons/ic-code-commit.svg'