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

Rename MembershipLayout and create ViewerLayout for identity context pages

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-01-07 11:25:36 +01:00
committed by Bryan Frimin
parent 62aacced71
commit 5e602d744b
17 changed files with 604 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/console/src/__generated__/iam/ViewerDropdownFragment.graphql.ts generated Normal file
View File

@@ -0,0 +1,64 @@
/**
* @generated SignedSource<<e7945358237630130f305751e60ad92a>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ViewerDropdownFragment$data = {
readonly canListAPIKeys: boolean;
readonly email: string;
readonly fullName: string;
readonly " $fragmentType": "ViewerDropdownFragment";
};
export type ViewerDropdownFragment$key = {
readonly " $data"?: ViewerDropdownFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"ViewerDropdownFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ViewerDropdownFragment",
"selections": [
{
"alias": "canListAPIKeys",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:personal-api-key:list"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:personal-api-key:list\")"
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"type": "Identity",
"abstractKey": null
};
(node as any).hash = "e96fe96007f4d949403890fda7180cba";
export default node;

24
apps/console/src/__generated__/iam/SessionDropdownSignOutMutation.graphql.ts → apps/console/src/__generated__/iam/ViewerDropdownSignOutMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8cb399eb2f38eaf3059531ea4bc3fa30>>
* @generated SignedSource<<93ee9324d2ee86042f9f46eda06d0770>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -9,15 +9,15 @@
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type SessionDropdownSignOutMutation$variables = Record<PropertyKey, never>;
export type SessionDropdownSignOutMutation$data = {
export type ViewerDropdownSignOutMutation$variables = Record<PropertyKey, never>;
export type ViewerDropdownSignOutMutation$data = {
readonly signOut: {
readonly success: boolean;
} | null | undefined;
};
export type SessionDropdownSignOutMutation = {
response: SessionDropdownSignOutMutation$data;
variables: SessionDropdownSignOutMutation$variables;
export type ViewerDropdownSignOutMutation = {
response: ViewerDropdownSignOutMutation$data;
variables: ViewerDropdownSignOutMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -46,7 +46,7 @@ return {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "SessionDropdownSignOutMutation",
"name": "ViewerDropdownSignOutMutation",
"selections": (v0/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -55,20 +55,20 @@ return {
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "SessionDropdownSignOutMutation",
"name": "ViewerDropdownSignOutMutation",
"selections": (v0/*: any*/)
},
"params": {
"cacheID": "a677190a127d7f75d5c629fab236a7a3",
"cacheID": "9252bcfdab3361ae1690a713e2765de3",
"id": null,
"metadata": {},
"name": "SessionDropdownSignOutMutation",
"name": "ViewerDropdownSignOutMutation",
"operationKind": "mutation",
"text": "mutation SessionDropdownSignOutMutation {\n signOut {\n success\n }\n}\n"
"text": "mutation ViewerDropdownSignOutMutation {\n signOut {\n success\n }\n}\n"
}
};
})();
(node as any).hash = "10c9bdf35ab3961c7488973e052cf978";
(node as any).hash = "a08b0de590063055e1ccbacd1d443a0f";
export default node;

120
apps/console/src/__generated__/iam/ViewerLayoutQuery.graphql.ts generated Normal file
View File

