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 * @lightSyntaxTransform
* @nogrep * @nogrep
*/ */
@@ -11,23 +11,23 @@
import { ReaderFragment } from 'relay-runtime'; import { ReaderFragment } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING"; export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
import { FragmentRefs } from "relay-runtime"; import { FragmentRefs } from "relay-runtime";
export type DomainCardFragment$data = { export type CompliancePageDomainCardFragment$data = {
readonly canDelete: boolean; readonly canDelete: boolean;
readonly domain: string; readonly domain: string;
readonly sslStatus: SSLStatus; readonly sslStatus: SSLStatus;
readonly " $fragmentSpreads": FragmentRefs<"DomainDialogFragment">; readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainDialogFragment">;
readonly " $fragmentType": "DomainCardFragment"; readonly " $fragmentType": "CompliancePageDomainCardFragment";
}; };
export type DomainCardFragment$key = { export type CompliancePageDomainCardFragment$key = {
readonly " $data"?: DomainCardFragment$data; readonly " $data"?: CompliancePageDomainCardFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DomainCardFragment">; readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainCardFragment">;
}; };
const node: ReaderFragment = { const node: ReaderFragment = {
"argumentDefinitions": [], "argumentDefinitions": [],
"kind": "Fragment", "kind": "Fragment",
"metadata": null, "metadata": null,
"name": "DomainCardFragment", "name": "CompliancePageDomainCardFragment",
"selections": [ "selections": [
{ {
"alias": null, "alias": null,
@@ -59,13 +59,13 @@ const node: ReaderFragment = {
{ {
"args": null, "args": null,
"kind": "FragmentSpread", "kind": "FragmentSpread",
"name": "DomainDialogFragment" "name": "CompliancePageDomainDialogFragment"
} }
], ],
"type": "CustomDomain", "type": "CustomDomain",
"abstractKey": null "abstractKey": null
}; };
(node as any).hash = "91cc7871d5ac257f2540568a9a10ce0f"; (node as any).hash = "db079748369f6103bb263de4e8921c76";
export default node; 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 * @lightSyntaxTransform
* @nogrep * @nogrep
*/ */
@@ -11,8 +11,7 @@
import { ReaderFragment } from 'relay-runtime'; import { ReaderFragment } from 'relay-runtime';
export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING"; export type SSLStatus = "ACTIVE" | "EXPIRED" | "FAILED" | "PENDING" | "PROVISIONING" | "RENEWING";
import { FragmentRefs } from "relay-runtime"; import { FragmentRefs } from "relay-runtime";
export type DomainDialogFragment$data = { export type CompliancePageDomainDialogFragment$data = {
readonly createdAt: string;
readonly dnsRecords: ReadonlyArray<{ readonly dnsRecords: ReadonlyArray<{
readonly name: string; readonly name: string;
readonly purpose: string; readonly purpose: string;
@@ -23,19 +22,18 @@ export type DomainDialogFragment$data = {
readonly domain: string; readonly domain: string;
readonly sslExpiresAt: string | null | undefined; readonly sslExpiresAt: string | null | undefined;
readonly sslStatus: SSLStatus; readonly sslStatus: SSLStatus;
readonly updatedAt: string; readonly " $fragmentType": "CompliancePageDomainDialogFragment";
readonly " $fragmentType": "DomainDialogFragment";
}; };
export type DomainDialogFragment$key = { export type CompliancePageDomainDialogFragment$key = {
readonly " $data"?: DomainDialogFragment$data; readonly " $data"?: CompliancePageDomainDialogFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"DomainDialogFragment">; readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainDialogFragment">;
}; };
const node: ReaderFragment = { const node: ReaderFragment = {
"argumentDefinitions": [], "argumentDefinitions": [],
"kind": "Fragment", "kind": "Fragment",
"metadata": null, "metadata": null,
"name": "DomainDialogFragment", "name": "CompliancePageDomainDialogFragment",
"selections": [ "selections": [
{ {
"alias": null, "alias": null,
@@ -97,20 +95,6 @@ const node: ReaderFragment = {
], ],
"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, "alias": null,
"args": null, "args": null,
@@ -123,6 +107,6 @@ const node: ReaderFragment = {
"abstractKey": null "abstractKey": null
}; };
(node as any).hash = "0aec5615023dde2d23901fec9e43ed9b"; (node as any).hash = "0275b6b52781473cb3dac5a631488e2f";
export default node; 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 * @lightSyntaxTransform
* @nogrep * @nogrep
*/ */
@@ -10,27 +10,25 @@
import { ConcreteRequest } from 'relay-runtime'; import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime"; import { FragmentRefs } from "relay-runtime";
export type DomainSettingsPageQuery$variables = { export type CompliancePageDomainPageQuery$variables = {
organizationId: string; organizationId: string;
}; };
export type DomainSettingsPageQuery$data = { export type CompliancePageDomainPageQuery$data = {
readonly organization: { readonly organization: {
readonly __typename: "Organization"; readonly __typename: "Organization";
readonly canCreateCustomDomain: boolean; readonly canCreateCustomDomain: boolean;
readonly customDomain: { readonly customDomain: {
readonly domain: string; readonly " $fragmentSpreads": FragmentRefs<"CompliancePageDomainCardFragment">;
readonly " $fragmentSpreads": FragmentRefs<"DomainCardFragment">;
} | null | undefined; } | null | undefined;
readonly id: string;
} | { } | {
// This will never be '%other', but we need some // This will never be '%other', but we need some
// value in case none of the concrete values match. // value in case none of the concrete values match.
readonly __typename: "%other"; readonly __typename: "%other";
}; };
}; };
export type DomainSettingsPageQuery = { export type CompliancePageDomainPageQuery = {
response: DomainSettingsPageQuery$data; response: CompliancePageDomainPageQuery$data;
variables: DomainSettingsPageQuery$variables; variables: CompliancePageDomainPageQuery$variables;
}; };
const node: ConcreteRequest = (function(){ const node: ConcreteRequest = (function(){
@@ -56,13 +54,6 @@ v2 = {
"storageKey": null "storageKey": null
}, },
v3 = { v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = {
"alias": "canCreateCustomDomain", "alias": "canCreateCustomDomain",
"args": [ "args": [
{ {
@@ -75,11 +66,11 @@ v4 = {
"name": "permission", "name": "permission",
"storageKey": "permission(action:\"core:custom-domain:create\")" "storageKey": "permission(action:\"core:custom-domain:create\")"
}, },
v5 = { v4 = {
"alias": null, "alias": null,
"args": null, "args": null,
"kind": "ScalarField", "kind": "ScalarField",
"name": "domain", "name": "id",
"storageKey": null "storageKey": null
}; };
return { return {
@@ -87,7 +78,7 @@ return {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Fragment", "kind": "Fragment",
"metadata": null, "metadata": null,
"name": "DomainSettingsPageQuery", "name": "CompliancePageDomainPageQuery",
"selections": [ "selections": [
{ {
"alias": "organization", "alias": "organization",
@@ -102,7 +93,6 @@ return {
"kind": "InlineFragment", "kind": "InlineFragment",
"selections": [ "selections": [
(v3/*: any*/), (v3/*: any*/),
(v4/*: any*/),
{ {
"alias": null, "alias": null,
"args": null, "args": null,
@@ -111,11 +101,10 @@ return {
"name": "customDomain", "name": "customDomain",
"plural": false, "plural": false,
"selections": [ "selections": [
(v5/*: any*/),
{ {
"args": null, "args": null,
"kind": "FragmentSpread", "kind": "FragmentSpread",
"name": "DomainCardFragment" "name": "CompliancePageDomainCardFragment"
} }
], ],
"storageKey": null "storageKey": null
@@ -135,7 +124,7 @@ return {
"operation": { "operation": {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Operation", "kind": "Operation",
"name": "DomainSettingsPageQuery", "name": "CompliancePageDomainPageQuery",
"selections": [ "selections": [
{ {
"alias": "organization", "alias": "organization",
@@ -146,11 +135,10 @@ return {
"plural": false, "plural": false,
"selections": [ "selections": [
(v2/*: any*/), (v2/*: any*/),
(v3/*: any*/),
{ {
"kind": "InlineFragment", "kind": "InlineFragment",
"selections": [ "selections": [
(v4/*: any*/), (v3/*: any*/),
{ {
"alias": null, "alias": null,
"args": null, "args": null,
@@ -159,7 +147,13 @@ return {
"name": "customDomain", "name": "customDomain",
"plural": false, "plural": false,
"selections": [ "selections": [
(v5/*: any*/), {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "domain",
"storageKey": null
},
{ {
"alias": null, "alias": null,
"args": null, "args": null,
@@ -226,20 +220,6 @@ return {
], ],
"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, "alias": null,
"args": null, "args": null,
@@ -247,30 +227,31 @@ return {
"name": "sslExpiresAt", "name": "sslExpiresAt",
"storageKey": null "storageKey": null
}, },
(v3/*: any*/) (v4/*: any*/)
], ],
"storageKey": null "storageKey": null
} }
], ],
"type": "Organization", "type": "Organization",
"abstractKey": null "abstractKey": null
} },
(v4/*: any*/)
], ],
"storageKey": null "storageKey": null
} }
] ]
}, },
"params": { "params": {
"cacheID": "36529612fbe4366a7344b405031da1d1", "cacheID": "f916852f512fa1e1b06d73c608acad3a",
"id": null, "id": null,
"metadata": {}, "metadata": {},
"name": "DomainSettingsPageQuery", "name": "CompliancePageDomainPageQuery",
"operationKind": "query", "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; 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 * @lightSyntaxTransform
* @nogrep * @nogrep
*/ */
@@ -12,17 +12,17 @@ import { ConcreteRequest } from 'relay-runtime';
export type DeleteCustomDomainInput = { export type DeleteCustomDomainInput = {
organizationId: string; organizationId: string;
}; };
export type DeleteDomainDialogMutation$variables = { export type DeleteCompliancePageDomainDialogMutation$variables = {
input: DeleteCustomDomainInput; input: DeleteCustomDomainInput;
}; };
export type DeleteDomainDialogMutation$data = { export type DeleteCompliancePageDomainDialogMutation$data = {
readonly deleteCustomDomain: { readonly deleteCustomDomain: {
readonly deletedCustomDomainId: string; readonly deletedCustomDomainId: string;
}; };
}; };
export type DeleteDomainDialogMutation = { export type DeleteCompliancePageDomainDialogMutation = {
response: DeleteDomainDialogMutation$data; response: DeleteCompliancePageDomainDialogMutation$data;
variables: DeleteDomainDialogMutation$variables; variables: DeleteCompliancePageDomainDialogMutation$variables;
}; };
const node: ConcreteRequest = (function(){ const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Fragment", "kind": "Fragment",
"metadata": null, "metadata": null,
"name": "DeleteDomainDialogMutation", "name": "DeleteCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/), "selections": (v1/*: any*/),
"type": "Mutation", "type": "Mutation",
"abstractKey": null "abstractKey": null
@@ -73,20 +73,20 @@ return {
"operation": { "operation": {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Operation", "kind": "Operation",
"name": "DeleteDomainDialogMutation", "name": "DeleteCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/) "selections": (v1/*: any*/)
}, },
"params": { "params": {
"cacheID": "68e7fb0109af8d99c9947e5ef2314ad2", "cacheID": "1d5e88cc48c7ce90d9110de6d4c6a4d9",
"id": null, "id": null,
"metadata": {}, "metadata": {},
"name": "DeleteDomainDialogMutation", "name": "DeleteCompliancePageDomainDialogMutation",
"operationKind": "mutation", "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; 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 * @lightSyntaxTransform
* @nogrep * @nogrep
*/ */
@@ -14,10 +14,10 @@ export type CreateCustomDomainInput = {
domain: string; domain: string;
organizationId: string; organizationId: string;
}; };
export type NewDomainDialogMutation$variables = { export type NewCompliancePageDomainDialogMutation$variables = {
input: CreateCustomDomainInput; input: CreateCustomDomainInput;
}; };
export type NewDomainDialogMutation$data = { export type NewCompliancePageDomainDialogMutation$data = {
readonly createCustomDomain: { readonly createCustomDomain: {
readonly customDomain: { readonly customDomain: {
readonly canDelete: boolean; readonly canDelete: boolean;
@@ -37,9 +37,9 @@ export type NewDomainDialogMutation$data = {
}; };
}; };
}; };
export type NewDomainDialogMutation = { export type NewCompliancePageDomainDialogMutation = {
response: NewDomainDialogMutation$data; response: NewCompliancePageDomainDialogMutation$data;
variables: NewDomainDialogMutation$variables; variables: NewCompliancePageDomainDialogMutation$variables;
}; };
const node: ConcreteRequest = (function(){ const node: ConcreteRequest = (function(){
@@ -186,7 +186,7 @@ return {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Fragment", "kind": "Fragment",
"metadata": null, "metadata": null,
"name": "NewDomainDialogMutation", "name": "NewCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/), "selections": (v1/*: any*/),
"type": "Mutation", "type": "Mutation",
"abstractKey": null "abstractKey": null
@@ -195,20 +195,20 @@ return {
"operation": { "operation": {
"argumentDefinitions": (v0/*: any*/), "argumentDefinitions": (v0/*: any*/),
"kind": "Operation", "kind": "Operation",
"name": "NewDomainDialogMutation", "name": "NewCompliancePageDomainDialogMutation",
"selections": (v1/*: any*/) "selections": (v1/*: any*/)
}, },
"params": { "params": {
"cacheID": "39d421d36a6418d0ee687d43b9d7a7ee", "cacheID": "6f012080388b3c7dfd3bfc8c69b5d549",
"id": null, "id": null,
"metadata": {}, "metadata": {},
"name": "NewDomainDialogMutation", "name": "NewCompliancePageDomainDialogMutation",
"operationKind": "mutation", "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; export default node;

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

@@ -4,7 +4,6 @@ import {
IconLock, IconLock,
IconPeopleAdd, IconPeopleAdd,
IconSettingsGear2, IconSettingsGear2,
IconStore,
PageHeader, PageHeader,
TabLink, TabLink,
Tabs, Tabs,
@@ -30,10 +29,6 @@ export default function SettingsLayout() {
<IconPeopleAdd size={20} /> <IconPeopleAdd size={20} />
{__("Members")} {__("Members")}
</TabLink> </TabLink>
<TabLink to={`/organizations/${organizationId}/settings/domain`}>
<IconStore size={20} />
{__("Domain")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/settings/saml-sso`}> <TabLink to={`/organizations/${organizationId}/settings/saml-sso`}>
<IconLock size={20} /> <IconLock size={20} />
{__("SAML SSO")} {__("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" /> <IconSettingsGear2 className="size-4" />
{__("Overview")} {__("Overview")}
</TabLink> </TabLink>
<TabLink to={`/organizations/${organizationId}/compliance-page/domain`}>
<IconStore className="size-4" />
{__("Domain")}
</TabLink>
<TabLink to={`/organizations/${organizationId}/compliance-page/references`}> <TabLink to={`/organizations/${organizationId}/compliance-page/references`}>
<IconCheckmark1 className="size-4" /> <IconCheckmark1 className="size-4" />
{__("References")} {__("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 { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { graphql } from "relay-runtime"; 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 { CompliancePageDomainCard } from "./_components/CompliancePageDomainCard";
import { NewDomainDialog } from "./_components/NewDomainDialog"; import { NewCompliancePageDomainDialog } from "./_components/NewCompliancePageDomainDialog";
export const domainSettingsPageQuery = graphql` export const compliancePageDomainPageQuery = graphql`
query DomainSettingsPageQuery($organizationId: ID!) { query CompliancePageDomainPageQuery($organizationId: ID!) {
organization: node(id: $organizationId) { organization: node(id: $organizationId) {
__typename __typename
... on Organization { ... on Organization {
id
canCreateCustomDomain: permission(action: "core:custom-domain:create") canCreateCustomDomain: permission(action: "core:custom-domain:create")
customDomain { customDomain {
domain ...CompliancePageDomainCardFragment
...DomainCardFragment
} }
} }
} }
} }
`; `;
export function DomainSettingsPage(props: { export function CompliancePageDomainPage(props: {
queryRef: PreloadedQuery<DomainSettingsPageQuery>; queryRef: PreloadedQuery<CompliancePageDomainPageQuery>;
}) { }) {
const { queryRef } = props; const { queryRef } = props;
const { __ } = useTranslate(); const { __ } = useTranslate();
const { organization } = usePreloadedQuery<DomainSettingsPageQuery>( const { organization } = usePreloadedQuery<CompliancePageDomainPageQuery>(
domainSettingsPageQuery, compliancePageDomainPageQuery,
queryRef, queryRef,
); );
if (organization.__typename !== "Organization") { if (organization.__typename !== "Organization") {
@@ -44,7 +42,7 @@ export function DomainSettingsPage(props: {
<h2 className="text-base font-medium">{__("Custom Domain")}</h2> <h2 className="text-base font-medium">{__("Custom Domain")}</h2>
{organization.customDomain {organization.customDomain
? ( ? (
<DomainCard fKey={organization.customDomain} /> <CompliancePageDomainCard fKey={organization.customDomain} />
) )
: ( : (
<Card padded> <Card padded>
@@ -59,9 +57,9 @@ export function DomainSettingsPage(props: {
</p> </p>
<div className="flex justify-center"> <div className="flex justify-center">
{organization.canCreateCustomDomain && ( {organization.canCreateCustomDomain && (
<NewDomainDialog> <NewCompliancePageDomainDialog>
<Button icon={IconPlusLarge}>{__("Add Domain")}</Button> <Button icon={IconPlusLarge}>{__("Add Domain")}</Button>
</NewDomainDialog> </NewCompliancePageDomainDialog>
)} )}
</div> </div>
</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 { useFragment } from "react-relay";
import { graphql } from "relay-runtime"; 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 { CompliancePageDomainDialog } from "./CompliancePageDomainDialog";
import { DomainDialog } from "./DomainDialog"; import { DeleteCompliancePageDomainDialog } from "./DeleteCompliancePageDomainDialog";
const fragment = graphql` const fragment = graphql`
fragment DomainCardFragment on CustomDomain { fragment CompliancePageDomainCardFragment on CustomDomain {
domain domain
sslStatus sslStatus
canDelete: permission(action: "core:custom-domain:delete") 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 { fKey } = props;
const { __ } = useTranslate(); const { __ } = useTranslate();
const domain = useFragment<DomainCardFragment$key>(fragment, fKey); const domain = useFragment<CompliancePageDomainCardFragment$key>(fragment, fKey);
return ( return (
<Card> <Card>
@@ -49,14 +49,14 @@ export function DomainCard(props: { fKey: DomainCardFragment$key }) {
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<DomainDialog fKey={domain}> <CompliancePageDomainDialog fKey={domain}>
<Button variant="secondary">{__("View Details")}</Button> <Button variant="secondary">{__("View Details")}</Button>
</DomainDialog> </CompliancePageDomainDialog>
{domain.canDelete && ( {domain.canDelete && (
<DeleteDomainDialog domain={domain.domain}> <DeleteCompliancePageDomainDialog domain={domain.domain}>
<Button variant="danger">{__("Delete")}</Button> <Button variant="danger">{__("Delete")}</Button>
</DeleteDomainDialog> </DeleteCompliancePageDomainDialog>
)} )}
</div> </div>
</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 { useFragment } from "react-relay";
import { graphql } from "relay-runtime"; 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` const fragment = graphql`
fragment DomainDialogFragment on CustomDomain { fragment CompliancePageDomainDialogFragment on CustomDomain {
sslStatus sslStatus
domain domain
dnsRecords { dnsRecords {
@@ -28,15 +28,13 @@ const fragment = graphql`
ttl ttl
purpose purpose
} }
createdAt
updatedAt
sslExpiresAt 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 { children, fKey } = props;
const { __ } = useTranslate(); 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 ( return (
<Dialog <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 { type PropsWithChildren, useState } from "react";
import { graphql } from "relay-runtime"; 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 { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId"; import { useOrganizationId } from "#/hooks/useOrganizationId";
const deleteCustomDomainMutation = graphql` const deleteCustomDomainMutation = graphql`
mutation DeleteDomainDialogMutation($input: DeleteCustomDomainInput!) { mutation DeleteCompliancePageDomainDialogMutation($input: DeleteCustomDomainInput!) {
deleteCustomDomain(input: $input) { deleteCustomDomain(input: $input) {
deletedCustomDomainId deletedCustomDomainId
} }
} }
`; `;
type DeleteDomainDialogProps = PropsWithChildren<{ type DeleteCompliancePageDomainDialogProps = PropsWithChildren<{
domain: string; domain: string;
}>; }>;
export function DeleteDomainDialog(props: DeleteDomainDialogProps) { export function DeleteCompliancePageDomainDialog(props: DeleteCompliancePageDomainDialogProps) {
const { children, domain } = props; const { children, domain } = props;
const organizationId = useOrganizationId(); const organizationId = useOrganizationId();
@@ -37,7 +37,7 @@ export function DeleteDomainDialog(props: DeleteDomainDialogProps) {
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const [deleteCustomDomain, isDeleting] const [deleteCustomDomain, isDeleting]
= useMutationWithToasts<DeleteDomainDialogMutation>( = useMutationWithToasts<DeleteCompliancePageDomainDialogMutation>(
deleteCustomDomainMutation, deleteCustomDomainMutation,
{ {
successMessage: __("Domain deleted successfully"), 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 { graphql } from "relay-runtime";
import { z } from "zod"; 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 { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts"; import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { useOrganizationId } from "#/hooks/useOrganizationId"; import { useOrganizationId } from "#/hooks/useOrganizationId";
const createCustomDomainMutation = graphql` const createCustomDomainMutation = graphql`
mutation NewDomainDialogMutation($input: CreateCustomDomainInput!) { mutation NewCompliancePageDomainDialogMutation($input: CreateCustomDomainInput!) {
createCustomDomain(input: $input) { createCustomDomain(input: $input) {
customDomain { customDomain {
id id
@@ -50,7 +50,7 @@ const schema = z.object({
), ),
}); });
export function NewDomainDialog(props: PropsWithChildren) { export function NewCompliancePageDomainDialog(props: PropsWithChildren) {
const { children } = props; const { children } = props;
const organizationId = useOrganizationId(); const organizationId = useOrganizationId();
@@ -67,7 +67,7 @@ export function NewDomainDialog(props: PropsWithChildren) {
); );
const [createCustomDomain, isCreating] const [createCustomDomain, isCreating]
= useMutationWithToasts<NewDomainDialogMutation>(createCustomDomainMutation, { = useMutationWithToasts<NewCompliancePageDomainDialogMutation>(createCustomDomainMutation, {
successMessage: __( successMessage: __(
"Domain added successfully. Configure the DNS records to verify and activate your domain.", "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, Fallback: LinkCardSkeleton,
Component: lazy(() => import("#/pages/organizations/compliance-page/overview/CompliancePageOverviewPageLoader")), Component: lazy(() => import("#/pages/organizations/compliance-page/overview/CompliancePageOverviewPageLoader")),
}, },
{
path: "domain",
Fallback: LinkCardSkeleton,
Component: lazy(
() =>
import("#/pages/organizations/compliance-page/domain/CompliancePageDomainPageLoader"),
),
},
{ {
path: "references", path: "references",
Fallback: LinkCardSkeleton, 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"), import("./pages/iam/organizations/settings/MembersPageLoader"),
), ),
}, },
{
path: "domain",
Component: lazy(
() =>
import("./pages/organizations/settings/DomainSettingsPageLoader"),
),
},
{ {
path: "saml-sso", path: "saml-sso",
Component: lazy( Component: lazy(