Add user assignment to tenant

Author: raphaelblum

demo-saas/admin/src/common/AssignDialog.tsx

@@ -0,0 +1,51 @@
+// TODO: copy from a project, validate it
+
+import { useApolloClient } from "@apollo/client";
+import { CancelButton, Dialog, SaveBoundary, SaveBoundarySaveButton } from "@comet/admin";
+import { DialogActions, DialogContent } from "@mui/material";
+import { type PropsWithChildren, type ReactNode } from "react";
+import { FormattedMessage } from "react-intl";
+
+type Props = {
+    onDialogClose: () => void;
+    open: boolean;
+    apolloCacheName?: string;
+    title?: ReactNode;
+};
+
+export const AssignDialog = ({ onDialogClose, open, apolloCacheName, children, title }: PropsWithChildren<Props>) => {
+    const client = useApolloClient();
+
+    return (
+        <SaveBoundary
+            onAfterSave={() => {
+                onDialogClose();
+                if (apolloCacheName) {
+                    client.cache.evict({ fieldName: apolloCacheName });
+                }
+            }}
+        >
+            <Dialog
+                open={open}
+                onClose={() => {
+                    onDialogClose();
+                }}
+                maxWidth="lg"
+                title={title}
+            >
+                <DialogContent>{children}</DialogContent>
+
+                <DialogActions>
+                    <CancelButton
+                        onClick={() => {
+                            onDialogClose();
+                        }}
+                    />
+                    <SaveBoundarySaveButton disabled={false}>
+                        <FormattedMessage id="common.assignSelection" defaultMessage="Assign selection" />
+                    </SaveBoundarySaveButton>
+                </DialogActions>
+            </Dialog>
+        </SaveBoundary>
+    );
+};

demo-saas/admin/src/tenants/TenantsPage.tsx

