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

Move custom domain to compliance page tabs

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-01-29 13:11:29 +04:00
parent 269d4d3d58
commit 8f0124b4b2
16 changed files with 158 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/console/src/__generated__/core/DomainCardFragment.graphql.ts → apps/console/src/__generated__/core/CompliancePageDomainCardFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ab516d36b92795ed8d94d69153957f93>>
* @generated SignedSource<<0e36707d7a08e91112f9f44e787b4844>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -11,23 +11,23 @@
import { ReaderFragment } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
import { FragmentRefs } from "relay-runtime";
export type DomainCardFragment$data = {
export type CompliancePageDomainCardFragment$data = {
readonly canDelete: boolean;
readonly domain: string;
readonly sslStatus: SSLStatus;
readonly " $fragmentSpreads": FragmentRefs<"DomainDialogFragment">;
readonly " $fragmentType": "DomainCardFragment";
readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainDialogFragment">;
readonly " $fragmentType": "CompliancePageDomainCardFragment";
};
export type DomainCardFragment$key = {
readonly " $data"?: DomainCardFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DomainCardFragment">;
export type CompliancePageDomainCardFragment$key = {
readonly " $data"?: CompliancePageDomainCardFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainCardFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "DomainCardFragment",
"name": "CompliancePageDomainCardFragment",
"selections": [
{
"alias": null,
@@ -59,13 +59,13 @@ const node: ReaderFragment = {
{
"args": null,
"kind": "FragmentSpread",
"name": "DomainDialogFragment"
"name": "CompliancePageDomainDialogFragment"
}
],
"type": "CustomDomain",
"abstractKey": null
};
(node as any).hash = "91cc7871d5ac257f2540568a9a10ce0f";
(node as any).hash = "db079748369f6103bb263de4e8921c76";
export default node;

32
apps/console/src/__generated__/core/DomainDialogFragment.graphql.ts → apps/console/src/__generated__/core/CompliancePageDomainDialogFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<1d007308b8b70962ddfe217cf3534dab>>
* @generated SignedSource<<f6ec917cebddcf0a29c1399862127d2b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -11,8 +11,7 @@
import { ReaderFragment } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
import { FragmentRefs } from "relay-runtime";
export type DomainDialogFragment$data = {
readonly createdAt: string;
export type CompliancePageDomainDialogFragment$data = {
readonly dnsRecords: ReadonlyArray<{
readonly name: string;
readonly purpose: string;
@@ -23,19 +22,18 @@ export type DomainDialogFragment$data = {
readonly domain: string;
readonly sslExpiresAt: string | null | undefined;
readonly sslStatus: SSLStatus;
readonly updatedAt: string;
readonly " $fragmentType": "DomainDialogFragment";
readonly " $fragmentType": "CompliancePageDomainDialogFragment";
};
export type DomainDialogFragment$key = {
readonly " $data"?: DomainDialogFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DomainDialogFragment">;
export type CompliancePageDomainDialogFragment$key = {
readonly " $data"?: CompliancePageDomainDialogFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainDialogFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "DomainDialogFragment",
"name": "CompliancePageDomainDialogFragment",
"selections": [
{
"alias": null,
@@ -97,20 +95,6 @@ const node: ReaderFragment = {
],
"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,
@@ -123,6 +107,6 @@ const node: ReaderFragment = {
"abstractKey": null
};
(node as any).hash = "0aec5615023dde2d23901fec9e43ed9b";
(node as any).hash = "0275b6b52781473cb3dac5a631488e2f";
export default node;

73
apps/console/src/__generated__/core/DomainSettingsPageQuery.graphql.ts → apps/console/src/__generated__/core/CompliancePageDomainPageQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<ad1c20b90e9f5335bbcd703dc4e19963>>
* @generated SignedSource<<f31f58950034fd90764103d8c1e24f30>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,27 +10,25 @@
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type DomainSettingsPageQuery$variables = {
export type CompliancePageDomainPageQuery$variables = {
organizationId: string;
};
export type DomainSettingsPageQuery$data = {
export type CompliancePageDomainPageQuery$data = {
readonly organization: {
readonly __typename: "Organization";
readonly canCreateCustomDomain: boolean;
readonly customDomain: {
readonly domain: string;
readonly " $fragmentSpreads": FragmentRefs<"DomainCardFragment">;
readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainCardFragment">;
} | null | undefined;
readonly id: string;
} | {
// This will never be '%other', but we need some
// value in case none of the concrete values match.
readonly __typename: "%other";
};
};
export type DomainSettingsPageQuery = {
response: DomainSettingsPageQuery$data;
variables: DomainSettingsPageQuery$variables;
export type CompliancePageDomainPageQuery = {
response: CompliancePageDomainPageQuery$data;
variables: CompliancePageDomainPageQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -56,13 +54,6 @@ v2 = {
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = {
"alias": "canCreateCustomDomain",
"args": [
{
@@ -75,11 +66,11 @@ v4 = {
"name": "permission",
"storageKey": "permission(action:\"core:custom-domain:create\")"
},
v5 = {
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"name": "id",
"storageKey": null
};
return {
@@ -87,7 +78,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "DomainSettingsPageQuery",
"name": "CompliancePageDomainPageQuery",
"selections": [
{
"alias": "organization",
@@ -102,7 +93,6 @@ return {
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"alias": null,
"args": null,
@@ -111,11 +101,10 @@ return {
"name": "customDomain",
"plural": false,
"selections": [
(v5/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "DomainCardFragment"
"name": "CompliancePageDomainCardFragment"
}
],
"storageKey": null
@@ -135,7 +124,7 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "DomainSettingsPageQuery",
"name": "CompliancePageDomainPageQuery",
"selections": [
{
"alias": "organization",
@@ -146,11 +135,10 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
{
"kind": "InlineFragment",
"selections": [
(v4/*: any*/),
(v3/*: any*/),
{
"alias": null,
"args": null,
@@ -159,7 +147,13 @@ return {
"name": "customDomain",
"plural": false,
"selections": [
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -226,20 +220,6 @@ return {
],
"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,
@@ -247,30 +227,31 @@ return {
"name": "sslExpiresAt",
"storageKey": null
},
(v3/*: any*/)
(v4/*: any*/)
],
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
}
},
(v4/*: any*/)
],
"storageKey": null
}
]
},
"params": {
"cacheID": "36529612fbe4366a7344b405031da1d1",
"cacheID": "f916852f512fa1e1b06d73c608acad3a",
"id": null,
"metadata": {},
"name": "DomainSettingsPageQuery",
"name": "CompliancePageDomainPageQuery",
"operationKind": "query",
"text": "query DomainSettingsPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n canCreateCustomDomain: permission(action: \"core:custom-domain:create\")\n customDomain {\n domain\n ...DomainCardFragment\n id\n }\n }\n id\n }\n}\n\nfragment DomainCardFragment on CustomDomain {\n domain\n sslStatus\n canDelete: permission(action: \"core:custom-domain:delete\")\n ...DomainDialogFragment\n}\n\nfragment DomainDialogFragment on CustomDomain {\n sslStatus\n domain\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n createdAt\n updatedAt\n sslExpiresAt\n}\n"
"text": "query CompliancePageDomainPageQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n canCreateCustomDomain: permission(action: \"core:custom-domain:create\")\n customDomain {\n ...CompliancePageDomainCardFragment\n id\n }\n }\n id\n }\n}\n\nfragment CompliancePageDomainCardFragment on CustomDomain {\n domain\n sslStatus\n canDelete: permission(action: \"core:custom-domain:delete\")\n ...CompliancePageDomainDialogFragment\n}\n\nfragment CompliancePageDomainDialogFragment on CustomDomain {\n sslStatus\n domain\n dnsRecords {\n type\n name\n value\n ttl\n purpose\n }\n sslExpiresAt\n}\n"
}
};
})();
(node as any).hash = "75275e2fc7e7156cdf3059b8f0d4f60d";
(node as any).hash = "86eb03a06b0217c125eadf8cf661e384";
export default node;

24
apps/console/src/__generated__/core/DeleteDomainDialogMutation.graphql.ts → apps/console/src/__generated__/core/DeleteCompliancePageDomainDialogMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4f27f16c09a86fda0f17b4d33866fcb2>>
* @generated SignedSource<<12b5695d6b5f46a7d4231abe93301a0b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,17 +12,17 @@ import { ConcreteRequest } from 'relay-runtime';
export type DeleteCustomDomainInput = {
organizationId: string;
};
export type DeleteDomainDialogMutation$variables = {
export type DeleteCompliancePageDomainDialogMutation$variables = {
input: DeleteCustomDomainInput;
};
export type DeleteDomainDialogMutation$data = {
export type DeleteCompliancePageDomainDialogMutation$data = {
readonly deleteCustomDomain: {
readonly deletedCustomDomainId: string;
};
};
export type DeleteDomainDialogMutation = {
response: DeleteDomainDialogMutation$data;
variables: DeleteDomainDialogMutation$variables;
export type DeleteCompliancePageDomainDialogMutation = {
response: DeleteCompliancePageDomainDialogMutation$data;
variables: DeleteCompliancePageDomainDialogMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "DeleteDomainDialogMutation",
"name": "DeleteCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -73,20 +73,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "DeleteDomainDialogMutation",
"name": "DeleteCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "68e7fb0109af8d99c9947e5ef2314ad2",
"cacheID": "1d5e88cc48c7ce90d9110de6d4c6a4d9",
"id": null,
"metadata": {},
"name": "DeleteDomainDialogMutation",
"name": "DeleteCompliancePageDomainDialogMutation",
"operationKind": "mutation",
"text": "mutation DeleteDomainDialogMutation(\n $input: DeleteCustomDomainInput!\n) {\n deleteCustomDomain(input: $input) {\n deletedCustomDomainId\n }\n}\n"
"text": "mutation DeleteCompliancePageDomainDialogMutation(\n $input: DeleteCustomDomainInput!\n) {\n deleteCustomDomain(input: $input) {\n deletedCustomDomainId\n }\n}\n"
}
};
})();
(node as any).hash = "4ff39445b000bd5416e04e1460f11571";
(node as any).hash = "d65e8b9b66367509071b9349c828f5d0";
export default node;

24
apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts → apps/console/src/__generated__/core/NewCompliancePageDomainDialogMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<d78dfc5b8db81e410f3f606fb91cd137>>
* @generated SignedSource<<2884e6469123701242f24cd275f8551b>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -14,10 +14,10 @@ export type CreateCustomDomainInput = {
domain: string;
organizationId: string;
};
export type NewDomainDialogMutation$variables = {
export type NewCompliancePageDomainDialogMutation$variables = {
input: CreateCustomDomainInput;
};
export type NewDomainDialogMutation$data = {
export type NewCompliancePageDomainDialogMutation$data = {
readonly createCustomDomain: {
readonly customDomain: {
readonly canDelete: boolean;
@@ -37,9 +37,9 @@ export type NewDomainDialogMutation$data = {
};
};
};
export type NewDomainDialogMutation = {
response: NewDomainDialogMutation$data;
variables: NewDomainDialogMutation$variables;
export type NewCompliancePageDomainDialogMutation = {
response: NewCompliancePageDomainDialogMutation$data;
variables: NewCompliancePageDomainDialogMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -186,7 +186,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "NewDomainDialogMutation",
"name": "NewCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -195,20 +195,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "NewDomainDialogMutation",
"name": "NewCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "39d421d36a6418d0ee687d43b9d7a7ee",
"cacheID": "6f012080388b3c7dfd3bfc8c69b5d549",
"id": null,
"metadata": {},
"name": "NewDomainDialogMutation",
"name": "NewCompliancePageDomainDialogMutation",
"operationKind": "mutation",
"text": "mutation NewDomainDialogMutation(\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 sslExpiresAt\n canDelete: permission(action: \"core:custom-domain:delete\")\n }\n }\n}\n"
"text": "mutation NewCompliancePageDomainDialogMutation(\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 sslExpiresAt\n canDelete: permission(action: \"core:custom-domain:delete\")\n }\n }\n}\n"
}
};
})();
(node as any).hash = "37ef764ab4f78a6898f06d00374347ee";
(node as any).hash = "7a1b76dbca18a3a0dbd2b1123e324b99";
export default node;

5
apps/console/src/pages/iam/organizations/settings/SettingsLayout.tsx
View File

@@ -4,7 +4,6 @@ import {
IconLock,
IconPeopleAdd,
IconSettingsGear2,
IconStore,
PageHeader,
TabLink,
Tabs,
@@ -30,10 +29,6 @@ export default function SettingsLayout() {
<IconPeopleAdd size={20} />
{__("Members")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/settings/domain`}>
<IconStore size={20} />
{__("Domain")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/settings/saml-sso`}>
<IconLock size={20} />
{__("SAML SSO")}

4
apps/console/src/pages/organizations/compliance-page/CompliancePageLayout.tsx
View File

@@ -52,6 +52,10 @@ export function CompliancePageLayout(props: { queryRef: PreloadedQuery<Complianc
<IconSettingsGear2 className="size-4" />
{__("Overview")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/compliance-page/domain`}>
<IconStore className="size-4" />
{__("Domain")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/compliance-page/references`}>
<IconCheckmark1 className="size-4" />
{__("References")}

28
apps/console/src/pages/organizations/settings/DomainSettingsPage.tsx → apps/console/src/pages/organizations/compliance-page/domain/CompliancePageDomainPage.tsx
View File

@@ -3,36 +3,34 @@ import { Button, Card, IconPlusLarge } from "@probo/ui";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { graphql } from "relay-runtime";
import type { DomainSettingsPageQuery } from "#/__generated__/core/DomainSettingsPageQuery.graphql";
import type { CompliancePageDomainPageQuery } from "#/__generated__/core/CompliancePageDomainPageQuery.graphql";
import { DomainCard } from "./_components/DomainCard";
import { NewDomainDialog } from "./_components/NewDomainDialog";
import { CompliancePageDomainCard } from "./_components/CompliancePageDomainCard";
import { NewCompliancePageDomainDialog } from "./_components/NewCompliancePageDomainDialog";
export const domainSettingsPageQuery = graphql`
query DomainSettingsPageQuery($organizationId: ID!) {
export const compliancePageDomainPageQuery = graphql`
query CompliancePageDomainPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
__typename
... on Organization {
id
canCreateCustomDomain: permission(action: "core:custom-domain:create")
customDomain {
domain
...DomainCardFragment
...CompliancePageDomainCardFragment
}
}
}
}
`;
export function DomainSettingsPage(props: {
queryRef: PreloadedQuery<DomainSettingsPageQuery>;
export function CompliancePageDomainPage(props: {
queryRef: PreloadedQuery<CompliancePageDomainPageQuery>;
}) {
const { queryRef } = props;
const { __ } = useTranslate();
const { organization } = usePreloadedQuery<DomainSettingsPageQuery>(
domainSettingsPageQuery,
const { organization } = usePreloadedQuery<CompliancePageDomainPageQuery>(
compliancePageDomainPageQuery,
queryRef,
);
if (organization.__typename !== "Organization") {
@@ -44,7 +42,7 @@ export function DomainSettingsPage(props: {
<h2 className="text-base font-medium">{__("Custom Domain")}</h2>
{organization.customDomain
? (
<DomainCard fKey={organization.customDomain} />
<CompliancePageDomainCard fKey={organization.customDomain} />
)
: (
<Card padded>
@@ -59,9 +57,9 @@ export function DomainSettingsPage(props: {
</p>
<div className="flex justify-center">
{organization.canCreateCustomDomain && (
<NewDomainDialog>
<NewCompliancePageDomainDialog>
<Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
</NewDomainDialog>
</NewCompliancePageDomainDialog>
)}
</div>
</div>

39
apps/console/src/pages/organizations/compliance-page/domain/CompliancePageDomainPageLoader.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { useEffect } from "react";
import { useQueryLoader } from "react-relay";
import type { CompliancePageDomainPageQuery } from "#/__generated__/core/CompliancePageDomainPageQuery.graphql";
import { LinkCardSkeleton } from "#/components/skeletons/LinkCardSkeleton";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CoreRelayProvider } from "#/providers/CoreRelayProvider";
import {
CompliancePageDomainPage,
compliancePageDomainPageQuery,
} from "./CompliancePageDomainPage";
function CompliancePageDomainPageQueryLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<CompliancePageDomainPageQuery>(
compliancePageDomainPageQuery,
);
useEffect(() => {
loadQuery({
organizationId,
});
}, [loadQuery, organizationId]);
if (!queryRef) {
return <LinkCardSkeleton />;
}
return <CompliancePageDomainPage queryRef={queryRef} />;
}
export default function CompliancePageDomainPageLoader() {
return (
<CoreRelayProvider>
<CompliancePageDomainPageQueryLoader />
</CoreRelayProvider>
);
}

22
apps/console/src/pages/organizations/settings/_components/DomainCard.tsx → apps/console/src/pages/organizations/compliance-page/domain/_components/CompliancePageDomainCard.tsx
View File

@@ -7,26 +7,26 @@ import { Badge, Button, Card } from "@probo/ui";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { DomainCardFragment$key } from "#/__generated__/core/DomainCardFragment.graphql";
import type { CompliancePageDomainCardFragment$key } from "#/__generated__/core/CompliancePageDomainCardFragment.graphql";
import { DeleteDomainDialog } from "./DeleteDomainDialog";
import { DomainDialog } from "./DomainDialog";
import { CompliancePageDomainDialog } from "./CompliancePageDomainDialog";
import { DeleteCompliancePageDomainDialog } from "./DeleteCompliancePageDomainDialog";
const fragment = graphql`
fragment DomainCardFragment on CustomDomain {
fragment CompliancePageDomainCardFragment on CustomDomain {
domain
sslStatus
canDelete: permission(action: "core:custom-domain:delete")
...DomainDialogFragment
...CompliancePageDomainDialogFragment
}
`;
export function DomainCard(props: { fKey: DomainCardFragment$key }) {
export function CompliancePageDomainCard(props: { fKey: CompliancePageDomainCardFragment$key }) {
const { fKey } = props;
const { __ } = useTranslate();
const domain = useFragment<DomainCardFragment$key>(fragment, fKey);
const domain = useFragment<CompliancePageDomainCardFragment$key>(fragment, fKey);
return (
<Card>
@@ -49,14 +49,14 @@ export function DomainCard(props: { fKey: DomainCardFragment$key }) {
</div>
<div className="flex items-center gap-2">
<DomainDialog fKey={domain}>
<CompliancePageDomainDialog fKey={domain}>
<Button variant="secondary">{__("View Details")}</Button>
</DomainDialog>
</CompliancePageDomainDialog>
{domain.canDelete && (
<DeleteDomainDialog domain={domain.domain}>
<DeleteCompliancePageDomainDialog domain={domain.domain}>
<Button variant="danger">{__("Delete")}</Button>
</DeleteDomainDialog>
</DeleteCompliancePageDomainDialog>
)}
</div>
</div>

12
apps/console/src/pages/organizations/settings/_components/DomainDialog.tsx → apps/console/src/pages/organizations/compliance-page/domain/_components/CompliancePageDomainDialog.tsx
View File

@@ -15,10 +15,10 @@ import type { PropsWithChildren } from "react";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { DomainDialogFragment$key } from "#/__generated__/core/DomainDialogFragment.graphql";
import type { CompliancePageDomainDialogFragment$key } from "#/__generated__/core/CompliancePageDomainDialogFragment.graphql";
const fragment = graphql`
fragment DomainDialogFragment on CustomDomain {
fragment CompliancePageDomainDialogFragment on CustomDomain {
sslStatus
domain
dnsRecords {
@@ -28,15 +28,13 @@ const fragment = graphql`
ttl
purpose
}
createdAt
updatedAt
sslExpiresAt
}
`;
type DomainDialogProps = PropsWithChildren<{ fKey: DomainDialogFragment$key }>;
type CompliancePageDomainDialogProps = PropsWithChildren<{ fKey: CompliancePageDomainDialogFragment$key }>;
export function DomainDialog(props: DomainDialogProps) {
export function CompliancePageDomainDialog(props: CompliancePageDomainDialogProps) {
const { children, fKey } = props;
const { __ } = useTranslate();
@@ -52,7 +50,7 @@ export function DomainDialog(props: DomainDialogProps) {
});
};
const domain = useFragment<DomainDialogFragment$key>(fragment, fKey);
const domain = useFragment<CompliancePageDomainDialogFragment$key>(fragment, fKey);
return (
<Dialog

10
apps/console/src/pages/organizations/settings/_components/DeleteDomainDialog.tsx → apps/console/src/pages/organizations/compliance-page/domain/_components/DeleteCompliancePageDomainDialog.tsx
View File

@@ -12,23 +12,23 @@ import {
import { type PropsWithChildren, useState } from "react";
import { graphql } from "relay-runtime";
import type { DeleteDomainDialogMutation } from "#/__generated__/core/DeleteDomainDialogMutation.graphql";
import type { DeleteCompliancePageDomainDialogMutation } from "#/__generated__/core/DeleteCompliancePageDomainDialogMutation.graphql";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const deleteCustomDomainMutation = graphql`
mutation DeleteDomainDialogMutation($input: DeleteCustomDomainInput!) {
mutation DeleteCompliancePageDomainDialogMutation($input: DeleteCustomDomainInput!) {
deleteCustomDomain(input: $input) {
deletedCustomDomainId
}
}
`;
type DeleteDomainDialogProps = PropsWithChildren<{
type DeleteCompliancePageDomainDialogProps = PropsWithChildren<{
domain: string;
}>;
export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
export function DeleteCompliancePageDomainDialog(props: DeleteCompliancePageDomainDialogProps) {
const { children, domain } = props;
const organizationId = useOrganizationId();
@@ -37,7 +37,7 @@ export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
const [inputValue, setInputValue] = useState("");
const [deleteCustomDomain, isDeleting]
= useMutationWithToasts<DeleteDomainDialogMutation>(
= useMutationWithToasts<DeleteCompliancePageDomainDialogMutation>(
deleteCustomDomainMutation,
{
successMessage: __("Domain deleted successfully"),

8
apps/console/src/pages/organizations/settings/_components/NewDomainDialog.tsx → apps/console/src/pages/organizations/compliance-page/domain/_components/NewCompliancePageDomainDialog.tsx
View File

@@ -12,13 +12,13 @@ import type { PropsWithChildren } from "react";
import { graphql } from "relay-runtime";
import { z } from "zod";
import type { NewDomainDialogMutation } from "#/__generated__/core/NewDomainDialogMutation.graphql";
import type { NewCompliancePageDomainDialogMutation } from "#/__generated__/core/NewCompliancePageDomainDialogMutation.graphql";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId";
const createCustomDomainMutation = graphql`
mutation NewDomainDialogMutation($input: CreateCustomDomainInput!) {
mutation NewCompliancePageDomainDialogMutation($input: CreateCustomDomainInput!) {
createCustomDomain(input: $input) {
customDomain {
id
@@ -50,7 +50,7 @@ const schema = z.object({
),
});
export function NewDomainDialog(props: PropsWithChildren) {
export function NewCompliancePageDomainDialog(props: PropsWithChildren) {
const { children } = props;
const organizationId = useOrganizationId();
@@ -67,7 +67,7 @@ export function NewDomainDialog(props: PropsWithChildren) {
);
const [createCustomDomain, isCreating]
= useMutationWithToasts<NewDomainDialogMutation>(createCustomDomainMutation, {
= useMutationWithToasts<NewCompliancePageDomainDialogMutation>(createCustomDomainMutation, {
successMessage: __(
"Domain added successfully. Configure the DNS records to verify and activate your domain.",
),

8
apps/console/src/pages/organizations/compliance-page/routes.ts
View File

@@ -14,6 +14,14 @@ export const compliancePageRoutes = [
Fallback: LinkCardSkeleton,
Component: lazy(() => import("#/pages/organizations/compliance-page/overview/CompliancePageOverviewPageLoader")),
},
{
path: "domain",
Fallback: LinkCardSkeleton,
Component: lazy(
() =>
import("#/pages/organizations/compliance-page/domain/CompliancePageDomainPageLoader"),
),
},
{
path: "references",
Fallback: LinkCardSkeleton,

40
apps/console/src/pages/organizations/settings/DomainSettingsPageLoader.tsx
View File

@@ -1,40 +0,0 @@
import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import type { DomainSettingsPageQuery } from "#/__generated__/core/DomainSettingsPageQuery.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { CoreRelayProvider } from "#/providers/CoreRelayProvider";
import {
DomainSettingsPage,
domainSettingsPageQuery,
} from "./DomainSettingsPage";
function DomainSettingsPageQueryLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<DomainSettingsPageQuery>(
domainSettingsPageQuery,
);
useEffect(() => {
loadQuery({
organizationId,
});
}, [loadQuery, organizationId]);
if (!queryRef) {
return null;
}
return <DomainSettingsPage queryRef={queryRef} />;
}
export default function DomainSettingsPageLoader() {
return (
<CoreRelayProvider>
<Suspense>
<DomainSettingsPageQueryLoader />
</Suspense>
</CoreRelayProvider>
);
}

7
apps/console/src/routes.tsx
View File

@@ -208,13 +208,6 @@ const routes = [
import("./pages/iam/organizations/settings/MembersPageLoader"),
),
},
{
path: "domain",
Component: lazy(
() =>
import("./pages/organizations/settings/DomainSettingsPageLoader"),
),
},
{
path: "saml-sso",
Component: lazy(