refactor(console): support small-size CopyToClipBoard (#2617)

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -31,18 +31,35 @@
       text-overflow: ellipsis;
     }
 
+
     .copyToolTipAnchor {
-      margin-left: _.unit(3);
+      margin-left: _.unit(2);
     }
+  }
 
-    .copyIconButton {
-      height: 20px;
-      width: 20px;
+  &.default {
+    .row {
+      .copyToolTipAnchor {
+        margin-left: _.unit(3);
+      }
+    }
+  }
 
-      .copyIcon {
-        svg {
-          width: 16px;
-          height: 16px;
+  &.small {
+    .row {
+      .copyToolTipAnchor {
+        margin-left: _.unit(1);
+      }
+
+      .iconButton {
+        height: 20px;
+        width: 20px;
+
+        .icon {
+          svg {
+            width: 12px;
+            height: 12px;
+          }
         }
       }
     }

packages/console/src/components/CopyToClipboard/index.tsx

@@ -18,6 +18,7 @@ type Props = {
   className?: string;
   variant?: 'text' | 'contained' | 'border' | 'icon';
   hasVisibilityToggle?: boolean;
+  size?: 'default' | 'small';
 };
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@@ -27,6 +28,7 @@ const CopyToClipboard = ({
   className,
   hasVisibilityToggle,
   variant = 'contained',
+  size = 'default',
 }: Props) => {
   const copyIconReference = useRef<HTMLButtonElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('copy');
@@ -59,7 +61,7 @@ const CopyToClipboard = ({
 
   return (
     <div
-      className={classNames(styles.container, styles[variant], className)}
+      className={classNames(styles.container, styles[variant], styles[size], className)}
       role="button"
       tabIndex={0}
       onKeyDown={onKeyDownHandler((event) => {
@@ -72,11 +74,13 @@ const CopyToClipboard = ({
       <div className={styles.row}>
         {variant !== 'icon' && <div className={styles.content}>{displayValue}</div>}
         {hasVisibilityToggle && (
-          <div className={styles.eye}>
-            <IconButton onClick={toggleHiddenContent}>
-              {showHiddenContent ? <EyeClosed /> : <Eye />}
-            </IconButton>
-          </div>
+          <IconButton
+            className={styles.iconButton}
+            iconClassName={styles.icon}
+            onClick={toggleHiddenContent}
+          >
+            {showHiddenContent ? <EyeClosed /> : <Eye />}
+          </IconButton>
         )}
         <Tooltip
           className={classNames(copyState === 'copied' && styles.successfulTooltip)}
@@ -85,8 +89,8 @@ const CopyToClipboard = ({
         >
           <IconButton
             ref={copyIconReference}
-            className={styles.copyIconButton}
-            iconClassName={styles.copyIcon}
+            className={styles.iconButton}
+            iconClassName={styles.icon}
             onClick={copy}
           >
             <Copy />

packages/console/src/pages/ApiResourceDetails/index.tsx

@@ -117,7 +117,7 @@ const ApiResourceDetails = () => {
               <Icon className={styles.icon} />
               <div className={styles.meta}>
                 <div className={styles.name}>{data.name}</div>
-                <CopyToClipboard value={data.indicator} />
+                <CopyToClipboard size="small" value={data.indicator} />
               </div>
             </div>
             {!isLogtoManagementApiResource && (

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -140,7 +140,7 @@ const ApplicationDetails = () => {
                 <div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div>
                 <div className={styles.verticalBar} />
                 <div className={styles.text}>App ID</div>
-                <CopyToClipboard value={data.id} />
+                <CopyToClipboard size="small" value={data.id} />
               </div>
             </div>
             <div className={styles.operations}>

packages/console/src/pages/UserDetails/index.tsx

@@ -110,7 +110,7 @@ const UserDetails = () => {
                   </>
                 )}
                 <div className={styles.text}>User ID</div>
-                <CopyToClipboard value={data.id} />
+                <CopyToClipboard size="small" value={data.id} />
               </div>
             </div>
             <div>