From 80b3120f524e62543bc8e1de11fbcaf10b06de47 Mon Sep 17 00:00:00 2001
From: Milan <111341101+milan-deepfence@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:58:32 +0530
Subject: [PATCH] Remove duplicate copy button (#2205)

remove duplicate copy button
---
 .../src/components/CopyToClipboard.tsx        | 47 +++++++++++++++++++
 .../malwares/pages/MalwareDetailModal.tsx     | 43 +++--------------
 .../pages/PostureCloudDetailModal.tsx         | 43 +++--------------
 .../postures/pages/PostureDetailModal.tsx     | 43 +++--------------
 .../secrets/pages/SecretDetailModal.tsx       | 43 +++--------------
 .../settings/pages/UserManagement.tsx         | 24 +---------
 .../pages/VulnerabilityDetailModal.tsx        | 43 +++--------------
 7 files changed, 79 insertions(+), 207 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/components/CopyToClipboard.tsx b/deepfence_frontend/apps/dashboard/src/components/CopyToClipboard.tsx
index c63b806e31..03a36ed8a9 100644
--- a/deepfence_frontend/apps/dashboard/src/components/CopyToClipboard.tsx
+++ b/deepfence_frontend/apps/dashboard/src/components/CopyToClipboard.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { cn } from 'tailwind-preset';
+import { IconButton } from 'ui-components';
+
+import { CheckIcon } from '@/components/icons/common/Check';
+import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 
 export function useCopyToClipboardState() {
   const [_, copyToClipboard] = useCopyToClipboard();
@@ -26,3 +31,45 @@ export function useCopyToClipboardState() {
     isCopied: isCopied,
   };
 }
+
+export const CopyButton = ({
+  value,
+  className,
+  iconStyle,
+}: {
+  value: string;
+  className?: string;
+  iconStyle?: string;
+}) => {
+  const { copy, isCopied } = useCopyToClipboardState();
+
+  return (
+    <div className={cn('absolute right-0 top-0', className)}>
+      {isCopied ? (
+        <IconButton
+          size="sm"
+          variant="flat"
+          color="success"
+          type="button"
+          icon={
+            <span className={cn('w-3 h-3 block', iconStyle)}>
+              <CheckIcon />
+            </span>
+          }
+        />
+      ) : (
+        <IconButton
+          size="sm"
+          variant="flat"
+          type="button"
+          onClick={() => copy(value)}
+          icon={
+            <span className={cn('w-3 h-3 block', iconStyle)}>
+              <CopyLineIcon />
+            </span>
+          }
+        />
+      )}
+    </div>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx
index 15c521834b..6559d76a37 100644
--- a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx
@@ -4,7 +4,6 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
@@ -12,9 +11,8 @@ import {
   Tooltip,
 } from 'ui-components';
 
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { DFLink } from '@/components/DFLink';
-import { CheckIcon } from '@/components/icons/common/Check';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { InfoStandardIcon } from '@/components/icons/common/InfoStandard';
 import { PopOutIcon } from '@/components/icons/common/PopOut';
@@ -123,38 +121,6 @@ function processLabel(labelKey: string) {
   return replacebyUppercaseCharacters(labelKey);
 }
 
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 hidden group-hover:block">
-      {isCopied ? (
-        <IconButton
-          size="sm"
-          variant="flat"
-          color="success"
-          icon={
-            <span className="w-3 h-3 block">
-              <CheckIcon />
-            </span>
-          }
-        />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={
-            <span className="w-3 h-3 block">
-              <CopyLineIcon />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
 const DetailsComponent = ({
   isRemediationOpen,
   setIsRemediationOpen,
@@ -253,7 +219,7 @@ const DetailsComponent = ({
               <div className="text-p3 text-text-text-and-icon first-letter:capitalize">
                 {label}
               </div>
-              <CopyField value={valueAsStr} />
+              <CopyButton value={valueAsStr} className="hidden group-hover:block" />
             </div>
             <div className="text-p1 dark:text-text-input-value text-text-text-and-icon break-words">
               {key in timeFormatKey ? formatMilliseconds(+valueAsStr) : valueAsStr}
@@ -265,7 +231,10 @@ const DetailsComponent = ({
         <div className="flex flex-col grow basis-[100%] max-w-full gap-1 group">
           <div className="basis-[45%] flex relative">
             <div className="text-p3 text-text-text-and-icon">Resources</div>
-            <CopyField value={JSON.stringify(malware.resources)} />
+            <CopyButton
+              value={JSON.stringify(malware.resources)}
+              className="hidden group-hover:block"
+            />
           </div>
           <div className="text-p1">
             {showResourceModal.show ? (
diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudDetailModal.tsx
index 0e9dba842f..2621746b73 100644
--- a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudDetailModal.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudDetailModal.tsx
@@ -4,15 +4,13 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
   SlidingModalHeader,
 } from 'ui-components';
 
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
-import { CheckIcon } from '@/components/icons/common/Check';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { RemediationBlock } from '@/components/remediation/RemediationBlock';
 import { RemediationButton } from '@/components/remediation/RemediationButton';
@@ -100,38 +98,6 @@ function processLabel(labelKey: string) {
   return replacebyUppercaseCharacters(labelKey);
 }
 
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 hidden group-hover:block">
-      {isCopied ? (
-        <IconButton
-          size="sm"
-          variant="flat"
-          color="success"
-          icon={
-            <span className="w-3 h-3 block">
-              <CheckIcon />
-            </span>
-          }
-        />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={
-            <span className="w-3 h-3 block">
-              <CopyLineIcon />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
 const DetailsComponent = ({
   isRemediationOpen,
   setIsRemediationOpen,
@@ -238,7 +204,7 @@ const DetailsComponent = ({
               <div className="text-p3 text-text-text-and-icon first-letter:capitalize">
                 {label}
               </div>
-              <CopyField value={valueAsStr} />
+              <CopyButton value={valueAsStr} className="hidden group-hover:block" />
             </div>
             <div className="text-p1 dark:text-text-input-value text-text-text-and-icon break-words">
               {key in timeFormatKey ? formatMilliseconds(+valueAsStr) : valueAsStr}
@@ -250,7 +216,10 @@ const DetailsComponent = ({
         <div className="flex flex-col grow basis-[100%] max-w-full gap-1 group">
           <div className="basis-[45%] flex relative">
             <div className="text-p3 text-text-text-and-icon">Resources</div>
-            <CopyField value={JSON.stringify(cloudPosture.resources)} />
+            <CopyButton
+              value={JSON.stringify(cloudPosture.resources)}
+              className="hidden group-hover:block"
+            />
           </div>
           <div className="text-p1 flex flex-col">
             {cloudPosture.resources.map((resource) => {
diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureDetailModal.tsx
index 8f83cae8e8..d3fee78670 100644
--- a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureDetailModal.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureDetailModal.tsx
@@ -4,16 +4,14 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
   SlidingModalHeader,
 } from 'ui-components';
 
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { DFLink } from '@/components/DFLink';
-import { CheckIcon } from '@/components/icons/common/Check';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { PopOutIcon } from '@/components/icons/common/PopOut';
 import { RemediationBlock } from '@/components/remediation/RemediationBlock';
@@ -100,38 +98,6 @@ function processLabel(labelKey: string) {
   return replacebyUppercaseCharacters(labelKey);
 }
 
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 hidden group-hover:block">
-      {isCopied ? (
-        <IconButton
-          size="sm"
-          variant="flat"
-          color="success"
-          icon={
-            <span className="w-3 h-3 block">
-              <CheckIcon />
-            </span>
-          }
-        />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={
-            <span className="w-3 h-3 block">
-              <CopyLineIcon />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
 const DetailsComponent = ({
   isRemediationOpen,
   setIsRemediationOpen,
@@ -236,7 +202,7 @@ const DetailsComponent = ({
               <div className="text-p3 text-text-text-and-icon first-letter:capitalize">
                 {label}
               </div>
-              <CopyField value={valueAsStr} />
+              <CopyButton value={valueAsStr} className="hidden group-hover:block" />
             </div>
             <div className="text-p1 text-text-input-value">
               {key in timeFormatKey ? formatMilliseconds(+valueAsStr) : valueAsStr}
@@ -248,7 +214,10 @@ const DetailsComponent = ({
         <div className="flex flex-col grow basis-[100%] max-w-full gap-1 group">
           <div className="basis-[45%] flex relative">
             <div className="text-p3 text-text-text-and-icon">Resources</div>
-            <CopyField value={JSON.stringify(posture.resources)} />
+            <CopyButton
+              value={JSON.stringify(posture.resources)}
+              className="hidden group-hover:block"
+            />
           </div>
           <div className="text-p1 flex flex-col">
             {posture.resources.map((resource) => {
diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretDetailModal.tsx
index 5eb20746e7..ca4f484d7c 100644
--- a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretDetailModal.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretDetailModal.tsx
@@ -4,16 +4,14 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
   SlidingModalHeader,
 } from 'ui-components';
 
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { DFLink } from '@/components/DFLink';
-import { CheckIcon } from '@/components/icons/common/Check';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { PopOutIcon } from '@/components/icons/common/PopOut';
 import { RemediationBlock } from '@/components/remediation/RemediationBlock';
@@ -105,38 +103,6 @@ function processLabel(labelKey: string) {
   return replacebyUppercaseCharacters(labelKey);
 }
 
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 hidden group-hover:block">
-      {isCopied ? (
-        <IconButton
-          size="sm"
-          variant="flat"
-          color="success"
-          icon={
-            <span className="w-3 h-3 block">
-              <CheckIcon />
-            </span>
-          }
-        />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={
-            <span className="w-3 h-3 block">
-              <CopyLineIcon />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
 const DetailsComponent = ({
   isRemediationOpen,
   setIsRemediationOpen,
@@ -231,7 +197,7 @@ const DetailsComponent = ({
               <div className="text-p3 text-text-text-and-icon first-letter:capitalize">
                 {label}
               </div>
-              <CopyField value={valueAsStr} />
+              <CopyButton value={valueAsStr} className="hidden group-hover:block" />
             </div>
             <div className="text-p1 dark:text-text-input-value text-text-text-and-icon break-words">
               {key in timeFormatKey ? formatMilliseconds(+valueAsStr) : valueAsStr}
@@ -243,7 +209,10 @@ const DetailsComponent = ({
         <div className="flex flex-col grow basis-[100%] max-w-full gap-1 group">
           <div className="basis-[45%] flex relative">
             <div className="text-p3 text-text-text-and-icon">Resources</div>
-            <CopyField value={JSON.stringify(secret.resources)} />
+            <CopyButton
+              value={JSON.stringify(secret.resources)}
+              className="hidden group-hover:block"
+            />
           </div>
           <div className="text-p1">
             {showResourceModal.show ? (
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
index 1bfa6cfdee..e4d77f9acf 100644
--- a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
@@ -10,7 +10,6 @@ import {
   createColumnHelper,
   Dropdown,
   DropdownItem,
-  IconButton,
   Listbox,
   ListboxOption,
   Modal,
@@ -30,9 +29,8 @@ import {
   ModelUpdateUserIDRequestRoleEnum,
 } from '@/api/generated';
 import { ModelUser } from '@/api/generated/models/ModelUser';
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { DFLink } from '@/components/DFLink';
-import { CheckIcon } from '@/components/icons/common/Check';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { EllipsisIcon } from '@/components/icons/common/Ellipsis';
 import { ErrorStandardLineIcon } from '@/components/icons/common/ErrorStandardLine';
@@ -345,24 +343,6 @@ const ChangePasswordModal = ({
     </SlidingModal>
   );
 };
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 group-hover:block">
-      {isCopied ? (
-        <IconButton size="sm" variant="flat" color="success" icon={<CheckIcon />} />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={<CopyLineIcon />}
-        />
-      )}
-    </div>
-  );
-};
 
 const InviteUserModal = ({
   showDialog,
@@ -478,7 +458,7 @@ const InviteUserModal = ({
                 >
                   {data?.invite_url}
                 </DFLink>
-                <CopyField value={data?.invite_url} />
+                <CopyButton value={data?.invite_url} className="group-hover:block" />
                 <span className="mt-4 block">
                   Use above invite link for registration, the link will expire after{' '}
                   {data?.invite_expiry_hours} hours.
diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityDetailModal.tsx
index 1a722db8ba..96a4fd60c5 100644
--- a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityDetailModal.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityDetailModal.tsx
@@ -4,16 +4,14 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
   SlidingModalHeader,
 } from 'ui-components';
 
-import { useCopyToClipboardState } from '@/components/CopyToClipboard';
+import { CopyButton, useCopyToClipboardState } from '@/components/CopyToClipboard';
 import { DFLink } from '@/components/DFLink';
-import { CheckIcon } from '@/components/icons/common/Check';
 import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { PopOutIcon } from '@/components/icons/common/PopOut';
 import { RemediationBlock } from '@/components/remediation/RemediationBlock';
@@ -141,38 +139,6 @@ const Header = ({
   );
 };
 
-const CopyField = ({ value }: { value: string }) => {
-  const { copy, isCopied } = useCopyToClipboardState();
-
-  return (
-    <div className="absolute right-0 top-0 hidden group-hover:block">
-      {isCopied ? (
-        <IconButton
-          size="sm"
-          variant="flat"
-          color="success"
-          icon={
-            <span className="w-3 h-3 block">
-              <CheckIcon />
-            </span>
-          }
-        />
-      ) : (
-        <IconButton
-          size="sm"
-          variant="flat"
-          onClick={() => copy(value)}
-          icon={
-            <span className="w-3 h-3 block">
-              <CopyLineIcon />
-            </span>
-          }
-        />
-      )}
-    </div>
-  );
-};
-
 const DetailsComponent = ({
   isRemediationOpen,
   setIsRemediationOpen,
@@ -273,7 +239,7 @@ const DetailsComponent = ({
                 <div className="text-p3 text-text-text-and-icon first-letter:capitalize">
                   {label}
                 </div>
-                <CopyField value={valueAsStr} />
+                <CopyButton value={valueAsStr} className="hidden group-hover:block" />
               </div>
               <div className="text-p1 dark:text-text-input-value text-text-text-and-icon break-words">
                 {key in timeFormatKey ? formatMilliseconds(+valueAsStr) : valueAsStr}
@@ -286,7 +252,10 @@ const DetailsComponent = ({
           <div className="flex flex-col grow basis-[100%] max-w-full gap-1 group">
             <div className="basis-[45%] flex relative">
               <div className="text-p3 text-text-text-and-icon">Resources</div>
-              <CopyField value={JSON.stringify(cve.resources)} />
+              <CopyButton
+                value={JSON.stringify(cve.resources)}
+                className="hidden group-hover:block"
+              />
             </div>
             <div className="text-p1 flex flex-col">
               {showResourceModal.show ? (