mirror of
https://github.com/fosrl/pangolin.git
synced 2026-06-10 17:43:15 +00:00
adjust targets input styles
This commit is contained in:
miloschwartz
@@ -10,7 +10,10 @@ import {
|
||||
PathRewriteDisplay,
|
||||
PathRewriteModal
|
||||
} from "@app/components/PathMatchRenameModal";
|
||||
import { ResourceTargetAddressItem } from "@app/components/resource-target-address-item";
|
||||
import {
|
||||
ResourceTargetAddressItem,
|
||||
ResourceTargetSiteItem
|
||||
} from "@app/components/resource-target-address-item";
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
@@ -65,6 +68,7 @@ import {
|
||||
useMemo,
|
||||
useState
|
||||
} from "react";
|
||||
import { maxSize } from "zod";
|
||||
|
||||
export type LocalTarget = Omit<
|
||||
ArrayElement<ListTargetsResponse["targets"]> & {
|
||||
@@ -269,7 +273,7 @@ export function ProxyResourceTargetsForm({
|
||||
const priorityColumn: ColumnDef<LocalTarget> = {
|
||||
id: "priority",
|
||||
header: () => (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
{t("priority")}
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
@@ -285,7 +289,6 @@ export function ProxyResourceTargetsForm({
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
@@ -303,7 +306,6 @@ export function ProxyResourceTargetsForm({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
size: 120,
|
||||
@@ -437,13 +439,12 @@ export function ProxyResourceTargetsForm({
|
||||
maxSize: 200
|
||||
};
|
||||
|
||||
const addressColumn: ColumnDef<LocalTarget> = {
|
||||
accessorKey: "address",
|
||||
header: () => <span className="p-3">{t("address")}</span>,
|
||||
const siteColumn: ColumnDef<LocalTarget> = {
|
||||
accessorKey: "site",
|
||||
header: () => <span className="p-3">{t("site")}</span>,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<ResourceTargetAddressItem
|
||||
isHttp={isHttp}
|
||||
<ResourceTargetSiteItem
|
||||
orgId={orgId}
|
||||
getDockerStateForSite={getDockerStateForSite}
|
||||
proxyTarget={row.original}
|
||||
@@ -452,9 +453,26 @@ export function ProxyResourceTargetsForm({
|
||||
/>
|
||||
);
|
||||
},
|
||||
size: 400,
|
||||
minSize: 350,
|
||||
maxSize: 500
|
||||
size: 220,
|
||||
minSize: 180,
|
||||
maxSize: 280
|
||||
};
|
||||
|
||||
const addressColumn: ColumnDef<LocalTarget> = {
|
||||
accessorKey: "address",
|
||||
header: () => <span className="p-3">{t("address")}</span>,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<ResourceTargetAddressItem
|
||||
isHttp={isHttp}
|
||||
proxyTarget={row.original}
|
||||
updateTarget={updateTarget}
|
||||
/>
|
||||
);
|
||||
},
|
||||
size: 350,
|
||||
minSize: 300,
|
||||
maxSize: 450
|
||||
};
|
||||
|
||||
const rewritePathColumn: ColumnDef<LocalTarget> = {
|
||||
@@ -567,6 +585,7 @@ export function ProxyResourceTargetsForm({
|
||||
|
||||
if (isAdvancedMode) {
|
||||
const cols = [
|
||||
siteColumn,
|
||||
addressColumn,
|
||||
healthCheckColumn,
|
||||
enabledColumn,
|
||||
@@ -575,12 +594,13 @@ export function ProxyResourceTargetsForm({
|
||||
|
||||
if (isHttp) {
|
||||
cols.unshift(matchPathColumn);
|
||||
cols.splice(3, 0, rewritePathColumn, priorityColumn);
|
||||
cols.splice(4, 0, rewritePathColumn, priorityColumn);
|
||||
}
|
||||
|
||||
return cols;
|
||||
} else {
|
||||
return [
|
||||
siteColumn,
|
||||
addressColumn,
|
||||
healthCheckColumn,
|
||||
enabledColumn,
|
||||
@@ -818,6 +838,10 @@ export function ProxyResourceTargetsForm({
|
||||
header.column
|
||||
.id ===
|
||||
"actions";
|
||||
const isSiteColumn =
|
||||
header.column
|
||||
.id ===
|
||||
"site";
|
||||
return (
|
||||
<TableHead
|
||||
key={
|
||||
@@ -826,7 +850,9 @@ export function ProxyResourceTargetsForm({
|
||||
className={
|
||||
isActionsColumn
|
||||
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
|
||||
: ""
|
||||
: isSiteColumn
|
||||
? "w-45"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
@@ -858,6 +884,10 @@ export function ProxyResourceTargetsForm({
|
||||
cell.column
|
||||
.id ===
|
||||
"actions";
|
||||
const isSiteColumn =
|
||||
cell.column
|
||||
.id ===
|
||||
"site";
|
||||
return (
|
||||
<TableCell
|
||||
key={
|
||||
@@ -866,7 +896,9 @@ export function ProxyResourceTargetsForm({
|
||||
className={
|
||||
isActionsColumn
|
||||
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
|
||||
: ""
|
||||
: isSiteColumn
|
||||
? "w-45"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
{flexRender(
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import { cn } from "@app/lib/cn";
|
||||
import type { DockerState } from "@app/lib/docker";
|
||||
import { parseHostTarget } from "@app/lib/parseHostTarget";
|
||||
import { orgQueries } from "@app/lib/queries";
|
||||
import { CaretSortIcon } from "@radix-ui/react-icons";
|
||||
import type { ListSitesResponse } from "@server/routers/site";
|
||||
import { type ListTargetsResponse } from "@server/routers/target";
|
||||
import type { ArrayElement } from "@server/types/ArrayElement";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { ContainersSelector } from "./ContainersSelector";
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
@@ -28,23 +25,21 @@ export type LocalTarget = Omit<
|
||||
"protocol"
|
||||
>;
|
||||
|
||||
export type ResourceTargetAddressItemProps = {
|
||||
export type ResourceTargetSiteItemProps = {
|
||||
getDockerStateForSite: (siteId: number) => DockerState;
|
||||
updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
|
||||
orgId: string;
|
||||
proxyTarget: LocalTarget;
|
||||
isHttp: boolean;
|
||||
refreshContainersForSite: (siteId: number) => void;
|
||||
};
|
||||
|
||||
export function ResourceTargetAddressItem({
|
||||
export function ResourceTargetSiteItem({
|
||||
orgId,
|
||||
getDockerStateForSite,
|
||||
updateTarget,
|
||||
proxyTarget,
|
||||
isHttp,
|
||||
refreshContainersForSite
|
||||
}: ResourceTargetAddressItemProps) {
|
||||
}: ResourceTargetSiteItemProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const [selectedSite, setSelectedSite] = useState<Pick<
|
||||
@@ -76,62 +71,78 @@ export function ResourceTargetAddressItem({
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex w-full min-w-0 items-center h-9 border border-input rounded-md"
|
||||
key={proxyTarget.targetId}
|
||||
>
|
||||
{selectedSite && selectedSite.type === "newt" && (
|
||||
<ContainersSelector
|
||||
site={selectedSite}
|
||||
containers={
|
||||
getDockerStateForSite(selectedSite.siteId).containers
|
||||
}
|
||||
isAvailable={
|
||||
getDockerStateForSite(selectedSite.siteId).isAvailable
|
||||
}
|
||||
onContainerSelect={handleContainerSelectForTarget}
|
||||
onRefresh={() =>
|
||||
refreshContainersForSite(selectedSite.siteId)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
"h-9 min-w-0 flex-1 justify-between px-3 rounded-none hover:bg-transparent",
|
||||
!proxyTarget.siteId && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{proxyTarget.siteId
|
||||
? selectedSite?.name
|
||||
: t("siteSelect")}
|
||||
</span>
|
||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0">
|
||||
<SitesSelector
|
||||
orgId={orgId}
|
||||
selectedSite={selectedSite}
|
||||
onSelectSite={(site) => {
|
||||
updateTarget(proxyTarget.targetId, {
|
||||
siteId: site.siteId,
|
||||
siteType: site.type,
|
||||
siteName: site.name
|
||||
});
|
||||
setSelectedSite(site);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type ResourceTargetAddressItemProps = {
|
||||
updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
|
||||
proxyTarget: LocalTarget;
|
||||
isHttp: boolean;
|
||||
};
|
||||
|
||||
export function ResourceTargetAddressItem({
|
||||
updateTarget,
|
||||
proxyTarget,
|
||||
isHttp
|
||||
}: ResourceTargetAddressItemProps) {
|
||||
return (
|
||||
<div className="flex items-center w-full" key={proxyTarget.targetId}>
|
||||
<div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input rounded-md">
|
||||
{selectedSite && selectedSite.type === "newt" && (
|
||||
<ContainersSelector
|
||||
site={selectedSite}
|
||||
containers={
|
||||
getDockerStateForSite(selectedSite.siteId)
|
||||
.containers
|
||||
}
|
||||
isAvailable={
|
||||
getDockerStateForSite(selectedSite.siteId)
|
||||
.isAvailable
|
||||
}
|
||||
onContainerSelect={handleContainerSelectForTarget}
|
||||
onRefresh={() =>
|
||||
refreshContainersForSite(selectedSite.siteId)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
"w-45 justify-between text-sm border-r pr-4 rounded-none h-8 hover:bg-transparent",
|
||||
"",
|
||||
!proxyTarget.siteId && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<span className="truncate max-w-37.5">
|
||||
{proxyTarget.siteId
|
||||
? selectedSite?.name
|
||||
: t("siteSelect")}
|
||||
</span>
|
||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0">
|
||||
<SitesSelector
|
||||
orgId={orgId}
|
||||
selectedSite={selectedSite}
|
||||
onSelectSite={(site) => {
|
||||
updateTarget(proxyTarget.targetId, {
|
||||
siteId: site.siteId,
|
||||
siteType: site.type,
|
||||
siteName: site.name
|
||||
});
|
||||
setSelectedSite(site);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{isHttp && (
|
||||
<Select
|
||||
defaultValue={proxyTarget.method ?? "http"}
|
||||
@@ -142,7 +153,7 @@ export function ResourceTargetAddressItem({
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8 px-2 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none">
|
||||
<SelectTrigger className="h-9 pl-2 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none mr-0 pr-0">
|
||||
{proxyTarget.method || "http"}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -154,7 +165,7 @@ export function ResourceTargetAddressItem({
|
||||
)}
|
||||
|
||||
{isHttp && (
|
||||
<div className="flex items-center justify-center px-2 h-9">
|
||||
<div className="flex items-center justify-center h-9 mr-0 pl-1">
|
||||
{"://"}
|
||||
</div>
|
||||
)}
|
||||
@@ -195,7 +206,7 @@ export function ResourceTargetAddressItem({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center justify-center px-2 h-9">
|
||||
<div className="flex items-center justify-center h-9 mr-0">
|
||||
{":"}
|
||||
</div>
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user