lee/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-12-04 06:58:52 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1612 from Pallavikumarimdb/fix/UI-adjustment

Browse Source 
UI Adjustments
This commit is contained in:
Owen Schwartz
2025-10-13 12:02:55 -07:00
committed by GitHub
parent e7828a43fa 093fb419f3
commit 65eb3e4b95
27 changed files with 1766 additions and 1567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
messages/en-US.json
View File

@@ -468,7 +468,10 @@
"createdAt": "Created At",
"proxyErrorInvalidHeader": "Invalid custom Host Header value. Use domain name format, or save empty to unset custom Host Header.",
"proxyErrorTls": "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name.",
"proxyEnableSSL": "Enable SSL (https)",
"proxyEnableSSL": "Enable SSL",
"proxyEnableSSLDescription": "Enable SSL/TLS encryption for secure HTTPS connections to your targets.",
"target": "Target",
"configureTarget": "Configure Targets",
"targetErrorFetch": "Failed to fetch targets",
"targetErrorFetchDescription": "An error occurred while fetching targets",
"siteErrorFetch": "Failed to fetch resource",
@@ -495,7 +498,7 @@
"targetTlsSettings": "Secure Connection Configuration",
"targetTlsSettingsDescription": "Configure SSL/TLS settings for your resource",
"targetTlsSettingsAdvanced": "Advanced TLS Settings",
"targetTlsSni": "TLS Server Name (SNI)",
"targetTlsSni": "TLS Server Name",
"targetTlsSniDescription": "The TLS Server Name to use for SNI. Leave empty to use the default.",
"targetTlsSubmit": "Save Settings",
"targets": "Targets Configuration",
@@ -504,9 +507,21 @@
"targetStickySessionsDescription": "Keep connections on the same backend target for their entire session.",
"methodSelect": "Select method",
"targetSubmit": "Add Target",
"targetNoOne": "No targets. Add a target using the form.",
"targetNoOne": "This resource doesn't have any targets. Add a target to configure where to send requests to your backend.",
"targetNoOneDescription": "Adding more than one target above will enable load balancing.",
"targetsSubmit": "Save Targets",
"addTarget": "Add Target",
"targetErrorInvalidIp": "Invalid IP address",
"targetErrorInvalidIpDescription": "Please enter a valid IP address or hostname",
"targetErrorInvalidPort": "Invalid port",
"targetErrorInvalidPortDescription": "Please enter a valid port number",
"targetErrorNoSite": "No site selected",
"targetErrorNoSiteDescription": "Please select a site for the target",
"targetCreated": "Target created",
"targetCreatedDescription": "Target has been created successfully",
"targetErrorCreate": "Failed to create target",
"targetErrorCreateDescription": "An error occurred while creating the target",
"save": "Save",
"proxyAdditional": "Additional Proxy Settings",
"proxyAdditionalDescription": "Configure how your resource handles proxy settings",
"proxyCustomHeader": "Custom Host Header",
@@ -1410,6 +1425,7 @@
"externalProxyEnabled": "External Proxy Enabled",
"addNewTarget": "Add New Target",
"targetsList": "Targets List",
"advancedMode": "Advanced Mode",
"targetErrorDuplicateTargetFound": "Duplicate target found",
"healthCheckHealthy": "Healthy",
"healthCheckUnhealthy": "Unhealthy",
@@ -1740,5 +1756,7 @@
"resourceHeaderAuthSetupTitle": "Set Header Authentication",
"resourceHeaderAuthSetupTitleDescription": "Set the basic auth credentials (username and password) to protect this resource with HTTP Header Authentication. Leave both fields blank to remove existing header authentication.",
"resourceHeaderAuthSubmit": "Set Header Authentication",
"actionSetResourceHeaderAuth": "Set Header Authentication"
"actionSetResourceHeaderAuth": "Set Header Authentication",
"priority": "Priority",
"priorityDescription": "Higher priority routes are evaluated first. Priority = 100 means automatic ordering (system decides). Use another number to enforce manual priority."
}

2
server/lib/resend.ts
View File

@@ -11,5 +11,5 @@ export async function moveEmailToAudience(
email: string,
audienceId: AudienceIds
) {
return
return;
}

7
server/routers/resource/createResource.ts
View File