@@ -0,0 +1,120 @@
/**
* @generated SignedSource<<ecd129a1f62f100fe57ee9b08f9321d0>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ViewerLayoutQuery$variables = Record<PropertyKey, never>;
export type ViewerLayoutQuery$data = {
readonly viewer: {
readonly " $fragmentSpreads": FragmentRefs<"ViewerDropdownFragment">;
};
};
export type ViewerLayoutQuery = {
response: ViewerLayoutQuery$data;
variables: ViewerLayoutQuery$variables;
};
const node: ConcreteRequest = {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ViewerLayoutQuery",
"selections": [
{
"kind": "RequiredField",
"field": {
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "viewer",
"plural": false,
"selections": [
{
"args": null,
"kind": "FragmentSpread",
"name": "ViewerDropdownFragment"
}
],
"storageKey": null
},
"action": "THROW"
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "ViewerLayoutQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Identity",
"kind": "LinkedField",
"name": "viewer",
"plural": false,
"selections": [
{
"alias": "canListAPIKeys",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:personal-api-key:list"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:personal-api-key:list\")"
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "faf40277113685d45576f1b466123787",
"id": null,
"metadata": {},
"name": "ViewerLayoutQuery",
"operationKind": "query",
"text": "query ViewerLayoutQuery {\n viewer {\n ...ViewerDropdownFragment\n id\n }\n}\n\nfragment ViewerDropdownFragment on Identity {\n canListAPIKeys: permission(action: \"iam:personal-api-key:list\")\n email\n fullName\n}\n"
}
};
(node as any).hash = "48e174d981dbc9198a56aac976a20b21";
export default node;

44
apps/console/src/__generated__/iam/SessionDropdownFragment.graphql.ts → apps/console/src/__generated__/iam/ViewerMembershipDropdownFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<73d5a0059348fd0c5950ae3a873cc383>>
* @generated SignedSource<<a87fd05a4f80d2d7094647468d695967>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,42 +10,29 @@
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type SessionDropdownFragment$data = {
readonly canDelete: boolean;
export type ViewerMembershipDropdownFragment$data = {
readonly viewerMembership: {
readonly identity: {
readonly canListAPIKeys: boolean;
readonly email: string;
};
readonly profile: {
readonly fullName: string;
};
};
readonly " $fragmentType": "SessionDropdownFragment";
readonly " $fragmentType": "ViewerMembershipDropdownFragment";
};
export type SessionDropdownFragment$key = {
readonly " $data"?: SessionDropdownFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"SessionDropdownFragment">;
export type ViewerMembershipDropdownFragment$key = {
readonly " $data"?: ViewerMembershipDropdownFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"ViewerMembershipDropdownFragment">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "SessionDropdownFragment",
"name": "ViewerMembershipDropdownFragment",
"selections": [
{
"alias": "canDelete",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:organization:delete"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:organization:delete\")"
},
{
"kind": "RequiredField",
"field": {
@@ -72,6 +59,19 @@ const node: ReaderFragment = {
"kind": "ScalarField",
"name": "email",
"storageKey": null
},
{
"alias": "canListAPIKeys",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:personal-api-key:list"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:personal-api-key:list\")"
}
],
"storageKey": null
@@ -110,6 +110,6 @@ const node: ReaderFragment = {
"abstractKey": null
};
(node as any).hash = "51810eafbf165e7b5eeec42cb268ae54";
(node as any).hash = "82c179a1ec2b90ce5f12c0959f97150f";
export default node;

74
apps/console/src/__generated__/iam/ViewerMembershipDropdownSignOutMutation.graphql.ts generated Normal file
View File

@@ -0,0 +1,74 @@
/**
* @generated SignedSource<<5d6fc3e9d931dccebc57b68196c98bed>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type ViewerMembershipDropdownSignOutMutation$variables = Record<PropertyKey, never>;
export type ViewerMembershipDropdownSignOutMutation$data = {
readonly signOut: {
readonly success: boolean;
} | null | undefined;
};
export type ViewerMembershipDropdownSignOutMutation = {
response: ViewerMembershipDropdownSignOutMutation$data;
variables: ViewerMembershipDropdownSignOutMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"alias": null,
"args": null,
"concreteType": "SignOutPayload",
"kind": "LinkedField",
"name": "signOut",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "success",
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "ViewerMembershipDropdownSignOutMutation",
"selections": (v0/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [],
"kind": "Operation",
"name": "ViewerMembershipDropdownSignOutMutation",
"selections": (v0/*: any*/)
},
"params": {
"cacheID": "da5fc8d24f8fac6617c4e4de8d9a629d",
"id": null,
"metadata": {},
"name": "ViewerMembershipDropdownSignOutMutation",
"operationKind": "mutation",
"text": "mutation ViewerMembershipDropdownSignOutMutation {\n signOut {\n success\n }\n}\n"
}
};
})();
(node as any).hash = "856ff5d4affd9ad27871ab5f4fef3b1e";
export default node;

