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

Merge pull request #3048 from isaiahmartin847/refactor/copy-secret

Browse Source 
Improve Visibility and Alignment of Tooltips and Copy Secret Key Icon
This commit is contained in:
Akhil Mohan
2025-01-31 14:20:02 +05:30
committed by GitHub
parent e1b016f76d 92f697e195
commit a406511405
1 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+55 -49
View File
@@ -189,17 +189,19 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }} exit={{ x: 10, opacity: 0 }}
> >
<Tooltip content="Copy secret name"> <div className="relative">
<IconButton <Tooltip content="Copy secret name">
ariaLabel="copy-value" <IconButton
variant="plain" ariaLabel="copy-value"
size="sm" variant="plain"
className="p-0 opacity-0 group-hover:opacity-100" size="sm"
onClick={copyTokenToClipboard} className="p-0 opacity-100"
> onClick={copyTokenToClipboard}
<FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} /> >
</IconButton> <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
</Tooltip> </IconButton>
</Tooltip>
</div>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
@@ -209,44 +211,48 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }} exit={{ x: -10, opacity: 0 }}
> >
<Tooltip content={errors.key ? errors.key.message : "Save"}> <div className="relative">
<IconButton <Tooltip content={errors.key ? errors.key.message : "Save"}>
ariaLabel="more" <IconButton
variant="plain" ariaLabel="more"
type="submit" variant="plain"
size="md" type="submit"
className={twMerge( size="md"
"p-0 text-primary opacity-0 group-hover:opacity-100", className={twMerge(
isDirty && "opacity-100" "p-0 text-primary opacity-0 group-hover:opacity-100",
)} isDirty && "opacity-100"
isDisabled={isSubmitting || Boolean(errors.key)} )}
> isDisabled={isSubmitting || Boolean(errors.key)}
{isSubmitting ? ( >
<Spinner className="m-0 h-4 w-4 p-0" /> {isSubmitting ? (
) : ( <Spinner className="m-0 h-4 w-4 p-0" />
<FontAwesomeIcon ) : (
icon={faCheck} <FontAwesomeIcon
size="lg" icon={faCheck}
className={twMerge("text-primary", errors.key && "text-mineshaft-400")} size="lg"
/> className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
)} />
</IconButton> )}
</Tooltip> </IconButton>
<Tooltip content="Cancel"> </Tooltip>
<IconButton </div>
ariaLabel="more" <div className="relative">
variant="plain" <Tooltip content="Cancel">
size="md" <IconButton
className={twMerge( ariaLabel="more"
"p-0 opacity-0 group-hover:opacity-100", variant="plain"
isDirty && "opacity-100" size="md"
)} className={twMerge(
onClick={() => reset()} "p-0 opacity-0 group-hover:opacity-100",
isDisabled={isSubmitting} isDirty && "opacity-100"
> )}
<FontAwesomeIcon icon={faClose} size="lg" /> onClick={() => reset()}
</IconButton> isDisabled={isSubmitting}
</Tooltip> >
<FontAwesomeIcon icon={faClose} size="lg" />
</IconButton>
</Tooltip>
</div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>