Minor dashboard updates

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -36,7 +36,7 @@ import {
 } from '@app/components/v2';
 import { leaveConfirmDefaultMessage } from '@app/const';
 import { useWorkspace } from '@app/context';
-import { useLeaveConfirm, usePersistentState, usePopUp, useToggle } from '@app/hooks';
+import { useLeaveConfirm, usePopUp, useToggle } from '@app/hooks';
 import {
   useBatchSecretsOp,
   useCreateWsTag,
@@ -100,10 +100,6 @@ export const DashboardPage = () => {
     'compareSecrets'
   ] as const);
   const [isSecretValueHidden, setIsSecretValueHidden] = useToggle();
-  const [isCommentColumnCollapsed, setIsCommentCollapsed] = usePersistentState(
-    false,
-    'infisical-comment-box'
-  );
   const [searchFilter, setSearchFilter] = useState('');
   const [snapshotId, setSnaphotId] = useState<string | null>(null);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
@@ -538,9 +534,7 @@ export const DashboardPage = () => {
               <TableContainer>
                 <table className="secret-table">
                   <SecretTableHeader
-                    isCommentColumnCollapsed={isCommentColumnCollapsed}
                     sortDir={sortDir}
-                    onCommentColToggle={() => setIsCommentCollapsed(!isCommentColumnCollapsed)}
                     onSort={onSortSecrets}
                   />
                   <tbody>
@@ -555,7 +549,6 @@ export const DashboardPage = () => {
                         onSecretDelete={onSecretDelete}
                         onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
                         isSecretValueHidden={isSecretValueHidden}
-                        isCommentColumnCollapsed={isCommentColumnCollapsed}
                         wsTags={wsTags}
                         onCreateTagOpen={() => handlePopUpOpen('addTag')}
                       />

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -2,11 +2,13 @@
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import {
   faCodeBranch,
+  faComment,
   faEllipsis,
   faInfoCircle,
   faPlus,
   faSquare,
   faSquareCheck,
+  faTags,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -39,7 +41,6 @@ type Props = {
   isReadOnly?: boolean;
   isAddOnly?: boolean;
   isRollbackMode?: boolean;
-  isCommentColumnCollapsed: boolean;
   isSecretValueHidden: boolean;
   searchTerm: string;
   // to record the ids of deleted ones
@@ -64,7 +65,6 @@ const tagColors = [
 
 export const SecretInputRow = ({
   index,
-  isCommentColumnCollapsed,
   isSecretValueHidden,
   onRowExpand,
   isReadOnly,
@@ -146,8 +146,8 @@ export const SecretInputRow = ({
   }
 
   return (
-    <tr className="group">
-      <td className="px-4 text-center text-xs">{index + 1}</td>
+    <tr className="group min-w-full flex flex-row">
+      <td className="w-10 px-4 flex items-center justify-center"><div className='text-center text-xs text-bunker-400'>{index + 1}</div></td>
       <Controller
         control={control}
         defaultValue=""
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
           <HoverCard openDelay={0} open={error?.message ? undefined : false}>
             <HoverCardTrigger asChild>
               <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
-                <div className="relative flex items-center">
+                <div className="min-w-[220px] relative flex items-center">
                   <Input
                     autoComplete="off"
                     variant="plain"
@@ -194,61 +194,36 @@ export const SecretInputRow = ({
           </HoverCard>
         )}
       />
-      <Popover>
-        <PopoverTrigger asChild>
-          <td className="w-auto max-w-[180px] cursor-pointer text-sm hover:outline hover:outline-mineshaft-400">
-            {isCommentColumnCollapsed ? (
-              <div className="flex justify-center">
-                {hasComment && <FontAwesomeIcon icon={faInfoCircle} />}
-              </div>
-            ) : (
-              <div className="overflow-hidden overflow-ellipsis whitespace-nowrap px-2">
-                {secret.comment || '-'}
-              </div>
-            )}
-          </td>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto">
-          <FormControl label="Comment" className="mb-0">
-            <TextArea
-              isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-              {...register(`secrets.${index}.comment`)}
-              rows={8}
-              cols={30}
-            />
-          </FormControl>
-        </PopoverContent>
-      </Popover>
-      <td className="flex items-center">
-        <div className="flex-grow">
-          {!isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              {...register(`secrets.${index}.value`)}
-              placeholder="EMPTY"
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-          {isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              placeholder="EMPTY"
-              {...register(`secrets.${index}.valueOverride`)}
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-        </div>
-        <div className="flex items-center group-hover:mr-2 group-hover:border-r group-hover:border-mineshaft-600">
+      <div className="flex-grow w-full">
+        {!isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            {...register(`secrets.${index}.value`)}
+            placeholder="EMPTY"
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+        {isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            placeholder="EMPTY"
+            {...register(`secrets.${index}.valueOverride`)}
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+      </div>
+      <td className="flex items-center min-w-sm">
+        <div className="flex items-center group-hover:mr-0 group-hover:border-r group-hover:border-mineshaft-600">
           {secretTags.map(({ id, slug }, i) => (
             <Tag
               className={cx(
@@ -269,7 +244,7 @@ export const SecretInputRow = ({
                   <div>
                     <Tooltip content="Add tag">
                       <IconButton variant="star" size="xs" ariaLabel="add-tag">
-                        <FontAwesomeIcon icon={faPlus} />
+                        <FontAwesomeIcon icon={faTags} />
                       </IconButton>
                     </Tooltip>
                   </div>
@@ -317,6 +292,25 @@ export const SecretInputRow = ({
             </div>
           )}
         </div>
+        <div className={`${hasComment ? "w-8" : "w-0"} overflow-hidden group-hover:w-8`}>
+          <Popover>
+            <PopoverTrigger asChild>
+              <IconButton variant="star" size="xs" ariaLabel="add-tag">
+                <FontAwesomeIcon icon={faComment} />
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto">
+              <FormControl label="Comment" className="mb-0">
+                <TextArea
+                  isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
+                  {...register(`secrets.${index}.comment`)}
+                  rows={8}
+                  cols={30}
+                />
+              </FormControl>
+            </PopoverContent>
+          </Popover>
+        </div>
         <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
           <Tooltip content="delete">
             <IconButton

frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx

@@ -1,26 +1,21 @@
-import { faArrowDown, faArrowUp, faComments } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
 
-import { IconButton, Tooltip } from '@app/components/v2';
+import { IconButton } from '@app/components/v2';
 
 type Props = {
-  isCommentColumnCollapsed?: boolean;
   sortDir: 'asc' | 'desc';
   onSort: () => void;
-  onCommentColToggle: () => void;
 };
 
 export const SecretTableHeader = ({
   sortDir,
-  isCommentColumnCollapsed,
-  onSort,
-  onCommentColToggle
+  onSort
 }: Props): JSX.Element => (
   <thead>
-    <tr className="">
-      <th className="w-16 text-center">#</th>
-      <th className={twMerge('w-1/5 min-w-[220px]', isCommentColumnCollapsed && 'w-1/4')}>
+    <tr className="flex flex-row">
+      {/* <th className="w-10 text-center"/> */}
+      <th className='w-1/5 min-w-[220px]'>
         <div className="inline-flex items-end">
           Key
           <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
@@ -28,22 +23,7 @@ export const SecretTableHeader = ({
           </IconButton>
         </div>
       </th>
-      <th
-        className={twMerge(
-          'w-1/5 cursor-pointer py-2 px-4 font-medium hover:outline hover:outline-mineshaft-400',
-          isCommentColumnCollapsed && 'w-12'
-        )}
-        onClick={onCommentColToggle}
-      >
-        <Tooltip content={isCommentColumnCollapsed ? 'Expand' : 'Minimise'}>
-          <div
-            className={twMerge('flex items-center', isCommentColumnCollapsed && 'justify-center')}
-          >
-            {isCommentColumnCollapsed ? <FontAwesomeIcon icon={faComments} /> : 'Comment'}
-          </div>
-        </Tooltip>
-      </th>
-      <th className={isCommentColumnCollapsed ? 'w-3/4' : '3/5'}>Value</th>
+      <th className='w-full'>Value</th>
     </tr>
   </thead>
 );