@cobaltcore-dev/aurora 1.2.0 → 2.0.0

package/dist/client/projects-yiK0HGSA.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"projects-yiK0HGSA.mjs","names":["ProjectsContentProps","search","SplitNotFoundComponent","notFoundComponent"],"sources":["../../src/client/routes/_auth/projects/index.tsx?tsr-split=notFoundComponent"],"sourcesContent":["import { Suspense } from \"react\"\nimport { ErrorBoundary } from \"react-error-boundary\"\nimport { createFileRoute, useRouteContext } from \"@tanstack/react-router\"\nimport { ProjectsOverviewNavBar } from \"@/client/routes/_auth/projects/-components/ProjectOverviewNavBar\"\nimport { ProjectCardView } from \"@/client/routes/_auth/projects/-components/ProjectCardView\"\nimport { RouteError } from \"@/client/components/Error/RouteError\"\nimport { TRPCClientError } from \"@trpc/client\"\nimport { Container, ContentHeading, Status } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { z } from \"zod\"\nimport { Slot } from \"@/client/components/Slot\"\nimport { trpcReact } from \"@/client/trpcClient\"\nimport type { RouteInfo } from \"@/client/routes/routeInfo\"\n\nconst searchSchema = z.object({\n  search: z.string().optional(),\n})\n\nexport const Route = createFileRoute(\"/_auth/projects/\")({\n  staticData: {\n    analytics: {\n      name: \"projects.list\",\n    },\n  } satisfies RouteInfo,\n  component: ProjectsOverview,\n  notFoundComponent: () => {\n    return <p>Projects not found</p>\n  },\n  validateSearch: searchSchema,\n})\n\ninterface ProjectsContentProps {\n  search: string\n}\n\nfunction ProjectsContent({ search }: ProjectsContentProps) {\n  const [allProjects] = trpcReact.project.getAuthProjects.useSuspenseQuery()\n\n  const normalizedSearch = search.trim().toLowerCase()\n  const projects =\n    allProjects && normalizedSearch\n      ? allProjects.filter(\n          (project) =>\n            project.name?.toLowerCase().includes(normalizedSearch) ||\n            project.description?.toLowerCase().includes(normalizedSearch)\n        )\n      : allProjects\n\n  return <ProjectCardView projects={projects} />\n}\n\nexport function ProjectsOverview() {\n  const { search = \"\" } = Route.useSearch()\n  const navigate = Route.useNavigate()\n  const { slots } = useRouteContext({ strict: false })\n  const { t } = useLingui()\n\n  const handleSearch = (value: string) => {\n    navigate({ search: (prev) => ({ ...prev, search: value || undefined }), replace: true })\n  }\n\n  return (\n    <Container py>\n      <ContentHeading className=\"pb-4\">\n        <Trans>Projects</Trans>\n      </ContentHeading>\n      {slots?.projectsBanner && (\n        <ErrorBoundary fallbackRender={() => null}>\n          <Suspense fallback={null}>\n            <Slot component={slots.projectsBanner} useShadowDOM={false} />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n      <ErrorBoundary\n        fallbackRender={({ error }) => (\n          <RouteError error={error} safeErrorMessage={error instanceof TRPCClientError ? error.message : undefined} />\n        )}\n      >\n        <ProjectsOverviewNavBar searchTerm={search} onSearch={handleSearch} />\n        <div className=\"pt-5\">\n          <Suspense fallback={<Status status=\"progress\" title={t`Loading...`} />}>\n            <ProjectsContent search={search} />\n          </Suspense>\n        </div>\n      </ErrorBoundary>\n    </Container>\n  )\n}\n"],"mappings":";;AAiCC,IAAAE,UAPU,gBAAC,KAAA,EAAE,UAAA,qBAAA,CAAA"}
+{"version":3,"file":"projects-yiK0HGSA.mjs","names":["ProjectsContentProps","search","SplitNotFoundComponent","notFoundComponent"],"sources":["../../src/client/routes/_auth/projects/index.tsx?tsr-split=notFoundComponent"],"sourcesContent":["import { Suspense } from \"react\"\nimport { ErrorBoundary } from \"react-error-boundary\"\nimport { createFileRoute, useRouteContext } from \"@tanstack/react-router\"\nimport { ProjectsOverviewNavBar } from \"@/client/routes/_auth/projects/-components/ProjectOverviewNavBar\"\nimport { ProjectCardView } from \"@/client/routes/_auth/projects/-components/ProjectCardView\"\nimport { RouteError } from \"@/client/components/Errors/RouteError\"\nimport { TRPCClientError } from \"@trpc/client\"\nimport { Container, ContentHeading, Status } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { z } from \"zod\"\nimport { Slot } from \"@/client/components/Slot\"\nimport { trpcReact } from \"@/client/trpcClient\"\nimport type { RouteInfo } from \"@/client/routes/routeInfo\"\n\nconst searchSchema = z.object({\n  search: z.string().optional(),\n})\n\nexport const Route = createFileRoute(\"/_auth/projects/\")({\n  staticData: {\n    analytics: {\n      name: \"projects.list\",\n    },\n  } satisfies RouteInfo,\n  component: ProjectsOverview,\n  notFoundComponent: () => {\n    return <p>Projects not found</p>\n  },\n  validateSearch: searchSchema,\n})\n\ninterface ProjectsContentProps {\n  search: string\n}\n\nfunction ProjectsContent({ search }: ProjectsContentProps) {\n  const [allProjects] = trpcReact.project.getAuthProjects.useSuspenseQuery()\n\n  const normalizedSearch = search.trim().toLowerCase()\n  const projects =\n    allProjects && normalizedSearch\n      ? allProjects.filter(\n          (project) =>\n            project.name?.toLowerCase().includes(normalizedSearch) ||\n            project.description?.toLowerCase().includes(normalizedSearch)\n        )\n      : allProjects\n\n  return <ProjectCardView projects={projects} />\n}\n\nexport function ProjectsOverview() {\n  const { search = \"\" } = Route.useSearch()\n  const navigate = Route.useNavigate()\n  const { slots } = useRouteContext({ strict: false })\n  const { t } = useLingui()\n\n  const handleSearch = (value: string) => {\n    navigate({ search: (prev) => ({ ...prev, search: value || undefined }), replace: true })\n  }\n\n  return (\n    <Container py>\n      <ContentHeading className=\"pb-4\">\n        <Trans>Projects</Trans>\n      </ContentHeading>\n      {slots?.projectsBanner && (\n        <ErrorBoundary fallbackRender={() => null}>\n          <Suspense fallback={null}>\n            <Slot component={slots.projectsBanner} useShadowDOM={false} />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n      <ErrorBoundary\n        fallbackRender={({ error }) => (\n          <RouteError error={error} safeErrorMessage={error instanceof TRPCClientError ? error.message : undefined} />\n        )}\n      >\n        <ProjectsOverviewNavBar searchTerm={search} onSearch={handleSearch} />\n        <div className=\"pt-5\">\n          <Suspense fallback={<Status status=\"progress\" title={t`Loading...`} />}>\n            <ProjectsContent search={search} />\n          </Suspense>\n        </div>\n      </ErrorBoundary>\n    </Container>\n  )\n}\n"],"mappings":";;AAiCC,IAAAE,UAPU,gBAAC,KAAA,EAAE,UAAA,qBAAA,CAAA"}