@@ -1,5 +1,6 @@
 import { useApolloClient } from "@apollo/client";
 import {
+    Button,
     FieldSet,
     FillSpace,
     FullHeightContent,
@@ -17,13 +18,18 @@ import {
     ToolbarBackButton,
     useStackSwitch,
 } from "@comet/admin";
+import { Add } from "@comet/admin-icons";
 import { ContentScopeIndicator, useContentScopeConfig } from "@comet/cms-admin";
+import { AssignDialog } from "@src/common/AssignDialog";
+import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { DepartmentForm } from "./departments/generated/DepartmentForm";
 import { DepartmentsGrid } from "./departments/generated/DepartmentsGrid";
 import { TenantForm } from "./generated/TenantForm";
 import { TenantsGrid } from "./generated/TenantsGrid";
+import { AssignTenantUser } from "./users/AssignTenantUser";
+import { TenantUsersGrid } from "./users/generated/TenantUsersGrid";
 
 const FormToolbar = () => (
     <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
@@ -42,6 +48,7 @@ export function TenantsPage() {
     const [TenantsStackSwitch, tenantsStackSwitchApi] = useStackSwitch();
     const [DepartmentsStackSwitch, departmentsStackSwitchApi] = useStackSwitch();
     const client = useApolloClient();
+    const [dialogOpen, setDialogOpen] = useState(false);
 
     return (
         <Stack topLevelTitle={<FormattedMessage id="tenants.tenants" defaultMessage="Tenants" />}>
@@ -133,6 +140,26 @@ export function TenantsPage() {
                                                 </StackPage>
                                             </DepartmentsStackSwitch>
                                         </RouterTab>
+                                        <RouterTab path="/users" label={<FormattedMessage id="tenants.users" defaultMessage="Users" />}>
+                                            <FullHeightContent>
+                                                <TenantUsersGrid
+                                                    tenant={selectedTenantId}
+                                                    toolbarAction={
+                                                        <Button responsive startIcon={<Add />} onClick={() => setDialogOpen(true)}>
+                                                            <FormattedMessage id="tenants.user.assign" defaultMessage="Assign user" />
+                                                        </Button>
+                                                    }
+                                                />
+                                            </FullHeightContent>
+                                            <AssignDialog
+                                                title={<FormattedMessage id="tenants.assignUsers.dialog.title" defaultMessage="Assign Users" />}
+                                                apolloCacheName="tenantUsers"
+                                                onDialogClose={() => setDialogOpen(false)}
+                                                open={dialogOpen}
+                                            >
+                                                <AssignTenantUser tenantId={selectedTenantId} onDialogClose={() => setDialogOpen(false)} />
+                                            </AssignDialog>
+                                        </RouterTab>
                                     </RouterTabs>
                                 </StackMainContent>
                             </>

demo-saas/admin/src/tenants/users/AssignTenantUser.tsx

@@ -0,0 +1,52 @@
+import { gql, useApolloClient } from "@apollo/client";
+import { MainContent, Savable } from "@comet/admin";
+import { useState } from "react";
+
+import { type GQLCreateTenantUserMutation, type GQLCreateTenantUserMutationVariables } from "./AssignTenantUser.generated";
+import { UserPermissionsUsersGrid } from "./generated/AssignUsersGrid";
+
+const createTenantUserQuery = gql`
+    mutation CreateTenantUser($tenant: ID!, $userId: String!) {
+        createTenantUser(tenant: $tenant, input: { userId: $userId }) {
+            id
+        }
+    }
+`;
+
+type AssignTenantUserProps = {
+    tenantId: string;
+    onDialogClose: () => void;
+};
+
+export const AssignTenantUser = ({ tenantId, onDialogClose }: AssignTenantUserProps) => {
+    const client = useApolloClient();
+    const [values, setValues] = useState<string[]>([]);
+
+    return (
+        <>
+            <Savable
+                doSave={async () => {
+                    for (const userId of values) {
+                        await client.mutate<GQLCreateTenantUserMutation, GQLCreateTenantUserMutationVariables>({
+                            mutation: createTenantUserQuery,
+                            variables: { tenant: tenantId, userId },
+                        });
+                    }
+                    return true;
+                }}
+                hasChanges={values.length > 0}
+                doReset={() => {
+                    setValues([]);
+                }}
+            />
+            <MainContent disablePadding sx={{ height: 500 }}>
+                <UserPermissionsUsersGrid
+                    rowSelectionModel={values}
+                    onRowSelectionModelChange={(newUserSelection) => {
+                        setValues(newUserSelection.map((rowId) => String(rowId)));
+                    }}
+                />
+            </MainContent>
+        </>
+    );
+};

demo-saas/admin/src/tenants/users/AssignUsersGrid.cometGen.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "@comet/admin-generator";
+import { type GQLUserPermissionsUser } from "@src/graphql.generated";
+
+export default defineConfig<GQLUserPermissionsUser>({
+    type: "grid",
+    gqlType: "UserPermissionsUser",
+    fragmentName: "AssignTenantUsersGrid",
+    queryParamsPrefix: "assignTenantUsers",
+    selectionProps: "multiSelect",
+    add: false,
+    edit: false,
+    delete: false,
+    columns: [{ type: "text", name: "name", headerName: "Name" }],
+});

demo-saas/admin/src/tenants/users/TenantUsersGrid.cometGen.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "@comet/admin-generator";
+import { type GQLTenantUser } from "@src/graphql.generated";
+
+export default defineConfig<GQLTenantUser>({
+    type: "grid",
+    gqlType: "TenantUser",
+    fragmentName: "TenantUsersGrid",
+    queryParamsPrefix: "tenantUsers",
+    newEntryText: "Assign User",
+    edit: false,
+    toolbarActionProp: true,
+    columns: [
+        { type: "text", name: "userName", headerName: "User" },
+        { type: "text", name: "tenant.name", headerName: "Tenant" },
+    ],
+});