rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup UI

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2025-10-02 00:11:29 +02:00
parent b7fdfb965f
commit 064aa87ea5
11 changed files with 1094 additions and 1094 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
apps/console/src/components/customDomains/CreateCustomDomainDialog.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { useTranslate } from "@probo/i18n";
import { graphql } from "react-relay";
import {
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
useDialogRef,
Breadcrumb,
} from "@probo/ui";
import { z } from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import type { ReactNode } from "react";
import type { CreateCustomDomainDialogMutation } from "./__generated__/CreateCustomDomainDialogMutation.graphql";
const createCustomDomainMutation = graphql`
mutation CreateCustomDomainDialogMutation($input: CreateCustomDomainInput!) {
createCustomDomain(input: $input) {
customDomain {
id
domain
sslStatus
dnsRecords {
type
name
value
ttl
purpose
}
createdAt
updatedAt
verifiedAt
sslExpiresAt
}
}
}
`;
const schema = z.object({
domain: z
.string()
.min(1, "Domain is required")
.regex(
/^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i,
"Please enter a valid domain (e.g., compliance.example.com)"
),
});
type FormData = z.infer<typeof schema>;
interface CreateCustomDomainDialogProps {
children: ReactNode;
organizationId: string;
}
export function CreateCustomDomainDialog({
children,
organizationId,
}: CreateCustomDomainDialogProps) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const { register, handleSubmit, formState, reset } = useFormWithSchema(
schema,
{
defaultValues: {
domain: "",
},
}
);
const [createCustomDomain, isCreating] =
useMutationWithToasts<CreateCustomDomainDialogMutation>(
createCustomDomainMutation,
{
successMessage: __(
"Domain added successfully. Configure the DNS records to verify and activate your domain."
),
errorMessage: __("Failed to add domain"),
}
);
const onSubmit = handleSubmit(async (data: FormData) => {
const normalizedDomain = data.domain
.trim()
.toLowerCase()
.replace(/^https?:\/\//, "")
.replace(/\/$/, "");
await createCustomDomain({
variables: {
input: {
organizationId,
domain: normalizedDomain,
},
},
updater: (store, data) => {
// Update the cache by setting the new customDomain on the organization
const organizationRecord = store.get(organizationId);
if (organizationRecord && data?.createCustomDomain?.customDomain) {
const customDomainRecord = store.get(
data.createCustomDomain.customDomain.id
);
if (customDomainRecord) {
organizationRecord.setLinkedRecord(
customDomainRecord,
"customDomain"
);
}
}
},
onSuccess: () => {
reset();
dialogRef.current?.close();
},
});
});
return (
<Dialog
ref={dialogRef}
trigger={children}
title={<Breadcrumb items={[__("Custom Domain"), __("Add Domain")]} />}
>
<form onSubmit={onSubmit}>
<DialogContent padded className="space-y-4">
<div>
<p className="text-sm text-txt-secondary mb-4">
{__(
"Enter your domain and we'll generate the DNS records you need to add"
)}
</p>
</div>
<Field
{...register("domain")}
label={__("Domain")}
type="text"
placeholder="compliance.example.com"
error={formState.errors.domain?.message}
autoFocus
/>
<div className="bg-subtle rounded-lg p-4">
<p className="text-xs text-txt-secondary">
<strong>{__("Examples:")}</strong> compliance.example.com,
trust.example.com
</p>
</div>
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={isCreating || !formState.isValid}>
{isCreating ? __("Adding...") : __("Add Domain")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

564
apps/console/src/components/customDomains/CustomDomainManager.tsx
View File

@@ -1,78 +1,11 @@
import { useState } from "react";
import { useTranslate } from "@probo/i18n";
import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import {
Button,
Card,
Badge,
Field,
Dialog,
DialogContent,
DialogFooter,
useDialogRef,
useToast,
} from "@probo/ui";
import type { CustomDomainManagerQuery } from "./__generated__/CustomDomainManagerQuery.graphql";
import type { CustomDomainManagerCreateMutation } from "./__generated__/CustomDomainManagerCreateMutation.graphql";
import { Button, Card, Badge, IconPlusLarge } from "@probo/ui";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import { graphql } from "relay-runtime";
import type { CustomDomainManagerDeleteMutation } from "./__generated__/CustomDomainManagerDeleteMutation.graphql";
const customDomainsQuery = graphql`
query CustomDomainManagerQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
... on Organization {
id
customDomains(first: 100) {
edges {
node {
id
domain
sslStatus
isActive
dnsRecords {
type
name
value
ttl
purpose
}
createdAt
updatedAt
verifiedAt
sslExpiresAt
}
}
}
}
}
}
`;
const createCustomDomainMutation = graphql`
mutation CustomDomainManagerCreateMutation($input: CreateCustomDomainInput!) {
createCustomDomain(input: $input) {
customDomainEdge {
node {
id
domain
sslStatus
isActive
dnsRecords {
type
name
value
ttl
purpose
}
createdAt
updatedAt
verifiedAt
sslExpiresAt
}
}
}
}
`;
import { CreateCustomDomainDialog } from "./CreateCustomDomainDialog";
import { DeleteCustomDomainDialog } from "./DeleteCustomDomainDialog";
import { DomainDetailsDialog } from "./DomainDetailsDialog";
const deleteCustomDomainMutation = graphql`
mutation CustomDomainManagerDeleteMutation($input: DeleteCustomDomainInput!) {
@@ -82,280 +15,56 @@ const deleteCustomDomainMutation = graphql`
}
`;
function DomainDetailsDialog({
domain,
children,
onDelete,
isDeletingDomain,
}: {
domain: any;
children: React.ReactNode;
onDelete: (domainId: string, domainName: string) => void;
isDeletingDomain: boolean;
}) {
const { __ } = useTranslate();
const { toast } = useToast();
const dialogRef = useDialogRef();
const getStatusBadge = (domain: any) => {
if (domain.sslStatus === "ACTIVE") {
return <Badge variant="success">{__("Active")}</Badge>;
}
if (domain.sslStatus === "PROVISIONING" || domain.sslStatus === "RENEWING") {
return <Badge variant="warning">{__("Provisioning")}</Badge>;
}
if (domain.sslStatus === "PENDING") {
return <Badge variant="warning">{__("Pending")}</Badge>;
}
if (domain.sslStatus === "FAILED") {
return <Badge variant="danger">{__("Failed")}</Badge>;
}
if (domain.sslStatus === "EXPIRED") {
return <Badge variant="danger">{__("Expired")}</Badge>;
}
return <Badge variant="neutral">{__("Unknown")}</Badge>;
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
toast({
title: __("Copied"),
description: __("Value copied to clipboard"),
variant: "success",
});
};
return (
<Dialog
ref={dialogRef}
trigger={children}
title={
<div className="flex items-center gap-3">
<span>{domain.domain}</span>
{getStatusBadge(domain)}
</div>
interface CustomDomainManagerProps {
organizationId: string;
customDomain:
| {
readonly id: string;
readonly domain: string;
readonly sslStatus: string;
readonly dnsRecords?:
| readonly {
readonly type: string;
readonly name: string;
readonly value: string;
readonly ttl?: number;
readonly purpose: string;
}[]
| null;
readonly createdAt?: string | null;
readonly updatedAt?: string | null;
readonly verifiedAt?: string | null;
readonly sslExpiresAt?: string | null;
}
>
<DialogContent padded className="space-y-6">
{domain.verifiedAt && (
<p className="text-sm text-txt-secondary">
{__("Verified")} {new Date(domain.verifiedAt).toLocaleDateString()}
</p>
)}
{domain.sslStatus === "ACTIVE" ? (
<div className="bg-level-2 rounded-lg p-4">
<div className="flex items-start">
<svg
className="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<p className="font-medium mb-1">{__("Domain is active")}</p>
<p className="text-sm text-txt-secondary">
{__("Your custom domain is verified and SSL certificate is active")}
</p>
{domain.sslExpiresAt && (
<p className="text-xs text-txt-tertiary mt-2">
{__("SSL expires")} {new Date(domain.sslExpiresAt).toLocaleDateString()}
</p>
)}
</div>
</div>
</div>
) : (
<div>
<h4 className="font-medium mb-3">{__("DNS Configuration")}</h4>
<p className="text-sm text-txt-secondary mb-4">
{__("Add these DNS records to your domain to complete verification")}
</p>
<div className="space-y-3">
{domain.dnsRecords?.map((record: any, index: number) => (
<div key={index} className="bg-level-2 rounded-lg p-4">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">{record.type}</span>
<Badge variant="neutral">{record.purpose}</Badge>
</div>
<div className="space-y-2">
<div>
<label className="text-xs text-txt-tertiary">{__("Name")}</label>
<div className="flex items-center gap-2 mt-1">
<code className="flex-1 text-sm bg-level-3 px-2 py-1 rounded">
{record.name}
</code>
<Button
variant="secondary"
onClick={() => copyToClipboard(record.name)}
>
{__("Copy")}
</Button>
</div>
</div>
<div>
<label className="text-xs text-txt-tertiary">{__("Value")}</label>
<div className="flex items-center gap-2 mt-1">
<code className="flex-1 text-sm bg-level-3 px-2 py-1 rounded break-all">
{record.value}
</code>
<Button
variant="secondary"
onClick={() => copyToClipboard(record.value)}
>
{__("Copy")}
</Button>
</div>
</div>
{record.ttl && (
<div className="text-xs text-txt-tertiary">
TTL: {record.ttl}
</div>
)}
</div>
</div>
))}
</div>
{domain.sslStatus === "PENDING" && (
<div className="bg-level-2 rounded-lg p-4 mt-4">
<p className="text-sm">
{__("After adding the DNS records, verification will happen automatically. This may take a few minutes to propagate.")}
</p>
</div>
)}
</div>
)}
<div className="pt-4 border-t border-border">
<Button
variant="danger"
onClick={() => {
dialogRef.current?.close();
onDelete(domain.id, domain.domain);
}}
disabled={isDeletingDomain}
>
{__("Delete Domain")}
</Button>
</div>
</DialogContent>
</Dialog>
);
| null
| undefined;
}
export function CustomDomainManager() {
export function CustomDomainManager({
organizationId,
customDomain,
}: CustomDomainManagerProps) {
const { __ } = useTranslate();
const { toast } = useToast();
const organizationId = useOrganizationId();
const dialogRef = useDialogRef();
const data = useLazyLoadQuery<CustomDomainManagerQuery>(
customDomainsQuery,
{ organizationId },
{ fetchPolicy: "network-only" }
);
const [deleteCustomDomain] =
useMutationWithToasts<CustomDomainManagerDeleteMutation>(
deleteCustomDomainMutation,
{
successMessage: __("Domain deleted successfully"),
errorMessage: __("Failed to delete domain"),
}
);
const [createCustomDomain, isCreatingDomain] =
useMutation<CustomDomainManagerCreateMutation>(createCustomDomainMutation);
const [deleteCustomDomain, isDeletingDomain] =
useMutation<CustomDomainManagerDeleteMutation>(deleteCustomDomainMutation);
const [newDomain, setNewDomain] = useState("");
const domains =
data.organization?.customDomains?.edges?.map((edge) => edge.node) || [];
const validateDomain = (domainInput: string): boolean => {
const domainRegex =
/^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/i;
return domainRegex.test(domainInput);
};
const handleAddDomain = () => {
const trimmedDomain = newDomain
.trim()
.toLowerCase()
.replace(/^https?:\/\//, "")
.replace(/\/$/, "");
if (!validateDomain(trimmedDomain)) {
toast({
title: __("Invalid Domain"),
description: __(
"Please enter a valid domain (e.g., compliance.example.com)"
),
variant: "error",
});
return;
}
createCustomDomain({
variables: {
input: {
organizationId,
domain: trimmedDomain,
},
},
onCompleted: () => {
setNewDomain("");
dialogRef.current?.close();
toast({
title: __("Domain Added Successfully"),
description: __(
"Configure the DNS records below to verify and activate your domain"
),
variant: "success",
});
},
onError: (error) => {
toast({
title: __("Failed to Add Domain"),
description: error.message,
variant: "error",
});
},
});
};
const handleDeleteDomain = (domainId: string, domainName: string) => {
if (!confirm(`${__("Are you sure you want to delete")} ${domainName}?`)) {
return;
}
deleteCustomDomain({
variables: {
input: { domainId },
},
onCompleted: () => {
toast({
title: __("Domain Deleted"),
description: __("The domain has been removed"),
variant: "success",
});
},
onError: (error) => {
toast({
title: __("Failed to Delete Domain"),
description: error.message,
variant: "error",
});
},
});
};
const domain = customDomain;
const getStatusBadge = (domain: any) => {
if (domain.sslStatus === "ACTIVE") {
return <Badge variant="success">{__("Active")}</Badge>;
}
if (domain.sslStatus === "PROVISIONING" || domain.sslStatus === "RENEWING") {
if (
domain.sslStatus === "PROVISIONING" ||
domain.sslStatus === "RENEWING"
) {
return <Badge variant="warning">{__("Provisioning")}</Badge>;
}
if (domain.sslStatus === "PENDING") {
@@ -370,132 +79,73 @@ export function CustomDomainManager() {
return <Badge variant="neutral">{__("Unknown")}</Badge>;
};
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-semibold">{__("Custom Domains")}</h2>
<p className="text-sm text-txt-secondary mt-1">
{__("Use your own domain for your trust center")}
const handleDeleteDomain = async () => {
return deleteCustomDomain({
variables: {
input: { organizationId },
},
updater: (store) => {
// Update the cache by setting customDomain to null
const organizationRecord = store.get(organizationId);
if (organizationRecord) {
organizationRecord.setValue(null, "customDomain");
}
},
});
};
if (!domain) {
return (
<Card padded>
<div className="text-center py-8">
<h3 className="text-lg font-semibold mb-2">
{__("No custom domain configured")}
</h3>
<p className="text-txt-tertiary mb-4">
{__(
"Add your own domain to make your trust center more professional"
)}
</p>
<div className="flex justify-center">
<CreateCustomDomainDialog organizationId={organizationId}>
<Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
</CreateCustomDomainDialog>
</div>
</div>
<Button onClick={() => dialogRef.current?.open()}>
{__("Add Domain")}
</Button>
</div>
</Card>
);
}
{domains.length === 0 ? (
<Card padded>
<div className="text-center py-12">
<div className="inline-flex items-center justify-center w-16 h-16 bg-level-2 rounded-full mb-4">
<svg
className="w-8 h-8 text-txt-tertiary"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
</div>
<h3 className="text-lg font-medium mb-2">
{__("No custom domains yet")}
</h3>
<p className="text-sm text-txt-secondary mb-6">
{__(
"Add your own domain to make your trust center more professional"
)}
</p>
<Button onClick={() => dialogRef.current?.open()}>
{__("Add Your First Domain")}
</Button>
</div>
</Card>
) : (
<Card>
<div className="divide-y divide-border">
{domains.map((domain: any) => (
<DomainDetailsDialog
key={domain.id}
domain={domain}
onDelete={handleDeleteDomain}
isDeletingDomain={isDeletingDomain}
>
<div className="p-4 cursor-pointer hover:bg-level-1 transition-colors">
<div className="flex items-center justify-between">
<div>
<div className="font-medium mb-1">{domain.domain}</div>
{getStatusBadge(domain)}
</div>
<svg
className="w-5 h-5 text-txt-tertiary"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
</DomainDetailsDialog>
))}
</div>
</Card>
)}
<Dialog
ref={dialogRef}
onClose={() => {
setNewDomain("");
}}
>
<DialogContent className="max-w-md" padded>
<div className="space-y-4">
return (
<Card>
<div className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div>
<h3 className="text-lg font-semibold mb-2">
{__("Add Custom Domain")}
</h3>
<p className="text-sm text-txt-secondary">
{__(
"Enter your domain and we'll generate the DNS records you need to add"
)}
</p>
</div>
<Field
label={__("Domain")}
name="domain"
value={newDomain}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setNewDomain(e.target.value)
}
placeholder="compliance.example.com"
help={__("Enter without http:// or https://")}
autoFocus
/>
<div className="bg-level-2 rounded-lg p-3">
<p className="text-xs text-txt-secondary">
<strong>{__("Examples:")}</strong> compliance.example.com,
trust.example.com
</p>
<div className="font-medium mb-1">{domain.domain}</div>
<div className="text-sm text-txt-secondary">
{domain.verifiedAt
? `${__("Verified")} ${new Date(domain.verifiedAt).toLocaleDateString()}`
: __("Pending verification")}
</div>
</div>
{getStatusBadge(domain)}
</div>
</DialogContent>
<DialogFooter>
<Button
onClick={handleAddDomain}
disabled={isCreatingDomain || !newDomain.trim()}
>
{isCreatingDomain ? __("Adding...") : __("Add Domain")}
</Button>
</DialogFooter>
</Dialog>
</div>
<div className="flex items-center gap-2">
<DomainDetailsDialog domain={domain}>
<Button variant="secondary">{__("View Details")}</Button>
</DomainDetailsDialog>
<DeleteCustomDomainDialog
domainName={domain.domain}
onConfirm={handleDeleteDomain}
>
<Button variant="danger">{__("Delete")}</Button>
</DeleteCustomDomainDialog>
</div>
</div>
</div>
</Card>
);
}

97
apps/console/src/components/customDomains/DeleteCustomDomainDialog.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
DialogContent,
DialogFooter,
Field,
useDialogRef,
IconTrashCan,
} from "@probo/ui";
import { useState, useEffect, type ReactNode } from "react";
import { sprintf } from "@probo/helpers";
interface DeleteCustomDomainDialogProps {
children: ReactNode;
domainName: string;
onConfirm: () => Promise<void>;
}
export function DeleteCustomDomainDialog({
children,
domainName,
onConfirm,
}: DeleteCustomDomainDialogProps) {
const { __ } = useTranslate();
const [inputValue, setInputValue] = useState("");
const [isDeleting, setIsDeleting] = useState(false);
const dialogRef = useDialogRef();
const isConfirmDisabled = inputValue !== domainName || isDeleting;
const handleConfirm = async () => {
if (inputValue === domainName && !isDeleting) {
setIsDeleting(true);
try {
await onConfirm();
dialogRef.current?.close();
} finally {
setIsDeleting(false);
}
}
};
useEffect(() => {
if (!isDeleting) {
setInputValue("");
}
}, [isDeleting]);
return (
<Dialog
className="max-w-lg"
ref={dialogRef}
trigger={children}
title={__("Delete Custom Domain")}
>
<DialogContent padded className="space-y-4">
<p className="text-txt-secondary text-sm">
{sprintf(
__(
"This will permanently delete the custom domain %s and all its configuration."
),
domainName
)}
</p>
<p className="text-red-600 text-sm font-medium">
{__("This action cannot be undone.")}
</p>
<Field
label={sprintf(
__('To confirm deletion, type "%s" below:'),
domainName
)}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder={domainName}
disabled={isDeleting}
autoComplete="off"
autoFocus
/>
</DialogContent>
<DialogFooter>
<Button
variant="danger"
icon={IconTrashCan}
onClick={handleConfirm}
disabled={isConfirmDisabled}
>
{isDeleting ? __("Deleting...") : __("Delete Domain")}
</Button>
</DialogFooter>
</Dialog>
);
}

192
apps/console/src/components/customDomains/DomainDetailsDialog.tsx Normal file
View File

@@ -0,0 +1,192 @@
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
DialogContent,
Badge,
useDialogRef,
useToast,
} from "@probo/ui";
import type { ReactNode } from "react";
interface DomainDetailsDialogProps {
children: ReactNode;
domain: {
readonly id: string;
readonly domain: string;
readonly sslStatus: string;
readonly dnsRecords?:
| readonly {
readonly type: string;
readonly name: string;
readonly value: string;
readonly ttl?: number;
readonly purpose: string;
}[]
| null;
readonly verifiedAt?: string | null;
readonly sslExpiresAt?: string | null;
};
}
export function DomainDetailsDialog({
children,
domain,
}: DomainDetailsDialogProps) {
const { __ } = useTranslate();
const { toast } = useToast();
const dialogRef = useDialogRef();
const getStatusBadge = (domain: DomainDetailsDialogProps["domain"]) => {
if (domain.sslStatus === "ACTIVE") {
return <Badge variant="success">{__("Active")}</Badge>;
}
if (
domain.sslStatus === "PROVISIONING" ||
domain.sslStatus === "RENEWING"
) {
return <Badge variant="warning">{__("Provisioning")}</Badge>;
}
if (domain.sslStatus === "PENDING") {
return <Badge variant="warning">{__("Pending")}</Badge>;
}
if (domain.sslStatus === "FAILED") {
return <Badge variant="danger">{__("Failed")}</Badge>;
}
if (domain.sslStatus === "EXPIRED") {
return <Badge variant="danger">{__("Expired")}</Badge>;
}
return <Badge variant="neutral">{__("Unknown")}</Badge>;
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
toast({
title: __("Copied"),
description: __("Value copied to clipboard"),
variant: "success",
});
};
return (
<Dialog
ref={dialogRef}
trigger={children}
title={
<div className="flex items-center gap-3">
<span>{domain.domain}</span>
{getStatusBadge(domain)}
</div>
}
>
<DialogContent padded className="space-y-6">
{domain.verifiedAt && (
<p className="text-sm text-txt-secondary">
{__("Verified")} {new Date(domain.verifiedAt).toLocaleDateString()}
</p>
)}
{domain.sslStatus === "ACTIVE" ? (
<div className="bg-subtle rounded-lg p-4">
<div className="flex items-start">
<svg
className="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<p className="font-medium mb-1">{__("Domain is active")}</p>
<p className="text-sm text-txt-secondary">
{__(
"Your custom domain is verified and SSL certificate is active"
)}
</p>
{domain.sslExpiresAt && (
<p className="text-xs text-txt-tertiary mt-2">
{__("SSL expires")}{" "}
{new Date(domain.sslExpiresAt).toLocaleDateString()}
</p>
)}
</div>
</div>
</div>
) : (
<div>
<h4 className="font-medium mb-3">{__("DNS Configuration")}</h4>
<p className="text-sm text-txt-secondary mb-4">
{__(
"Add these DNS records to your domain to complete verification"
)}
</p>
<div className="space-y-3">
{domain.dnsRecords?.map((record, index) => (
<div key={index} className="bg-subtle rounded-lg p-4">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">{record.type}</span>
<Badge variant="neutral">{record.purpose}</Badge>
</div>
<div className="space-y-2">
<div>
<label className="text-xs text-txt-tertiary">
{__("Name")}
</label>
<div className="flex items-center gap-2 mt-1">
<code className="flex-1 text-sm bg-subtle px-2 py-1 rounded">
{record.name}
</code>
<Button
variant="secondary"
onClick={() => copyToClipboard(record.name)}
>
{__("Copy")}
</Button>
</div>
</div>
<div>
<label className="text-xs text-txt-tertiary">
{__("Value")}
</label>
<div className="flex items-center gap-2 mt-1">
<code className="flex-1 text-sm bg-subtle px-2 py-1 rounded break-all">
{record.value}
</code>
<Button
variant="secondary"
onClick={() => copyToClipboard(record.value)}
>
{__("Copy")}
</Button>
</div>
</div>
{record.ttl && (
<div className="text-xs text-txt-tertiary">
TTL: {record.ttl}
</div>
)}
</div>
</div>
))}
</div>
{domain.sslStatus === "PENDING" && (
<div className="bg-subtle rounded-lg p-4 mt-4">
<p className="text-sm">
{__(
"After adding the DNS records, verification will happen automatically. This may take a few minutes to propagate."
)}
</p>
</div>
)}
</div>
)}
</DialogContent>
</Dialog>
);
}

208
apps/console/src/components/customDomains/__generated__/CreateCustomDomainDialogMutation.graphql.ts generated Normal file
View File

@@ -0,0 +1,208 @@
/**
* @generated SignedSource<<b8a660825f6c3e3413e6505179ae3e1e>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
export type CreateCustomDomainInput = {
domain: string;
organizationId: string;
};
export type CreateCustomDomainDialogMutation$variables = {
input: CreateCustomDomainInput;
};
export type CreateCustomDomainDialogMutation$data = {
readonly createCustomDomain: {
readonly customDomain: {
readonly createdAt: any;
readonly dnsRecords: ReadonlyArray<{
readonly name: string;
readonly purpose: string;
readonly ttl: number;
readonly type: string;
readonly value: string;
}>;
readonly domain: string;
readonly id: string;
readonly sslExpiresAt: any | null | undefined;
readonly sslStatus: SSLStatus;
readonly updatedAt: any;
readonly verifiedAt: any | null | undefined;
};
};
};
export type CreateCustomDomainDialogMutation = {
response: CreateCustomDomainDialogMutation$data;
variables: CreateCustomDomainDialogMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "CreateCustomDomainPayload",
"kind": "LinkedField",
"name": "createCustomDomain",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "CustomDomain",
"kind": "LinkedField",
"name": "customDomain",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslStatus",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "DNSRecordInstruction",
"kind": "LinkedField",
"name": "dnsRecords",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "value",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "ttl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "verifiedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslExpiresAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "CreateCustomDomainDialogMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "CreateCustomDomainDialogMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "9a6fad6d53811f74048b3ff0b64e0afe",
"id": null,
"metadata": {},
"name": "CreateCustomDomainDialogMutation",
"operationKind": "mutation",
"text": "mutation CreateCustomDomainDialogMutation(\n $input: CreateCustomDomainInput!\n) {\n createCustomDomain(input: $input) {\n customDomain {\n id\n domain\n sslStatus\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n verifiedAt\n sslExpiresAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "312e66e894a78da19c28c7f03d03fe96";
export default node;

229
apps/console/src/components/customDomains/__generated__/CustomDomainManagerCreateMutation.graphql.ts generated
View File

@@ -1,229 +0,0 @@
/**
* @generated SignedSource<<e1683e44614d1b0224fc8592dd72eb9f>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
export type CreateCustomDomainInput = {
domain: string;
organizationId: string;
};
export type CustomDomainManagerCreateMutation$variables = {
input: CreateCustomDomainInput;
};
export type CustomDomainManagerCreateMutation$data = {
readonly createCustomDomain: {
readonly customDomainEdge: {
readonly node: {
readonly createdAt: any;
readonly dnsRecords: ReadonlyArray<{
readonly name: string;
readonly purpose: string;
readonly ttl: number;
readonly type: string;
readonly value: string;
}>;
readonly domain: string;
readonly id: string;
readonly isActive: boolean;
readonly sslExpiresAt: any | null | undefined;
readonly sslStatus: SSLStatus;
readonly updatedAt: any;
readonly verifiedAt: any | null | undefined;
};
};
};
};
export type CustomDomainManagerCreateMutation = {
response: CustomDomainManagerCreateMutation$data;
variables: CustomDomainManagerCreateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "CreateCustomDomainPayload",
"kind": "LinkedField",
"name": "createCustomDomain",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "CustomDomainEdge",
"kind": "LinkedField",
"name": "customDomainEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "CustomDomain",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslStatus",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "isActive",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "DNSRecordInstruction",
"kind": "LinkedField",
"name": "dnsRecords",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "value",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "ttl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "verifiedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslExpiresAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "CustomDomainManagerCreateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "CustomDomainManagerCreateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "f10f04ab871fe2b42cc29c5789dc103a",
"id": null,
"metadata": {},
"name": "CustomDomainManagerCreateMutation",
"operationKind": "mutation",
"text": "mutation CustomDomainManagerCreateMutation(\n $input: CreateCustomDomainInput!\n) {\n createCustomDomain(input: $input) {\n customDomainEdge {\n node {\n id\n domain\n sslStatus\n isActive\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n verifiedAt\n sslExpiresAt\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "f2c706c80df1d0a9fa2e7ea4faa75fb3";
export default node;

4
apps/console/src/components/customDomains/__generated__/CustomDomainManagerDeleteMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<869106a8eb759c253f8578a596b748a0>>
* @generated SignedSource<<b25e2b88094ba632cc451508af4df1e3>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,7 +10,7 @@
import { ConcreteRequest } from 'relay-runtime';
export type DeleteCustomDomainInput = {
domainId: string;
organizationId: string;
};
export type CustomDomainManagerDeleteMutation$variables = {
input: DeleteCustomDomainInput;

283
apps/console/src/components/customDomains/__generated__/CustomDomainManagerQuery.graphql.ts generated
View File

@@ -1,283 +0,0 @@
/**
* @generated SignedSource<<04bd8d8635434cd05ea80edbb804b56f>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
export type CustomDomainManagerQuery$variables = {
organizationId: string;
};
export type CustomDomainManagerQuery$data = {
readonly organization: {
readonly customDomains?: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly createdAt: any;
readonly dnsRecords: ReadonlyArray<{
readonly name: string;
readonly purpose: string;
readonly ttl: number;
readonly type: string;
readonly value: string;
}>;
readonly domain: string;
readonly id: string;
readonly isActive: boolean;
readonly sslExpiresAt: any | null | undefined;
readonly sslStatus: SSLStatus;
readonly updatedAt: any;
readonly verifiedAt: any | null | undefined;
};
}>;
};
readonly id?: string;
};
};
export type CustomDomainManagerQuery = {
response: CustomDomainManagerQuery$data;
variables: CustomDomainManagerQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
"concreteType": "CustomDomainConnection",
"kind": "LinkedField",
"name": "customDomains",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "CustomDomainEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "CustomDomain",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslStatus",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "isActive",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "DNSRecordInstruction",
"kind": "LinkedField",
"name": "dnsRecords",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "value",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "ttl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "verifiedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslExpiresAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "customDomains(first:100)"
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "CustomDomainManagerQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
(v3/*: any*/)
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "CustomDomainManagerQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v3/*: any*/)
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "c561676e49338e212721ed12e1069dd0",
"id": null,
"metadata": {},
"name": "CustomDomainManagerQuery",
"operationKind": "query",
"text": "query CustomDomainManagerQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n customDomains(first: 100) {\n edges {\n node {\n id\n domain\n sslStatus\n isActive\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n verifiedAt\n sslExpiresAt\n }\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "0aea6f600572fac571dbc0e1e6a3117c";
export default node;

123
apps/console/src/hooks/graph/__generated__/OrganizationGraph_ViewQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<148c6dc2b419fa0611529004e0a3535a>>
* @generated SignedSource<<7493102ba1f19bb7721e444d0e372629>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -61,20 +61,27 @@ v4 = {
"name": "email",
"storageKey": null
},
v5 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
v6 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
};
},
v7 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
@@ -168,7 +175,89 @@ return {
},
{
"alias": null,
"args": (v5/*: any*/),
"args": null,
"concreteType": "CustomDomain",
"kind": "LinkedField",
"name": "customDomain",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslStatus",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "DNSRecordInstruction",
"kind": "LinkedField",
"name": "dnsRecords",
"plural": true,
"selections": [
(v5/*: any*/),
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "value",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "ttl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"storageKey": null
}
],
"storageKey": null
},
(v6/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "verifiedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslExpiresAt",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": (v7/*: any*/),
"concreteType": "UserConnection",
"kind": "LinkedField",
"name": "users",
@@ -211,7 +300,7 @@ return {
},
{
"alias": null,
"args": (v5/*: any*/),
"args": (v7/*: any*/),
"concreteType": "ConnectorConnection",
"kind": "LinkedField",
"name": "connectors",
@@ -235,13 +324,7 @@ return {
"selections": [
(v2/*: any*/),
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
(v5/*: any*/),
(v6/*: any*/)
],
"storageKey": null
@@ -262,12 +345,12 @@ return {
]
},
"params": {
"cacheID": "c19271fc733cfb1de051ccdd98ae9bef",
"cacheID": "793d8f1eb4118deebe64f3025d3e8c31",
"id": null,
"metadata": {},
"name": "OrganizationGraph_ViewQuery",
"operationKind": "query",
"text": "query OrganizationGraph_ViewQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n ...SettingsPageFragment\n }\n id\n }\n}\n\nfragment SettingsPageFragment on Organization {\n id\n name\n logoUrl\n description\n websiteUrl\n email\n headquarterAddress\n users(first: 100) {\n edges {\n node {\n id\n fullName\n email\n createdAt\n }\n }\n }\n connectors(first: 100) {\n edges {\n node {\n id\n name\n type\n createdAt\n }\n }\n }\n}\n"
"text": "query OrganizationGraph_ViewQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n ...SettingsPageFragment\n }\n id\n }\n}\n\nfragment SettingsPageFragment on Organization {\n id\n name\n logoUrl\n description\n websiteUrl\n email\n headquarterAddress\n customDomain {\n id\n domain\n sslStatus\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n verifiedAt\n sslExpiresAt\n }\n users(first: 100) {\n edges {\n node {\n id\n fullName\n email\n createdAt\n }\n }\n }\n connectors(first: 100) {\n edges {\n node {\n id\n name\n type\n createdAt\n }\n }\n }\n}\n"
}
};
})();

189
apps/console/src/pages/organizations/SettingsPage.tsx
View File

@@ -62,6 +62,22 @@ const organizationFragment = graphql`
websiteUrl
email
headquarterAddress
customDomain {
id
domain
sslStatus
dnsRecords {
type
name
value
ttl
purpose
}
createdAt
updatedAt
verifiedAt
sslExpiresAt
}
users(first: 100) {
edges {
node {
@@ -117,8 +133,9 @@ export default function SettingsPage({ queryRef }: Props) {
const [deleteOrganization, isDeleting] = useDeleteOrganizationMutation();
const users = organization.users.edges.map((edge) => edge.node);
const { formState, handleSubmit, register, reset } =
useFormWithSchema(organizationSchema, {
const { formState, handleSubmit, register, reset } = useFormWithSchema(
organizationSchema,
{
defaultValues: {
name: organization.name || "",
description: organization.description || "",
@@ -126,7 +143,8 @@ export default function SettingsPage({ queryRef }: Props) {
email: organization.email || "",
headquarterAddress: organization.headquarterAddress || "",
},
});
}
);
useEffect(() => {
reset({
@@ -160,7 +178,9 @@ export default function SettingsPage({ queryRef }: Props) {
onCompleted() {
toast({
title: __("Organization updated"),
description: __("Your organization details have been updated successfully."),
description: __(
"Your organization details have been updated successfully."
),
variant: "success",
});
},
@@ -220,80 +240,81 @@ export default function SettingsPage({ queryRef }: Props) {
{formState.isSubmitting && <Spinner />}
</div>
<Card padded className="space-y-4">
<div>
<Label>{__("Organization logo")}</Label>
<div className="flex w-max items-center gap-4">
<Avatar
src={organization.logoUrl}
name={organization.name}
size="xl"
<div>
<Label>{__("Organization logo")}</Label>
<div className="flex w-max items-center gap-4">
<Avatar
src={organization.logoUrl}
name={organization.name}
size="xl"
/>
<FileButton
disabled={formState.isSubmitting}
onChange={updateOrganizationLogo}
variant="secondary"
className="ml-auto"
>
{__("Change logo")}
</FileButton>
</div>
</div>
<Field
{...register("name")}
readOnly={formState.isSubmitting}
name="name"
type="text"
label={__("Organization name")}
placeholder={__("Organization name")}
/>
<div>
<Label>{__("Description")}</Label>
<Textarea
{...register("description")}
readOnly={formState.isSubmitting}
name="description"
placeholder={__("Brief description of your organization")}
rows={3}
/>
<FileButton
disabled={formState.isSubmitting}
onChange={updateOrganizationLogo}
variant="secondary"
className="ml-auto"
>
{__("Change logo")}
</FileButton>
</div>
</div>
<Field
{...register("name")}
readOnly={formState.isSubmitting}
name="name"
type="text"
label={__("Organization name")}
placeholder={__("Organization name")}
/>
<div>
<Label>{__("Description")}</Label>
<Textarea
{...register("description")}
readOnly={formState.isSubmitting}
name="description"
placeholder={__("Brief description of your organization")}
rows={3}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
{...register("websiteUrl")}
readOnly={formState.isSubmitting}
name="websiteUrl"
type="url"
label={__("Website URL")}
placeholder={__("https://example.com")}
/>
<Field
{...register("email")}
readOnly={formState.isSubmitting}
name="email"
type="email"
label={__("Email")}
placeholder={__("contact@example.com")}
/>
</div>
<div>
<Label>{__("Headquarter Address")}</Label>
<Textarea
{...register("headquarterAddress")}
readOnly={formState.isSubmitting}
name="headquarterAddress"
placeholder={__("123 Main St, City, Country")}
/>
</div>
{formState.isDirty && (
<div className="flex justify-end pt-6">
<Button type="submit" disabled={formState.isSubmitting}>
{formState.isSubmitting ? __("Updating...") : __("Update Organization")}
</Button>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
{...register("websiteUrl")}
readOnly={formState.isSubmitting}
name="websiteUrl"
type="url"
label={__("Website URL")}
placeholder={__("https://example.com")}
/>
<Field
{...register("email")}
readOnly={formState.isSubmitting}
name="email"
type="email"
label={__("Email")}
placeholder={__("contact@example.com")}
/>
</div>
)}
</Card>
</div>
<div>
<Label>{__("Headquarter Address")}</Label>
<Textarea
{...register("headquarterAddress")}
readOnly={formState.isSubmitting}
name="headquarterAddress"
placeholder={__("123 Main St, City, Country")}
/>
</div>
{formState.isDirty && (
<div className="flex justify-end pt-6">
<Button type="submit" disabled={formState.isSubmitting}>
{formState.isSubmitting
? __("Updating...")
: __("Update Organization")}
</Button>
</div>
)}
</Card>
</div>
</form>
{/* Integrations */}
@@ -322,14 +343,18 @@ export default function SettingsPage({ queryRef }: Props) {
</Card>
</div>
{/* Custom Domains */}
<div className="space-y-4">
<h2 className="text-base font-medium">{__("Custom Domains")}</h2>
<CustomDomainManager />
<h2 className="text-base font-medium">{__("Custom Domain")}</h2>
<CustomDomainManager
organizationId={organization.id}
customDomain={organization.customDomain}
/>
</div>
<div className="space-y-4">
<h2 className="text-base font-medium text-red-600">{__("Danger Zone")}</h2>
<h2 className="text-base font-medium text-red-600">
{__("Danger Zone")}
</h2>
<Card padded className="border-red-200 flex items-center gap-3">
<div className="mr-auto">
<h3 className="text-base font-semibold text-red-700">
@@ -347,11 +372,7 @@ export default function SettingsPage({ queryRef }: Props) {
onConfirm={handleDeleteOrganization}
isDeleting={isDeleting}
>
<Button
variant="danger"
icon={IconTrashCan}
disabled={isDeleting}
>
<Button variant="danger" icon={IconTrashCan} disabled={isDeleting}>
{isDeleting ? __("Deleting...") : __("Delete Organization")}
</Button>
</DeleteOrganizationDialog>

138
apps/console/src/pages/organizations/__generated__/SettingsPageFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<c071187d5ef9cecb128621c57f97393b>>
* @generated SignedSource<<75e8a41e9d070472ff42d71e17c47fa6>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,6 +9,7 @@
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
import { FragmentRefs } from "relay-runtime";
export type SettingsPageFragment$data = {
readonly connectors: {
@@ -21,6 +22,22 @@ export type SettingsPageFragment$data = {
};
}>;
};
readonly customDomain: {
readonly createdAt: any;
readonly dnsRecords: ReadonlyArray<{
readonly name: string;
readonly purpose: string;
readonly ttl: number;
readonly type: string;
readonly value: string;
}>;
readonly domain: string;
readonly id: string;
readonly sslExpiresAt: any | null | undefined;
readonly sslStatus: SSLStatus;
readonly updatedAt: any;
readonly verifiedAt: any | null | undefined;
} | null | undefined;
readonly description: string | null | undefined;
readonly email: string | null | undefined;
readonly headquarterAddress: string | null | undefined;
@@ -67,20 +84,27 @@ v2 = {
"name": "email",
"storageKey": null
},
v3 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
};
},
v5 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
];
return {
"argumentDefinitions": [],
"kind": "Fragment",
@@ -120,7 +144,89 @@ return {
},
{
"alias": null,
"args": (v3/*: any*/),
"args": null,
"concreteType": "CustomDomain",
"kind": "LinkedField",
"name": "customDomain",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslStatus",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "DNSRecordInstruction",
"kind": "LinkedField",
"name": "dnsRecords",
"plural": true,
"selections": [
(v3/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "value",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "ttl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "purpose",
"storageKey": null
}
],
"storageKey": null
},
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "verifiedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sslExpiresAt",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": (v5/*: any*/),
"concreteType": "UserConnection",
"kind": "LinkedField",
"name": "users",
@@ -163,7 +269,7 @@ return {
},
{
"alias": null,
"args": (v3/*: any*/),
"args": (v5/*: any*/),
"concreteType": "ConnectorConnection",
"kind": "LinkedField",
"name": "connectors",
@@ -187,13 +293,7 @@ return {
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "type",
"storageKey": null
},
(v3/*: any*/),
(v4/*: any*/)
],
"storageKey": null
@@ -210,6 +310,6 @@ return {
};
})();
(node as any).hash = "bdd548b7b3fa4c1cfef32569dc63d45d";
(node as any).hash = "9786965352e1978c1171509fcce34b56";
export default node;