54
apps/console/src/__generated__/iam/MembershipLayoutQuery.graphql.ts → apps/console/src/__generated__/iam/ViewerMembershipLayoutQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<4268d9e187cf29b47f9438cf48cc3e73>>
* @generated SignedSource<<d089cfdf5c585ba8fcb83456438efe62>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -11,11 +11,11 @@
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type MembershipRole = "ADMIN" | "AUDITOR" | "EMPLOYEE" | "OWNER" | "VIEWER";
export type MembershipLayoutQuery$variables = {
export type ViewerMembershipLayoutQuery$variables = {
hideSidebar: boolean;
organizationId: string;
};
export type MembershipLayoutQuery$data = {
export type ViewerMembershipLayoutQuery$data = {
readonly organization: {
readonly __typename: "Organization";
readonly viewerMembership: {
@@ -24,7 +24,7 @@ export type MembershipLayoutQuery$data = {
};
readonly role: MembershipRole;
};
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_organizationFragment" | "SessionDropdownFragment" | "SidebarFragment">;
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_organizationFragment" | "SidebarFragment" | "ViewerMembershipDropdownFragment">;
} | {
// This will never be '%other', but we need some
// value in case none of the concrete values match.
@@ -38,9 +38,9 @@ export type MembershipLayoutQuery$data = {
readonly " $fragmentSpreads": FragmentRefs<"MembershipsDropdown_viewerFragment">;
};
};
export type MembershipLayoutQuery = {
response: MembershipLayoutQuery$data;
variables: MembershipLayoutQuery$variables;
export type ViewerMembershipLayoutQuery = {
response: ViewerMembershipLayoutQuery$data;
variables: ViewerMembershipLayoutQuery$variables;
};
const node: ConcreteRequest = (function(){
@@ -111,7 +111,7 @@ return {
],
"kind": "Fragment",
"metadata": null,
"name": "MembershipLayoutQuery",
"name": "ViewerMembershipLayoutQuery",
"selections": [
{
"kind": "RequiredField",
@@ -135,7 +135,7 @@ return {
{
"args": null,
"kind": "FragmentSpread",
"name": "SessionDropdownFragment"
"name": "ViewerMembershipDropdownFragment"
},
{
"condition": "hideSidebar",
@@ -242,7 +242,7 @@ return {
(v0/*: any*/)
],
"kind": "Operation",
"name": "MembershipLayoutQuery",
"name": "ViewerMembershipLayoutQuery",
"selections": [
{
"alias": "organization",
@@ -263,19 +263,6 @@ return {
"name": "name",
"storageKey": null
},
{
"alias": "canDelete",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:organization:delete"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:organization:delete\")"
},
{
"alias": null,
"args": null,
@@ -293,6 +280,19 @@ return {
"plural": false,
"selections": [
(v6/*: any*/),
{
"alias": "canListAPIKeys",
"args": [
{
"kind": "Literal",
"name": "action",
"value": "iam:personal-api-key:list"
}
],
"kind": "ScalarField",
"name": "permission",
"storageKey": "permission(action:\"iam:personal-api-key:list\")"
},
(v8/*: any*/)
],
"storageKey": null
@@ -618,16 +618,16 @@ return {
]
},
"params": {
"cacheID": "5f50873fa9c14115e307b43d7c1ae822",
"cacheID": "d7e0b080876472d059c97bf57818c697",
"id": null,
"metadata": {},
"name": "MembershipLayoutQuery",
"name": "ViewerMembershipLayoutQuery",
"operationKind": "query",
"text": "query MembershipLayoutQuery(\n $organizationId: ID!\n $hideSidebar: Boolean!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n ...MembershipsDropdown_organizationFragment\n ...SessionDropdownFragment\n ...SidebarFragment @skip(if: $hideSidebar)\n viewerMembership {\n role\n profile {\n fullName\n id\n }\n id\n }\n }\n id\n }\n viewer {\n email\n ...MembershipsDropdown_viewerFragment\n pendingInvitations {\n totalCount\n }\n id\n }\n}\n\nfragment MembershipsDropdown_organizationFragment on Organization {\n name\n}\n\nfragment MembershipsDropdown_viewerFragment on Identity {\n pendingInvitations {\n totalCount\n }\n}\n\nfragment SessionDropdownFragment on Organization {\n canDelete: permission(action: \"iam:organization:delete\")\n viewerMembership {\n identity {\n email\n id\n }\n profile {\n fullName\n id\n }\n id\n }\n}\n\nfragment SidebarFragment on Organization {\n canListMeetings: permission(action: \"core:meeting:list\")\n canListTasks: permission(action: \"core:task:list\")\n canListMeasures: permission(action: \"core:measures:list\")\n canListRisks: permission(action: \"core:risk:list\")\n canListFrameworks: permission(action: \"core:frameworks:list\")\n canListPeople: permission(action: \"core:people:list\")\n canListVendors: permission(action: \"core:vendor:list\")\n canListDocuments: permission(action: \"core:document:list\")\n canListAssets: permission(action: \"core:asset:list\")\n canListData: permission(action: \"core:datum:list\")\n canListAudits: permission(action: \"core:audit:list\")\n canListNonconformities: permission(action: \"core:nonconformity:list\")\n canListObligations: permission(action: \"core:obligation:list\")\n canListContinualImprovements: permission(action: \"core:continual-improvement:list\")\n canListProcessingActivities: permission(action: \"core:processing-activity:list\")\n canListRightsRequests: permission(action: \"core:rights-request:list\")\n canListSnapshots: permission(action: \"core:snapshot:list\")\n canGetTrustCenter: permission(action: \"core:trust-center:get\")\n canUpdateOrganization: permission(action: \"iam:organization:update\")\n canListStatesOfApplicability: permission(action: \"core:state-of-applicability:list\")\n}\n"
"text": "query ViewerMembershipLayoutQuery(\n $organizationId: ID!\n $hideSidebar: Boolean!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n ...MembershipsDropdown_organizationFragment\n ...ViewerMembershipDropdownFragment\n ...SidebarFragment @skip(if: $hideSidebar)\n viewerMembership {\n role\n profile {\n fullName\n id\n }\n id\n }\n }\n id\n }\n viewer {\n email\n ...MembershipsDropdown_viewerFragment\n pendingInvitations {\n totalCount\n }\n id\n }\n}\n\nfragment MembershipsDropdown_organizationFragment on Organization {\n name\n}\n\nfragment MembershipsDropdown_viewerFragment on Identity {\n pendingInvitations {\n totalCount\n }\n}\n\nfragment SidebarFragment on Organization {\n canListMeetings: permission(action: \"core:meeting:list\")\n canListTasks: permission(action: \"core:task:list\")\n canListMeasures: permission(action: \"core:measures:list\")\n canListRisks: permission(action: \"core:risk:list\")\n canListFrameworks: permission(action: \"core:frameworks:list\")\n canListPeople: permission(action: \"core:people:list\")\n canListVendors: permission(action: \"core:vendor:list\")\n canListDocuments: permission(action: \"core:document:list\")\n canListAssets: permission(action: \"core:asset:list\")\n canListData: permission(action: \"core:datum:list\")\n canListAudits: permission(action: \"core:audit:list\")\n canListNonconformities: permission(action: \"core:nonconformity:list\")\n canListObligations: permission(action: \"core:obligation:list\")\n canListContinualImprovements: permission(action: \"core:continual-improvement:list\")\n canListProcessingActivities: permission(action: \"core:processing-activity:list\")\n canListRightsRequests: permission(action: \"core:rights-request:list\")\n canListSnapshots: permission(action: \"core:snapshot:list\")\n canGetTrustCenter: permission(action: \"core:trust-center:get\")\n canUpdateOrganization: permission(action: \"iam:organization:update\")\n canListStatesOfApplicability: permission(action: \"core:state-of-applicability:list\")\n}\n\nfragment ViewerMembershipDropdownFragment on Organization {\n viewerMembership {\n identity {\n email\n canListAPIKeys: permission(action: \"iam:personal-api-key:list\")\n id\n }\n profile {\n fullName\n id\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "e52fc7540b2908e5b4f2c4cef33b5b81";
(node as any).hash = "298aba62d7920932f86433919c623d4c";
export default node;

42
apps/console/src/pages/iam/memberships/ViewerLayout.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { graphql, usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { Outlet } from "react-router";
import { CenteredLayout, Layout, Skeleton } from "@probo/ui";
import type { ViewerLayoutQuery } from "/__generated__/iam/ViewerLayoutQuery.graphql";
import { Suspense } from "react";
import { ViewerDropdown } from "./_components/ViewerDropdown";
export const viewerLayoutQuery = graphql`
query ViewerLayoutQuery {
viewer @required(action: THROW) {
...ViewerDropdownFragment
}
}
`;
export function ViewerLayout(props: {
hideSidebar?: boolean;
queryRef: PreloadedQuery<ViewerLayoutQuery>;
}) {
const { queryRef } = props;
const { viewer } = usePreloadedQuery<ViewerLayoutQuery>(
viewerLayoutQuery,
queryRef,
);
return (
<Layout
headerTrailing={
<div className="ml-auto">
<Suspense fallback={<Skeleton className="w-32 h-8" />}>
<ViewerDropdown fKey={viewer} />
</Suspense>
</div>
}
>
<CenteredLayout>
<Outlet />
</CenteredLayout>
</Layout>
);
}

33
apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useQueryLoader } from "react-relay";
import { Suspense, useEffect } from "react";
import { CenteredLayoutSkeleton } from "@probo/ui";
import type { ViewerLayoutQuery } from "/__generated__/iam/ViewerLayoutQuery.graphql";
import { ViewerLayout, viewerLayoutQuery } from "./ViewerLayout";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
function ViewerLayoutLoader() {
const [queryRef, loadQuery] =
useQueryLoader<ViewerLayoutQuery>(viewerLayoutQuery);
useEffect(() => {
loadQuery({});
}, [loadQuery]);
if (!queryRef) {
return <CenteredLayoutSkeleton />;
}
return (
<Suspense fallback={<CenteredLayoutSkeleton />}>
<ViewerLayout queryRef={queryRef} />
</Suspense>
);
}
export default function () {
return (
<IAMRelayProvider>
<ViewerLayoutLoader />
</IAMRelayProvider>
);
}

92
apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx Normal file
View File

@@ -0,0 +1,92 @@
import {
DropdownSeparator,
IconArrowBoxLeft,
IconCircleQuestionmark,
IconKey,
UserDropdown,
UserDropdownItem,
useToast,
} from "@probo/ui";
import { graphql } from "relay-runtime";
import { useFragment, useMutation } from "react-relay";
import { useTranslate } from "@probo/i18n";
import type { ViewerDropdownFragment$key } from "/__generated__/iam/ViewerDropdownFragment.graphql";
import { formatError } from "@probo/helpers";
export const fragment = graphql`
fragment ViewerDropdownFragment on Identity {
canListAPIKeys: permission(action: "iam:personal-api-key:list")
email
fullName
}
`;
const signOutMutation = graphql`
mutation ViewerDropdownSignOutMutation {
signOut {
success
}
}
`;
export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
const { fKey } = props;
const { __ } = useTranslate();
const { toast } = useToast();
const { canListAPIKeys, email, fullName } =
useFragment<ViewerDropdownFragment$key>(fragment, fKey);
const [signOut] = useMutation(signOutMutation);
const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
e.preventDefault();
signOut({
variables: {},
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Request failed"),
description: formatError(__("Cannot sign out"), e),
variant: "error",
});
return;
}
window.location.reload();
},
onError: (e) => {
toast({
title: __("Error"),
description: e.message,
variant: "error",
});
},
});
};
return (
<UserDropdown fullName={fullName} email={email}>
{canListAPIKeys && (
<UserDropdownItem
to="/me/api-keys"
icon={IconKey}
label={__("API Keys")}
/>
)}
<UserDropdownItem
to="mailto:support@getprobo.com"
icon={IconCircleQuestionmark}
label={__("Help")}
/>
<DropdownSeparator />
<UserDropdownItem
variant="danger"
to="/logout"
icon={IconArrowBoxLeft}
label="Logout"
onClick={handleLogout}
/>
</UserDropdown>
);
}

74
apps/console/src/pages/iam/memberships/MembershipLayout.tsx → apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx
View File

@@ -1,22 +1,25 @@
import { graphql, usePreloadedQuery, type PreloadedQuery } from "react-relay";
import { Link, Outlet } from "react-router";
import { Badge, Button, IconPeopleAdd, Layout, Skeleton } from "@probo/ui";
import { Sidebar } from "./_components/Sidebar";
import { MembershipsDropdown } from "./MembershipsDropdown";
import type { MembershipLayoutQuery } from "/__generated__/iam/MembershipLayoutQuery.graphql";
import { SessionDropdown } from "./_components/SessionDropdown";
import { Sidebar } from "../memberships/_components/Sidebar";
import { MembershipsDropdown } from "../memberships/MembershipsDropdown";
import type { ViewerMembershipLayoutQuery } from "/__generated__/iam/ViewerMembershipLayoutQuery.graphql";
import { ViewerMembershipDropdown } from "./_components/ViewerMembershipDropdown";
import { Suspense } from "react";
import { useTranslate } from "@probo/i18n";
import { CoreRelayProvider } from "/providers/CoreRelayProvider";
import { CurrentUser } from "/providers/CurrentUser";
export const membershipLayoutQuery = graphql`
query MembershipLayoutQuery($organizationId: ID!, $hideSidebar: Boolean!) {
export const viewerMembershipLayoutQuery = graphql`
query ViewerMembershipLayoutQuery(
$organizationId: ID!
$hideSidebar: Boolean!
) {
organization: node(id: $organizationId) @required(action: THROW) {
__typename
... on Organization {
...MembershipsDropdown_organizationFragment
...SessionDropdownFragment
...ViewerMembershipDropdownFragment
...SidebarFragment @skip(if: $hideSidebar)
viewerMembership @required(action: THROW) {
role
@@ -36,49 +39,50 @@ export const membershipLayoutQuery = graphql`
}
`;
export function MembershipLayout(props: {
export function ViewerMembershipLayout(props: {
hideSidebar?: boolean;
queryRef: PreloadedQuery<MembershipLayoutQuery>;
queryRef: PreloadedQuery<ViewerMembershipLayoutQuery>;
}) {
const { hideSidebar = false, queryRef } = props;
const { __ } = useTranslate();
const { organization, viewer } = usePreloadedQuery<MembershipLayoutQuery>(
membershipLayoutQuery,
queryRef,
);
const { organization, viewer } =
usePreloadedQuery<ViewerMembershipLayoutQuery>(
viewerMembershipLayoutQuery,
queryRef,
);
if (organization.__typename !== "Organization") {
throw new Error("invalid type for organization node");
}
return (
<Layout
header={
headerLeading={
<>
<div className="mr-auto">
<MembershipsDropdown
organizationFKey={organization}
viewerFKey={viewer}
/>
{viewer.pendingInvitations.totalCount > 0 && (
<Link to="/" className="relative" title={__("Invitations")}>
<Button variant="tertiary" icon={IconPeopleAdd} />
<Badge
variant="info"
size="sm"
className="absolute -top-1 -right-1 min-w-[20px] h-5 flex items-center justify-center"
>
{viewer.pendingInvitations.totalCount}
</Badge>
</Link>
)}
</div>
<Suspense fallback={<Skeleton className="w-32 h-8" />}>
<SessionDropdown fKey={organization} />
</Suspense>
<MembershipsDropdown
organizationFKey={organization}
viewerFKey={viewer}
/>
{viewer.pendingInvitations.totalCount > 0 && (
<Link to="/" className="relative" title={__("Invitations")}>
<Button variant="tertiary" icon={IconPeopleAdd} />
<Badge
variant="info"
size="sm"
className="absolute -top-1 -right-1 min-w-[20px] h-5 flex items-center justify-center"
>
{viewer.pendingInvitations.totalCount}
</Badge>
</Link>
)}
</>
}
headerTrailing={
<Suspense fallback={<Skeleton className="w-32 h-8" />}>
<ViewerMembershipDropdown fKey={organization} />
</Suspense>
}
sidebar={!hideSidebar && <Sidebar fKey={organization} />}
>
<CoreRelayProvider>

13
apps/console/src/pages/iam/memberships/MembershipLayoutLoader.tsx → apps/console/src/pages/iam/organizations/ViewerMembershipLayoutLoader.tsx
View File

@@ -2,14 +2,17 @@ import { useQueryLoader } from "react-relay";
import { Suspense, useEffect } from "react";
import { Skeleton } from "@probo/ui";
import { useOrganizationId } from "/hooks/useOrganizationId";
import type { MembershipLayoutQuery } from "/__generated__/iam/MembershipLayoutQuery.graphql";
import { MembershipLayout, membershipLayoutQuery } from "./MembershipLayout";
import type { ViewerMembershipLayoutQuery } from "/__generated__/iam/ViewerMembershipLayoutQuery.graphql";
import {
ViewerMembershipLayout,
viewerMembershipLayoutQuery,
} from "./ViewerMembershipLayout";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
function MembershipLayoutLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<MembershipLayoutQuery>(
membershipLayoutQuery,
const [queryRef, loadQuery] = useQueryLoader<ViewerMembershipLayoutQuery>(
viewerMembershipLayoutQuery,
);
useEffect(() => {
@@ -25,7 +28,7 @@ function MembershipLayoutLoader() {
return (
<Suspense fallback={<Skeleton className="w-full h-screen" />}>
<MembershipLayout queryRef={queryRef} />
<ViewerMembershipLayout queryRef={queryRef} />
</Suspense>
);
}

19
apps/console/src/pages/iam/memberships/_components/SessionDropdown.tsx → apps/console/src/pages/iam/organizations/_components/ViewerMembershipDropdown.tsx
View File

@@ -12,15 +12,15 @@ import { graphql } from "relay-runtime";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useFragment, useMutation } from "react-relay";
import { useTranslate } from "@probo/i18n";
import type { SessionDropdownFragment$key } from "/__generated__/iam/SessionDropdownFragment.graphql";
import type { ViewerMembershipDropdownFragment$key } from "/__generated__/iam/ViewerMembershipDropdownFragment.graphql";
import { formatError } from "@probo/helpers";
export const fragment = graphql`
fragment SessionDropdownFragment on Organization {
canDelete: permission(action: "iam:organization:delete")
fragment ViewerMembershipDropdownFragment on Organization {
viewerMembership @required(action: THROW) {
identity @required(action: THROW) {
email
canListAPIKeys: permission(action: "iam:personal-api-key:list")
}
profile @required(action: THROW) {
fullName
@@ -30,14 +30,16 @@ export const fragment = graphql`
`;
const signOutMutation = graphql`
mutation SessionDropdownSignOutMutation {
mutation ViewerMembershipDropdownSignOutMutation {
signOut {
success
}
}
`;
export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
export function ViewerMembershipDropdown(props: {
fKey: ViewerMembershipDropdownFragment$key;
}) {
const { fKey } = props;
const { __ } = useTranslate();
@@ -45,12 +47,11 @@ export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
const { toast } = useToast();
const {
canDelete,
viewerMembership: {
identity: { email },
identity: { canListAPIKeys, email },
profile: { fullName },
},
} = useFragment<SessionDropdownFragment$key>(fragment, fKey);
} = useFragment<ViewerMembershipDropdownFragment$key>(fragment, fKey);
const [signOut] = useMutation(signOutMutation);
const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
@@ -81,7 +82,7 @@ export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
return (
<UserDropdown fullName={fullName} email={email}>
{canDelete && (
{canListAPIKeys && (
<UserDropdownItem
to="/me/api-keys"
icon={IconKey}

14
apps/console/src/pages/organizations/employee/EmployeeLayoutLoader.tsx
View File

@@ -4,15 +4,15 @@ import { Skeleton } from "@probo/ui";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
import {
MembershipLayout,
membershipLayoutQuery,
} from "/pages/iam/memberships/MembershipLayout";
import type { MembershipLayoutQuery } from "/__generated__/iam/MembershipLayoutQuery.graphql";
ViewerMembershipLayout,
viewerMembershipLayoutQuery,
} from "../../iam/organizations/ViewerMembershipLayout";
import type { ViewerMembershipLayoutQuery } from "/__generated__/iam/ViewerMembershipLayoutQuery.graphql";
function EmployeeLayoutLoader() {
const organizationId = useOrganizationId();
const [queryRef, loadQuery] = useQueryLoader<MembershipLayoutQuery>(
membershipLayoutQuery,
const [queryRef, loadQuery] = useQueryLoader<ViewerMembershipLayoutQuery>(
viewerMembershipLayoutQuery,
);
useEffect(() => {
@@ -28,7 +28,7 @@ function EmployeeLayoutLoader() {
return (
<Suspense fallback={<Skeleton className="w-full h-screen" />}>
<MembershipLayout queryRef={queryRef} hideSidebar />
<ViewerMembershipLayout queryRef={queryRef} hideSidebar />
</Suspense>
);
}

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

@@ -4,7 +4,7 @@ import {
redirect,
useRouteError,
} from "react-router";
import { CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
import { CenteredLayoutSkeleton } from "@probo/ui";
import { PageSkeleton } from "./components/skeletons/PageSkeleton.tsx";
import { riskRoutes } from "./routes/riskRoutes.ts";
import { measureRoutes } from "./routes/measureRoutes.ts";
@@ -103,7 +103,7 @@ const routes = [
},
{
path: "/",
Component: CenteredLayout,
Component: lazy(() => import("./pages/iam/memberships/ViewerLayoutLoader")),
Fallback: CenteredLayoutSkeleton,
ErrorBoundary: ErrorBoundary,
children: [
@@ -158,7 +158,7 @@ const routes = [
{
path: "/organizations/:organizationId",
Component: lazy(
() => import("./pages/iam/memberships/MembershipLayoutLoader"),
() => import("./pages/iam/organizations/ViewerMembershipLayoutLoader"),
),
ErrorBoundary: ErrorBoundary,
children: [

30
packages/ui/src/Layouts/CenteredLayout.tsx
View File

@@ -3,22 +3,22 @@ import { Outlet } from "react-router";
import { Skeleton } from "../Atoms/Skeleton/Skeleton";
export function CenteredLayout({ children }: PropsWithChildren) {
return (
<div className="grid place-items-center min-h-screen text-txt-primary bg-level-0">
<div className="w-full max-w-2xl flex flex-col items-center">
{children ?? <Outlet />}
</div>
</div>
);
return (
<div className="grid place-items-center min-h-[calc(100vh-48px-(2*48px))] text-txt-primary bg-level-0">
<div className="w-full max-w-2xl flex flex-col items-center">
{children ?? <Outlet />}
</div>
</div>
);
}
export function CenteredLayoutSkeleton() {
return (
<CenteredLayout>
<div className="w-full max-w-2xl flex flex-col items-center space-y-6">
<Skeleton className="w-77 h-9" />
<Skeleton className="w-full h-20" />
</div>
</CenteredLayout>
);
return (
<CenteredLayout>
<div className="w-full max-w-2xl flex flex-col items-center space-y-6">
<Skeleton className="w-77 h-9" />
<Skeleton className="w-full h-20" />
</div>
</CenteredLayout>
);
}

44
packages/ui/src/Layouts/Layout.tsx
View File

@@ -13,17 +13,24 @@ import { Toasts } from "../Atoms/Toasts/Toasts.tsx";
import { createPortal } from "react-dom";
import clsx from "clsx";
import { ConfirmDialog } from "../Molecules/Dialog/ConfirmDialog.tsx";
import { Link } from "react-router";
type Props = PropsWithChildren<{
header: ReactNode;
sidebar: ReactNode;
headerLeading?: ReactNode;
headerTrailing: ReactNode;
sidebar?: ReactNode;
}>;
const LayoutContext = createContext({
setDrawer: (() => {}) as (v: boolean) => void,
});
export function Layout({ header, sidebar, children }: Props) {
export function Layout({
headerLeading,
headerTrailing,
sidebar,
children,
}: Props) {
const [hasDrawer, setDrawer] = useState(false);
const layoutContext = useMemo(
() => ({
@@ -35,18 +42,25 @@ export function Layout({ header, sidebar, children }: Props) {
<LayoutContext value={layoutContext}>
<div className="text-txt-primary bg-level-0">
<header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-0">
<Logo className="w-12 h-5" />
<svg
className="mx-3 text-txt-tertiary"
width="8"
height="18"
viewBox="0 0 8 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1 17L7 1" stroke="currentColor" />
</svg>
{header}
<Link to="/">
<Logo className="w-12 h-5" />
</Link>
{headerLeading && (
<>
<svg
className="mx-3 text-txt-tertiary"
width="8"
height="18"
viewBox="0 0 8 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1 17L7 1" stroke="currentColor" />
</svg>
{headerLeading}
</>
)}
<div className="ml-auto">{headerTrailing}</div>
</header>
<div className="flex h-screen" id="main">
{sidebar && <Sidebar>{sidebar}</Sidebar>}

13
pkg/server/api/connect/v1/v1_resolver.go
View File

@@ -1528,14 +1528,15 @@ func (r *queryResolver) Node(ctx context.Context, id gid.GID) (types.Node, error
// Viewer is the resolver for the viewer field.
func (r *queryResolver) Viewer(ctx context.Context) (*types.Identity, error) {
user := IdentityFromContext(ctx)
identity := IdentityFromContext(ctx)
return &types.Identity{
ID: user.ID,
Email: user.EmailAddress,
EmailVerified: user.EmailAddressVerified,
CreatedAt: user.CreatedAt,
UpdatedAt: user.UpdatedAt,
ID: identity.ID,
Email: identity.EmailAddress,
EmailVerified: identity.EmailAddressVerified,
FullName: identity.FullName,
CreatedAt: identity.CreatedAt,
UpdatedAt: identity.UpdatedAt,
}, nil
}