From d52534b185e2429f0846ea55f8009bcec4746dfb Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Sun, 7 May 2023 12:24:40 -0700 Subject: [PATCH] Dashboard UI update --- .../src/components/navigation/NavHeader.tsx | 2 +- frontend/src/components/v2/Button/Button.tsx | 10 +- .../components/v2/IconButton/IconButton.tsx | 8 +- frontend/src/components/v2/Input/Input.tsx | 4 +- frontend/src/pages/dashboard/[id].tsx | 12 +- .../DashboardPage/DashboardEnvOverview.tsx | 16 +- .../src/views/DashboardPage/DashboardPage.tsx | 150 ++++++++++-------- .../SecretDropzone/SecretDropzone.tsx | 94 +++++------ .../SecretInputRow/SecretInputRow.tsx | 137 ++++++++-------- .../SecretTableHeader/SecretTableHeader.tsx | 6 +- 10 files changed, 234 insertions(+), 205 deletions(-) diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx index d807b45b7..4df5c2d20 100644 --- a/frontend/src/components/navigation/NavHeader.tsx +++ b/frontend/src/components/navigation/NavHeader.tsx @@ -43,7 +43,7 @@ export default function NavHeader({ const router = useRouter(); return ( -
+
{currentOrg?.name?.charAt(0)}
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx index 17ae7b867..5edbbef4c 100644 --- a/frontend/src/components/v2/Button/Button.tsx +++ b/frontend/src/components/v2/Button/Button.tsx @@ -36,11 +36,11 @@ const buttonVariants = cva( selected: '', outline_bg: '', // a constant color not in use on hover or click goes colorSchema color - star: 'text-bunker-200 bg-mineshaft-500' + star: 'text-bunker-200 bg-mineshaft-700 border-mineshaft-600' }, isDisabled: { - true: 'bg-mineshaft text-white opacity-50 cursor-not-allowed', - false: '' + true: 'bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed', + false: 'border border-primary-400' }, isFullWidth: { true: 'w-full', @@ -61,7 +61,7 @@ const buttonVariants = cva( { colorSchema: 'primary', variant: 'star', - className: 'hover:bg-primary hover:text-black' + className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100' }, { colorSchema: 'primary', @@ -71,7 +71,7 @@ const buttonVariants = cva( { colorSchema: 'primary', variant: 'outline_bg', - className: 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200' + className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 duration-100' }, { colorSchema: 'secondary', diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx index 78fc0088f..6b3e0c203 100644 --- a/frontend/src/components/v2/IconButton/IconButton.tsx +++ b/frontend/src/components/v2/IconButton/IconButton.tsx @@ -30,7 +30,8 @@ const iconButtonVariants = cva( solid: '', outline: ['bg-transparent', 'border-2', 'border-solid'], plain: '', - star: 'text-bunker-200 bg-mineshaft-500' + star: 'text-bunker-200 bg-mineshaft-500', + outline_bg: '' }, isDisabled: { true: 'bg-opacity-70 cursor-not-allowed', @@ -53,6 +54,11 @@ const iconButtonVariants = cva( variant: 'star', className: 'hover:bg-primary hover:text-black' }, + { + colorSchema: 'primary', + variant: 'outline_bg', + className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100' + }, { colorSchema: 'danger', variant: 'star', diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx index 98784cdc0..5f66d8798 100644 --- a/frontend/src/components/v2/Input/Input.tsx +++ b/frontend/src/components/v2/Input/Input.tsx @@ -33,7 +33,7 @@ const inputVariants = cva( }, isError: { true: 'focus:ring-red/50 placeholder-red-300', - false: 'focus:ring-primary/50' + false: 'focus:ring-mineshaft-400/80 duration-200 focus:ring-1' } }, compoundVariants: [] @@ -48,7 +48,7 @@ const inputParentContainerVariants = cva('inline-flex font-inter items-center bo }, isError: { true: 'border-red', - false: 'border-mineshaft-500' + false: 'border-mineshaft-600' }, isFullWidth: { true: 'w-full', diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx index d8edf87fc..979dc3b64 100644 --- a/frontend/src/pages/dashboard/[id].tsx +++ b/frontend/src/pages/dashboard/[id].tsx @@ -29,11 +29,13 @@ const Dashboard = () => { - {isOverviewMode ? ( - - ) : ( - - )} +
+ {isOverviewMode ? ( + + ) : ( + + )} +
); }; diff --git a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx index 0843810f7..0483c462d 100644 --- a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx +++ b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx @@ -95,10 +95,10 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => {
{/* breadcrumb row */} -
+
-
+

Secrets Overview

Inject your secrets using @@ -182,16 +182,8 @@ export const DashboardEnvOverview = ({ onEnvChange }: { onEnvChange: any }) => { )} {isDashboardSecretEmpty && ( -

-
-
{0}
-
-
-
-
Secret
-
-
-
+
+
No secrets are available in this project yet. You can go into any environment to add secrets there.
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx index 9a005ccac..ea4d895e8 100644 --- a/frontend/src/views/DashboardPage/DashboardPage.tsx +++ b/frontend/src/views/DashboardPage/DashboardPage.tsx @@ -413,11 +413,11 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => { ); return ( -
+
{/* breadcrumb row */} -
+
{ onEnvChange={onEnvChange} />
- {/* Secrets, commit and save button section */} -
-
-

- {isRollbackMode ? 'Secret Snapshot' : 'Secrets'} -

- {isRollbackMode && Boolean(snapshotSecret) && ( - - {new Date(snapshotSecret?.createdAt || '').toLocaleString()} - - )} -
-
- {isRollbackMode && ( + {/* This is only for rollbacks */} + {isRollbackMode && +
+
+

Secret Snapshot

+ {isRollbackMode && Boolean(snapshotSecret) && ( + + {new Date(snapshotSecret?.createdAt || '').toLocaleString()} + + )} +
+
- )} - - -
-
+
+
} {/* Environment, search and other action row */} -
-
+
+
setSearchFilter(e.target.value)} @@ -490,7 +468,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
- + @@ -501,7 +479,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
- {!isReadOnly && !isRollbackMode && ( +
+ + setIsSecretValueHidden.toggle()} + > + + + +
+
+
+ {!isReadOnly && !isRollbackMode && ( + <> +
+ + setIsSecretValueHidden.toggle()} + > + + + +
+
+ +
+ )} +
{!isSecretEmpty && ( - + - + {fields.map(({ id, _id }, index) => ( { - -
- -
- - - - - - - - -
- - - )}{' '} - - )} + ) : ( + <> +
+ +
+
+

{t(isSmaller ? 'common:drop-zone-keys' : 'common:drop-zone')}

+
+ + {!isSmaller && ( + <> +
+
+

OR

+
+
+
+ +
+ + )}{' '} + + )} +
); }; diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx index 64818ff36..44ef2ddcc 100644 --- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx +++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx @@ -6,6 +6,7 @@ import { faComment, faEllipsis, faInfoCircle, + faKey, faPlus, faTags, faXmark @@ -158,8 +159,9 @@ export const SecretInputRow = memo( return (
-
{index + 1}
+ 		+ {/*
{index + 1}
*/} +