Merge pull request #219 from kloudlite/refactoring/ui-changes

ui changes
kloudlite · Jun 6, 2024 · 801d9c2 · 801d9c2
2 parents 222b15e + 61539f6
commit 801d9c2
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 46 deletions.
diff --git 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
@@ -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/...utes/_main+/$account+/env+/$environment+/managed-resources/handle-managed-resource-v2.tsx b/...utes/_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/...console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx b/...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
@@ -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(