refactor: streamline async logic and notification handling across various settings and integration components

This commit is contained in:
Victor Santos
2025-11-03 15:11:10 -03:00
parent 3aeee8d552
commit c005f8a0fe
33 changed files with 709 additions and 1061 deletions
@@ -39,7 +39,6 @@ export const AuditLogsRetentionSection = () => {
if (!currentProject) return null;
const handleAuditLogsRetentionSubmit = async ({ auditLogsRetentionDays }: TForm) => {
try {
if (!subscription?.auditLogs) {
handlePopUpOpen("upgradePlan", {
description:
@@ -67,12 +66,6 @@ export const AuditLogsRetentionSection = () => {
text: "Successfully updated audit logs retention period",
type: "success"
});
} catch {
createNotification({
text: "Failed updating audit logs retention period",
type: "error"
});
}
};
// render only for dedicated/self-hosted instances of Infisical
@@ -2,7 +2,6 @@ import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, useNavigate, useParams } from "@tanstack/react-router";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { RequestProjectAccessModal } from "@app/components/projects";
import { AccessRestrictedBanner, Button } from "@app/components/v2";
@@ -35,19 +34,12 @@ export const ProjectAccessError = () => {
const handleAccessProject = async () => {
if (!project) return;
try {
await orgAdminAccessProject.mutateAsync({
projectId: project.id
});
await navigate({
to: "."
});
} catch {
createNotification({
text: "Failed to access project",
type: "error"
});
}
};
return (
@@ -131,7 +131,6 @@ export const ShareSecretForm = ({
emails,
shouldLimitView
}: FormData) => {
try {
const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
const processedEmails = emails ? emails.split(",").map((e) => e.trim()) : undefined;
@@ -170,13 +169,6 @@ export const ShareSecretForm = ({
}
reset();
} catch (error) {
console.error(error);
createNotification({
text: "Failed to create a shared secret.",
type: "error"
});
}
};
if (secretLink === null)
@@ -140,7 +140,6 @@ export const RollbackPreviewTab = (): JSX.Element => {
);
const handleRollback = async (): Promise<void> => {
try {
await rollback(message);
createNotification({
@@ -150,12 +149,6 @@ export const RollbackPreviewTab = (): JSX.Element => {
handlePopUpClose("rollbackConfirm");
goBackToHistory();
} catch (error) {
createNotification({
type: "error",
text: error instanceof Error ? error.message : "Failed to rollback changes"
});
}
};
const folderChanges: FolderChanges[] = rollbackChangesNested || [];
@@ -53,7 +53,6 @@ export const IntegrationDetailsByIDPage = () => {
const navigate = useNavigate();
const handleIntegrationDelete = async (shouldDeleteIntegrationSecrets: boolean) => {
try {
await deleteIntegration({
id: integrationId,
workspaceId: currentProject.id,
@@ -68,13 +67,6 @@ export const IntegrationDetailsByIDPage = () => {
await navigate({
to: `/${ProjectType.SecretManager}/${projectId}/integrations`
});
} catch (err) {
console.log(err);
createNotification({
type: "error",
text: "Failed to delete integration"
});
}
};
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -488,7 +488,6 @@ export const OverviewPage = () => {
};
const handleSecretCreate = async (env: string, key: string, value: string) => {
try {
// create folder if not existing
if (secretPath !== "/") {
// /hello/world -> [hello","world"]
@@ -532,13 +531,6 @@ export const OverviewPage = () => {
text: "Successfully created secret"
});
}
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to create secret"
});
}
};
const handleEnvSelect = (envId: string) => {
@@ -565,7 +557,6 @@ export const OverviewPage = () => {
secretValue = undefined;
}
try {
const result = await updateSecretV3({
environment: env,
projectId,
@@ -586,17 +577,9 @@ export const OverviewPage = () => {
text: "Successfully updated secret"
});
}
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to update secret"
});
}
};
const handleSecretDelete = async (env: string, key: string, secretId?: string) => {
try {
const result = await deleteSecretV3({
environment: env,
projectId,
@@ -617,13 +600,6 @@ export const OverviewPage = () => {
text: "Successfully deleted secret"
});
}
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to delete secret"
});
}
};
const handleResetSearch = (path: string) => {
@@ -193,19 +193,12 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
const slugSchema = z.string().trim().toLowerCase().min(1);
const createNewTag = async (slug: string) => {
// TODO: Replace with slugSchema generic
try {
const parsedSlug = slugSchema.parse(slug);
await createWsTag.mutateAsync({
projectId,
tagSlug: parsedSlug,
tagColor: ""
});
} catch {
createNotification({
type: "error",
text: "Failed to create new tag"
});
}
};
return (
@@ -77,23 +77,15 @@ export const CreateSecretForm = ({
const slugSchema = z.string().trim().toLowerCase().min(1);
const createNewTag = async (slug: string) => {
// TODO: Replace with slugSchema generic
try {
const parsedSlug = slugSchema.parse(slug);
await createWsTag.mutateAsync({
projectId,
tagSlug: parsedSlug,
tagColor: ""
});
} catch {
createNotification({
type: "error",
text: "Failed to create new tag"
});
}
};
const handleFormSubmit = async ({ key, value, tags }: TFormSchema) => {
try {
if (isBatchMode) {
const pendingSecretCreate: PendingSecretCreate = {
id: key,
@@ -134,13 +126,6 @@ export const CreateSecretForm = ({
? "Requested changes have been sent for review"
: "Successfully created secret"
});
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to create secret"
});
}
};
const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
@@ -293,7 +293,6 @@ export const SecretListView = ({
isSameTags &&
isSameRecipients;
try {
// personal secret change
let personalAction = false;
if (overrideAction === "deleted") {
@@ -454,13 +453,6 @@ export const SecretListView = ({
? "Requested changes have been sent for review"
: successMessage
});
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to save secret"
});
}
},
[environment, secretPath, isProtectedBranch, isBatchMode, projectId, addPendingChange]
);
@@ -488,7 +480,6 @@ export const SecretListView = ({
value,
secretValueHidden
} = popUp.deleteSecret?.data as SecretV3RawSanitized;
try {
if (isBatchMode) {
const deleteChange: PendingSecretDelete = {
id: `${secretId}`,
@@ -550,13 +541,6 @@ export const SecretListView = ({
? "Requested changes have been sent for review"
: "Successfully deleted secret"
});
} catch (error) {
console.log(error);
createNotification({
type: "error",
text: "Failed to delete secret"
});
}
}, [
(popUp.deleteSecret?.data as SecretV3RawSanitized)?.key,
environment,
@@ -13,7 +13,6 @@ export const AutoCapitalizationSection = () => {
const { mutateAsync } = useUpdateProject();
const handleToggleCapitalizationToggle = async (state: boolean) => {
try {
if (!currentProject?.id) return;
await mutateAsync({
@@ -26,13 +25,6 @@ export const AutoCapitalizationSection = () => {
text,
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update auto capitalization",
type: "error"
});
}
};
return (
@@ -124,7 +124,6 @@ const LoadBackupModal = ({
return;
}
try {
await loadKmsBackup(backupContent);
createNotification({
text: "Successfully loaded KMS backup",
@@ -132,9 +131,6 @@ const LoadBackupModal = ({
});
onOpenChange(false);
} catch (err) {
console.error(err);
}
};
const parseFile = (file?: File) => {
@@ -245,7 +241,6 @@ export const EncryptionTab = () => {
});
const onUpdateProjectKms = async (data: TForm) => {
try {
await updateProjectKms(
data.kmsKeyId === INTERNAL_KMS_KEY_ID
? { type: KmsType.Internal }
@@ -256,9 +251,6 @@ export const EncryptionTab = () => {
text: "Successfully updated project KMS",
type: "success"
});
} catch (err) {
console.error(err);
}
};
return (
@@ -36,7 +36,6 @@ const Content = ({ onComplete }: ContentProps) => {
});
const onFormSubmit = async ({ environmentName, environmentSlug }: FormData) => {
try {
if (!currentProject?.id) return;
const env = await mutateAsync({
@@ -51,13 +50,6 @@ const Content = ({ onComplete }: ContentProps) => {
});
onComplete(env);
} catch (err) {
console.error(err);
createNotification({
text: "Failed to create environment",
type: "error"
});
}
};
return (
@@ -33,7 +33,6 @@ export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpTog
const oldEnvId = (popUp?.updateEnv?.data as { id: string })?.id;
const onFormSubmit = async ({ name, slug }: FormData) => {
try {
if (!currentProject?.id) return;
await mutateAsync({
@@ -49,13 +48,6 @@ export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpTog
});
handlePopUpClose("updateEnv");
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update environment",
type: "error"
});
}
};
return (
@@ -34,7 +34,6 @@ export const PointInTimeVersionLimitSection = () => {
if (!currentProject) return null;
const handleVersionLimitSubmit = async ({ pitVersionLimit }: TForm) => {
try {
await updateProject({
pitVersionLimit,
projectId
@@ -44,12 +43,6 @@ export const PointInTimeVersionLimitSection = () => {
text: "Successfully updated version limit",
type: "success"
});
} catch {
createNotification({
text: "Failed updating project's version limit",
type: "error"
});
}
};
const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
@@ -15,12 +15,12 @@ export const SecretSharingSection = () => {
const handleToggle = async (state: boolean) => {
setIsLoading(true);
try {
if (!currentProject?.id) {
setIsLoading(false);
return;
}
try {
await updateProject({
projectId: currentProject.id,
secretSharing: state
@@ -30,12 +30,6 @@ export const SecretSharingSection = () => {
text: `Successfully ${state ? "enabled" : "disabled"} secret sharing for this project`,
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update secret sharing for this project",
type: "error"
});
} finally {
setIsLoading(false);
}
@@ -39,7 +39,6 @@ export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }
});
const onFormSubmit = async ({ slug }: FormData) => {
try {
if (!currentProject?.id) return;
await createWsTag.mutateAsync({
@@ -55,13 +54,6 @@ export const AddSecretTagModal = ({ popUp, handlePopUpClose, handlePopUpToggle }
type: "success"
});
reset();
} catch (err) {
console.error(err);
createNotification({
text: "Failed to create a tag",
type: "error"
});
}
};
return (
@@ -29,7 +29,6 @@ export const SecretTagsSection = (): JSX.Element => {
const deleteWsTag = useDeleteWsTag();
const onDeleteApproved = async () => {
try {
await deleteWsTag.mutateAsync({
projectId: currentProject?.id || "",
tagID: (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id
@@ -41,13 +40,6 @@ export const SecretTagsSection = (): JSX.Element => {
});
handlePopUpClose("deleteTagConfirmation");
} catch (err) {
console.error(err);
createNotification({
text: "Failed to delete the tag",
type: "error"
});
}
};
return (
@@ -126,7 +126,6 @@ export const BitbucketConfigurePage = () => {
}: TFormData) => {
if (!targetRepo || !targetWorkspace) return;
try {
await createIntegration.mutateAsync({
integrationAuthId,
isActive: true,
@@ -156,13 +155,6 @@ export const BitbucketConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
createNotification({
type: "error",
text: "Failed to create integration"
});
console.error(err);
}
};
useEffect(() => {
@@ -73,7 +73,6 @@ export const CircleCIConfigurePage = () => {
: undefined;
const onSubmit = async (data: TFormData) => {
try {
if (data.scope === CircleCiScope.Context) {
await mutateAsync({
scope: data.scope,
@@ -111,13 +110,6 @@ export const CircleCIConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
createNotification({
type: "error",
text: "Failed to create integration"
});
console.error(err);
}
};
if (isCircleCIOrganizationsLoading)
@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useNavigate, useSearch } from "@tanstack/react-router";
import axios from "axios";
import { createNotification } from "@app/components/notifications";
import {
Button,
Card,
@@ -102,19 +100,7 @@ export const CloudflarePagesConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
console.error(err);
let errorMessage: string = "Something went wrong!";
if (axios.isAxiosError(err)) {
const { message } = err?.response?.data as { message: string };
errorMessage = message;
}
createNotification({
text: errorMessage,
type: "error"
});
} catch {
setIsLoading(false);
}
};
@@ -1,8 +1,6 @@
import { useEffect, useState } from "react";
import { useNavigate, useSearch } from "@tanstack/react-router";
import axios from "axios";
import { createNotification } from "@app/components/notifications";
import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "@app/components/v2";
import { SecretPathInput } from "@app/components/v2/SecretPathInput";
import { ROUTE_PATHS } from "@app/const/routes";
@@ -75,19 +73,7 @@ export const CloudflareWorkersConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
console.error(err);
let errorMessage: string = "Something went wrong!";
if (axios.isAxiosError(err)) {
const { message } = err?.response?.data as { message: string };
errorMessage = message;
}
createNotification({
text: errorMessage,
type: "error"
});
} catch {
setIsLoading(false);
}
};
@@ -55,7 +55,6 @@ export const DatabricksConfigurePage = () => {
const [secretPath, setSecretPath] = useState("/");
const handleButtonClick = async () => {
try {
if (!integrationAuth?.id) return;
if (!targetScope) {
@@ -95,9 +94,6 @@ export const DatabricksConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
console.error(err);
}
};
return integrationAuth && selectedSourceEnvironment && integrationAuthScopes ? (
@@ -12,12 +12,10 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate, useSearch } from "@tanstack/react-router";
import axios from "axios";
import { motion } from "framer-motion";
import { twMerge } from "tailwind-merge";
import { z, ZodIssueCode } from "zod";
import { createNotification } from "@app/components/notifications";
import {
Button,
Card,
@@ -275,19 +273,7 @@ export const GithubConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
console.error(err);
let errorMessage: string = "Something went wrong!";
if (axios.isAxiosError(err)) {
const { message } = err?.response?.data as { message: string };
errorMessage = message;
}
createNotification({
text: errorMessage,
type: "error"
});
} catch {
setIsLoading(false);
}
};
@@ -4,10 +4,8 @@ import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-sv
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate } from "@tanstack/react-router";
import axios from "axios";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import { Button, Card, CardBody, CardTitle, FormControl, Input } from "@app/components/v2";
import { useProject } from "@app/context";
import { useSaveIntegrationAccessToken } from "@app/hooks/api";
@@ -41,7 +39,6 @@ export const HashicorpVaultAuthorizePage = () => {
});
const handleFormSubmit = async (formData: TForm) => {
try {
const integrationAuth = await mutateAsync({
workspaceId: currentProject.id,
integration: "hashicorp-vault",
@@ -59,19 +56,6 @@ export const HashicorpVaultAuthorizePage = () => {
integrationAuthId: integrationAuth.id
}
});
} catch (err) {
console.error(err);
let errorMessage: string = "Something went wrong!";
if (axios.isAxiosError(err)) {
const { message } = err?.response?.data as { message: string };
errorMessage = message;
}
createNotification({
text: errorMessage,
type: "error"
});
}
};
return (
@@ -10,10 +10,8 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate, useSearch } from "@tanstack/react-router";
import axios from "axios";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import {
Button,
Card,
@@ -90,7 +88,6 @@ export const HashicorpVaultConfigurePage = () => {
});
const handleFormSubmit = async (formData: TForm) => {
try {
if (!integrationAuth?.id) return;
await mutateAsync({
integrationAuthId: integrationAuth?.id,
@@ -109,19 +106,6 @@ export const HashicorpVaultConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
console.error(err);
let errorMessage: string = "Something went wrong!";
if (axios.isAxiosError(err)) {
const { message } = err?.response?.data as { message: string };
errorMessage = message;
}
createNotification({
text: errorMessage,
type: "error"
});
}
};
return integrationAuth ? (
@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import { Button, Card, CardTitle, FormControl, Input } from "@app/components/v2";
import { useProject } from "@app/context";
import { removeTrailingSlash } from "@app/helpers/string";
@@ -29,7 +28,6 @@ export const OctopusDeployAuthorizePage = () => {
});
const onSubmit = async ({ instanceUrl, apiKey }: TForm) => {
try {
const integrationAuth = await mutateAsync({
workspaceId: currentProject.id,
integration: "octopus-deploy",
@@ -46,13 +44,6 @@ export const OctopusDeployAuthorizePage = () => {
integrationAuthId: integrationAuth.id
}
});
} catch (err: any) {
createNotification({
type: "error",
text: err.message ?? "Error authorizing integration"
});
console.error(err);
}
};
return (
@@ -107,7 +107,6 @@ export const OctopusDeployConfigurePage = () => {
targetRoles,
scope
}: TFormData) => {
try {
await createIntegration.mutateAsync({
integrationAuthId,
isActive: true,
@@ -143,13 +142,6 @@ export const OctopusDeployConfigurePage = () => {
selectedTab: IntegrationsListPageTabs.NativeIntegrations
}
});
} catch (err) {
createNotification({
type: "error",
text: "Failed to create integration"
});
console.error(err);
}
};
useEffect(() => {
@@ -83,7 +83,6 @@ export const ChangeEmailSection = () => {
return;
}
try {
await requestEmailChangeOTP({ newEmail });
setPendingEmail(newEmail);
setIsOTPModalOpen(true);
@@ -92,14 +91,6 @@ export const ChangeEmailSection = () => {
text: "Verification code sent to your new email address. Check your inbox!",
type: "success"
});
} catch (err: any) {
console.error(err);
const errorMessage = err?.response?.data?.message || "Failed to send verification code";
createNotification({
text: errorMessage,
type: "error"
});
}
};
const [typedOTP, setTypedOTP] = useState("");
@@ -135,8 +126,6 @@ export const ChangeEmailSection = () => {
navigate({ to: "/login" });
}, 2000);
} catch (err: any) {
console.error(err);
const errorMessage = err?.response?.data?.message || "Invalid verification code";
if (errorMessage.includes("Invalid verification code")) {
// Reset to email step so user must request new OTP
@@ -149,11 +138,6 @@ export const ChangeEmailSection = () => {
text: "Invalid verification code. Please request a new one.",
type: "error"
});
} else {
createNotification({
text: errorMessage,
type: "error"
});
}
}
};
@@ -97,7 +97,6 @@ export const ChangePasswordSection = () => {
};
const onSetupPassword = async () => {
try {
await sendSetupPasswordEmail.mutateAsync();
createNotification({
@@ -105,13 +104,6 @@ export const ChangePasswordSection = () => {
text: "Check your email to confirm password setup",
type: "info"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to send password setup email",
type: "error"
});
}
};
return (
@@ -15,7 +15,6 @@ export const DeleteAccountSection = () => {
const { mutateAsync: deleteUserMutateAsync, isPending } = useDeleteMe();
const handleDeleteAccountSubmit = async () => {
try {
await deleteUserMutateAsync();
createNotification({
@@ -25,13 +24,6 @@ export const DeleteAccountSection = () => {
navigate({ to: "/login" });
handlePopUpClose("deleteAccount");
} catch (err) {
console.error(err);
createNotification({
text: "Failed to delete account",
type: "error"
});
}
};
return (
@@ -84,7 +84,6 @@ export const MFASection = () => {
}, [totpRegistration, showMobileAuthSetup]);
const handleTotpDeletion = async () => {
try {
await deleteTotpConfiguration();
await mutateAsync({
@@ -97,36 +96,15 @@ export const MFASection = () => {
});
handlePopUpClose("deleteTotpConfig");
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message ?? "Failed to delete mobile authenticator";
createNotification({
text,
type: "error"
});
}
};
const handleGenerateMoreRecoveryCodes = async () => {
try {
await createTotpRecoveryCodes();
createNotification({
text: "Successfully generated new recovery codes",
type: "success"
});
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message ?? "Failed to generate new recovery codes";
createNotification({
text,
type: "error"
});
}
};
const handleFormDataChange = async (field: string, value: any) => {
@@ -200,10 +178,6 @@ export const MFASection = () => {
await queryClient.invalidateQueries({ queryKey: userKeys.totpConfiguration });
} catch {
createNotification({
text: "Failed to verify TOTP code. Please try again.",
type: "error"
});
setIsLoading(false);
return;
}
@@ -249,12 +223,6 @@ export const MFASection = () => {
setShowMobileAuthSetup(false);
setTotpCode("");
setShouldShowRecoveryCodes.off();
} catch (err) {
createNotification({
text: "Something went wrong while updating two-factor authentication settings.",
type: "error"
});
console.error(err);
} finally {
setIsLoading(false);
}
@@ -40,19 +40,11 @@ export const SessionsTable = () => {
] as const);
const handleSignOut = async (sessionId: string) => {
try {
await revokeMySessionById(sessionId);
createNotification({
text: "Session revoked successfully",
type: "success"
});
} catch (error) {
console.error(error);
createNotification({
text: "Failed to revoke session",
type: "error"
});
}
handlePopUpClose("deleteSession");
};
@@ -27,7 +27,6 @@ export const UserNameSection = (): JSX.Element => {
}, [user]);
const onFormSubmit = async ({ name }: FormData) => {
try {
if (!user?.id) return;
if (name === "") return;
@@ -36,13 +35,6 @@ export const UserNameSection = (): JSX.Element => {
text: "Successfully renamed user",
type: "success"
});
} catch (error) {
console.error(error);
createNotification({
text: "Failed to rename user",
type: "error"
});
}
};
return (