diff --git a/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts b/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts new file mode 100644 index 000000000..c6ddb6093 --- /dev/null +++ b/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts @@ -0,0 +1,164 @@ +/** + * @generated SignedSource<<6b8fb96ca82a23677b5a8d4b22b1685f>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type CompliancePageLayoutQuery$variables = { + organizationId: string; +}; +export type CompliancePageLayoutQuery$data = { + readonly organization: { + readonly __typename: "Organization"; + readonly trustCenter: { + readonly active: boolean; + } | null | undefined; + } | { + // This will never be '%other', but we need some + // value in case none of the concrete values match. + readonly __typename: "%other"; + }; +}; +export type CompliancePageLayoutQuery = { + response: CompliancePageLayoutQuery$data; + variables: CompliancePageLayoutQuery$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": "__typename", + "storageKey": null +}, +v3 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "active", + "storageKey": null +}, +v4 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "CompliancePageLayoutQuery", + "selections": [ + { + "alias": "organization", + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v2/*: any*/), + { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "TrustCenter", + "kind": "LinkedField", + "name": "trustCenter", + "plural": false, + "selections": [ + (v3/*: any*/) + ], + "storageKey": null + } + ], + "type": "Organization", + "abstractKey": null + } + ], + "storageKey": null + } + ], + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Operation", + "name": "CompliancePageLayoutQuery", + "selections": [ + { + "alias": "organization", + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v2/*: any*/), + { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "TrustCenter", + "kind": "LinkedField", + "name": "trustCenter", + "plural": false, + "selections": [ + (v3/*: any*/), + (v4/*: any*/) + ], + "storageKey": null + } + ], + "type": "Organization", + "abstractKey": null + }, + (v4/*: any*/) + ], + "storageKey": null + } + ] + }, + "params": { + "cacheID": "dca289c0f586e539bfee9c68ccd14e37", + "id": null, + "metadata": {}, + "name": "CompliancePageLayoutQuery", + "operationKind": "query", + "text": "query CompliancePageLayoutQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n trustCenter {\n active\n id\n }\n }\n id\n }\n}\n" + } +}; +})(); + +(node as any).hash = "0134cd2bfcc281c33161c3693172af0c"; + +export default node; diff --git a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx index 499116149..86b5efee6 100644 --- a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx +++ b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx @@ -198,11 +198,18 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) { /> )} {organization.canGetTrustCenter && ( - + <> + + + )} {organization.canUpdateOrganization && ( }) { + const { queryRef } = props; + + const organizationId = useOrganizationId(); + const { __ } = useTranslate(); + + usePageTitle(__("Compliance Page")); + + const { organization } = usePreloadedQuery(compliancePageLayoutQuery, queryRef); + if (organization.__typename !== "Organization") { + throw new Error("invalid type for node"); + } + + return ( +
+ + + {organization.trustCenter?.active ? __("Active") : __("Inactive")} + + + + + + + {__("Overview")} + + + + {__("Trusted by")} + + + + {__("Audits")} + + + + {__("Documents")} + + + + {__("Files")} + + + + {__("Vendors")} + + + + {__("Access")} + + + + +
+ ); +} diff --git a/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx b/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx new file mode 100644 index 000000000..0435b2c29 --- /dev/null +++ b/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx @@ -0,0 +1,32 @@ +import { useEffect } from "react"; +import { useQueryLoader } from "react-relay"; + +import type { CompliancePageLayoutQuery } from "#/__generated__/core/CompliancePageLayoutQuery.graphql"; +import { PageSkeleton } from "#/components/skeletons/PageSkeleton"; +import { useOrganizationId } from "#/hooks/useOrganizationId"; +import { CoreRelayProvider } from "#/providers/CoreRelayProvider"; + +import { CompliancePageLayout, compliancePageLayoutQuery } from "./CompliancePageLayout"; + +function CompliancePageLayoutQueryLoader() { + const organizationId = useOrganizationId(); + const [queryRef, loadQuery] = useQueryLoader(compliancePageLayoutQuery); + + useEffect(() => { + if (!queryRef) { + loadQuery({ organizationId }); + } + }); + + if (!queryRef) return ; + + return ; +} + +export default function CompliancePageLayoutLoader() { + return ( + + + + ); +} diff --git a/apps/console/src/pages/organizations/compliance-page/routes.ts b/apps/console/src/pages/organizations/compliance-page/routes.ts new file mode 100644 index 000000000..75894c25b --- /dev/null +++ b/apps/console/src/pages/organizations/compliance-page/routes.ts @@ -0,0 +1,11 @@ +import { lazy } from "@probo/react-lazy"; + +import { PageSkeleton } from "#/components/skeletons/PageSkeleton"; + +export const compliancePageRoutes = [ + { + path: "compliance-page", + Fallback: PageSkeleton, + Component: lazy(() => import("#/pages/organizations/compliance-page/CompliancePageLayoutLoader")), + }, +]; diff --git a/apps/console/src/routes.tsx b/apps/console/src/routes.tsx index 834ec3f07..ff0280703 100644 --- a/apps/console/src/routes.tsx +++ b/apps/console/src/routes.tsx @@ -16,6 +16,7 @@ import { import { PageError } from "./components/PageError"; import { PageSkeleton } from "./components/skeletons/PageSkeleton"; import { ViewerLayoutLoading } from "./pages/iam/memberships/ViewerLayoutLoading"; +import { compliancePageRoutes } from "./pages/organizations/compliance-page/routes"; import { CurrentUser } from "./providers/CurrentUser"; import { assetRoutes } from "./routes/assetRoutes"; import { auditRoutes } from "./routes/auditRoutes"; @@ -248,6 +249,7 @@ const routes = [ ...rightsRequestRoutes, ...processingActivityRoutes, ...statesOfApplicabilityRoutes, + ...compliancePageRoutes, ...trustCenterRoutes, ...snapshotsRoutes, {