From 61539f6c3cf4d22140969b8e3f87ca55fa8e3b6f Mon Sep 17 00:00:00 2001
From: nxtcoder36 <mohit0698@gmail.com>
Date: Thu, 6 Jun 2024 13:22:09 +0530
Subject: [PATCH] ui changes

---
 .../components/common-console-components.tsx  | 34 +++++++------------
 .../components/extended-filled-tab.tsx        |  1 +
 .../handle-managed-resource-v2.tsx            | 14 ++------
 .../handle-managed-resource.tsx               | 14 ++------
 src/design-system/components/atoms/tabs.tsx   |  8 ++++-
 5 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/src/apps/console/components/common-console-components.tsx b/src/apps/console/components/common-console-components.tsx
index a06876be3..724d41e31 100644
--- a/src/apps/console/components/common-console-components.tsx
+++ b/src/apps/console/components/common-console-components.tsx
@@ -82,34 +82,26 @@ export const CopyContentToClipboard = ({
   };
 
   return (
-    <div className="flex flex-row items-center truncate">
+    <div
+      className="flex flex-row items-center truncate flex-1 cursor-pointer group"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!copied) {
+          handleCopy();
+        }
+      }}
+    >
       <ListItem
+        className="flex-1"
         noTooltip={!toolTip}
         data={
-          <span
-            className="cursor-pointer items-center gap-lg hover:text-text-default group-[.is-data]:truncate"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (!copied) {
-                handleCopy();
-              }
-            }}
-          >
+          <span className="cursor-pointer items-center gap-lg hover:text-text-default group-hover:text-text-default group-[.is-data]:truncate">
             {label || content}
           </span>
         }
       />
-      <div
-        className="shrink-0 ml-md"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (!copied) {
-            handleCopy();
-          }
-        }}
-      >
+      <div className="shrink-0 ml-md">
         {copied ? (
           <span>
             <Check size={iconSize} />
diff --git a/src/apps/console/components/extended-filled-tab.tsx b/src/apps/console/components/extended-filled-tab.tsx
index 9a1464ead..0be110a36 100644
--- a/src/apps/console/components/extended-filled-tab.tsx
+++ b/src/apps/console/components/extended-filled-tab.tsx
@@ -2,6 +2,7 @@ import { Key } from 'react';
 import Tabs, { ITab } from '~/components/atoms/tabs';
 import { cn } from '~/components/utils';
 import { NonNullableString } from '~/root/lib/types/common';
+import { Button } from '~/components/atoms/button';
 
 export interface IExtendedFilledTab<T = string> {
   value: string;
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx
index 020f24c81..9eeac517f 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx
@@ -281,15 +281,11 @@ export const ViewSecret = ({
                         name: 'key',
                         className: 'min-w-[170px]',
                       },
-                      {
-                        render: () => '',
-                        name: 'copy',
-                        className: 'max-w-[120px]',
-                      },
                       {
                         render: () => 'Value',
                         name: 'value',
-                        className: 'flex-1',
+                        className:
+                          'flex-1 min-w-[345px] max-w-[345px] w-[345px]',
                       },
                     ],
                     rows: Object.entries(data.stringData).map(
@@ -301,16 +297,10 @@ export const ViewSecret = ({
                               render: () => <ListItem data={key} />,
                             },
                             value: {
-                              render: () => (
-                                <ListItem data={v} className="w-[220px]" />
-                              ),
-                            },
-                            copy: {
                               render: () => (
                                 <CopyContentToClipboard
                                   content={v}
                                   toastMessage={`${key} copied`}
-                                  label="Copy Secret"
                                 />
                               ),
                             },
diff --git a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx
index 3cd5a7612..ad8b1a78b 100644
--- a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx
@@ -419,15 +419,11 @@ export const ViewSecret = ({
                         name: 'key',
                         className: 'min-w-[170px]',
                       },
-                      {
-                        render: () => '',
-                        name: 'copy',
-                        className: 'max-w-[120px]',
-                      },
                       {
                         render: () => 'Value',
                         name: 'value',
-                        className: 'flex-1',
+                        className:
+                          'flex-1 min-w-[345px] max-w-[345px] w-[345px]',
                       },
                     ],
                     rows: Object.entries(data.stringData).map(
@@ -439,16 +435,10 @@ export const ViewSecret = ({
                               render: () => <ListItem data={key} />,
                             },
                             value: {
-                              render: () => (
-                                <ListItem data={v} className="w-[220px]" />
-                              ),
-                            },
-                            copy: {
                               render: () => (
                                 <CopyContentToClipboard
                                   content={v}
                                   toastMessage={`${key} copied`}
-                                  label="Copy Secret"
                                 />
                               ),
                             },
diff --git a/src/design-system/components/atoms/tabs.tsx b/src/design-system/components/atoms/tabs.tsx
index 264db09f3..a757226f0 100644
--- a/src/design-system/components/atoms/tabs.tsx
+++ b/src/design-system/components/atoms/tabs.tsx
@@ -99,7 +99,13 @@ const TabBase = ({
       >
         <Component
           // eslint-disable-next-line no-nested-ternary
-          {...(to ? (Component === 'a' ? { href: to } : { to }) : {})}
+          {...(to
+            ? Component === 'a'
+              ? { href: to }
+              : { to }
+            : {
+                role: 'button',
+              })}
           prefetch="intent"
           onClick={onClick}
           className={cn(