From 0f5c1340d3b9d927fdc8a73200ebd484af0be324 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 13 May 2024 13:40:33 +0530 Subject: [PATCH] feat: dashboard optimized on font awesome levels using symbols technique --- .../FontAwesomeSymbol/FontAwesomeSymbol.tsx | 19 +++ .../components/v2/FontAwesomeSymbol/index.tsx | 1 + .../components/SecretListView/SecretItem.tsx | 111 ++++++++++++------ .../SecretListView/SecretListView.tsx | 10 +- .../SecretListView/SecretListView.utils.ts | 40 +++++++ 5 files changed, 143 insertions(+), 38 deletions(-) create mode 100644 frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx create mode 100644 frontend/src/components/v2/FontAwesomeSymbol/index.tsx diff --git a/frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx b/frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx new file mode 100644 index 000000000..69639ae5f --- /dev/null +++ b/frontend/src/components/v2/FontAwesomeSymbol/FontAwesomeSymbol.tsx @@ -0,0 +1,19 @@ +import { forwardRef, HTMLAttributes } from "react"; + +type Props = { + symbolName: string; +} & HTMLAttributes; + +export const FontAwesomeSymbol = forwardRef( + ({ symbolName, ...props }, ref) => { + return ( +
+ + + +
+ ); + } +); + +FontAwesomeSymbol.displayName = "FontAwesomeSymbol"; diff --git a/frontend/src/components/v2/FontAwesomeSymbol/index.tsx b/frontend/src/components/v2/FontAwesomeSymbol/index.tsx new file mode 100644 index 000000000..baaa34e7e --- /dev/null +++ b/frontend/src/components/v2/FontAwesomeSymbol/index.tsx @@ -0,0 +1 @@ +export { FontAwesomeSymbol } from "./FontAwesomeSymbol"; diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx index 7996d932c..09507c075 100644 --- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx @@ -8,6 +8,7 @@ import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, + FontAwesomeSymbol, FormControl, IconButton, Input, @@ -19,6 +20,7 @@ import { TextArea, Tooltip } from "@app/components/v2"; +import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { ProjectPermissionActions, ProjectPermissionSub, @@ -29,20 +31,6 @@ import { useToggle } from "@app/hooks"; import { DecryptedSecret } from "@app/hooks/api/secrets/types"; import { WsTag } from "@app/hooks/api/types"; import { subject } from "@casl/ability"; -import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; -import { - faCheck, - faClock, - faClose, - faCodeBranch, - faComment, - faCopy, - faEllipsis, - faKey, - faTag, - faTags -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { AnimatePresence, motion } from "framer-motion"; import { memo, useEffect } from "react"; @@ -50,7 +38,12 @@ import { Controller, useFieldArray, useForm } from "react-hook-form"; import { twMerge } from "tailwind-merge"; import { CreateReminderForm } from "./CreateReminderForm"; -import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils"; +import { + FontAwesomeSpriteName, + formSchema, + SecretActionType, + TFormSchema +} from "./SecretListView.utils"; type Props = { secret: DecryptedSecret; @@ -206,7 +199,6 @@ export const SecretItem = memo( } }} /> -
onToggleSecretSelect(secret.id)} className={twMerge("ml-3 hidden group-hover:flex", isSelected && "flex")} /> -
@@ -278,10 +273,12 @@ export const SecretItem = memo( key="secret-value" control={control} render={({ field }) => ( - @@ -297,7 +294,14 @@ export const SecretItem = memo( className="w-0 overflow-hidden p-0 group-hover:mr-2 group-hover:w-5" onClick={copyTokenToClipboard} > - + @@ -318,7 +322,10 @@ export const SecretItem = memo( isDisabled={!isAllowed} > - + @@ -334,7 +341,14 @@ export const SecretItem = memo( handleTagSelect(tag)} key={`${secret.id}-${tagId}`} - icon={isTagSelected && } + icon={ + isTagSelected && ( + + ) + } iconPos="right" >
@@ -353,7 +367,12 @@ export const SecretItem = memo( className="w-full" colorSchema="primary" variant="outline_bg" - leftIcon={} + leftIcon={ + + } onClick={onCreateTag} > Create a tag @@ -379,7 +398,10 @@ export const SecretItem = memo( isOverriden && "w-5 text-primary" )} > - + )} @@ -393,6 +415,7 @@ export const SecretItem = memo( variant="plain" size="md" ariaLabel="add-reminder" + onClick={() => setCreateReminderFormOpen.on()} > - setCreateReminderFormOpen.on()} - icon={faClock} + @@ -430,7 +453,10 @@ export const SecretItem = memo( isDisabled={!isAllowed} > - + @@ -466,10 +492,13 @@ export const SecretItem = memo( ariaLabel="more" variant="plain" size="md" - className="p-0 opacity-0 group-hover:opacity-100" + className="p-0 opacity-0 group-hover:opacity-100 h-5 w-4" onClick={() => onDetailViewSecret(secret)} > - + onDeleteSecret(secret)} isDisabled={!isAllowed} > - + )} @@ -516,10 +548,12 @@ export const SecretItem = memo( {isSubmitting ? ( ) : ( - )} @@ -536,7 +570,10 @@ export const SecretItem = memo( onClick={() => reset()} isDisabled={isSubmitting} > - + diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx index 6469351ea..d17de4bb4 100644 --- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx @@ -1,4 +1,5 @@ import { useCallback } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useQueryClient } from "@tanstack/react-query"; import { twMerge } from "tailwind-merge"; @@ -17,6 +18,7 @@ import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPa import { Filter, GroupBy, SortDir } from "../../SecretMainPage.types"; import { SecretDetailSidebar } from "./SecretDetaiSidebar"; import { SecretItem } from "./SecretItem"; +import { FontAwesomeSpriteSymbols } from "./SecretListView.utils"; type Props = { secrets?: DecryptedSecret[]; @@ -89,7 +91,6 @@ export const SecretListView = ({ isVisible, isProtectedBranch = false }: Props) => { - const queryClient = useQueryClient(); const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([ "deleteSecret", @@ -341,6 +342,13 @@ export const SecretListView = ({ > {namespace}
+ {FontAwesomeSpriteSymbols.map(({ icon, symbol }) => ( + + ))} {filteredSecrets.map((secret) => ( ; + +export enum FontAwesomeSpriteName { + SecretKey = "secret-key", + Check = "check", + ClipboardCopy = "clipboard-copy", + Tags = "secret-tags", + Clock = "reminder-clock", + Comment = "comment", + More = "more", + Override = "secret-override", + Close = "close", + CheckedCircle = "check-circle" +} + +// this is an optimization technique +// https://docs.fontawesome.com/web/add-icons/svg-symbols +export const FontAwesomeSpriteSymbols = [ + { icon: faKey, symbol: FontAwesomeSpriteName.SecretKey }, + { icon: faCheck, symbol: FontAwesomeSpriteName.Check }, + { icon: faCopy, symbol: FontAwesomeSpriteName.ClipboardCopy }, + { icon: faTags, symbol: FontAwesomeSpriteName.Tags }, + { icon: faClock, symbol: FontAwesomeSpriteName.Clock }, + { icon: faComment, symbol: FontAwesomeSpriteName.Comment }, + { icon: faEllipsis, symbol: FontAwesomeSpriteName.More }, + { icon: faCodeBranch, symbol: FontAwesomeSpriteName.Override }, + { icon: faClose, symbol: FontAwesomeSpriteName.Close }, + { icon: faCheckCircle, symbol: FontAwesomeSpriteName.CheckedCircle } +];