From 12478130d01f7614ac5855e242c60248fdcb08f3 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 8 Apr 2023 23:36:33 -0700
Subject: [PATCH] Fixing UI, UX, and bugs in the dashboard

---
 frontend/src/components/v2/Button/Button.tsx  | 11 ++++
 .../src/views/DashboardPage/DashboardPage.tsx | 11 ++--
 .../components/PitDrawer/PitDrawer.tsx        |  8 ++-
 .../SecretTableHeader/SecretTableHeader.tsx   | 57 +++++--------------
 4 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 635aa0858..c4a89023c 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -33,6 +33,7 @@ const buttonVariants = cva(
         solid: '',
         outline: ['bg-transparent', 'border-2', 'border-solid'],
         plain: '',
+        selected: '',
         // a constant color not in use on hover or click goes colorSchema color
         star: 'text-bunker-200 bg-mineshaft-500'
       },
@@ -61,6 +62,16 @@ const buttonVariants = cva(
         variant: 'star',
         className: 'hover:bg-primary hover:text-black'
       },
+      {
+        colorSchema: 'primary',
+        variant: 'selected',
+        className: 'bg-primary/10 border border-primary/50 text-bunker-200'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'star',
+        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-mineshaft hover:text-white'
+      },
       {
         colorSchema: 'danger',
         variant: 'star',
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index a77eadc14..146b42165 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -189,11 +189,9 @@ export const DashboardPage = () => {
     handleSubmit,
     getValues,
     setValue,
-    formState: { isDirty, isSubmitting, dirtyFields },
+    formState: { isSubmitting, dirtyFields },
     reset
   } = method;
-  console.log(122, method)
-  console.log(123, isDirty, Object.keys(dirtyFields))
   const formSecrets = useWatch({ control, name: 'secrets' });
   const { fields, prepend, append, remove, update } = useFieldArray({ control, name: 'secrets' });
 
@@ -201,7 +199,6 @@ export const DashboardPage = () => {
   const isReadOnly = selectedEnv?.isWriteDenied;
   const isAddOnly = selectedEnv?.isReadDenied && !selectedEnv?.isWriteDenied;
   const canDoRollback = !isReadOnly && !isAddOnly;
-  console.log(123, !isRollbackMode, !isAddOnly, !isDirty)
   const isSubmitDisabled =
     isReadOnly ||
     // on add only mode the formstate becomes dirty due to secrets missing some items
@@ -415,7 +412,7 @@ export const DashboardPage = () => {
   );
 
   return (
-    <div className="container mx-auto w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
       <FormProvider {...method}>
         <form autoComplete="off">
           {/* breadcrumb row */}
@@ -529,7 +526,7 @@ export const DashboardPage = () => {
                   </IconButton>
                 </Tooltip>
               </div>
-              <Button
+              {!isReadOnly && !isRollbackMode && <Button
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
                 isDisabled={isReadOnly || isRollbackMode}
@@ -537,7 +534,7 @@ export const DashboardPage = () => {
                 className="h-10"
               >
                 Add Secret
-              </Button>
+              </Button>}
             </div>
           </div>
           <div className={`${isSecretEmpty ? "flex flex-col items-center justify-center" : ""} mt-4 h-[calc(100vh-270px)] overflow-y-scroll overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
diff --git a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
index e97b1e13a..a398530b2 100644
--- a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
+++ b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -46,9 +46,14 @@ export const PitDrawer = ({
                   key={_id}
                   className="py-3 px-4 text-sm"
                   isFullWidth
+                  colorSchema={
+                    (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
+                      ? 'primary'
+                      : 'secondary'
+                  }
                   variant={
                     (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
-                      ? 'solid'
+                      ? 'selected'
                       : 'star'
                   }
                   onClick={() => onSelectSnapshot(_id)}
@@ -65,6 +70,7 @@ export const PitDrawer = ({
         <Button
           className="mt-8 py-3 px-4 text-sm"
           isFullWidth
+          variant="star"
           isLoading={isFetchingNextPage}
           isDisabled={isFetchingNextPage || !hasNextPage}
           onClick={fetchNextPage}
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
index d7f60a630..2c7631298 100644
--- a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
@@ -1,8 +1,6 @@
 import { Controller } from 'react-hook-form';
-import { faArrowDown, faArrowUp, faCodeBranch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@radix-ui/react-hover-card';
-import { twMerge } from 'tailwind-merge';
 
 import { IconButton } from '@app/components/v2';
 
@@ -23,47 +21,20 @@ export const SecretTableHeader = ({
       <Controller
         defaultValue=""
         name="na"
-        render={({ fieldState: { error } }) => (
-          <HoverCard openDelay={0} open={error?.message ? undefined : false}>
-            <HoverCardTrigger asChild>
-              <td className='flex items-center'>
-                <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
-                  <div className="inline-flex items-end text-md font-medium">
-                    Key
-                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
-                      <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
-                    </IconButton>
-                  </div>
-                  <div className="w-max flex flex-row items-center justify-end">
-                    <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
-                    {!true && (
-                      <IconButton
-                        variant="plain"
-                        className={twMerge(
-                          'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1',
-                          true && 'w-6 text-primary ml-1'
-                        )}
-                        size="md" 
-                        ariaLabel="info"
-                      >
-                        <div className="flex items-center space-x-1">
-                          <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
-                        </div>
-                      </IconButton>
-                    )}
-                  </div>
-                </div>
-              </td>
-            </HoverCardTrigger>
-            <HoverCardContent className="w-auto py-2 pt-2">
-              <div className="flex items-center space-x-2">
-                <div>
-                  <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
-                </div>
-                <div className="text-sm">{error?.message}</div>
+        render={() => (
+          <td className='flex items-center'>
+            <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
+              <div className="inline-flex items-end text-md font-medium">
+                Key
+                <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
+                  <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+                </IconButton>
               </div>
-            </HoverCardContent>
-          </HoverCard>
+              <div className="w-max flex flex-row items-center justify-end">
+                <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
+              </div>
+            </div>
+          </td>
         )}
       />
       <th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>