mirror of
https://github.com/fosrl/pangolin.git
synced 2026-07-08 15:14:52 +02:00
Merge branch 'resource-launcher-compact' into dev
This commit is contained in:
@@ -82,9 +82,11 @@ export default async function OrgPage(props: OrgPageProps) {
|
||||
orgId={orgId}
|
||||
isAdmin={isAdminOrOwner}
|
||||
views={launcherData.views}
|
||||
defaultViewOverrides={launcherData.defaultViewOverrides}
|
||||
activeViewId={launcherData.activeViewId}
|
||||
config={launcherData.config}
|
||||
savedConfig={launcherData.savedConfig}
|
||||
scale={launcherData.scale}
|
||||
groups={launcherData.groups}
|
||||
groupsPagination={launcherData.groupsPagination}
|
||||
/>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { Check, Copy } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
@@ -7,12 +8,14 @@ type CopyToClipboardProps = {
|
||||
text: string;
|
||||
displayText?: string;
|
||||
isLink?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CopyToClipboard = ({
|
||||
text,
|
||||
displayText,
|
||||
isLink
|
||||
isLink,
|
||||
className
|
||||
}: CopyToClipboardProps) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
@@ -48,14 +51,20 @@ const CopyToClipboard = ({
|
||||
href={text}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="truncate hover:underline text-sm min-w-0 max-w-full"
|
||||
className={cn(
|
||||
"truncate hover:underline text-sm min-w-0 max-w-full",
|
||||
className
|
||||
)}
|
||||
title={text} // Shows full text on hover
|
||||
>
|
||||
{displayValue}
|
||||
</Link>
|
||||
) : (
|
||||
<span
|
||||
className="truncate text-sm min-w-0 max-w-full"
|
||||
className={cn(
|
||||
"truncate text-sm min-w-0 max-w-full",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
|
||||
@@ -5,12 +5,15 @@ import { cn } from "@app/lib/cn";
|
||||
export function InfoSections({
|
||||
children,
|
||||
cols,
|
||||
columnSizing = "content"
|
||||
columnSizing = "content",
|
||||
layout = "default"
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
cols?: number;
|
||||
/** content (default): fixed gap, columns hug content, left-aligned; fill: equal-width columns across the row */
|
||||
columnSizing?: "fill" | "content";
|
||||
/** panel: 2 columns until xl for narrow containers such as side panels */
|
||||
layout?: "default" | "panel";
|
||||
}) {
|
||||
const n = cols || 1;
|
||||
const track =
|
||||
@@ -19,9 +22,14 @@ export function InfoSections({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"grid w-full min-w-0 grid-cols-2 md:grid-cols-(--columns) md:space-x-16 gap-4 md:items-start",
|
||||
"grid w-full min-w-0 gap-4",
|
||||
layout === "panel"
|
||||
? "grid-cols-2 xl:grid-cols-(--columns) xl:items-start xl:space-x-16"
|
||||
: "grid-cols-2 md:grid-cols-(--columns) md:items-start md:space-x-16",
|
||||
columnSizing === "content" &&
|
||||
"md:justify-items-start md:justify-start"
|
||||
(layout === "panel"
|
||||
? "xl:justify-items-start xl:justify-start"
|
||||
: "md:justify-items-start md:justify-start")
|
||||
)}
|
||||
style={{
|
||||
// @ts-expect-error dynamic props don't work with tailwind, but we can set the
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { launcherQueries, orgQueries } from "@app/lib/queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useDebounce } from "use-debounce";
|
||||
import { Checkbox } from "./ui/checkbox";
|
||||
|
||||
@@ -25,6 +25,7 @@ type LabelsFilterSelectorProps = {
|
||||
orgId: string;
|
||||
isSelected: (label: LabelFilterOption) => boolean;
|
||||
onToggle: (label: LabelFilterOption) => void;
|
||||
selectedLabels?: LabelFilterOption[];
|
||||
onClear?: () => void;
|
||||
showClear?: boolean;
|
||||
scope?: "org" | "launcher";
|
||||
@@ -34,6 +35,7 @@ export function LabelsFilterSelector({
|
||||
orgId,
|
||||
isSelected,
|
||||
onToggle,
|
||||
selectedLabels = [],
|
||||
onClear,
|
||||
showClear = false,
|
||||
scope = "org"
|
||||
@@ -54,7 +56,7 @@ export function LabelsFilterSelector({
|
||||
...launcherQueries.labels({
|
||||
orgId,
|
||||
query: debouncedQuery,
|
||||
perPage: 500
|
||||
perPage: 20
|
||||
}),
|
||||
enabled: scope === "launcher"
|
||||
});
|
||||
@@ -63,6 +65,18 @@ export function LabelsFilterSelector({
|
||||
? (launcherLabelsQuery.data ?? [])
|
||||
: (orgLabelsQuery.data ?? []);
|
||||
|
||||
const labelsShown = useMemo(() => {
|
||||
const base = [...labels];
|
||||
if (debouncedQuery.trim().length === 0 && selectedLabels.length > 0) {
|
||||
const selectedNotInBase = selectedLabels.filter(
|
||||
(selected) =>
|
||||
!base.some((label) => label.labelId === selected.labelId)
|
||||
);
|
||||
return [...selectedNotInBase, ...base];
|
||||
}
|
||||
return base;
|
||||
}, [debouncedQuery, labels, selectedLabels]);
|
||||
|
||||
return (
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
@@ -81,7 +95,7 @@ export function LabelsFilterSelector({
|
||||
{t("accessFilterClear")}
|
||||
</CommandItem>
|
||||
)}
|
||||
{labels.map((label) => (
|
||||
{labelsShown.map((label) => (
|
||||
<CommandItem
|
||||
key={label.labelId}
|
||||
value={label.name}
|
||||
|
||||
@@ -20,6 +20,8 @@ export type MultiSitesSelectorProps = {
|
||||
onSelectionChange: (sites: Selectedsite[]) => void;
|
||||
filterTypes?: string[];
|
||||
scope?: "org" | "launcher";
|
||||
onClear?: () => void;
|
||||
showClear?: boolean;
|
||||
};
|
||||
|
||||
export function formatMultiSitesSelectorLabel(
|
||||
@@ -42,7 +44,9 @@ export function MultiSitesSelector({
|
||||
selectedSites,
|
||||
onSelectionChange,
|
||||
filterTypes,
|
||||
scope = "org"
|
||||
scope = "org",
|
||||
onClear,
|
||||
showClear = false
|
||||
}: MultiSitesSelectorProps) {
|
||||
const t = useTranslations();
|
||||
const [siteSearchQuery, setSiteSearchQuery] = useState("");
|
||||
@@ -60,7 +64,7 @@ export function MultiSitesSelector({
|
||||
...launcherQueries.sites({
|
||||
orgId,
|
||||
query: debouncedQuery,
|
||||
perPage: 500
|
||||
perPage: 20
|
||||
}),
|
||||
enabled: scope === "launcher"
|
||||
});
|
||||
@@ -107,6 +111,14 @@ export function MultiSitesSelector({
|
||||
<CommandList>
|
||||
<CommandEmpty>{t("siteNotFound")}</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{showClear && onClear && (
|
||||
<CommandItem
|
||||
onSelect={onClear}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
{t("accessFilterClear")}
|
||||
</CommandItem>
|
||||
)}
|
||||
{sitesShown.map((site) => (
|
||||
<CommandItem
|
||||
key={site.siteId}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
type SelectedLabel
|
||||
} from "@app/components/labels-selector";
|
||||
import { LabelsFilterSelector } from "@app/components/LabelsFilterSelector";
|
||||
import { Badge } from "@app/components/ui/badge";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
@@ -46,14 +47,14 @@ export function LauncherFilterPopover({
|
||||
const { data: labels = [] } = useQuery(
|
||||
launcherQueries.labels({
|
||||
orgId,
|
||||
perPage: 500
|
||||
perPage: 20
|
||||
})
|
||||
);
|
||||
|
||||
const { data: sites = [] } = useQuery(
|
||||
launcherQueries.sites({
|
||||
orgId,
|
||||
perPage: 500
|
||||
perPage: 20
|
||||
})
|
||||
);
|
||||
|
||||
@@ -96,14 +97,32 @@ export function LauncherFilterPopover({
|
||||
[labels, selectedLabels]
|
||||
);
|
||||
|
||||
const activeFilterCount = selectedSites.length + selectedLabels.length;
|
||||
|
||||
return (
|
||||
<Popover modal={false}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="shrink-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="relative shrink-0"
|
||||
>
|
||||
<Funnel className="size-4" />
|
||||
<span className="sr-only">
|
||||
{t("resourceLauncherFilter")}
|
||||
{activeFilterCount > 0
|
||||
? t("resourceLauncherFilterWithCount", {
|
||||
count: activeFilterCount
|
||||
})
|
||||
: t("resourceLauncherFilter")}
|
||||
</span>
|
||||
{activeFilterCount > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1.5 text-xs"
|
||||
>
|
||||
{activeFilterCount > 99 ? "99+" : activeFilterCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-72">
|
||||
@@ -139,6 +158,10 @@ export function LauncherFilterPopover({
|
||||
selectedSites={resolvedSelectedSites}
|
||||
onSelectionChange={onSitesChange}
|
||||
scope="launcher"
|
||||
showClear={selectedSites.length > 0}
|
||||
onClear={() => {
|
||||
onSitesChange([]);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
@@ -172,6 +195,7 @@ export function LauncherFilterPopover({
|
||||
<LabelsFilterSelector
|
||||
orgId={orgId}
|
||||
scope="launcher"
|
||||
selectedLabels={resolvedSelectedLabels}
|
||||
isSelected={(label) =>
|
||||
selectedLabelIds.has(label.labelId)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||
import { hasActiveLauncherFilters } from "@app/lib/launcherScale";
|
||||
import { launcherQueries } from "@app/lib/queries";
|
||||
import type {
|
||||
LauncherResource,
|
||||
LauncherViewConfig
|
||||
} from "@server/routers/launcher/types";
|
||||
import { LAUNCHER_FLAT_GROUP_KEY } from "@server/routers/launcher/types";
|
||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { LauncherEmptyState } from "./LauncherEmptyState";
|
||||
import { LauncherResourceGrid } from "./LauncherResourceGrid";
|
||||
import { LauncherResourceList } from "./LauncherResourceList";
|
||||
|
||||
type LauncherFlatResourceListProps = {
|
||||
orgId: string;
|
||||
activeViewId: LauncherActiveViewId;
|
||||
config: LauncherViewConfig;
|
||||
onClearFilters?: () => void;
|
||||
onResourceSelect?: (resource: LauncherResource) => void;
|
||||
};
|
||||
|
||||
export function LauncherFlatResourceList({
|
||||
orgId,
|
||||
config,
|
||||
onClearFilters,
|
||||
onResourceSelect
|
||||
}: LauncherFlatResourceListProps) {
|
||||
const loadMoreRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const resourceFilters = useMemo(
|
||||
() => ({
|
||||
query: config.query,
|
||||
groupBy: config.groupBy,
|
||||
groupKey: LAUNCHER_FLAT_GROUP_KEY,
|
||||
siteIds: config.siteIds,
|
||||
labelIds: config.labelIds,
|
||||
sort_by: config.sortBy,
|
||||
order: config.order,
|
||||
pageSize: 20
|
||||
}),
|
||||
[
|
||||
config.groupBy,
|
||||
config.labelIds,
|
||||
config.order,
|
||||
config.query,
|
||||
config.siteIds,
|
||||
config.sortBy
|
||||
]
|
||||
);
|
||||
|
||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
|
||||
useInfiniteQuery({
|
||||
...launcherQueries.resources(orgId, resourceFilters)
|
||||
});
|
||||
|
||||
const resources = data?.pages.flatMap((page) => page.resources) ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
const node = loadMoreRef.current;
|
||||
if (!node || !hasNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0]?.isIntersecting && !isFetchingNextPage) {
|
||||
void fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ rootMargin: "200px" }
|
||||
);
|
||||
|
||||
observer.observe(node);
|
||||
return () => observer.disconnect();
|
||||
}, [fetchNextPage, hasNextPage, isFetchingNextPage]);
|
||||
|
||||
if (resources.length === 0) {
|
||||
if (isFetching) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="size-6 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<LauncherEmptyState
|
||||
variant={
|
||||
hasActiveLauncherFilters(config) ? "noResults" : "empty"
|
||||
}
|
||||
layout={config.layout}
|
||||
query={config.query}
|
||||
onClearFilters={onClearFilters}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{config.layout === "grid" ? (
|
||||
<LauncherResourceGrid
|
||||
resources={resources}
|
||||
showLabels={config.showLabels}
|
||||
onResourceSelect={onResourceSelect}
|
||||
/>
|
||||
) : (
|
||||
<LauncherResourceList
|
||||
resources={resources}
|
||||
showLabels={config.showLabels}
|
||||
onResourceSelect={onResourceSelect}
|
||||
/>
|
||||
)}
|
||||
<div ref={loadMoreRef} className="h-4" />
|
||||
{isFetchingNextPage ? (
|
||||
<div className="flex justify-center py-2">
|
||||
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -69,16 +69,20 @@ export function LauncherGroupList({
|
||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isFetching } =
|
||||
useInfiniteQuery({
|
||||
...launcherQueries.groups(orgId, groupFilters),
|
||||
initialData: {
|
||||
pages: [
|
||||
{
|
||||
groups: initialGroups,
|
||||
pagination: groupsPagination
|
||||
}
|
||||
],
|
||||
pageParams: [1]
|
||||
},
|
||||
refetchOnMount: false
|
||||
...(initialGroups.length > 0
|
||||
? {
|
||||
initialData: {
|
||||
pages: [
|
||||
{
|
||||
groups: initialGroups,
|
||||
pagination: groupsPagination
|
||||
}
|
||||
],
|
||||
pageParams: [1]
|
||||
},
|
||||
refetchOnMount: false as const
|
||||
}
|
||||
: {})
|
||||
});
|
||||
|
||||
const groups = data?.pages.flatMap((page) => page.groups) ?? [];
|
||||
|
||||
@@ -23,9 +23,8 @@ export function LauncherRefreshButton({
|
||||
className="shrink-0"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`mr-0 sm:mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
|
||||
className={`size-4 ${isRefreshing ? "animate-spin" : ""}`}
|
||||
/>
|
||||
<span className="hidden sm:inline">{t("refresh")}</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||
import {
|
||||
InfoSection,
|
||||
InfoSectionContent,
|
||||
InfoSections,
|
||||
InfoSectionTitle
|
||||
} from "@app/components/InfoSection";
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import {
|
||||
SidePanel,
|
||||
SidePanelBody,
|
||||
SidePanelContent,
|
||||
SidePanelDescription,
|
||||
SidePanelFooter,
|
||||
SidePanelHeader,
|
||||
SidePanelTitle
|
||||
} from "@app/components/SidePanel";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
derivePublicAuthState,
|
||||
formatPortRestrictionDisplay,
|
||||
formatPublicResourceType
|
||||
} from "@app/lib/launcherResourceDetails";
|
||||
import { getLauncherResourceAdminHref } from "@app/lib/launcherResourceAdminHref";
|
||||
import {
|
||||
formatSiteResourceDestinationDisplay,
|
||||
isSafeUrlForLink
|
||||
} from "@app/lib/launcherResourceAccess";
|
||||
import { launcherQueries } from "@app/lib/queries";
|
||||
import type { LauncherResource } from "@server/routers/launcher/types";
|
||||
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
ShieldCheck,
|
||||
ShieldOff,
|
||||
XCircle
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -23,6 +61,460 @@ type LauncherResourcePanelProps = {
|
||||
isAdmin: boolean;
|
||||
};
|
||||
|
||||
type LauncherResourceDetailResult =
|
||||
| {
|
||||
resourceType: "public";
|
||||
data: GetResourceResponse;
|
||||
authInfo: GetResourceAuthInfoResponse;
|
||||
}
|
||||
| { resourceType: "site"; data: GetSiteResourceResponse };
|
||||
|
||||
function AccessMethodContent({
|
||||
accessDisplay,
|
||||
accessCopyValue,
|
||||
accessUrl
|
||||
}: {
|
||||
accessDisplay: string;
|
||||
accessCopyValue: string;
|
||||
accessUrl?: string | null;
|
||||
}) {
|
||||
if (!accessDisplay) {
|
||||
return <span>-</span>;
|
||||
}
|
||||
|
||||
const href = accessUrl ?? undefined;
|
||||
const canLink = Boolean(href && isSafeUrlForLink(href));
|
||||
|
||||
if (canLink && href) {
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={href}
|
||||
displayText={accessDisplay}
|
||||
isLink={true}
|
||||
className="text-base"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CopyToClipboard
|
||||
text={accessCopyValue || accessDisplay}
|
||||
displayText={accessDisplay}
|
||||
isLink={false}
|
||||
className="text-base"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function HealthStatusDisplay({
|
||||
health
|
||||
}: {
|
||||
health: string | null | undefined;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const status = health ?? "unknown";
|
||||
|
||||
if (status === "healthy") {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="size-4 shrink-0 text-green-500" />
|
||||
<span>{t("resourcesTableHealthy")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "degraded") {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="size-4 shrink-0 text-yellow-500" />
|
||||
<span>{t("resourcesTableDegraded")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "unhealthy") {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<XCircle className="size-4 shrink-0 text-destructive" />
|
||||
<span>{t("resourcesTableUnhealthy")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span>{t("resourcesTableUnknown")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const PUBLIC_AUTH_BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||
|
||||
function AuthMethodStatusDisplay({ enabled }: { enabled: boolean }) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{enabled ? (
|
||||
<CheckCircle2 className="size-4 text-green-600" />
|
||||
) : (
|
||||
<XCircle className="size-4 text-red-600" />
|
||||
)}
|
||||
<span>{enabled ? t("enabled") : t("disabled")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PublicResourceAuthMethods({
|
||||
authInfo
|
||||
}: {
|
||||
authInfo: GetResourceAuthInfoResponse;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
const authMethods = [
|
||||
{
|
||||
key: "sso",
|
||||
title: t("policyAuthSsoTitle"),
|
||||
enabled: authInfo.sso
|
||||
},
|
||||
{
|
||||
key: "password",
|
||||
title: t("policyAuthPasscodeTitle"),
|
||||
enabled: authInfo.password
|
||||
},
|
||||
{
|
||||
key: "pincode",
|
||||
title: t("policyAuthPincodeTitle"),
|
||||
enabled: authInfo.pincode
|
||||
},
|
||||
{
|
||||
key: "whitelist",
|
||||
title: t("policyAuthEmailTitle"),
|
||||
enabled: authInfo.whitelist
|
||||
},
|
||||
{
|
||||
key: "headerAuth",
|
||||
title: t("policyAuthHeaderAuthTitle"),
|
||||
enabled: authInfo.headerAuth
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("authentication")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("resourceLauncherAuthMethodsDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<InfoSections cols={authMethods.length} layout="panel">
|
||||
{authMethods.map((method) => (
|
||||
<InfoSection key={method.key}>
|
||||
<InfoSectionTitle>{method.title}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<AuthMethodStatusDisplay
|
||||
enabled={method.enabled}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
))}
|
||||
</InfoSections>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
function PublicResourceDetails({
|
||||
launcherResource,
|
||||
resource,
|
||||
authInfo
|
||||
}: {
|
||||
launcherResource: LauncherResource;
|
||||
resource: GetResourceResponse;
|
||||
authInfo: GetResourceAuthInfoResponse;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const supportsAuth = PUBLIC_AUTH_BROWSER_MODES.includes(
|
||||
resource.mode || ""
|
||||
);
|
||||
const authState = derivePublicAuthState(resource.mode, authInfo);
|
||||
const infoSectionCount = supportsAuth ? 4 : 3;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("resourceLauncherResourceDetails")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("resourceLauncherResourceDetailsDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<InfoSections cols={infoSectionCount} layout="panel">
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("type")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{formatPublicResourceType(resource)}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("access")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<AccessMethodContent
|
||||
accessDisplay={
|
||||
launcherResource.accessDisplay
|
||||
}
|
||||
accessCopyValue={
|
||||
launcherResource.accessCopyValue
|
||||
}
|
||||
accessUrl={launcherResource.accessUrl}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
{supportsAuth ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("authentication")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{authState === "protected" ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldCheck className="size-4 shrink-0 text-green-500" />
|
||||
<span>{t("protected")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldOff className="size-4 shrink-0 text-yellow-500" />
|
||||
<span>{t("notProtected")}</span>
|
||||
</div>
|
||||
)}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
) : null}
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("health")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<HealthStatusDisplay health={resource.health} />
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
</InfoSections>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
{supportsAuth ? (
|
||||
<PublicResourceAuthMethods authInfo={authInfo} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateResourceDetails({
|
||||
launcherResource,
|
||||
resource
|
||||
}: {
|
||||
launcherResource: LauncherResource;
|
||||
resource: GetSiteResourceResponse;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const modeLabel: Record<GetSiteResourceResponse["mode"], string> = {
|
||||
host: t("editInternalResourceDialogModeHost"),
|
||||
cidr: t("editInternalResourceDialogModeCidr"),
|
||||
http: t("editInternalResourceDialogModeHttp"),
|
||||
ssh: t("editInternalResourceDialogModeSsh")
|
||||
};
|
||||
const destination = formatSiteResourceDestinationDisplay({
|
||||
mode: resource.mode,
|
||||
destination: resource.destination,
|
||||
destinationPort: resource.destinationPort,
|
||||
scheme: resource.scheme
|
||||
});
|
||||
const portRestrictions = formatPortRestrictionDisplay(resource);
|
||||
const showAlias = resource.mode !== "cidr" && resource.mode !== "http";
|
||||
const showDestination = !(
|
||||
resource.mode === "ssh" && resource.authDaemonMode === "native"
|
||||
);
|
||||
const infoSectionCount =
|
||||
2 + (showDestination ? 1 : 0) + (showAlias ? 1 : 0) + 1;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Alert variant="default">
|
||||
<AlertCircle className="size-4" />
|
||||
<AlertTitle>
|
||||
{t("resourceLauncherPrivateClientRequiredTitle")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
<span>
|
||||
{t("resourceLauncherPrivateClientRequired")}{" "}
|
||||
<a
|
||||
href="https://pangolin.net/downloads"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-primary hover:underline"
|
||||
>
|
||||
{t("resourceLauncherDownloadClient")}
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</a>
|
||||
</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("resourceLauncherResourceDetails")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("resourceLauncherResourceDetailsDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<InfoSections cols={infoSectionCount} layout="panel">
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("type")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{modeLabel[resource.mode]}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("access")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<AccessMethodContent
|
||||
accessDisplay={
|
||||
launcherResource.accessDisplay
|
||||
}
|
||||
accessCopyValue={
|
||||
launcherResource.accessCopyValue
|
||||
}
|
||||
accessUrl={launcherResource.accessUrl}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
{showDestination ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("editInternalResourceDialogDestination")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{destination || "-"}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
) : null}
|
||||
{showAlias ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("editInternalResourceDialogAlias")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{resource.alias?.trim()
|
||||
? resource.alias
|
||||
: "-"}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
) : null}
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("portRestrictions")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{!portRestrictions.hasNonDefaultPorts ? (
|
||||
<span>
|
||||
{t(
|
||||
"resourceLauncherNoPortRestrictions"
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{portRestrictions.tcp.state !==
|
||||
"all" ? (
|
||||
<div>
|
||||
{t("resourceLauncherTcp")}:{" "}
|
||||
{portRestrictions.tcp.state ===
|
||||
"blocked"
|
||||
? t("blocked")
|
||||
: portRestrictions.tcp
|
||||
.ports}
|
||||
</div>
|
||||
) : null}
|
||||
{portRestrictions.udp.state !==
|
||||
"all" ? (
|
||||
<div>
|
||||
{t("resourceLauncherUdp")}:{" "}
|
||||
{portRestrictions.udp.state ===
|
||||
"blocked"
|
||||
? t("blocked")
|
||||
: portRestrictions.udp
|
||||
.ports}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
</InfoSections>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LauncherResourcePanelBody({
|
||||
orgId,
|
||||
resource,
|
||||
open
|
||||
}: {
|
||||
orgId: string;
|
||||
resource: LauncherResource;
|
||||
open: boolean;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const { data, isPending, isError } = useQuery({
|
||||
...launcherQueries.resourceDetail(orgId, resource),
|
||||
enabled: open
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground">
|
||||
<Loader2 className="size-6 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError || !data) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("resourceLauncherFailedToLoadDetails")}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
const detail = data as LauncherResourceDetailResult;
|
||||
|
||||
if (detail.resourceType === "public") {
|
||||
return (
|
||||
<PublicResourceDetails
|
||||
launcherResource={resource}
|
||||
resource={detail.data}
|
||||
authInfo={detail.authInfo}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PrivateResourceDetails
|
||||
launcherResource={resource}
|
||||
resource={detail.data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function LauncherResourcePanel({
|
||||
open,
|
||||
onOpenChange,
|
||||
@@ -37,11 +529,16 @@ export function LauncherResourcePanel({
|
||||
<SidePanelContent>
|
||||
<SidePanelHeader>
|
||||
<SidePanelTitle>{resource?.name ?? ""}</SidePanelTitle>
|
||||
<SidePanelDescription>
|
||||
{t("resourceLauncherResourceDetailsDescription")}
|
||||
</SidePanelDescription>
|
||||
</SidePanelHeader>
|
||||
<SidePanelBody />
|
||||
<SidePanelBody>
|
||||
{resource ? (
|
||||
<LauncherResourcePanelBody
|
||||
orgId={orgId}
|
||||
resource={resource}
|
||||
open={open}
|
||||
/>
|
||||
) : null}
|
||||
</SidePanelBody>
|
||||
<SidePanelFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { Search } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type LauncherSearchFirstGateProps = {
|
||||
layout: "grid" | "list";
|
||||
};
|
||||
|
||||
function GhostResourceGrid() {
|
||||
return (
|
||||
<div
|
||||
className="grid w-full grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 [&>*]:min-w-0"
|
||||
aria-hidden
|
||||
>
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex min-w-0 flex-col gap-2.5 rounded-xl border border-border/60 bg-muted/20 p-4"
|
||||
>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="size-10 shrink-0 rounded-lg bg-muted/60" />
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-1.5">
|
||||
<div className="h-3.5 w-3/5 rounded bg-muted/60" />
|
||||
<div className="h-3 w-2/5 rounded bg-muted/40" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GhostResourceList() {
|
||||
return (
|
||||
<div className="flex w-full flex-col" aria-hidden>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex items-center gap-4 px-4 py-3",
|
||||
index < 2 && "border-b border-border/60"
|
||||
)}
|
||||
>
|
||||
<div className="size-8 shrink-0 rounded-lg bg-muted/60" />
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-1.5">
|
||||
<div className="h-3.5 w-2/5 rounded bg-muted/60" />
|
||||
<div className="h-3 w-1/4 rounded bg-muted/40" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LauncherSearchFirstGate({
|
||||
layout
|
||||
}: LauncherSearchFirstGateProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden rounded-xl border border-dashed border-border">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-50">
|
||||
{layout === "grid" ? (
|
||||
<GhostResourceGrid />
|
||||
) : (
|
||||
<GhostResourceList />
|
||||
)}
|
||||
</div>
|
||||
<div className="relative flex min-h-56 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-muted">
|
||||
<Search className="size-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="max-w-md space-y-1.5">
|
||||
<h3 className="text-base font-semibold text-foreground">
|
||||
{t("resourceLauncherSearchFirstTitle")}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("resourceLauncherSearchFirstDescription")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,22 +15,27 @@ import {
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import type { LauncherViewConfig } from "@server/routers/launcher/types";
|
||||
import type {
|
||||
LauncherScaleCapabilities,
|
||||
LauncherViewConfig
|
||||
} from "@server/routers/launcher/types";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Settings } from "lucide-react";
|
||||
|
||||
type LauncherSettingsMenuProps = {
|
||||
config: LauncherViewConfig;
|
||||
isDefaultView: boolean;
|
||||
capabilities: LauncherScaleCapabilities;
|
||||
isCompactMode: boolean;
|
||||
selectedGroupBy: LauncherViewConfig["groupBy"];
|
||||
onConfigChange: (patch: Partial<LauncherViewConfig>) => void;
|
||||
onDeleteView: () => void;
|
||||
};
|
||||
|
||||
export function LauncherSettingsMenu({
|
||||
config,
|
||||
isDefaultView,
|
||||
onConfigChange,
|
||||
onDeleteView
|
||||
capabilities,
|
||||
isCompactMode,
|
||||
selectedGroupBy,
|
||||
onConfigChange
|
||||
}: LauncherSettingsMenuProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
@@ -51,7 +56,7 @@ export function LauncherSettingsMenu({
|
||||
{t("resourceLauncherGroupBy")}
|
||||
</p>
|
||||
<Select
|
||||
value={config.groupBy}
|
||||
value={selectedGroupBy}
|
||||
onValueChange={(value) =>
|
||||
onConfigChange({
|
||||
groupBy:
|
||||
@@ -63,14 +68,46 @@ export function LauncherSettingsMenu({
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="site">
|
||||
<SelectItem value="none">
|
||||
{t("resourceLauncherGroupByNone")}
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="site"
|
||||
disabled={
|
||||
!capabilities.allowSiteGrouping ||
|
||||
(isCompactMode &&
|
||||
config.siteIds.length === 0)
|
||||
}
|
||||
>
|
||||
{t("resourceLauncherGroupBySite")}
|
||||
</SelectItem>
|
||||
<SelectItem value="label">
|
||||
<SelectItem
|
||||
value="label"
|
||||
disabled={
|
||||
!capabilities.allowLabelGrouping ||
|
||||
(isCompactMode &&
|
||||
config.labelIds.length === 0)
|
||||
}
|
||||
>
|
||||
{t("resourceLauncherGroupByLabel")}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{isCompactMode ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("resourceLauncherCompactGroupingHint")}
|
||||
</p>
|
||||
) : null}
|
||||
{!isCompactMode && !capabilities.allowSiteGrouping ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("resourceLauncherSiteGroupingDisabled")}
|
||||
</p>
|
||||
) : null}
|
||||
{!isCompactMode && !capabilities.allowLabelGrouping ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("resourceLauncherLabelGroupingDisabled")}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -116,16 +153,6 @@ export function LauncherSettingsMenu({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isDefaultView ? (
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="w-full rounded-xl"
|
||||
onClick={onDeleteView}
|
||||
>
|
||||
{t("resourceLauncherDeleteView")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -68,11 +68,14 @@ type LauncherSaveViewMenuProps = {
|
||||
isAdmin: boolean;
|
||||
isOrgWideView: boolean;
|
||||
hasUnsavedChanges: boolean;
|
||||
canResetSystemDefault: boolean;
|
||||
onSaveToCurrent: () => void;
|
||||
onSaveAsNew: () => void;
|
||||
onSaveForEveryone: () => void;
|
||||
onMakePersonal: () => void;
|
||||
onResetView: () => void;
|
||||
onResetSystemDefault: () => void;
|
||||
onDeleteView: () => void;
|
||||
};
|
||||
|
||||
export function LauncherSaveViewMenu({
|
||||
@@ -80,13 +83,17 @@ export function LauncherSaveViewMenu({
|
||||
isAdmin,
|
||||
isOrgWideView,
|
||||
hasUnsavedChanges,
|
||||
canResetSystemDefault,
|
||||
onSaveToCurrent,
|
||||
onSaveAsNew,
|
||||
onSaveForEveryone,
|
||||
onMakePersonal,
|
||||
onResetView
|
||||
onResetView,
|
||||
onResetSystemDefault,
|
||||
onDeleteView
|
||||
}: LauncherSaveViewMenuProps) {
|
||||
const t = useTranslations();
|
||||
const canDeleteView = !isDefaultView && (isAdmin || !isOrgWideView);
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
@@ -108,7 +115,26 @@ export function LauncherSaveViewMenu({
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
) : null}
|
||||
{!isDefaultView && (isAdmin || !isOrgWideView) ? (
|
||||
{isDefaultView && canResetSystemDefault ? (
|
||||
<>
|
||||
<DropdownMenuItem onSelect={onResetSystemDefault}>
|
||||
{t("resourceLauncherResetSystemDefault")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
) : null}
|
||||
{isDefaultView && hasUnsavedChanges ? (
|
||||
<>
|
||||
<DropdownMenuItem onSelect={onSaveToCurrent}>
|
||||
{t("resourceLauncherSaveDefaultPersonal")}
|
||||
</DropdownMenuItem>
|
||||
{isAdmin ? (
|
||||
<DropdownMenuItem onSelect={onSaveForEveryone}>
|
||||
{t("resourceLauncherSaveForEveryone")}
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
</>
|
||||
) : !isDefaultView && (isAdmin || !isOrgWideView) ? (
|
||||
<DropdownMenuItem onSelect={onSaveToCurrent}>
|
||||
{t("resourceLauncherSaveToCurrentView")}
|
||||
</DropdownMenuItem>
|
||||
@@ -126,6 +152,17 @@ export function LauncherSaveViewMenu({
|
||||
{t("resourceLauncherMakePersonal")}
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
{canDeleteView ? (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onSelect={onDeleteView}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
{t("resourceLauncherDeleteView")}
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
) : null}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
@@ -29,12 +29,23 @@ import {
|
||||
} from "@app/lib/launcherUrlState";
|
||||
import { useToast } from "@app/hooks/useToast";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import type {
|
||||
LauncherGroup,
|
||||
LauncherViewConfig,
|
||||
LauncherViewRecord
|
||||
import {
|
||||
getEffectiveLauncherConfig,
|
||||
shouldShowFlatResourceList,
|
||||
shouldShowLauncherGroupList,
|
||||
shouldShowSearchFirstGate
|
||||
} from "@app/lib/launcherScale";
|
||||
import { launcherQueries } from "@app/lib/queries";
|
||||
import {
|
||||
getEffectiveDefaultLauncherConfig,
|
||||
type LauncherDefaultViewOverrides,
|
||||
type LauncherGroup,
|
||||
type LauncherResource,
|
||||
type LauncherScaleInfo,
|
||||
type LauncherViewConfig,
|
||||
type LauncherViewRecord
|
||||
} from "@server/routers/launcher/types";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Search } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -52,20 +63,26 @@ import type { SelectedLabel } from "@app/components/labels-selector";
|
||||
import { useMediaQuery } from "@app/hooks/useMediaQuery";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { LauncherFilterPopover } from "./LauncherFilterPopover";
|
||||
import { LauncherFlatResourceList } from "./LauncherFlatResourceList";
|
||||
import { LauncherGroupList } from "./LauncherGroupList";
|
||||
import { LauncherSearchFirstGate } from "./LauncherSearchFirstGate";
|
||||
import { LauncherRefreshButton } from "./LauncherRefreshButton";
|
||||
import { LauncherResourcePanel } from "./LauncherResourcePanel";
|
||||
import { LauncherSettingsMenu } from "./LauncherSettingsMenu";
|
||||
import { LauncherSortButton } from "./LauncherSortButton";
|
||||
import { LauncherSaveViewMenu, LauncherViewTabs } from "./LauncherViewTabs";
|
||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
|
||||
type ResourceLauncherProps = {
|
||||
orgId: string;
|
||||
isAdmin: boolean;
|
||||
views: LauncherViewRecord[];
|
||||
defaultViewOverrides: LauncherDefaultViewOverrides;
|
||||
activeViewId: LauncherActiveViewId;
|
||||
config: LauncherViewConfig;
|
||||
savedConfig: LauncherViewConfig;
|
||||
scale: LauncherScaleInfo;
|
||||
groups: LauncherGroup[];
|
||||
groupsPagination: {
|
||||
total: number;
|
||||
@@ -78,9 +95,11 @@ export default function ResourceLauncher({
|
||||
orgId,
|
||||
isAdmin,
|
||||
views,
|
||||
defaultViewOverrides,
|
||||
activeViewId,
|
||||
config,
|
||||
savedConfig,
|
||||
scale: initialScale,
|
||||
groups,
|
||||
groupsPagination
|
||||
}: ResourceLauncherProps) {
|
||||
@@ -88,6 +107,7 @@ export default function ResourceLauncher({
|
||||
const { toast } = useToast();
|
||||
const { env } = useEnvContext();
|
||||
const api = createApiClient({ env });
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const { navigate, isNavigating, searchParams } = useNavigationContext();
|
||||
const [isRefreshing, startRefreshTransition] = useTransition();
|
||||
@@ -95,11 +115,47 @@ export default function ResourceLauncher({
|
||||
|
||||
const [searchInputResetKey, setSearchInputResetKey] = useState(0);
|
||||
const [saveDialogOpen, setSaveDialogOpen] = useState(false);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [newViewName, setNewViewName] = useState("");
|
||||
const [saveOrgWide, setSaveOrgWide] = useState(false);
|
||||
const [selectedResource, setSelectedResource] =
|
||||
useState<LauncherResource | null>(null);
|
||||
const [panelOpen, setPanelOpen] = useState(false);
|
||||
|
||||
const isDesktop = useMediaQuery("(min-width: 768px)");
|
||||
|
||||
const scaleFilters = useMemo(
|
||||
() => ({
|
||||
query: config.query,
|
||||
groupBy: config.groupBy,
|
||||
siteIds: config.siteIds,
|
||||
labelIds: config.labelIds,
|
||||
sort_by: config.sortBy,
|
||||
order: config.order
|
||||
}),
|
||||
[
|
||||
config.groupBy,
|
||||
config.labelIds,
|
||||
config.order,
|
||||
config.query,
|
||||
config.siteIds,
|
||||
config.sortBy
|
||||
]
|
||||
);
|
||||
|
||||
const { data: scale = initialScale } = useQuery({
|
||||
...launcherQueries.scale(orgId, scaleFilters),
|
||||
initialData: initialScale
|
||||
});
|
||||
|
||||
const showGroupList = shouldShowLauncherGroupList(scale, config);
|
||||
const showSearchFirstGate = shouldShowSearchFirstGate(scale, config);
|
||||
const showFlatResourceList = shouldShowFlatResourceList(scale, config);
|
||||
const effectiveConfig = useMemo(
|
||||
() => getEffectiveLauncherConfig(scale, config),
|
||||
[config, scale]
|
||||
);
|
||||
|
||||
const configRef = useRef(config);
|
||||
configRef.current = config;
|
||||
const searchInputRef = useRef(config.query);
|
||||
@@ -129,13 +185,24 @@ export default function ResourceLauncher({
|
||||
return;
|
||||
}
|
||||
|
||||
const baseConfig = getLauncherUrlBaseConfig(lastView, views);
|
||||
const baseConfig = getLauncherUrlBaseConfig(
|
||||
lastView,
|
||||
views,
|
||||
defaultViewOverrides
|
||||
);
|
||||
const params = serializeLauncherUrlState({
|
||||
viewId: lastView,
|
||||
config: baseConfig
|
||||
});
|
||||
navigate({ searchParams: params, replace: true });
|
||||
}, [activeViewId, navigate, orgId, searchParams, views]);
|
||||
}, [
|
||||
activeViewId,
|
||||
defaultViewOverrides,
|
||||
navigate,
|
||||
orgId,
|
||||
searchParams,
|
||||
views
|
||||
]);
|
||||
|
||||
const navigateToConfig = useCallback(
|
||||
(viewId: LauncherActiveViewId, nextConfig: LauncherViewConfig) => {
|
||||
@@ -158,10 +225,14 @@ export default function ResourceLauncher({
|
||||
const selectView = useCallback(
|
||||
(viewId: LauncherActiveViewId) => {
|
||||
writeLauncherLastView(orgId, viewId);
|
||||
const baseConfig = getLauncherUrlBaseConfig(viewId, views);
|
||||
const baseConfig = getLauncherUrlBaseConfig(
|
||||
viewId,
|
||||
views,
|
||||
defaultViewOverrides
|
||||
);
|
||||
navigateToConfig(viewId, baseConfig);
|
||||
},
|
||||
[navigateToConfig, orgId, views]
|
||||
[defaultViewOverrides, navigateToConfig, orgId, views]
|
||||
);
|
||||
|
||||
const activeSavedView = useMemo(
|
||||
@@ -175,6 +246,10 @@ export default function ResourceLauncher({
|
||||
const isDefaultView = activeViewId === "default";
|
||||
const isOrgWideView = Boolean(activeSavedView?.isOrgWide);
|
||||
const hasUnsavedChanges = !isLauncherConfigEqual(config, savedConfig);
|
||||
const canResetSystemDefault =
|
||||
isDefaultView &&
|
||||
(Boolean(defaultViewOverrides.personal) ||
|
||||
(isAdmin && Boolean(defaultViewOverrides.orgWide)));
|
||||
|
||||
const selectedSites: Selectedsite[] = useMemo(
|
||||
() =>
|
||||
@@ -270,6 +345,87 @@ export default function ResourceLauncher({
|
||||
}
|
||||
});
|
||||
|
||||
const saveDefaultViewMutation = useMutation({
|
||||
mutationFn: async (payload: {
|
||||
config: LauncherViewConfig;
|
||||
orgWide: boolean;
|
||||
}) => {
|
||||
const res = await api.put(
|
||||
`/org/${orgId}/launcher/default-view`,
|
||||
payload
|
||||
);
|
||||
return res.data.data as LauncherViewRecord;
|
||||
},
|
||||
onSuccess: () => {
|
||||
writeLauncherLastView(orgId, "default");
|
||||
const params = serializeLauncherUrlState({
|
||||
viewId: "default",
|
||||
config
|
||||
});
|
||||
navigate({ searchParams: params, replace: true });
|
||||
router.refresh();
|
||||
toast({
|
||||
title: t("resourceLauncherViewSaved"),
|
||||
description: t("resourceLauncherViewSavedDescription")
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("resourceLauncherViewSaveFailed"),
|
||||
description: formatAxiosError(
|
||||
error,
|
||||
t("resourceLauncherViewSaveFailedDescription")
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const resetSystemDefaultMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const resetAll = isAdmin && Boolean(defaultViewOverrides.orgWide);
|
||||
await api.delete(`/org/${orgId}/launcher/default-view`, {
|
||||
data: resetAll ? { all: true } : { orgWide: false }
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
writeLauncherLastView(orgId, "default");
|
||||
const nextOverrides: LauncherDefaultViewOverrides = {
|
||||
personal: null,
|
||||
orgWide:
|
||||
isAdmin && defaultViewOverrides.orgWide
|
||||
? null
|
||||
: defaultViewOverrides.orgWide
|
||||
};
|
||||
const targetConfig =
|
||||
getEffectiveDefaultLauncherConfig(nextOverrides);
|
||||
searchInputRef.current = targetConfig.query;
|
||||
setSearchInputResetKey((key) => key + 1);
|
||||
const params = serializeLauncherUrlState({
|
||||
viewId: "default",
|
||||
config: targetConfig
|
||||
});
|
||||
navigate({ searchParams: params, replace: true });
|
||||
router.refresh();
|
||||
toast({
|
||||
title: t("resourceLauncherSystemDefaultRestored"),
|
||||
description: t(
|
||||
"resourceLauncherSystemDefaultRestoredDescription"
|
||||
)
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("resourceLauncherViewSaveFailed"),
|
||||
description: formatAxiosError(
|
||||
error,
|
||||
t("resourceLauncherViewSaveFailedDescription")
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const deleteViewMutation = useMutation({
|
||||
mutationFn: async (viewId: number) => {
|
||||
await api.delete(`/org/${orgId}/launcher/views/${viewId}`);
|
||||
@@ -278,7 +434,11 @@ export default function ResourceLauncher({
|
||||
writeLauncherLastView(orgId, "default");
|
||||
const params = serializeLauncherUrlState({
|
||||
viewId: "default",
|
||||
config: getLauncherUrlBaseConfig("default", views)
|
||||
config: getLauncherUrlBaseConfig(
|
||||
"default",
|
||||
views,
|
||||
defaultViewOverrides
|
||||
)
|
||||
});
|
||||
navigate({ searchParams: params, replace: true });
|
||||
router.refresh();
|
||||
@@ -328,9 +488,17 @@ export default function ResourceLauncher({
|
||||
navigateToConfig(activeViewIdRef.current, savedConfig);
|
||||
}, [navigateToConfig, savedConfig]);
|
||||
|
||||
const handleResetSystemDefault = useCallback(() => {
|
||||
resetSystemDefaultMutation.mutate();
|
||||
}, [resetSystemDefaultMutation]);
|
||||
|
||||
const refreshData = () => {
|
||||
startRefreshTransition(async () => {
|
||||
try {
|
||||
await api.post(`/org/${orgId}/launcher/invalidate-cache`);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["ORG", orgId, "LAUNCHER"]
|
||||
});
|
||||
router.refresh();
|
||||
} catch {
|
||||
toast({
|
||||
@@ -343,7 +511,14 @@ export default function ResourceLauncher({
|
||||
};
|
||||
|
||||
const handleSaveToCurrent = () => {
|
||||
if (isDefaultView || (isOrgWideView && !isAdmin)) {
|
||||
if (isDefaultView) {
|
||||
saveDefaultViewMutation.mutate({
|
||||
config,
|
||||
orgWide: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (isOrgWideView && !isAdmin) {
|
||||
return;
|
||||
}
|
||||
updateViewMutation.mutate({
|
||||
@@ -360,6 +535,10 @@ export default function ResourceLauncher({
|
||||
|
||||
const handleSaveForEveryone = () => {
|
||||
if (isDefaultView) {
|
||||
saveDefaultViewMutation.mutate({
|
||||
config,
|
||||
orgWide: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
updateViewMutation.mutate({
|
||||
@@ -389,6 +568,18 @@ export default function ResourceLauncher({
|
||||
});
|
||||
};
|
||||
|
||||
const handleResourceSelect = useCallback((resource: LauncherResource) => {
|
||||
setSelectedResource(resource);
|
||||
setPanelOpen(true);
|
||||
}, []);
|
||||
|
||||
const handlePanelOpenChange = useCallback((open: boolean) => {
|
||||
setPanelOpen(open);
|
||||
if (!open) {
|
||||
setSelectedResource(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const savedViewTabs = views.map((view) => ({
|
||||
viewId: view.viewId,
|
||||
name: view.name
|
||||
@@ -412,19 +603,8 @@ export default function ResourceLauncher({
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderToolbarActions = () => (
|
||||
const renderToolbarFilterSort = () => (
|
||||
<>
|
||||
<LauncherSaveViewMenu
|
||||
isDefaultView={isDefaultView}
|
||||
isAdmin={isAdmin}
|
||||
isOrgWideView={isOrgWideView}
|
||||
hasUnsavedChanges={hasUnsavedChanges}
|
||||
onSaveToCurrent={handleSaveToCurrent}
|
||||
onSaveAsNew={handleSaveAsNew}
|
||||
onSaveForEveryone={handleSaveForEveryone}
|
||||
onMakePersonal={handleMakePersonal}
|
||||
onResetView={handleResetView}
|
||||
/>
|
||||
<LauncherFilterPopover
|
||||
orgId={orgId}
|
||||
selectedSites={selectedSites}
|
||||
@@ -448,15 +628,31 @@ export default function ResourceLauncher({
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderToolbarActions = () => (
|
||||
<>
|
||||
<LauncherSaveViewMenu
|
||||
isDefaultView={isDefaultView}
|
||||
isAdmin={isAdmin}
|
||||
isOrgWideView={isOrgWideView}
|
||||
hasUnsavedChanges={hasUnsavedChanges}
|
||||
canResetSystemDefault={canResetSystemDefault}
|
||||
onSaveToCurrent={handleSaveToCurrent}
|
||||
onSaveAsNew={handleSaveAsNew}
|
||||
onSaveForEveryone={handleSaveForEveryone}
|
||||
onMakePersonal={handleMakePersonal}
|
||||
onResetView={handleResetView}
|
||||
onResetSystemDefault={handleResetSystemDefault}
|
||||
onDeleteView={() => setDeleteDialogOpen(true)}
|
||||
/>
|
||||
<LauncherSettingsMenu
|
||||
config={config}
|
||||
isDefaultView={isDefaultView}
|
||||
capabilities={scale.capabilities}
|
||||
isCompactMode={scale.mode === "compact"}
|
||||
selectedGroupBy={effectiveConfig.groupBy}
|
||||
onConfigChange={applyConfigPatch}
|
||||
onDeleteView={() => {
|
||||
if (!isDefaultView) {
|
||||
deleteViewMutation.mutate(activeViewId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<LauncherRefreshButton
|
||||
onRefresh={refreshData}
|
||||
@@ -483,6 +679,9 @@ export default function ResourceLauncher({
|
||||
{isDesktop ? (
|
||||
<div className="mb-6 flex w-full min-w-0 items-center gap-3">
|
||||
{renderToolbarSearch("w-64")}
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
{renderToolbarFilterSort()}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 overflow-x-auto">
|
||||
{renderToolbarViews()}
|
||||
</div>
|
||||
@@ -495,22 +694,64 @@ export default function ResourceLauncher({
|
||||
<div className="flex items-center gap-2 overflow-x-auto">
|
||||
{renderToolbarActions()}
|
||||
</div>
|
||||
{renderToolbarSearch("w-full")}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
{renderToolbarSearch("w-full")}
|
||||
</div>
|
||||
{renderToolbarFilterSort()}
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
{renderToolbarViews()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LauncherGroupList
|
||||
{showSearchFirstGate ? (
|
||||
<LauncherSearchFirstGate layout={config.layout} />
|
||||
) : showGroupList ? (
|
||||
<LauncherGroupList
|
||||
orgId={orgId}
|
||||
activeViewId={activeViewId}
|
||||
config={effectiveConfig}
|
||||
initialGroups={groups}
|
||||
groupsPagination={groupsPagination}
|
||||
onClearFilters={handleClearFilters}
|
||||
onResourceSelect={handleResourceSelect}
|
||||
/>
|
||||
) : showFlatResourceList ? (
|
||||
<LauncherFlatResourceList
|
||||
orgId={orgId}
|
||||
activeViewId={activeViewId}
|
||||
config={effectiveConfig}
|
||||
onClearFilters={handleClearFilters}
|
||||
onResourceSelect={handleResourceSelect}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<LauncherResourcePanel
|
||||
open={panelOpen}
|
||||
onOpenChange={handlePanelOpenChange}
|
||||
resource={selectedResource}
|
||||
orgId={orgId}
|
||||
activeViewId={activeViewId}
|
||||
config={config}
|
||||
initialGroups={groups}
|
||||
groupsPagination={groupsPagination}
|
||||
onClearFilters={handleClearFilters}
|
||||
isAdmin={isAdmin}
|
||||
/>
|
||||
|
||||
{activeSavedView ? (
|
||||
<ConfirmDeleteDialog
|
||||
open={deleteDialogOpen}
|
||||
setOpen={setDeleteDialogOpen}
|
||||
string={activeSavedView.name}
|
||||
title={t("resourceLauncherDeleteViewTitle")}
|
||||
buttonText={t("resourceLauncherDeleteViewConfirm")}
|
||||
dialog={<p>{t("resourceLauncherDeleteViewQuestion")}</p>}
|
||||
onConfirm={async () => {
|
||||
await deleteViewMutation.mutateAsync(
|
||||
activeSavedView.viewId
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Credenza open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
|
||||
<CredenzaContent>
|
||||
<CredenzaHeader>
|
||||
|
||||
@@ -10,7 +10,7 @@ function lastViewKey(orgId: string) {
|
||||
function groupOpenKey(
|
||||
orgId: string,
|
||||
viewId: LauncherActiveViewId,
|
||||
groupBy: "site" | "label"
|
||||
groupBy: "site" | "label" | "none"
|
||||
) {
|
||||
return `${GROUP_OPEN_PREFIX}${orgId}:${viewId}:${groupBy}`;
|
||||
}
|
||||
@@ -64,7 +64,7 @@ export function writeLauncherLastView(
|
||||
export function readLauncherGroupOpenState(
|
||||
orgId: string,
|
||||
viewId: LauncherActiveViewId,
|
||||
groupBy: "site" | "label"
|
||||
groupBy: "site" | "label" | "none"
|
||||
): Record<string, boolean> {
|
||||
return readJson<Record<string, boolean>>(
|
||||
groupOpenKey(orgId, viewId, groupBy),
|
||||
@@ -75,7 +75,7 @@ export function readLauncherGroupOpenState(
|
||||
export function readLauncherGroupOpen(
|
||||
orgId: string,
|
||||
viewId: LauncherActiveViewId,
|
||||
groupBy: "site" | "label",
|
||||
groupBy: "site" | "label" | "none",
|
||||
groupKey: string,
|
||||
defaultOpen: boolean
|
||||
): boolean {
|
||||
@@ -86,7 +86,7 @@ export function readLauncherGroupOpen(
|
||||
export function writeLauncherGroupOpen(
|
||||
orgId: string,
|
||||
viewId: LauncherActiveViewId,
|
||||
groupBy: "site" | "label",
|
||||
groupBy: "site" | "label" | "none",
|
||||
groupKey: string,
|
||||
isOpen: boolean
|
||||
) {
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||
|
||||
export type PublicAuthState = "protected" | "not_protected" | "none";
|
||||
|
||||
const BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||
|
||||
export function derivePublicAuthState(
|
||||
mode: string | null,
|
||||
authInfo: Pick<
|
||||
GetResourceAuthInfoResponse,
|
||||
"password" | "pincode" | "sso" | "whitelist" | "headerAuth"
|
||||
>
|
||||
): PublicAuthState {
|
||||
if (!BROWSER_MODES.includes(mode || "")) {
|
||||
return "none";
|
||||
}
|
||||
|
||||
if (
|
||||
authInfo.password ||
|
||||
authInfo.pincode ||
|
||||
authInfo.sso ||
|
||||
authInfo.whitelist ||
|
||||
authInfo.headerAuth
|
||||
) {
|
||||
return "protected";
|
||||
}
|
||||
|
||||
return "not_protected";
|
||||
}
|
||||
|
||||
export function formatPublicResourceType(
|
||||
resource: Pick<GetResourceResponse, "mode" | "ssl">
|
||||
): string {
|
||||
if (resource.mode === "http") {
|
||||
return resource.ssl ? "HTTPS" : "HTTP";
|
||||
}
|
||||
|
||||
const mode = (resource.mode || "").toLowerCase();
|
||||
if (mode === "tcp") {
|
||||
return "TCP";
|
||||
}
|
||||
if (mode === "udp") {
|
||||
return "UDP";
|
||||
}
|
||||
|
||||
return (resource.mode || "—").toUpperCase();
|
||||
}
|
||||
|
||||
export type PortProtocolState = "all" | "blocked" | "custom";
|
||||
|
||||
function getPortProtocolState(
|
||||
value: string | null | undefined
|
||||
): PortProtocolState {
|
||||
if (value === "*") {
|
||||
return "all";
|
||||
}
|
||||
|
||||
if (!value || value.trim() === "") {
|
||||
return "blocked";
|
||||
}
|
||||
|
||||
return "custom";
|
||||
}
|
||||
|
||||
export type PortRestrictionDisplay = {
|
||||
hasNonDefaultPorts: boolean;
|
||||
tcp: { state: PortProtocolState; ports: string | null };
|
||||
udp: { state: PortProtocolState; ports: string | null };
|
||||
};
|
||||
|
||||
export function formatPortRestrictionDisplay(
|
||||
resource: Pick<
|
||||
GetSiteResourceResponse,
|
||||
"tcpPortRangeString" | "udpPortRangeString"
|
||||
>
|
||||
): PortRestrictionDisplay {
|
||||
const tcpState = getPortProtocolState(resource.tcpPortRangeString);
|
||||
const udpState = getPortProtocolState(resource.udpPortRangeString);
|
||||
|
||||
return {
|
||||
hasNonDefaultPorts: tcpState !== "all" || udpState !== "all",
|
||||
tcp: {
|
||||
state: tcpState,
|
||||
ports: tcpState === "custom" ? resource.tcpPortRangeString : null
|
||||
},
|
||||
udp: {
|
||||
state: udpState,
|
||||
ports: udpState === "custom" ? resource.udpPortRangeString : null
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import type {
|
||||
LauncherScaleInfo,
|
||||
LauncherViewConfig
|
||||
} from "@server/routers/launcher/types";
|
||||
|
||||
export function hasActiveLauncherFilters(config: LauncherViewConfig): boolean {
|
||||
return (
|
||||
config.query.trim().length > 0 ||
|
||||
config.siteIds.length > 0 ||
|
||||
config.labelIds.length > 0
|
||||
);
|
||||
}
|
||||
|
||||
export function getEffectiveGroupBy(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): LauncherViewConfig["groupBy"] {
|
||||
if (scale.mode !== "compact") {
|
||||
return config.groupBy;
|
||||
}
|
||||
|
||||
if (
|
||||
config.groupBy === "site" &&
|
||||
config.siteIds.length > 0 &&
|
||||
scale.capabilities.allowSiteGrouping
|
||||
) {
|
||||
return "site";
|
||||
}
|
||||
|
||||
if (
|
||||
config.groupBy === "label" &&
|
||||
config.labelIds.length > 0 &&
|
||||
scale.capabilities.allowLabelGrouping
|
||||
) {
|
||||
return "label";
|
||||
}
|
||||
|
||||
return "none";
|
||||
}
|
||||
|
||||
export function getEffectiveLauncherConfig(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): LauncherViewConfig {
|
||||
const groupBy = getEffectiveGroupBy(scale, config);
|
||||
if (groupBy === config.groupBy) {
|
||||
return config;
|
||||
}
|
||||
|
||||
return { ...config, groupBy };
|
||||
}
|
||||
|
||||
export function shouldFetchLauncherGroups(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): boolean {
|
||||
const groupBy = getEffectiveGroupBy(scale, config);
|
||||
|
||||
if (groupBy === "none") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (scale.mode === "full") {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (
|
||||
(scale.capabilities.allowSiteGrouping &&
|
||||
groupBy === "site" &&
|
||||
config.siteIds.length > 0) ||
|
||||
(scale.capabilities.allowLabelGrouping &&
|
||||
groupBy === "label" &&
|
||||
config.labelIds.length > 0)
|
||||
);
|
||||
}
|
||||
|
||||
export function shouldShowLauncherGroupList(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): boolean {
|
||||
return shouldFetchLauncherGroups(scale, config);
|
||||
}
|
||||
|
||||
export function shouldShowSearchFirstGate(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): boolean {
|
||||
return (
|
||||
scale.mode === "compact" &&
|
||||
scale.capabilities.requireSearchOrFilter &&
|
||||
!hasActiveLauncherFilters(config)
|
||||
);
|
||||
}
|
||||
|
||||
export function shouldShowFlatResourceList(
|
||||
scale: LauncherScaleInfo,
|
||||
config: LauncherViewConfig
|
||||
): boolean {
|
||||
if (shouldShowSearchFirstGate(scale, config)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const groupBy = getEffectiveGroupBy(scale, config);
|
||||
|
||||
if (groupBy === "none") {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (scale.mode === "full") {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !shouldShowLauncherGroupList(scale, config);
|
||||
}
|
||||
@@ -1,21 +1,27 @@
|
||||
import { internal } from "@app/lib/api";
|
||||
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||
import { shouldFetchLauncherGroups } from "@app/lib/launcherScale";
|
||||
import { resolveLauncherStateFromUrl } from "@app/lib/launcherUrlState";
|
||||
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
||||
import type {
|
||||
LauncherGroup,
|
||||
LauncherScaleInfo,
|
||||
LauncherDefaultViewOverrides,
|
||||
LauncherViewConfig,
|
||||
LauncherViewRecord,
|
||||
ListLauncherGroupsResponse,
|
||||
ListLauncherScaleResponse,
|
||||
ListLauncherViewsResponse
|
||||
} from "@server/routers/launcher/types";
|
||||
import { AxiosResponse } from "axios";
|
||||
|
||||
export type LauncherPageData = {
|
||||
views: LauncherViewRecord[];
|
||||
defaultViewOverrides: LauncherDefaultViewOverrides;
|
||||
activeViewId: LauncherActiveViewId;
|
||||
config: LauncherViewConfig;
|
||||
savedConfig: LauncherViewConfig;
|
||||
scale: LauncherScaleInfo;
|
||||
groups: LauncherGroup[];
|
||||
groupsPagination: {
|
||||
total: number;
|
||||
@@ -32,19 +38,56 @@ export async function fetchLauncherPageData(
|
||||
>
|
||||
): Promise<LauncherPageData> {
|
||||
let views: LauncherViewRecord[] = [];
|
||||
let defaultViewOverrides: LauncherDefaultViewOverrides = {
|
||||
personal: null,
|
||||
orgWide: null
|
||||
};
|
||||
try {
|
||||
const viewsRes = await internal.get<
|
||||
AxiosResponse<ListLauncherViewsResponse>
|
||||
>(`/org/${orgId}/launcher/views`, cookieHeader);
|
||||
views = viewsRes.data.data.views;
|
||||
defaultViewOverrides = viewsRes.data.data.defaultViewOverrides;
|
||||
} catch (e) {}
|
||||
|
||||
const { activeViewId, config, savedConfig } = resolveLauncherStateFromUrl(
|
||||
searchParams,
|
||||
views,
|
||||
null
|
||||
null,
|
||||
defaultViewOverrides
|
||||
);
|
||||
|
||||
const scaleFilters = {
|
||||
query: config.query,
|
||||
groupBy: config.groupBy,
|
||||
siteIds: config.siteIds,
|
||||
labelIds: config.labelIds,
|
||||
sort_by: config.sortBy,
|
||||
order: config.order
|
||||
};
|
||||
|
||||
let scale: LauncherScaleInfo = {
|
||||
mode: "full",
|
||||
resourceCount: 0,
|
||||
siteGroupCount: 0,
|
||||
labelGroupCount: 0,
|
||||
capabilities: {
|
||||
allowSiteGrouping: true,
|
||||
allowLabelGrouping: true,
|
||||
requireSearchOrFilter: false
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const sp = buildLauncherSearchParams(scaleFilters, 1);
|
||||
sp.delete("page");
|
||||
sp.delete("pageSize");
|
||||
const scaleRes = await internal.get<
|
||||
AxiosResponse<ListLauncherScaleResponse>
|
||||
>(`/org/${orgId}/launcher/scale?${sp.toString()}`, cookieHeader);
|
||||
scale = scaleRes.data.data.scale;
|
||||
} catch (e) {}
|
||||
|
||||
const groupFilters = {
|
||||
query: config.query,
|
||||
groupBy: config.groupBy,
|
||||
@@ -62,20 +105,24 @@ export async function fetchLauncherPageData(
|
||||
pageSize: 20
|
||||
};
|
||||
|
||||
try {
|
||||
const sp = buildLauncherSearchParams(groupFilters, 1);
|
||||
const groupsRes = await internal.get<
|
||||
AxiosResponse<ListLauncherGroupsResponse>
|
||||
>(`/org/${orgId}/launcher/groups?${sp.toString()}`, cookieHeader);
|
||||
groups = groupsRes.data.data.groups;
|
||||
groupsPagination = groupsRes.data.data.pagination;
|
||||
} catch (e) {}
|
||||
if (shouldFetchLauncherGroups(scale, config)) {
|
||||
try {
|
||||
const sp = buildLauncherSearchParams(groupFilters, 1);
|
||||
const groupsRes = await internal.get<
|
||||
AxiosResponse<ListLauncherGroupsResponse>
|
||||
>(`/org/${orgId}/launcher/groups?${sp.toString()}`, cookieHeader);
|
||||
groups = groupsRes.data.data.groups;
|
||||
groupsPagination = groupsRes.data.data.pagination;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return {
|
||||
views,
|
||||
defaultViewOverrides,
|
||||
activeViewId,
|
||||
config,
|
||||
savedConfig,
|
||||
scale,
|
||||
groups,
|
||||
groupsPagination
|
||||
};
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import type { LauncherActiveViewId } from "@app/lib/launcherLocalStorage";
|
||||
import {
|
||||
defaultLauncherViewConfig,
|
||||
getEffectiveDefaultLauncherConfig,
|
||||
parseIdListParam,
|
||||
type LauncherDefaultViewOverrides,
|
||||
type LauncherViewConfig,
|
||||
type LauncherViewRecord
|
||||
} from "@server/routers/launcher/types";
|
||||
@@ -64,10 +66,13 @@ export function isLauncherConfigEqual(
|
||||
|
||||
export function getLauncherUrlBaseConfig(
|
||||
viewId: LauncherActiveViewId,
|
||||
views: LauncherViewRecord[]
|
||||
views: LauncherViewRecord[],
|
||||
defaultViewOverrides?: LauncherDefaultViewOverrides
|
||||
): LauncherViewConfig {
|
||||
if (viewId === "default") {
|
||||
return defaultLauncherViewConfig;
|
||||
return defaultViewOverrides
|
||||
? getEffectiveDefaultLauncherConfig(defaultViewOverrides)
|
||||
: defaultLauncherViewConfig;
|
||||
}
|
||||
|
||||
const savedView = views.find((view) => view.viewId === viewId);
|
||||
@@ -113,7 +118,7 @@ function parseConfigOverrides(
|
||||
}
|
||||
|
||||
const groupBy = searchParams.get("groupBy");
|
||||
if (groupBy === "site" || groupBy === "label") {
|
||||
if (groupBy === "site" || groupBy === "label" || groupBy === "none") {
|
||||
overrides.groupBy = groupBy;
|
||||
}
|
||||
|
||||
@@ -172,7 +177,8 @@ function isValidActiveViewId(
|
||||
export function resolveLauncherStateFromUrl(
|
||||
searchParams: URLSearchParams,
|
||||
views: LauncherViewRecord[],
|
||||
fallbackViewId: LauncherActiveViewId | null
|
||||
fallbackViewId: LauncherActiveViewId | null,
|
||||
defaultViewOverrides?: LauncherDefaultViewOverrides
|
||||
): ResolvedLauncherState {
|
||||
const parsed = parseLauncherUrlState(searchParams);
|
||||
|
||||
@@ -188,18 +194,26 @@ export function resolveLauncherStateFromUrl(
|
||||
: "default";
|
||||
}
|
||||
|
||||
const savedConfig = getLauncherUrlBaseConfig(activeViewId, views);
|
||||
const savedConfig = getLauncherUrlBaseConfig(
|
||||
activeViewId,
|
||||
views,
|
||||
defaultViewOverrides
|
||||
);
|
||||
|
||||
let config: LauncherViewConfig;
|
||||
if (hasLauncherConfigParams(searchParams)) {
|
||||
config = resolveLauncherConfig(
|
||||
defaultLauncherViewConfig,
|
||||
getEffectiveDefaultLauncherConfig(
|
||||
defaultViewOverrides ?? { personal: null, orgWide: null }
|
||||
),
|
||||
parsed.configOverrides
|
||||
);
|
||||
} else if (activeViewId !== "default") {
|
||||
config = savedConfig;
|
||||
} else {
|
||||
config = defaultLauncherViewConfig;
|
||||
config = getEffectiveDefaultLauncherConfig(
|
||||
defaultViewOverrides ?? { personal: null, orgWide: null }
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
+65
-3
@@ -50,11 +50,16 @@ import type {
|
||||
ListLauncherGroupsResponse,
|
||||
ListLauncherLabelsResponse,
|
||||
ListLauncherResourcesResponse,
|
||||
ListLauncherScaleResponse,
|
||||
ListLauncherSitesResponse,
|
||||
ListLauncherViewsResponse,
|
||||
LauncherListQuery,
|
||||
LauncherResource,
|
||||
LauncherViewConfig
|
||||
} from "@server/routers/launcher/types";
|
||||
import type { GetResourceResponse } from "@server/routers/resource/getResource";
|
||||
import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
|
||||
import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
|
||||
import type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
|
||||
import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
|
||||
|
||||
@@ -1189,13 +1194,13 @@ export const launcherQueries = {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListLauncherViewsResponse>
|
||||
>(`/org/${orgId}/launcher/views`, { signal });
|
||||
return res.data.data.views;
|
||||
return res.data.data;
|
||||
}
|
||||
}),
|
||||
sites: ({
|
||||
orgId,
|
||||
query,
|
||||
perPage = 500
|
||||
perPage = 20
|
||||
}: {
|
||||
orgId: string;
|
||||
query?: string;
|
||||
@@ -1227,7 +1232,7 @@ export const launcherQueries = {
|
||||
labels: ({
|
||||
orgId,
|
||||
query,
|
||||
perPage = 500
|
||||
perPage = 20
|
||||
}: {
|
||||
orgId: string;
|
||||
query?: string;
|
||||
@@ -1298,5 +1303,62 @@ export const launcherQueries = {
|
||||
const nextPage = page + 1;
|
||||
return page * pageSize < total ? nextPage : undefined;
|
||||
}
|
||||
}),
|
||||
scale: (orgId: string, filters: LauncherQueryFilters) =>
|
||||
queryOptions({
|
||||
queryKey: ["ORG", orgId, "LAUNCHER", "SCALE", filters] as const,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
const sp = buildLauncherSearchParams(filters, 1);
|
||||
sp.delete("page");
|
||||
sp.delete("pageSize");
|
||||
sp.delete("groupKey");
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListLauncherScaleResponse>
|
||||
>(`/org/${orgId}/launcher/scale?${sp.toString()}`, { signal });
|
||||
return res.data.data.scale;
|
||||
}
|
||||
}),
|
||||
resourceDetail: (orgId: string, resource: LauncherResource | null) =>
|
||||
queryOptions({
|
||||
queryKey: [
|
||||
"ORG",
|
||||
orgId,
|
||||
"LAUNCHER",
|
||||
"RESOURCE_DETAIL",
|
||||
resource?.launcherResourceKey ?? null
|
||||
] as const,
|
||||
enabled: resource != null,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
if (!resource) {
|
||||
throw new Error("Resource is required");
|
||||
}
|
||||
|
||||
if (resource.resourceType === "public") {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<GetResourceResponse>
|
||||
>(`/org/${orgId}/resource/${resource.niceId}`, { signal });
|
||||
const resourceData = res.data.data;
|
||||
const authRes = await meta!.api.get<
|
||||
AxiosResponse<GetResourceAuthInfoResponse>
|
||||
>(`/resource/${resourceData.resourceGuid}/auth`, {
|
||||
signal
|
||||
});
|
||||
return {
|
||||
resourceType: "public" as const,
|
||||
data: resourceData,
|
||||
authInfo: authRes.data.data
|
||||
};
|
||||
}
|
||||
|
||||
const siteResourceId =
|
||||
resource.siteResourceId ?? resource.resourceId;
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<GetSiteResourceResponse>
|
||||
>(`/org/${orgId}/site-resource/${siteResourceId}`, { signal });
|
||||
return {
|
||||
resourceType: "site" as const,
|
||||
data: res.data.data
|
||||
};
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user