feat(secrets-ui): minor improvements from PR suggestions

This commit is contained in:
carlosmonastyrski
2025-04-28 16:49:29 -03:00
parent 4fa7ba2ec7
commit f9c936865a
3 changed files with 18 additions and 55 deletions
@@ -87,7 +87,6 @@ export const SecretEditRow = ({
const { permission } = useProjectPermission(); const { permission } = useProjectPermission();
const [isDeleting, setIsDeleting] = useToggle(); const [isDeleting, setIsDeleting] = useToggle();
const [isSecretBlurFocus, setIsSecretBlurFocus] = useToggle(false);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const toggleModal = useCallback(() => { const toggleModal = useCallback(() => {
@@ -129,7 +128,6 @@ export const SecretEditRow = ({
setTimeout(() => { setTimeout(() => {
reset({ value: defaultValue || null }); reset({ value: defaultValue || null });
}, 50); }, 50);
setIsSecretBlurFocus.off();
} else { } else {
reset({ value }); reset({ value });
} }
@@ -150,12 +148,6 @@ export const SecretEditRow = ({
}) })
); );
const handleSecretBlurClick = () => {
if (canEditSecretValue) {
setIsSecretBlurFocus.toggle();
}
};
const handleDeleteSecret = useCallback(async () => { const handleDeleteSecret = useCallback(async () => {
setIsDeleting.on(); setIsDeleting.on();
setIsModalOpen(false); setIsModalOpen(false);
@@ -185,16 +177,6 @@ export const SecretEditRow = ({
</Tooltip> </Tooltip>
)} )}
<div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2"> <div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
{secretValueHidden && !isSecretBlurFocus ? (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
<span className="flex flex-row items-center">
<div style={{ fontFamily: "monospace" }} className="h-full w-full">
******
</div>
</span>
</div>
) : (
<Controller <Controller
disabled={isImportedSecret && !defaultValue} disabled={isImportedSecret && !defaultValue}
control={control} control={control}
@@ -213,7 +195,6 @@ export const SecretEditRow = ({
/> />
)} )}
/> />
)}
</div> </div>
<div <div
@@ -95,7 +95,6 @@ export const SecretItem = memo(
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const { permission } = useProjectPermission(); const { permission } = useProjectPermission();
const { isRotatedSecret } = secret; const { isRotatedSecret } = secret;
const [isSecretBlurFocus, setIsSecretBlurFocus] = useToggle(false);
const canEditSecretValue = permission.can( const canEditSecretValue = permission.can(
ProjectPermissionSecretActions.Edit, ProjectPermissionSecretActions.Edit,
@@ -189,12 +188,6 @@ export const SecretItem = memo(
overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified; overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
const hasTagsApplied = Boolean(fields.length); const hasTagsApplied = Boolean(fields.length);
const handleSecretBlurClick = () => {
if (canEditSecretValue) {
setIsSecretBlurFocus.toggle();
}
};
const handleOverrideClick = () => { const handleOverrideClick = () => {
if (isOverriden) { if (isOverriden) {
// override need not be flagged delete if it was never saved in server // override need not be flagged delete if it was never saved in server
@@ -334,15 +327,6 @@ export const SecretItem = memo(
/> />
)} )}
/> />
) : secretValueHidden && !isSecretBlurFocus ? (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
<span className="flex flex-row items-center">
<div style={{ fontFamily: "monospace" }} className="h-full w-full">
{hiddenValue}
</div>
</span>
</div>
) : ( ) : (
<Controller <Controller
name="value" name="value"
@@ -49,8 +49,6 @@ export const SecretListView = ({
isProtectedBranch = false, isProtectedBranch = false,
importedBy importedBy
}: Props) => { }: Props) => {
console.log("secretssssss", secrets);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([ const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
"deleteSecret", "deleteSecret",