@@ -37,7 +37,8 @@ const createHttpResourceSchema = z
subdomain: z.string().nullable().optional(),
http: z.boolean(),
protocol: z.enum(["tcp", "udp"]),
domainId: z.string()
domainId: z.string(),
stickySession: z.boolean().optional(),
})
.strict()
.refine(
@@ -191,6 +192,7 @@ async function createHttpResource(
const { name, domainId } = parsedBody.data;
const subdomain = parsedBody.data.subdomain;
const stickySession=parsedBody.data.stickySession;
// Validate domain and construct full domain
const domainResult = await validateAndConstructDomain(
@@ -254,7 +256,8 @@ async function createHttpResource(
subdomain: finalSubdomain,
http: true,
protocol: "tcp",
ssl: true
ssl: true,
stickySession: stickySession
})
.returning();

1507
src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx
View File

File diff suppressed because it is too large Load Diff

1325
src/app/[orgId]/settings/resources/create/page.tsx
View File

File diff suppressed because it is too large Load Diff

8
src/components/AdminIdpDataTable.tsx
View File

@@ -8,11 +8,15 @@ import { useTranslations } from "next-intl";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function IdpDataTable<TData, TValue>({
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const router = useRouter();
const t = useTranslations();
@@ -29,6 +33,8 @@ export function IdpDataTable<TData, TValue>({
onAdd={() => {
router.push("/admin/idp/create");
}}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
/>
);
}

25
src/components/AdminIdpTable.tsx
View File

@@ -39,8 +39,26 @@ export default function IdpTable({ idps }: Props) {
const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
const api = createApiClient(useEnvContext());
const router = useRouter();
const [isRefreshing, setIsRefreshing] = useState(false);
const t = useTranslations();
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteIdp = async (idpId: number) => {
try {
await api.delete(`/idp/${idpId}`);
@@ -194,7 +212,12 @@ export default function IdpTable({ idps }: Props) {
/>
)}
<IdpDataTable columns={columns} data={idps} />
<IdpDataTable
columns={columns}
data={idps}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);
}

8
src/components/AdminUsersDataTable.tsx
View File

@@ -9,11 +9,15 @@ import { useTranslations } from "next-intl";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function UsersDataTable<TData, TValue>({
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -26,6 +30,8 @@ export function UsersDataTable<TData, TValue>({
title={t('userServer')}
searchPlaceholder={t('userSearch')}
searchColumn="email"
onRefresh={onRefresh}
isRefreshing={isRefreshing}
/>
);
}

28
src/components/AdminUsersTable.tsx
View File

@@ -46,6 +46,25 @@ export default function UsersTable({ users }: Props) {
const api = createApiClient(useEnvContext());
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteUser = (id: string) => {
api.delete(`/user/${id}`)
.catch((e) => {
@@ -168,7 +187,7 @@ export default function UsersTable({ users }: Props) {
<div className="flex flex-row items-center gap-2">
<span>
{userRow.twoFactorEnabled ||
userRow.twoFactorSetupRequested ? (
userRow.twoFactorSetupRequested ? (
<span className="text-green-500">
{t("enabled")}
</span>
@@ -263,7 +282,12 @@ export default function UsersTable({ users }: Props) {
/>
)}
<UsersDataTable columns={columns} data={rows} />
<UsersDataTable
columns={columns}
data={rows}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);
}

10
src/components/ApiKeysDataTable.tsx
View File

@@ -33,16 +33,20 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addApiKey?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function ApiKeysDataTable<TData, TValue>({
addApiKey,
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
return (
<DataTable
columns={columns}
@@ -53,6 +57,8 @@ export function ApiKeysDataTable<TData, TValue>({
searchColumn="name"
onAdd={addApiKey}
addButtonText={t('apiKeysAdd')}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
/>
);
}

21
src/components/ApiKeysTable.tsx
View File

@@ -43,6 +43,25 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteSite = (apiKeyId: string) => {
api.delete(`/api-key/${apiKeyId}`)
.catch((e) => {
@@ -186,6 +205,8 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
addApiKey={() => {
router.push(`/admin/api-keys/create`);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

8
src/components/ClientsDataTable.tsx
View File

@@ -8,13 +8,17 @@ import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
addClient?: () => void;
}
export function ClientsDataTable<TData, TValue>({
columns,
data,
addClient
addClient,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
return (
<DataTable
@@ -25,6 +29,8 @@ export function ClientsDataTable<TData, TValue>({
searchPlaceholder="Search clients..."
searchColumn="name"
onAdd={addClient}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText="Add Client"
/>
);

74
src/components/ClientsTable.tsx
View File

@@ -25,6 +25,7 @@ import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
export type ClientRow = {
id: number;
@@ -53,6 +54,25 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
const [rows, setRows] = useState<ClientRow[]>(clients);
const api = createApiClient(useEnvContext());
const [isRefreshing, setIsRefreshing] = useState(false);
const t = useTranslations();
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteClient = (clientId: number) => {
api.delete(`/client/${clientId}`)
@@ -207,32 +227,32 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
return (
<div className="flex items-center justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
>
@@ -292,6 +312,8 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
addClient={() => {
router.push(`/${orgId}/settings/clients/create`);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

24
src/components/HealthCheckDialog.tsx
View File

@@ -107,7 +107,7 @@ export default function HealthCheckDialog({
useEffect(() => {
if (!open) return;
// Determine default scheme from target method
const getDefaultScheme = () => {
if (initialConfig?.hcScheme) {
@@ -177,7 +177,7 @@ export default function HealthCheckDialog({
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("enableHealthChecks")}
</FormLabel>
<FormDescription>
@@ -210,7 +210,7 @@ export default function HealthCheckDialog({
name="hcScheme"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("healthScheme")}
</FormLabel>
<Select
@@ -250,7 +250,7 @@ export default function HealthCheckDialog({
name="hcHostname"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("healthHostname")}
</FormLabel>
<FormControl>
@@ -277,7 +277,7 @@ export default function HealthCheckDialog({
name="hcPort"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("healthPort")}
</FormLabel>
<FormControl>
@@ -308,7 +308,7 @@ export default function HealthCheckDialog({
name="hcPath"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("healthCheckPath")}
</FormLabel>
<FormControl>
@@ -338,7 +338,7 @@ export default function HealthCheckDialog({
name="hcMethod"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("httpMethod")}
</FormLabel>
<Select
@@ -390,7 +390,7 @@ export default function HealthCheckDialog({
name="hcInterval"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t(
"healthyIntervalSeconds"
)}
@@ -425,7 +425,7 @@ export default function HealthCheckDialog({
name="hcUnhealthyInterval"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t(
"unhealthyIntervalSeconds"
)}
@@ -460,7 +460,7 @@ export default function HealthCheckDialog({
name="hcTimeout"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("timeoutSeconds")}
</FormLabel>
<FormControl>
@@ -499,7 +499,7 @@ export default function HealthCheckDialog({
name="hcStatus"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("expectedResponseCodes")}
</FormLabel>
<FormControl>
@@ -541,7 +541,7 @@ export default function HealthCheckDialog({
name="hcHeaders"
render={({ field }) => (
<FormItem>
<FormLabel className="text-base font-semibold">
<FormLabel>
{t("customHeaders")}
</FormLabel>
<FormControl>

8
src/components/InvitationsDataTable.tsx
View File

@@ -9,11 +9,15 @@ import { useTranslations } from 'next-intl';
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function InvitationsDataTable<TData, TValue>({
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -26,6 +30,8 @@ export function InvitationsDataTable<TData, TValue>({
title={t('invite')}
searchPlaceholder={t('inviteSearch')}
searchColumn="email"
onRefresh={onRefresh}
isRefreshing={isRefreshing}
/>
);
}

27
src/components/InvitationsTable.tsx
View File

@@ -19,6 +19,7 @@ import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import moment from "moment";
import { useRouter } from "next/navigation";
export type InvitationRow = {
id: string;
@@ -45,6 +46,25 @@ export default function InvitationsTable({
const api = createApiClient(useEnvContext());
const { org } = useOrgContext();
const router = useRouter();
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const columns: ColumnDef<InvitationRow>[] = [
{
@@ -185,7 +205,12 @@ export default function InvitationsTable({
}}
/>
<InvitationsDataTable columns={columns} data={invitations} />
<InvitationsDataTable
columns={columns}
data={invitations}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);
}

8
src/components/OrgApiKeysDataTable.tsx
View File

@@ -8,12 +8,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addApiKey?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function OrgApiKeysDataTable<TData, TValue>({
addApiKey,
columns,
data
data,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -27,6 +31,8 @@ export function OrgApiKeysDataTable<TData, TValue>({
searchPlaceholder={t('searchApiKeys')}
searchColumn="name"
onAdd={addApiKey}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('apiKeysAdd')}
/>
);

20
src/components/OrgApiKeysTable.tsx
View File

@@ -46,6 +46,24 @@ export default function OrgApiKeysTable({
const api = createApiClient(useEnvContext());
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const deleteSite = (apiKeyId: string) => {
api.delete(`/org/${orgId}/api-key/${apiKeyId}`)
@@ -195,6 +213,8 @@ export default function OrgApiKeysTable({
addApiKey={() => {
router.push(`/${orgId}/settings/api-keys/create`);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

71
src/components/PathMatchRenameModal.tsx
View File

@@ -1,4 +1,4 @@
import { Pencil } from "lucide-react";
import { Settings } from "lucide-react";
import {
Select,
SelectContent,
@@ -6,20 +6,13 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@app/components/ui/dialog";
import { Badge } from "@app/components/ui/badge";
import { Label } from "@app/components/ui/label";
import { useEffect, useState } from "react";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { Credenza, CredenzaContent, CredenzaDescription, CredenzaFooter, CredenzaHeader, CredenzaTitle, CredenzaTrigger } from "./Credenza";
export function PathMatchModal({
@@ -68,15 +61,15 @@ export function PathMatchModal({
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Configure Path Matching</DialogTitle>
<DialogDescription>
<Credenza open={open} onOpenChange={setOpen}>
<CredenzaTrigger asChild>{trigger}</CredenzaTrigger>
<CredenzaContent className="sm:max-w-[500px]">
<CredenzaHeader>
<CredenzaTitle>Configure Path Matching</CredenzaTitle>
<CredenzaDescription>
Set up how incoming requests should be matched based on their path.
</DialogDescription>
</DialogHeader>
</CredenzaDescription>
</CredenzaHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="match-type">Match Type</Label>
@@ -102,7 +95,7 @@ export function PathMatchModal({
<p className="text-sm text-muted-foreground">{getHelpText()}</p>
</div>
</div>
<DialogFooter className="gap-2">
<CredenzaFooter className="gap-2">
{value?.path && (
<Button variant="outline" onClick={handleClear}>
Clear
@@ -111,9 +104,9 @@ export function PathMatchModal({
<Button onClick={handleSave} disabled={!path.trim()}>
Save Changes
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}
@@ -177,17 +170,17 @@ export function PathRewriteModal({
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild disabled={disabled}>
<Credenza open={open} onOpenChange={(v) => !disabled && setOpen(v)}>
<CredenzaTrigger asChild>
{trigger}
</DialogTrigger>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Configure Path Rewriting</DialogTitle>
<DialogDescription>
</CredenzaTrigger>
<CredenzaContent className="sm:max-w-[500px]">
<CredenzaHeader>
<CredenzaTitle>Configure Path Rewriting</CredenzaTitle>
<CredenzaDescription>
Transform the matched path before forwarding to the target.
</DialogDescription>
</DialogHeader>
</CredenzaDescription>
</CredenzaHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="rewrite-type">Rewrite Type</Label>
@@ -214,7 +207,7 @@ export function PathRewriteModal({
<p className="text-sm text-muted-foreground">{getHelpText()}</p>
</div>
</div>
<DialogFooter className="gap-2">
<CredenzaFooter className="gap-2">
{value?.rewritePath && (
<Button variant="outline" onClick={handleClear}>
Clear
@@ -226,9 +219,9 @@ export function PathRewriteModal({
>
Save Changes
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}
@@ -250,13 +243,13 @@ export function PathMatchDisplay({
return (
<div className="flex items-center gap-2 w-full text-left">
<Badge variant="secondary" className="font-mono text-xs shrink-0">
<Badge variant="secondary" className="text-xs shrink-0">
{getTypeLabel(value.pathMatchType)}
</Badge>
<code className="text-sm flex-1 truncate" title={value.path}>
{value.path}
</code>
<Pencil className="h-3 w-3 shrink-0 opacity-70" />
<Settings className="h-4 w-4" />
</div>
);
}
@@ -281,13 +274,13 @@ export function PathRewriteDisplay({
return (
<div className="flex items-center gap-2 w-full text-left">
<Badge variant="secondary" className="font-mono text-xs shrink-0">
<Badge variant="secondary" className="text-xs shrink-0">
{getTypeLabel(value.rewritePathType)}
</Badge>
<code className="text-sm flex-1 truncate" title={value.rewritePath || ""}>
{value.rewritePath || <span className="text-muted-foreground italic">(strip)</span>}
</code>
<Pencil className="h-3 w-3 shrink-0 opacity-70" />
<Settings className="h-4 w-4" />
</div>
);
}

37
src/components/ResourcesTable.tsx
View File

@@ -24,7 +24,8 @@ import {
MoreHorizontal,
ArrowUpRight,
ShieldOff,
ShieldCheck
ShieldCheck,
RefreshCw
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -179,9 +180,27 @@ export default function ResourcesTable({
const [internalColumnFilters, setInternalColumnFilters] =
useState<ColumnFiltersState>([]);
const [internalGlobalFilter, setInternalGlobalFilter] = useState<any>([]);
const [isRefreshing, setIsRefreshing] = useState(false);
const currentView = searchParams.get("view") || defaultView;
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
useEffect(() => {
const fetchSites = async () => {
try {
@@ -753,7 +772,21 @@ export default function ResourcesTable({
)}
</div>
<div className="flex items-center gap-2 sm:justify-end">
{getActionButton()}
<div>
<Button
variant="outline"
onClick={refreshData}
disabled={isRefreshing}
>
<RefreshCw
className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
/>
{t("refresh")}
</Button>
</div>
<div>
{getActionButton()}
</div>
</div>
</CardHeader>
<CardContent>

8
src/components/RolesDataTable.tsx
View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
createRole?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function RolesDataTable<TData, TValue>({
columns,
data,
createRole
createRole,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function RolesDataTable<TData, TValue>({
searchPlaceholder={t('accessRolesSearch')}
searchColumn="name"
onAdd={createRole}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('accessRolesAdd')}
/>
);

22
src/components/RolesTable.tsx
View File

@@ -20,6 +20,7 @@ import DeleteRoleForm from "@app/components/DeleteRoleForm";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
export type RoleRow = Role;
@@ -30,6 +31,7 @@ type RolesTableProps = {
export default function UsersTable({ roles: r }: RolesTableProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const router = useRouter();
const [roles, setRoles] = useState<RoleRow[]>(r);
@@ -40,6 +42,24 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
const { org } = useOrgContext();
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const columns: ColumnDef<RoleRow>[] = [
{
@@ -116,6 +136,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
createRole={() => {
setIsCreateModalOpen(true);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

8
src/components/ShareLinksDataTable.tsx
View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
createShareLink?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function ShareLinksDataTable<TData, TValue>({
columns,
data,
createShareLink
createShareLink,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function ShareLinksDataTable<TData, TValue>({
searchPlaceholder={t('shareSearch')}
searchColumn="name"
onAdd={createShareLink}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('shareCreate')}
/>
);

21
src/components/ShareLinksTable.tsx
View File

@@ -61,6 +61,25 @@ export default function ShareLinksTable({
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [rows, setRows] = useState<ShareLinkRow[]>(shareLinks);
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
function formatLink(link: string) {
return link.substring(0, 20) + "..." + link.substring(link.length - 20);
}
@@ -292,6 +311,8 @@ export default function ShareLinksTable({
createShareLink={() => {
setIsCreateModalOpen(true);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

8
src/components/UsersDataTable.tsx
View File

@@ -10,12 +10,16 @@ interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
inviteUser?: () => void;
onRefresh?: () => void;
isRefreshing?: boolean;
}
export function UsersDataTable<TData, TValue>({
columns,
data,
inviteUser
inviteUser,
onRefresh,
isRefreshing
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -29,6 +33,8 @@ export function UsersDataTable<TData, TValue>({
searchPlaceholder={t('accessUsersSearch')}
searchColumn="email"
onAdd={inviteUser}
onRefresh={onRefresh}
isRefreshing={isRefreshing}
addButtonText={t('accessUserCreate')}
/>
);

20
src/components/UsersTable.tsx
View File

@@ -51,6 +51,24 @@ export default function UsersTable({ users: u }: UsersTableProps) {
const { user, updateUser } = useUserContext();
const { org } = useOrgContext();
const t = useTranslations();
const [isRefreshing, setIsRefreshing] = useState(false);
const refreshData = async () => {
console.log("Data refreshed");
setIsRefreshing(true);
try {
await new Promise((resolve) => setTimeout(resolve, 200));
router.refresh();
} catch (error) {
toast({
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
} finally {
setIsRefreshing(false);
}
};
const columns: ColumnDef<UserRow>[] = [
{
@@ -290,6 +308,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
`/${org?.org.orgId}/settings/access/users/create`
);
}}
onRefresh={refreshData}
isRefreshing={isRefreshing}
/>
</>
);

2
src/components/ui/textarea.tsx
View File

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
"flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow]",
className
)}
ref={ref}