awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 11:27:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor dashboard updates

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-04-05 18:58:59 -07:00
parent 4cce75d128
commit c40546945f
3 changed files with 63 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DashboardPage/DashboardPage.tsx
+1 -8
View File
@@ -36,7 +36,7 @@ import {
} from '@app/components/v2'; } from '@app/components/v2';
import { leaveConfirmDefaultMessage } from '@app/const'; import { leaveConfirmDefaultMessage } from '@app/const';
import { useWorkspace } from '@app/context'; import { useWorkspace } from '@app/context';
import { useLeaveConfirm, usePersistentState, usePopUp, useToggle } from '@app/hooks'; import { useLeaveConfirm, usePopUp, useToggle } from '@app/hooks';
import { import {
useBatchSecretsOp, useBatchSecretsOp,
useCreateWsTag, useCreateWsTag,
@@ -100,10 +100,6 @@ export const DashboardPage = () => {
'compareSecrets' 'compareSecrets'
] as const); ] as const);
const [isSecretValueHidden, setIsSecretValueHidden] = useToggle(); const [isSecretValueHidden, setIsSecretValueHidden] = useToggle();
const [isCommentColumnCollapsed, setIsCommentCollapsed] = usePersistentState(
false,
'infisical-comment-box'
);
const [searchFilter, setSearchFilter] = useState(''); const [searchFilter, setSearchFilter] = useState('');
const [snapshotId, setSnaphotId] = useState<string | null>(null); const [snapshotId, setSnaphotId] = useState<string | null>(null);
const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null); const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
@@ -538,9 +534,7 @@ export const DashboardPage = () => {
<TableContainer> <TableContainer>
<table className="secret-table"> <table className="secret-table">
<SecretTableHeader <SecretTableHeader
isCommentColumnCollapsed={isCommentColumnCollapsed}
sortDir={sortDir} sortDir={sortDir}
onCommentColToggle={() => setIsCommentCollapsed(!isCommentColumnCollapsed)}
onSort={onSortSecrets} onSort={onSortSecrets}
/> />
<tbody> <tbody>
@@ -555,7 +549,6 @@ export const DashboardPage = () => {
onSecretDelete={onSecretDelete} onSecretDelete={onSecretDelete}
onRowExpand={() => onDrawerOpen({ id: _id as string, index })} onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
isSecretValueHidden={isSecretValueHidden} isSecretValueHidden={isSecretValueHidden}
isCommentColumnCollapsed={isCommentColumnCollapsed}
wsTags={wsTags} wsTags={wsTags}
onCreateTagOpen={() => handlePopUpOpen('addTag')} onCreateTagOpen={() => handlePopUpOpen('addTag')}
/> />
frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+55 -61
View File
@@ -2,11 +2,13 @@
import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
import { import {
faCodeBranch, faCodeBranch,
faComment,
faEllipsis, faEllipsis,
faInfoCircle, faInfoCircle,
faPlus, faPlus,
faSquare, faSquare,
faSquareCheck, faSquareCheck,
faTags,
faTrash faTrash
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -39,7 +41,6 @@ type Props = {
isReadOnly?: boolean; isReadOnly?: boolean;
isAddOnly?: boolean; isAddOnly?: boolean;
isRollbackMode?: boolean; isRollbackMode?: boolean;
isCommentColumnCollapsed: boolean;
isSecretValueHidden: boolean; isSecretValueHidden: boolean;
searchTerm: string; searchTerm: string;
// to record the ids of deleted ones // to record the ids of deleted ones
@@ -64,7 +65,6 @@ const tagColors = [
export const SecretInputRow = ({ export const SecretInputRow = ({
index, index,
isCommentColumnCollapsed,
isSecretValueHidden, isSecretValueHidden,
onRowExpand, onRowExpand,
isReadOnly, isReadOnly,
@@ -146,8 +146,8 @@ export const SecretInputRow = ({
} }
return ( return (
<tr className="group"> <tr className="group min-w-full flex flex-row">
<td className="px-4 text-center text-xs">{index + 1}</td> <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 <Controller
control={control} control={control}
defaultValue="" defaultValue=""
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
<HoverCard openDelay={0} open={error?.message ? undefined : false}> <HoverCard openDelay={0} open={error?.message ? undefined : false}>
<HoverCardTrigger asChild> <HoverCardTrigger asChild>
<td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}> <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 <Input
autoComplete="off" autoComplete="off"
variant="plain" variant="plain"
@@ -194,61 +194,36 @@ export const SecretInputRow = ({
</HoverCard> </HoverCard>
)} )}
/> />
<Popover> <div className="flex-grow w-full">
<PopoverTrigger asChild> {!isOverridden && (
<td className="w-auto max-w-[180px] cursor-pointer text-sm hover:outline hover:outline-mineshaft-400"> <Input
{isCommentColumnCollapsed ? ( variant="plain"
<div className="flex justify-center"> isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
{hasComment && <FontAwesomeIcon icon={faInfoCircle} />} className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
</div> type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
) : ( {...register(`secrets.${index}.value`)}
<div className="overflow-hidden overflow-ellipsis whitespace-nowrap px-2"> placeholder="EMPTY"
{secret.comment || '-'} onBlur={setCanRevealSecret.off}
</div> onFocus={setCanRevealSecret.on}
)} autoComplete="off"
</td> />
</PopoverTrigger> )}
<PopoverContent className="w-auto"> {isOverridden && (
<FormControl label="Comment" className="mb-0"> <Input
<TextArea variant="plain"
isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly} isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
{...register(`secrets.${index}.comment`)} className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
rows={8} type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
cols={30} placeholder="EMPTY"
/> {...register(`secrets.${index}.valueOverride`)}
</FormControl> onBlur={setCanRevealSecret.off}
</PopoverContent> onFocus={setCanRevealSecret.on}
</Popover> autoComplete="off"
<td className="flex items-center"> />
<div className="flex-grow"> )}
{!isOverridden && ( </div>
<Input <td className="flex items-center min-w-sm">
variant="plain" <div className="flex items-center group-hover:mr-0 group-hover:border-r group-hover:border-mineshaft-600">
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">
{secretTags.map(({ id, slug }, i) => ( {secretTags.map(({ id, slug }, i) => (
<Tag <Tag
className={cx( className={cx(
@@ -269,7 +244,7 @@ export const SecretInputRow = ({
<div> <div>
<Tooltip content="Add tag"> <Tooltip content="Add tag">
<IconButton variant="star" size="xs" ariaLabel="add-tag"> <IconButton variant="star" size="xs" ariaLabel="add-tag">
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faTags} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
@@ -317,6 +292,25 @@ export const SecretInputRow = ({
</div> </div>
)} )}
</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"> <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
<Tooltip content="delete"> <Tooltip content="delete">
<IconButton <IconButton
frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
+7 -27
View File
@@ -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 { 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 = { type Props = {
isCommentColumnCollapsed?: boolean;
sortDir: 'asc' | 'desc'; sortDir: 'asc' | 'desc';
onSort: () => void; onSort: () => void;
onCommentColToggle: () => void;
}; };
export const SecretTableHeader = ({ export const SecretTableHeader = ({
sortDir, sortDir,
isCommentColumnCollapsed, onSort
onSort,
onCommentColToggle
}: Props): JSX.Element => ( }: Props): JSX.Element => (
<thead> <thead>
<tr className=""> <tr className="flex flex-row">
<th className="w-16 text-center">#</th> {/* <th className="w-10 text-center"/> */}
<th className={twMerge('w-1/5 min-w-[220px]', isCommentColumnCollapsed && 'w-1/4')}> <th className='w-1/5 min-w-[220px]'>
<div className="inline-flex items-end"> <div className="inline-flex items-end">
Key Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}> <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
@@ -28,22 +23,7 @@ export const SecretTableHeader = ({
</IconButton> </IconButton>
</div> </div>
</th> </th>
<th <th className='w-full'>Value</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>
</tr> </tr>
</thead> </thead>
); );