Remove duplicate copy button (#2205)

remove duplicate copy button
deepfence · Jun 18, 2024 · 80b3120 · 80b3120
1 parent ada230e
commit 80b3120
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 207 deletions.
diff --git 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
@@ -4,17 +4,15 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   CircleSpinner,
-  IconButton,
   SlidingModal,
   SlidingModalCloseButton,
   SlidingModalContent,
   SlidingModalHeader,
   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
@@ -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
@@ -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
@@ -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 ? (