mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-30 12:42:22 +00:00
remove domain picker modal
This commit is contained in:
miloschwartz
@@ -13,16 +13,6 @@ import {
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { useResourceContext } from "@app/hooks/useResourceContext";
|
import { useResourceContext } from "@app/hooks/useResourceContext";
|
||||||
import {
|
|
||||||
Credenza,
|
|
||||||
CredenzaBody,
|
|
||||||
CredenzaClose,
|
|
||||||
CredenzaContent,
|
|
||||||
CredenzaDescription,
|
|
||||||
CredenzaFooter,
|
|
||||||
CredenzaHeader,
|
|
||||||
CredenzaTitle
|
|
||||||
} from "@app/components/Credenza";
|
|
||||||
import DomainPicker from "@app/components/DomainPicker";
|
import DomainPicker from "@app/components/DomainPicker";
|
||||||
import {
|
import {
|
||||||
SettingsContainer,
|
SettingsContainer,
|
||||||
@@ -39,10 +29,9 @@ import { Label } from "@app/components/ui/label";
|
|||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import { toast } from "@app/hooks/useToast";
|
import { toast } from "@app/hooks/useToast";
|
||||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||||
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
|
|
||||||
import { UpdateResourceResponse } from "@server/routers/resource";
|
import { UpdateResourceResponse } from "@server/routers/resource";
|
||||||
import { AxiosResponse } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
import { AlertCircle, Globe } from "lucide-react";
|
import { AlertCircle } from "lucide-react";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { useParams, useRouter } from "next/navigation";
|
import { useParams, useRouter } from "next/navigation";
|
||||||
import { toASCII, toUnicode } from "punycode";
|
import { toASCII, toUnicode } from "punycode";
|
||||||
@@ -442,7 +431,6 @@ export default function GeneralForm() {
|
|||||||
const { resource, updateResource } = useResourceContext();
|
const { resource, updateResource } = useResourceContext();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
const [editDomainOpen, setEditDomainOpen] = useState(false);
|
|
||||||
|
|
||||||
const { env } = useEnvContext();
|
const { env } = useEnvContext();
|
||||||
|
|
||||||
@@ -455,24 +443,13 @@ export default function GeneralForm() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const resourceFullDomainName = useMemo(() => {
|
const resourceFullDomainName = useMemo(() => {
|
||||||
if (!resource.fullDomain) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
const url = new URL(resourceFullDomain);
|
const url = new URL(resourceFullDomain);
|
||||||
return url.hostname;
|
return url.hostname;
|
||||||
} catch {
|
} catch {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
}, [resourceFullDomain, resource.fullDomain]);
|
}, [resourceFullDomain]);
|
||||||
|
|
||||||
const [selectedDomain, setSelectedDomain] = useState<{
|
|
||||||
domainId: string;
|
|
||||||
domainNamespaceId?: string;
|
|
||||||
subdomain?: string;
|
|
||||||
fullDomain: string;
|
|
||||||
baseDomain: string;
|
|
||||||
} | null>(null);
|
|
||||||
|
|
||||||
const GeneralFormSchema = z
|
const GeneralFormSchema = z
|
||||||
.object({
|
.object({
|
||||||
@@ -604,37 +581,6 @@ export default function GeneralForm() {
|
|||||||
className="space-y-4"
|
className="space-y-4"
|
||||||
id="general-settings-form"
|
id="general-settings-form"
|
||||||
>
|
>
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="enabled"
|
|
||||||
render={() => (
|
|
||||||
<FormItem className="col-span-2">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<FormControl>
|
|
||||||
<SwitchInput
|
|
||||||
id="enable-resource"
|
|
||||||
defaultChecked={
|
|
||||||
resource.enabled
|
|
||||||
}
|
|
||||||
label={t(
|
|
||||||
"resourceEnable"
|
|
||||||
)}
|
|
||||||
onCheckedChange={(
|
|
||||||
val
|
|
||||||
) =>
|
|
||||||
form.setValue(
|
|
||||||
"enabled",
|
|
||||||
val
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
</div>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="name"
|
name="name"
|
||||||
@@ -723,26 +669,89 @@ export default function GeneralForm() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{resource.http && (
|
{resource.http && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-4">
|
||||||
<Label>{t("resourceDomain")}</Label>
|
<div id="resource-domain-picker">
|
||||||
<div className="border p-2 rounded-md flex items-center justify-between">
|
<DomainPicker
|
||||||
<span className="text-sm flex items-center gap-2">
|
key={resource.resourceId}
|
||||||
<Globe size="14" />
|
orgId={orgId as string}
|
||||||
{resourceFullDomain}
|
cols={2}
|
||||||
</span>
|
defaultSubdomain={
|
||||||
<Button
|
form.watch(
|
||||||
variant="secondary"
|
"subdomain"
|
||||||
type="button"
|
) ?? undefined
|
||||||
size="sm"
|
|
||||||
onClick={() =>
|
|
||||||
setEditDomainOpen(true)
|
|
||||||
}
|
}
|
||||||
>
|
defaultDomainId={
|
||||||
{t("resourceEditDomain")}
|
form.watch(
|
||||||
</Button>
|
"domainId"
|
||||||
|
) ?? undefined
|
||||||
|
}
|
||||||
|
defaultFullDomain={
|
||||||
|
resourceFullDomainName ||
|
||||||
|
undefined
|
||||||
|
}
|
||||||
|
onDomainChange={(res) => {
|
||||||
|
if (res === null) {
|
||||||
|
form.setValue(
|
||||||
|
"domainId",
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"subdomain",
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
setResourceFullDomain(
|
||||||
|
`${resource.ssl ? "https" : "http"}://`
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
form.setValue(
|
||||||
|
"domainId",
|
||||||
|
res.domainId
|
||||||
|
);
|
||||||
|
form.setValue(
|
||||||
|
"subdomain",
|
||||||
|
res.subdomain ??
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
setResourceFullDomain(
|
||||||
|
`${resource.ssl ? "https" : "http"}://${toUnicode(res.fullDomain)}`
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="enabled"
|
||||||
|
render={() => (
|
||||||
|
<FormItem className="col-span-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<FormControl>
|
||||||
|
<SwitchInput
|
||||||
|
id="enable-resource"
|
||||||
|
defaultChecked={
|
||||||
|
resource.enabled
|
||||||
|
}
|
||||||
|
label={t(
|
||||||
|
"resourceEnable"
|
||||||
|
)}
|
||||||
|
onCheckedChange={(
|
||||||
|
val
|
||||||
|
) =>
|
||||||
|
form.setValue(
|
||||||
|
"enabled",
|
||||||
|
val
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
</SettingsSectionForm>
|
</SettingsSectionForm>
|
||||||
@@ -767,86 +776,6 @@ export default function GeneralForm() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
|
|
||||||
<Credenza
|
|
||||||
open={editDomainOpen}
|
|
||||||
onOpenChange={(setOpen) => setEditDomainOpen(setOpen)}
|
|
||||||
>
|
|
||||||
<CredenzaContent>
|
|
||||||
<CredenzaHeader>
|
|
||||||
<CredenzaTitle>Edit Domain</CredenzaTitle>
|
|
||||||
<CredenzaDescription>
|
|
||||||
Select a domain for your resource
|
|
||||||
</CredenzaDescription>
|
|
||||||
</CredenzaHeader>
|
|
||||||
<CredenzaBody>
|
|
||||||
<DomainPicker
|
|
||||||
orgId={orgId as string}
|
|
||||||
cols={1}
|
|
||||||
defaultSubdomain={
|
|
||||||
form.watch("subdomain") ?? resource.subdomain
|
|
||||||
}
|
|
||||||
defaultDomainId={
|
|
||||||
form.watch("domainId") ?? resource.domainId
|
|
||||||
}
|
|
||||||
defaultFullDomain={resourceFullDomainName}
|
|
||||||
onDomainChange={(res) => {
|
|
||||||
const selected =
|
|
||||||
res === null
|
|
||||||
? null
|
|
||||||
: {
|
|
||||||
domainId: res.domainId,
|
|
||||||
subdomain: res.subdomain,
|
|
||||||
fullDomain: res.fullDomain,
|
|
||||||
baseDomain: res.baseDomain,
|
|
||||||
domainNamespaceId:
|
|
||||||
res.domainNamespaceId
|
|
||||||
};
|
|
||||||
|
|
||||||
setSelectedDomain(selected);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CredenzaBody>
|
|
||||||
<CredenzaFooter>
|
|
||||||
<CredenzaClose asChild>
|
|
||||||
<Button variant="outline">{t("cancel")}</Button>
|
|
||||||
</CredenzaClose>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
if (selectedDomain) {
|
|
||||||
const sanitizedSubdomain =
|
|
||||||
selectedDomain.subdomain
|
|
||||||
? finalizeSubdomainSanitize(
|
|
||||||
selectedDomain.subdomain
|
|
||||||
)
|
|
||||||
: "";
|
|
||||||
|
|
||||||
const sanitizedFullDomain =
|
|
||||||
sanitizedSubdomain
|
|
||||||
? `${sanitizedSubdomain}.${selectedDomain.baseDomain}`
|
|
||||||
: selectedDomain.baseDomain;
|
|
||||||
|
|
||||||
setResourceFullDomain(
|
|
||||||
`${resource.ssl ? "https" : "http"}://${sanitizedFullDomain}`
|
|
||||||
);
|
|
||||||
form.setValue(
|
|
||||||
"domainId",
|
|
||||||
selectedDomain.domainId
|
|
||||||
);
|
|
||||||
form.setValue(
|
|
||||||
"subdomain",
|
|
||||||
sanitizedSubdomain
|
|
||||||
);
|
|
||||||
|
|
||||||
setEditDomainOpen(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Select Domain
|
|
||||||
</Button>
|
|
||||||
</CredenzaFooter>
|
|
||||||
</CredenzaContent>
|
|
||||||
</Credenza>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user