package/dist/client/securitygroups--0PS2wbM.mjs

@@ -0,0 +1,580 @@
+import { C as e, D as t, K as n, L as r, M as i, P as a, Q as o, S as s, T as c, X as l, ft as u, g as d, h as f, i as p, l as m, lt as h, m as g, o as _, ot as v, p as y, rt as b, st as x, t as S, x as C } from "./build-WuxXRAqf.mjs";
+import { a as w } from "./trpcClient-D7gpR7YG.mjs";
+import { t as T } from "./securitygroups-BRndk7wh.mjs";
+import { t as E } from "./useProjectId-DBc5lpoU.mjs";
+import { t as D } from "./SortInput-4g7nSTHW.mjs";
+import { t as O } from "./ContentHeader-CPJbgYWn.mjs";
+import "./hooks-D0yKIumu.mjs";
+import { n as k, t as A } from "./FiltersInput-Becwxo_J.mjs";
+import { c as j, h as ee, l as te, m as ne, n as M, r as re, t as N } from "./useSecurityGroupPermissions--hK4aR8Y.mjs";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+import { useEffect as L, useRef as R, useState as z } from "react";
+import { useNavigate as ie, useSearch as B } from "@tanstack/react-router";
+import { Trans as V, useLingui as H } from "@lingui/react";
+//#region src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupTableRow.tsx
+function ae({ securityGroup: e, permissions: n, onEdit: r, onDelete: i, onViewDetails: a, isReadOnly: o = !1, showSelectColumn: s = !1, isSelected: l = !1, onSelect: u }) {
+	let { i18n: f, _: p } = H(), m = ({ value: e }) => /*#__PURE__*/ F("span", { children: e ? f._({ id: "l75CjT" }) : f._({ id: "1UzENP" }) }), h = () => {
+		a && a(e);
+	};
+	return /*#__PURE__*/ I(c, {
+		"data-testid": `security-group-row-${e.id}`,
+		onClick: h,
+		className: "hover:bg-theme-background-lvl-2 cursor-pointer",
+		children: [
+			s && /*#__PURE__*/ F(S, {
+				onClick: (e) => e.stopPropagation(),
+				children: /*#__PURE__*/ F(x, {
+					checked: l,
+					onChange: () => u?.(e)
+				})
+			}),
+			/*#__PURE__*/ F(S, { children: /*#__PURE__*/ F("div", { children: /*#__PURE__*/ F("p", {
+				className: "text-md",
+				children: e.name
+			}) }) }),
+			/*#__PURE__*/ F(S, { children: e.description || f._({ id: "h47p9L" }) }),
+			/*#__PURE__*/ I(S, { children: [/*#__PURE__*/ F(m, { value: e.shared }), e.shared && /*#__PURE__*/ I("p", { children: [
+				/*#__PURE__*/ F(V, { id: "LtI9AS" }),
+				": ",
+				/*#__PURE__*/ F("span", {
+					className: "text-theme-light text-xs",
+					children: e.project_id
+				})
+			] })] }),
+			/*#__PURE__*/ F(S, { children: /*#__PURE__*/ F(m, { value: e.stateful ?? !0 }) }),
+			/*#__PURE__*/ F(S, {
+				onClick: (e) => e.stopPropagation(),
+				className: "items-end pr-0",
+				children: /*#__PURE__*/ F(t, { children: /*#__PURE__*/ I(d, { children: [
+					/*#__PURE__*/ F(C, {
+						label: f._({ id: "v0hPHE" }),
+						onClick: () => h()
+					}),
+					n.canUpdate && !o && /*#__PURE__*/ F(C, {
+						label: f._({ id: "b433OF" }),
+						onClick: () => r(e)
+					}),
+					n.canDelete && !o && /*#__PURE__*/ F(C, {
+						label: f._({ id: "bcOdok" }),
+						onClick: () => i(e)
+					})
+				] }) })
+			})
+		]
+	}, e.id);
+}
+//#endregion
+//#region src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupListContainer.tsx
+var oe = ({ securityGroups: e, isLoading: t, isError: n, error: r, permissions: i, onDeleteSecurityGroup: a, isDeletingSecurityGroup: o = !1, deleteError: l = null, onUpdateSecurityGroup: u, isUpdatingSecurityGroup: d = !1, updateError: f = null, currentProjectId: p, hasAnyBulkAction: m = !1, onClearUpdateError: h }) => {
+	let { i18n: g, _: v } = H(), y = ie(), x = E(), [C, w] = z(null), [T, D] = z(!1), [O, k] = z(!1), A = R(!1), j = R(!1), ee = (e) => {
+		C && C.id !== e.id && h && h(), w(e), D(!0);
+	}, te = (e) => {
+		w(e), k(!0);
+	}, ne = (e) => {
+		y({
+			to: "/projects/$projectId/network/securitygroups/$securityGroupId",
+			params: {
+				projectId: x,
+				securityGroupId: e.id
+			}
+		});
+	}, N = () => {
+		w(null), D(!1);
+	}, B = () => {
+		w(null), k(!1);
+	};
+	L(() => {
+		A.current && !o && O && !l && B(), A.current = o;
+	}, [
+		o,
+		l,
+		O
+	]), L(() => {
+		j.current && !d && T && !f && N(), j.current = d;
+	}, [
+		d,
+		f,
+		T
+	]);
+	let V = m ? 6 : 5;
+	return /*#__PURE__*/ I(P, { children: [/*#__PURE__*/ I(_, {
+		columns: V,
+		minContentColumns: m ? [5] : [4],
+		children: [/*#__PURE__*/ I(c, { children: [m && /*#__PURE__*/ F(s, {}), [
+			g._({ id: "6YtxFj" }),
+			g._({ id: "Nu4oKW" }),
+			g._({ id: "0Gd0NU" }),
+			g._({ id: "Jim5X9" }),
+			""
+		].map((e) => /*#__PURE__*/ F(s, { children: e }, e))] }), t ? /*#__PURE__*/ F(c, { children: /*#__PURE__*/ F(S, {
+			colSpan: V,
+			children: /*#__PURE__*/ F(b, {
+				status: "progress",
+				title: g._({ id: "Z3FXyt" })
+			})
+		}) }) : n ? /*#__PURE__*/ F(c, { children: /*#__PURE__*/ F(S, {
+			colSpan: V,
+			children: /*#__PURE__*/ F(b, {
+				status: "error",
+				title: r?.message ?? g._({ id: "lcs67U" })
+			})
+		}) }) : e.length > 0 ? e.map((e) => {
+			let t = !!(p && e.project_id && e.project_id !== p);
+			return /*#__PURE__*/ F(ae, {
+				securityGroup: e,
+				permissions: i,
+				onEdit: ee,
+				onDelete: te,
+				onViewDetails: ne,
+				isReadOnly: t,
+				showSelectColumn: m,
+				isSelected: !1,
+				onSelect: () => {}
+			}, e.id);
+		}) : /*#__PURE__*/ F(c, { children: /*#__PURE__*/ F(S, {
+			colSpan: V,
+			children: /*#__PURE__*/ F(b, {
+				status: "empty",
+				title: g._({ id: "f+UUtj" }),
+				body: g._({ id: "jqJG6j" })
+			})
+		}) })]
+	}), C && /*#__PURE__*/ I(P, { children: [/*#__PURE__*/ F(re, {
+		securityGroup: C,
+		open: T,
+		onClose: N,
+		onUpdate: (e, t) => u ? u(e, t) : Promise.resolve(),
+		isLoading: d,
+		error: f
+	}), /*#__PURE__*/ F(M, {
+		securityGroup: C,
+		isOpen: O,
+		onClose: B,
+		onDelete: (e) => {
+			a && a(e);
+		},
+		isDeleting: o,
+		error: l
+	})] })] });
+}, U = {
+	name: "",
+	description: "",
+	stateful: !0
+}, se = ({ isOpen: e, onClose: t, onCreate: o, isLoading: s = !1, error: c = null }) => {
+	let { i18n: d, _: m } = H(), [_, v] = z({ ...U }), [S, C] = z({}), w = (e) => {
+		let { name: t, value: n, type: r } = e.target, i = e.target.checked;
+		v((e) => ({
+			...e,
+			[t]: r === "checkbox" ? i : n
+		})), S[t] && C((e) => {
+			let n = { ...e };
+			return delete n[t], n;
+		});
+	}, T = () => {
+		let e = {};
+		return (!_.name || _.name.trim() === "") && (e.name = d._({ id: "lN/Z9n" })), C(e), Object.keys(e).length === 0;
+	}, E = async (e) => {
+		e.preventDefault(), T() && (await o({
+			name: _.name.trim(),
+			description: _.description.trim() || void 0,
+			stateful: _.stateful
+		}), D());
+	}, D = () => {
+		v({ ...U }), C({}), t();
+	};
+	return /*#__PURE__*/ I(l, {
+		open: e,
+		onCancel: D,
+		size: "large",
+		title: d._({ id: "YjAOtb" }),
+		modalFooter: /*#__PURE__*/ F(a, {
+			className: "flex justify-end",
+			children: /*#__PURE__*/ I(i, { children: [/*#__PURE__*/ F(p, {
+				variant: "default",
+				onClick: D,
+				disabled: s,
+				children: /*#__PURE__*/ F(V, { id: "dEgA5A" })
+			}), /*#__PURE__*/ F(p, {
+				variant: "primary",
+				onClick: (e) => {
+					E(e);
+				},
+				disabled: s,
+				"data-testid": "create-security-group-button",
+				children: s ? /*#__PURE__*/ F(n, { size: "small" }) : /*#__PURE__*/ F(V, { id: "YjAOtb" })
+			})] })
+		}),
+		children: [
+			c && /*#__PURE__*/ F(r, {
+				dismissible: !1,
+				variant: "error",
+				className: "mb-4",
+				children: c
+			}),
+			s && /*#__PURE__*/ F(b, {
+				status: "progress",
+				title: d._({ id: "0Kv9K4" }),
+				className: "mt-0"
+			}),
+			!s && /*#__PURE__*/ F(u, {
+				className: "mb-6",
+				children: /*#__PURE__*/ I(y, {
+					className: "mb-6",
+					children: [
+						/*#__PURE__*/ F(f, {
+							className: "mb-6",
+							children: /*#__PURE__*/ F(g, {
+								id: "name",
+								name: "name",
+								label: d._({ id: "6YtxFj" }),
+								value: _.name,
+								onChange: w,
+								required: !0,
+								errortext: S.name,
+								placeholder: d._({ id: "Ac6dy9" }),
+								disabled: s
+							})
+						}),
+						/*#__PURE__*/ F(f, {
+							className: "mb-6",
+							children: /*#__PURE__*/ F(h, {
+								id: "description",
+								name: "description",
+								label: d._({ id: "Nu4oKW" }),
+								value: _.description,
+								onChange: w,
+								placeholder: d._({ id: "Nu4oKW" }),
+								disabled: s,
+								rows: 3
+							})
+						}),
+						/*#__PURE__*/ F(f, {
+							className: "mb-0",
+							children: /*#__PURE__*/ F(x, {
+								id: "stateful",
+								name: "stateful",
+								label: d._({ id: "Jim5X9" }),
+								checked: _.stateful,
+								onChange: w,
+								disabled: s,
+								helptext: d._({ id: "4cQTyf" })
+							})
+						})
+					]
+				})
+			})
+		]
+	});
+}, W = ["true", "false"], ce = {
+	true: !0,
+	false: !1
+}, G = (e) => W.includes(e), K = ["shared", "stateful"], q = (e) => K.includes(e), le = (e) => [{
+	displayName: e.shared,
+	filterName: "shared",
+	values: [...W],
+	valueLabels: {
+		true: e.yes,
+		false: e.no
+	},
+	supportsMultiValue: !1
+}, {
+	displayName: e.stateful,
+	filterName: "stateful",
+	values: [...W],
+	valueLabels: {
+		true: e.yes,
+		false: e.no
+	},
+	supportsMultiValue: !1
+}], ue = (e) => {
+	let t = {};
+	for (let n of K) {
+		let r = e.filter((e) => !e.inactive && e.name === n).at(-1);
+		r && G(r.value) && (t[n] = ce[r.value]);
+	}
+	return t;
+}, J = (e, t) => q(e) && G(t), Y = (e) => {
+	let t = [];
+	return e.shared && J("shared", e.shared) && t.push({
+		name: "shared",
+		value: e.shared
+	}), e.stateful && J("stateful", e.stateful) && t.push({
+		name: "stateful",
+		value: e.stateful
+	}), t;
+}, de = (e, t, n) => e.some((e) => e.name === t.name && e.value === t.value) ? e : n.find((e) => e.filterName === t.name)?.supportsMultiValue ? [...e, t] : [...e.filter((e) => e.name !== t.name), t], fe = (e, t, n) => {
+	let r = {
+		search: n.search,
+		sortBy: n.sortBy,
+		sortDirection: n.sortDirection
+	};
+	if (!e?.length) return r;
+	let i = e.filter((e) => !e.inactive).reduce((e, t) => (e[t.name] || (e[t.name] = []), e[t.name].push(t.value), e), {});
+	return Object.entries(i).forEach(([e, n]) => {
+		t.find((t) => t.filterName === e)?.supportsMultiValue && n.length > 1 ? r[e] = `in:${n.join(",")}` : r[e] = n[0];
+	}), r;
+}, pe = 500, X = ({ project: t }) => {
+	let { i18n: n, _: i } = H(), a = ie(), s = B({ strict: !1 }), [c, l] = z({
+		options: [{
+			label: n._({ id: "6YtxFj" }),
+			value: "name"
+		}],
+		sortBy: s.sortBy || "name",
+		sortDirection: s.sortDirection || "asc"
+	}), [u, d] = z({
+		filters: le({
+			shared: n._({ id: "0Gd0NU" }),
+			stateful: n._({ id: "Jim5X9" }),
+			yes: n._({ id: "l75CjT" }),
+			no: n._({ id: "1UzENP" })
+		}),
+		selectedFilters: Y(s)
+	}), [f, h] = z(s.search || ""), g = R(void 0), [_, y] = z(!1), [b, x] = z(null), [S, C] = z(null), [T, E] = z(null), M = w.useUtils();
+	L(() => () => clearTimeout(g.current), []), L(() => {
+		l((e) => ({
+			...e,
+			sortBy: s.sortBy || "name",
+			sortDirection: s.sortDirection || "asc"
+		})), d((e) => ({
+			...e,
+			selectedFilters: Y(s)
+		})), g.current === void 0 && h(s.search || "");
+	}, [
+		s.sortBy,
+		s.sortDirection,
+		s.search,
+		s.shared,
+		s.stateful
+	]);
+	let re = Y(s), ae = s.sortBy || "name", U = s.sortDirection || "asc", W = s.search || "", { data: ce, isLoading: G, isError: K, error: q } = w.network.securityGroup.list.useQuery({
+		project_id: t || "",
+		sort_key: ae,
+		sort_dir: U,
+		...ue(re),
+		...W ? { searchTerm: W } : {}
+	}, {
+		refetchOnWindowFocus: !1,
+		placeholderData: (e) => e
+	}), J = ce || [], X = K ? q?.data?.code === "FORBIDDEN" ? n._({ id: "MdfAJn" }) : q.message || n._({ id: "lcs67U" }) : null, { permissions: Z } = N(t), me = w.network.securityGroup.create.useMutation({
+		onSuccess: (e) => {
+			M.network.securityGroup.list.invalidate(), M.network.securityGroup.getById.invalidate(), C(null), a({
+				to: "/projects/$projectId/network/securitygroups/$securityGroupId",
+				params: {
+					projectId: t,
+					securityGroupId: e.id
+				}
+			});
+		},
+		onError: (e) => {
+			C(e.message || n._({ id: "o6M6l0" }));
+		}
+	}), he = w.network.securityGroup.deleteById.useMutation({
+		onSuccess: () => {
+			M.network.securityGroup.list.invalidate(), M.network.securityGroup.getById.invalidate(), x(null);
+		},
+		onError: (e) => {
+			x(e.message || n._({ id: "d0pLfy" }));
+			let { message: t, ...r } = j(e.message);
+			v.error(t, r);
+		}
+	}), ge = w.network.securityGroup.update.useMutation({
+		onSuccess: () => {
+			M.network.securityGroup.list.invalidate(), M.network.securityGroup.getById.invalidate(), E(null);
+		},
+		onError: (e) => {
+			E(e.message || n._({ id: "jPxavx" }));
+			let { message: t, ...r } = ne(e.message);
+			v.error(t, r);
+		}
+	}), _e = async (e) => {
+		C(null);
+		try {
+			await me.mutateAsync({
+				project_id: t,
+				...e
+			});
+		} catch {}
+	}, ve = (e) => {
+		x(null);
+		let n = J.find((t) => t.id === e)?.name || e;
+		he.mutate({
+			project_id: t,
+			securityGroupId: e
+		}, { onSuccess: () => {
+			let { message: e, ...t } = te(n);
+			v.success(e, t);
+		} });
+	}, ye = async (e, n) => {
+		E(null);
+		let r = n.name || J.find((t) => t.id === e)?.name || e;
+		try {
+			await ge.mutateAsync({
+				project_id: t,
+				securityGroupId: e,
+				...n
+			});
+			let { message: i, ...a } = ee(r);
+			v.success(i, a);
+		} catch {}
+	}, be = () => {
+		E(null);
+	}, xe = (e) => {
+		let t = {
+			options: e.options,
+			sortBy: e.sortBy?.toString() || "name",
+			sortDirection: e.sortDirection || "asc"
+		};
+		l(t), a({
+			search: (e) => ({
+				...e,
+				sortBy: t.sortBy,
+				sortDirection: t.sortDirection
+			}),
+			replace: !0
+		});
+	}, Q = (e) => {
+		d(e), a({
+			search: (t) => fe(e.selectedFilters || [], e.filters, {
+				search: t.search,
+				sortBy: t.sortBy,
+				sortDirection: t.sortDirection
+			}),
+			replace: !0
+		});
+	}, $ = (e) => {
+		a({
+			search: (t) => ({
+				...t,
+				search: e || void 0
+			}),
+			replace: !0
+		});
+	};
+	return /*#__PURE__*/ I(P, { children: [/*#__PURE__*/ F(O, {
+		title: n._({ id: "4opp4r" }),
+		projectId: t
+	}), /*#__PURE__*/ I("div", {
+		className: "relative",
+		children: [
+			K && J.length > 0 && /*#__PURE__*/ F(r, {
+				variant: "error",
+				className: "mb-4",
+				children: X
+			}),
+			/*#__PURE__*/ F(o, {
+				distribution: "end",
+				alignment: "center",
+				gap: "2",
+				className: "pb-2",
+				children: /*#__PURE__*/ I(o, {
+					gap: "2",
+					children: [/*#__PURE__*/ F(D, {
+						options: c.options,
+						sortBy: c.sortBy,
+						sortDirection: c.sortDirection ?? "asc",
+						selectClassName: "min-w-40",
+						onSortByChange: (e) => xe({
+							...c,
+							sortBy: e,
+							sortDirection: c.sortDirection
+						}),
+						onSortDirectionChange: (e) => xe({
+							...c,
+							sortDirection: e
+						})
+					}), Z.canCreate && /*#__PURE__*/ F(p, {
+						onClick: () => y(!0),
+						variant: "primary",
+						className: "whitespace-nowrap",
+						children: /*#__PURE__*/ F(V, { id: "YjAOtb" })
+					})]
+				})
+			}),
+			/*#__PURE__*/ F(m, { children: /*#__PURE__*/ I(o, {
+				direction: "vertical",
+				gap: "2",
+				children: [/*#__PURE__*/ I(o, {
+					distribution: "between",
+					alignment: "center",
+					children: [/*#__PURE__*/ F(A, {
+						filters: u.filters,
+						selectClassName: "sm:min-w-40",
+						comboboxClassName: "sm:min-w-40",
+						onChange: (e) => {
+							let t = de(u.selectedFilters || [], e, u.filters);
+							t !== (u.selectedFilters || []) && Q({
+								...u,
+								selectedFilters: t
+							});
+						}
+					}), /*#__PURE__*/ F(e, {
+						className: "w-60 sm:w-68",
+						placeholder: n._({ id: "rp7Ili" }),
+						"data-testid": "searchbar",
+						value: f,
+						onInput: (e) => {
+							let t = e.currentTarget.value;
+							h(t), clearTimeout(g.current), g.current = window.setTimeout(() => {
+								g.current = void 0, $(t);
+							}, pe);
+						},
+						onSearch: (e) => {
+							clearTimeout(g.current), g.current = void 0, $(typeof e == "string" ? e : "");
+						},
+						onClear: () => {
+							clearTimeout(g.current), g.current = void 0, h(""), $("");
+						}
+					})]
+				}), u.selectedFilters && u.selectedFilters.length > 0 && /*#__PURE__*/ F(k, {
+					selectedFilters: u.selectedFilters,
+					filters: u.filters,
+					onDelete: (e) => Q({
+						...u,
+						selectedFilters: (u.selectedFilters || []).filter((t) => t.name !== e.name || t.value !== e.value)
+					}),
+					onClear: () => Q({
+						...u,
+						selectedFilters: []
+					})
+				})]
+			}) }),
+			/*#__PURE__*/ F(oe, {
+				securityGroups: J,
+				isLoading: G,
+				isError: K && J.length === 0,
+				error: X ? { message: X } : null,
+				permissions: Z,
+				onCreateClick: () => y(!0),
+				onDeleteSecurityGroup: ve,
+				isDeletingSecurityGroup: he.isPending,
+				deleteError: b,
+				onUpdateSecurityGroup: ye,
+				isUpdatingSecurityGroup: ge.isPending,
+				updateError: T,
+				currentProjectId: t,
+				hasAnyBulkAction: !1,
+				onClearUpdateError: be
+			}),
+			/*#__PURE__*/ F(se, {
+				isOpen: _,
+				onClose: () => {
+					C(null), y(!1);
+				},
+				onCreate: _e,
+				isLoading: me.isPending,
+				error: S
+			})
+		]
+	})] });
+};
+//#endregion
+//#region src/client/routes/_auth/projects/$projectId/network/securitygroups/index.tsx?tsr-split=component
+function Z() {
+	let { projectId: e } = T.useParams(), { trpcClient: t } = T.useRouteContext();
+	if (!t) throw Error("trpcClient is not available in route context");
+	return /*#__PURE__*/ F(X, { project: e });
+}
+//#endregion
+export { Z as component };
+
+//# sourceMappingURL=securitygroups--0PS2wbM.mjs.map