mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-01 09:34:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix toast dismiss causing components to rerender and clean up rules text

Browse source
This commit is contained in:
Milo Schwartz 2025-02-10 21:35:06 -05:00
parent 6fba13c8d1
commit 8165051dd8
No known key found for this signature in database
26 changed files with 69 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx
View file

@ -10,7 +10,7 @@ import {
FormMessage,
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { AxiosResponse } from "axios";
import { useState } from "react";
@ -48,7 +48,6 @@ export default function CreateRoleForm({
setOpen,
afterCreate,
}: CreateRoleFormProps) {
const { toast } = useToast();
const { org } = useOrgContext();
const [loading, setLoading] = useState(false);

3
src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx
View file

@ -9,7 +9,7 @@ import {
FormLabel,
FormMessage,
} from "@app/components/ui/form";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { AxiosResponse } from "axios";
import { useEffect, useState } from "react";
@ -56,7 +56,6 @@ export default function DeleteRoleForm({
setOpen,
afterDelete,
}: CreateRoleFormProps) {
const { toast } = useToast();
const { org } = useOrgContext();
const [loading, setLoading] = useState(false);

3
src/app/[orgId]/settings/access/roles/RolesTable.tsx
View file

@ -12,7 +12,7 @@ import { ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
import { useState } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { RolesDataTable } from "./RolesDataTable";
import { Role } from "@server/db/schema";
import CreateRoleForm from "./CreateRoleForm";
@ -37,7 +37,6 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
const api = createApiClient(useEnvContext());
const { org } = useOrgContext();
const { toast } = useToast();
const columns: ColumnDef<RoleRow>[] = [
{

3
src/app/[orgId]/settings/access/users/InviteUserForm.tsx
View file

@ -17,7 +17,7 @@ import {
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { InviteUserBody, InviteUserResponse } from "@server/routers/user";
import { AxiosResponse } from "axios";
@ -54,7 +54,6 @@ const formSchema = z.object({
});
export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
const { toast } = useToast();
const { org } = useOrgContext();
const { env } = useEnvContext();

3
src/app/[orgId]/settings/access/users/UsersTable.tsx
View file

@ -14,7 +14,7 @@ import { useState } from "react";
import InviteUserForm from "./InviteUserForm";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { formatAxiosError } from "@app/lib/api";
@ -47,7 +47,6 @@ export default function UsersTable({ users: u }: UsersTableProps) {
const { user, updateUser } = useUserContext();
const { org } = useOrgContext();
const { toast } = useToast();
const columns: ColumnDef<UserRow>[] = [
{

3
src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
View file

@ -16,7 +16,7 @@ import {
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { InviteUserResponse } from "@server/routers/user";
import { AxiosResponse } from "axios";
@ -47,7 +47,6 @@ const formSchema = z.object({
});
export default function AccessControlsPage() {
const { toast } = useToast();
const { orgUser: user } = userOrgUserContext();
const api = createApiClient(useEnvContext());

3
src/app/[orgId]/settings/general/page.tsx
View file

@ -4,7 +4,7 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Button } from "@app/components/ui/button";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useState } from "react";
import {
Form,
@ -56,7 +56,6 @@ export default function GeneralPage() {
const { orgUser } = userOrgUserContext();
const router = useRouter();
const { org } = useOrgContext();
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [loadingDelete, setLoadingDelete] = useState(false);

4
src/app/[orgId]/settings/resources/CreateResourceForm.tsx
View file

@ -11,7 +11,7 @@ import {
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@ -117,8 +117,6 @@ export default function CreateResourceForm({
open,
setOpen
}: CreateResourceFormProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [loading, setLoading] = useState(false);

4
src/app/[orgId]/settings/resources/ResourcesTable.tsx
View file

@ -26,7 +26,7 @@ import { useState } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { set } from "zod";
import { formatAxiosError } from "@app/lib/api";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import CopyToClipboard from "@app/components/CopyToClipboard";
@ -52,8 +52,6 @@ type ResourcesTableProps = {
export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
const router = useRouter();
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

4
src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx
View file

@ -11,7 +11,7 @@ import {
FormMessage,
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@ -55,8 +55,6 @@ export default function SetResourcePasswordForm({
resourceId,
onSetPassword,
}: SetPasswordFormProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [loading, setLoading] = useState(false);

4
src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
View file

@ -11,7 +11,7 @@ import {
FormMessage,
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@ -60,8 +60,6 @@ export default function SetResourcePincodeForm({
resourceId,
onSetPincode,
}: SetPincodeFormProps) {
const { toast } = useToast();
const [loading, setLoading] = useState(false);
const api = createApiClient(useEnvContext());

3
src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
View file

@ -2,7 +2,7 @@
import { useEffect, useState } from "react";
import { ListRolesResponse } from "@server/routers/role";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { AxiosResponse } from "axios";
@ -75,7 +75,6 @@ const whitelistSchema = z.object({
});
export default function ResourceAuthenticationPage() {
const { toast } = useToast();
const { org } = useOrgContext();
const { resource, updateResource, authInfo, updateAuthInfo } =
useResourceContext();

3
src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
View file

@ -45,7 +45,7 @@ import {
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { ArrayElement } from "@server/types/ArrayElement";
import { formatAxiosError } from "@app/lib/api/formatAxiosError";
@ -113,7 +113,6 @@ export default function ReverseProxyTargets(props: {
}) {
const params = use(props.params);
const { toast } = useToast();
const { resource, updateResource } = useResourceContext();
const api = createApiClient(useEnvContext());

3
src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
View file

@ -34,7 +34,7 @@ import { AxiosResponse } from "axios";
import { useParams, useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { GetResourceAuthInfoResponse } from "@server/routers/resource";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import {
SettingsContainer,
SettingsSection,
@ -102,7 +102,6 @@ type TransferFormValues = z.infer<typeof TransferFormSchema>;
export default function GeneralForm() {
const params = useParams();
const { toast } = useToast();
const { resource, updateResource } = useResourceContext();
const { org } = useOrgContext();
const router = useRouter();

66
src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
View file

@ -16,7 +16,6 @@ import { z } from "zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
@ -40,7 +39,7 @@ import {
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { ArrayElement } from "@server/types/ArrayElement";
import { formatAxiosError } from "@app/lib/api/formatAxiosError";
@ -58,7 +57,7 @@ import {
import { ListResourceRulesResponse } from "@server/routers/resource/listResourceRules";
import { SwitchInput } from "@app/components/SwitchInput";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Check, Info, InfoIcon, X } from "lucide-react";
import { Check, InfoIcon, X } from "lucide-react";
import {
InfoSection,
InfoSections,
@ -84,11 +83,16 @@ enum RuleAction {
DROP = "Always Deny"
}
enum RuleMatch {
IP = "IP",
CIDR = "IP Range",
PATH = "Path"
}
export default function ResourceRules(props: {
params: Promise<{ resourceId: number }>;
}) {
const params = use(props.params);
const { toast } = useToast();
const { resource, updateResource } = useResourceContext();
const api = createApiClient(useEnvContext());
const [rules, setRules] = useState<LocalRule[]>([]);
@ -233,6 +237,17 @@ export default function ResourceRules(props: {
}
}
function getValueHelpText(type: string) {
switch (type) {
case "CIDR":
return "Enter an address in CIDR format (e.g., 103.21.244.0/22)";
case "IP":
return "Enter an IP address (e.g., 103.21.244.12)";
case "PATH":
return "Enter a URL path or pattern (e.g., /api/v1/todos or /api/v1/*)";
}
}
async function saveRules() {
try {
setLoading(true);
@ -275,7 +290,10 @@ export default function ResourceRules(props: {
}
if (rule.new) {
const res = await api.put(`/resource/${params.resourceId}/rule`, data);
const res = await api.put(
`/resource/${params.resourceId}/rule`,
data
);
rule.ruleId = res.data.data.ruleId;
} else if (rule.updated) {
await api.post(
@ -300,9 +318,7 @@ export default function ResourceRules(props: {
await api.delete(
`/resource/${params.resourceId}/rule/${ruleId}`
);
setRules(
rules.filter((r) => r.ruleId !== ruleId)
);
setRules(rules.filter((r) => r.ruleId !== ruleId));
}
toast({
@ -337,7 +353,9 @@ export default function ResourceRules(props: {
}
>
<SelectTrigger className="min-w-[100px]">
{row.original.action}
{row.original.action === "ACCEPT"
? RuleAction.ACCEPT
: RuleAction.DROP}
</SelectTrigger>
<SelectContent>
<SelectItem value="ACCEPT">
@ -359,12 +377,16 @@ export default function ResourceRules(props: {
}
>
<SelectTrigger className="min-w-[100px]">
{row.original.match}
{row.original.match === "IP"
? RuleMatch.IP
: row.original.match === "CIDR"
? RuleMatch.CIDR
: RuleMatch.PATH}
</SelectTrigger>
<SelectContent>
<SelectItem value="IP">IP</SelectItem>
<SelectItem value="CIDR">IP Range</SelectItem>
<SelectItem value="PATH">PATH</SelectItem>
<SelectItem value="IP">{RuleMatch.IP}</SelectItem>
<SelectItem value="CIDR">{RuleMatch.CIDR}</SelectItem>
<SelectItem value="PATH">{RuleMatch.PATH}</SelectItem>
</SelectContent>
</Select>
)
@ -547,14 +569,14 @@ export default function ResourceRules(props: {
</SelectTrigger>
<SelectContent>
<SelectItem value="IP">
IP
{RuleMatch.IP}
</SelectItem>
<SelectItem value="CIDR">
IP Range
{RuleMatch.CIDR}
</SelectItem>
{resource.http && (
<SelectItem value="PATH">
PATH
{RuleMatch.PATH}
</SelectItem>
)}
</SelectContent>
@ -572,11 +594,11 @@ export default function ResourceRules(props: {
<InfoPopup
text="Value"
info={
addRuleForm.watch(
"match"
) === "CIDR"
? "Enter an address in CIDR format (e.g., 103.21.244.0/22)"
: "Enter a URL path or pattern (e.g., /api/v1/todos or /api/v1/*)"
getValueHelpText(
addRuleForm.watch(
"match"
)
) || ""
}
/>
<FormControl>
@ -590,7 +612,7 @@ export default function ResourceRules(props: {
<Button
type="submit"
variant="outline"
disabled={loading || !rulesEnabled}
disabled={!rulesEnabled}
>
Add Rule
</Button>

3
src/app/[orgId]/settings/share-links/CreateShareLinkForm.tsx
View file

@ -18,7 +18,7 @@ import {
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { InviteUserBody, InviteUserResponse } from "@server/routers/user";
import { AxiosResponse } from "axios";
@ -94,7 +94,6 @@ export default function CreateShareLinkForm({
setOpen,
onCreated
}: FormProps) {
const { toast } = useToast();
const { org } = useOrgContext();
const { env } = useEnvContext();

4
src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
View file

@ -25,7 +25,7 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { formatAxiosError } from "@app/lib/api";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { ArrayElement } from "@server/types/ArrayElement";
@ -54,8 +54,6 @@ export default function ShareLinksTable({
}: ShareLinksTableProps) {
const router = useRouter();
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

4
src/app/[orgId]/settings/sites/CreateSiteForm.tsx
View file

@ -10,7 +10,7 @@ import {
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@ -72,8 +72,6 @@ export default function CreateSiteForm({
setChecked,
orgId
}: CreateSiteFormProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const { env } = useEnvContext();

4
src/app/[orgId]/settings/sites/SitesTable.tsx
View file

@ -22,7 +22,7 @@ import { AxiosResponse } from "axios";
import { useState } from "react";
import CreateSiteForm from "./CreateSiteForm";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
@ -47,8 +47,6 @@ type SitesTableProps = {
export default function SitesTable({ sites, orgId }: SitesTableProps) {
const router = useRouter();
const { toast } = useToast();
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);

3
src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
View file

@ -15,7 +15,7 @@ import {
import { Input } from "@/components/ui/input";
import { useSiteContext } from "@app/hooks/useSiteContext";
import { useForm } from "react-hook-form";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useRouter } from "next/navigation";
import {
SettingsContainer,
@ -40,7 +40,6 @@ type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
export default function GeneralPage() {
const { site, updateSite } = useSiteContext();
const { toast } = useToast();
const api = createApiClient(useEnvContext());

4
src/app/auth/reset-password/ResetPasswordForm.tsx
View file

@ -36,7 +36,7 @@ import {
} from "@server/routers/auth";
import { Loader2 } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useRouter } from "next/navigation";
import { formatAxiosError } from "@app/lib/api";;
import { createApiClient } from "@app/lib/api";
@ -96,8 +96,6 @@ export default function ResetPasswordForm({
const [state, setState] = useState<"request" | "reset" | "mfa">(getState());
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const form = useForm<z.infer<typeof formSchema>>({

3
src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx
View file

@ -48,7 +48,7 @@ import {
import ResourceAccessDenied from "./ResourceAccessDenied";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import Link from "next/link";
const pinSchema = z.object({
@ -91,7 +91,6 @@ type ResourceAuthPortalProps = {
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
const router = useRouter();
const { toast } = useToast();
const getNumMethods = () => {
let colLength = 0;

4
src/app/auth/verify-email/VerifyEmailForm.tsx
View file

@ -31,7 +31,7 @@ import { AxiosResponse } from "axios";
import { VerifyEmailResponse } from "@server/routers/auth";
import { Loader2 } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { useRouter } from "next/navigation";
import { formatAxiosError } from "@app/lib/api";;
import { createApiClient } from "@app/lib/api";
@ -61,8 +61,6 @@ export default function VerifyEmailForm({
const [isResending, setIsResending] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const form = useForm<z.infer<typeof FormSchema>>({

4
src/components/Disable2FaForm.tsx
View file

@ -28,7 +28,7 @@ import {
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";;
import { useUserContext } from "@app/hooks/useUserContext";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";
@ -50,8 +50,6 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
const [step, setStep] = useState<"password" | "success">("password");
const { toast } = useToast();
const { user, updateUser } = useUserContext();
const api = createApiClient(useEnvContext());

4
src/components/Enable2FaForm.tsx
View file

@ -35,7 +35,7 @@ import {
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";;
import CopyTextBox from "@app/components/CopyTextBox";
import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
@ -64,8 +64,6 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
const [loading, setLoading] = useState(false);
const [backupCodes, setBackupCodes] = useState<string[]>([]);
const { toast } = useToast();
const { user, updateUser } = useUserContext();
const api = createApiClient(useEnvContext());

3
src/components/ProfileIcon.tsx
View file

@ -12,7 +12,7 @@ import {
DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useToast } from "@app/hooks/useToast";
import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";;
import { Laptop, LogOut, Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
@ -23,7 +23,6 @@ import Disable2FaForm from "./Disable2FaForm";
import Enable2FaForm from "./Enable2FaForm";
export default function ProfileIcon() {
const { toast } = useToast();
const { setTheme, theme } = useTheme();
const { env } = useEnvContext();
const api = createApiClient({ env });