@firecms/user_management 3.0.0-canary.8 → 3.0.0-canary.9

package/src/components/roles/RoleChip.tsx

@@ -1,5 +1,5 @@
 import { Chip, getColorSchemeForSeed } from "@firecms/ui";
-import { Role } from "../../types";
+import { Role } from "@firecms/core";
 
 export type RoleChipProps = {
     role: Role;

package/src/components/roles/RolesDetailsForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import * as Yup from "yup";
 
-import { EntityCollection, FieldCaption, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, FieldCaption, Role, toSnakeCase, } from "@firecms/core";
 import {
     Button,
     Checkbox,
@@ -24,7 +24,6 @@ import {
 } from "@firecms/ui";
 import { useUserManagement } from "../../hooks";
 import { Formex, getIn, useCreateFormex } from "@firecms/formex";
-import { Role } from "../../types";
 
 export const RoleYupSchema = Yup.object().shape({
     id: Yup.string().required("Required"),

package/src/components/roles/RolesTable.tsx

@@ -13,9 +13,8 @@ import {
     Tooltip,
     Typography
 } from "@firecms/ui";
-import { DeleteConfirmationDialog } from "@firecms/core";
+import { DeleteConfirmationDialog, Role } from "@firecms/core";
 import { useUserManagement } from "../../hooks";
-import { Role } from "../../types";
 import { RoleChip } from "./RoleChip";
 import { DEFAULT_ROLES } from "./default_roles";
 

package/src/components/roles/RolesView.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from "react";
 
-import { useNavigationController } from "@firecms/core";
+import { Role, useNavigationController } from "@firecms/core";
 import { AddIcon, Button, Container, Tooltip, Typography } from "@firecms/ui";
 import { RolesTable } from "./RolesTable";
 import { RolesDetailsForm } from "./RolesDetailsForm";
 import { useUserManagement } from "../../hooks";
-import { Role } from "../../types";
 
 export const RolesView = React.memo(
     function RolesView({ children }: { children?: React.ReactNode }) {

package/src/components/roles/default_roles.tsx

@@ -1,4 +1,4 @@
-import { Role } from "../../types";
+import { Role } from "@firecms/core";
 
 export const DEFAULT_ROLES: Role[] = [
     {

package/src/components/users/UserDetailsForm.tsx

@@ -12,10 +12,9 @@ import {
     TextField,
     Typography,
 } from "@firecms/ui";
-import { FieldCaption, useSnackbarController } from "@firecms/core";
+import { FieldCaption, Role, User, useSnackbarController } from "@firecms/core";
 import { Formex, useCreateFormex } from "@firecms/formex";
 
-import { Role, UserWithRoles } from "../../types";
 import { areRolesEqual } from "../../utils";
 import { useUserManagement } from "../../hooks";
 import { RoleChip } from "../roles";
@@ -26,17 +25,17 @@ export const UserYupSchema = Yup.object().shape({
     roles: Yup.array().min(1)
 });
 
-function canUserBeEdited(loggedUser: UserWithRoles, user: UserWithRoles, users: UserWithRoles[], roles: Role[], prevUser?: UserWithRoles) {
-    const admins = users.filter(u => u.roles.map(r => r.id).includes("admin"));
-    const loggedUserIsAdmin = loggedUser.roles.map(r => r.id).includes("admin");
-    const didRolesChange = !prevUser || !areRolesEqual(prevUser.roles, user.roles);
+function canUserBeEdited(loggedUser: User, user: User, users: User[], roles: Role[], prevUser?: User) {
+    const admins = users.filter(u => u.roles?.map(r => r.id).includes("admin"));
+    const loggedUserIsAdmin = loggedUser.roles?.map(r => r.id).includes("admin");
+    const didRolesChange = !prevUser || !areRolesEqual(prevUser.roles ?? [], user.roles ?? []);
 
     if (didRolesChange && !loggedUserIsAdmin) {
         throw new Error("Only admins can change roles");
     }
 
     // was the admin role removed
-    const adminRoleRemoved = prevUser && prevUser.roles.map(r => r.id).includes("admin") && !user.roles.map(r => r.id).includes("admin");
+    const adminRoleRemoved = prevUser && prevUser.roles?.map(r => r.id).includes("admin") && !user.roles?.map(r => r.id).includes("admin");
 
     // avoid removing the last admin
     if (adminRoleRemoved && admins.length === 1) {
@@ -51,7 +50,7 @@ export function UserDetailsForm({
                                     handleClose
                                 }: {
     open: boolean,
-    user?: UserWithRoles,
+    user?: User,
     handleClose: () => void
 }) {
 
@@ -64,7 +63,7 @@ export function UserDetailsForm({
     } = useUserManagement();
     const isNewUser = !userProp;
 
-    const onUserUpdated = useCallback((savedUser: UserWithRoles): Promise<UserWithRoles> => {
+    const onUserUpdated = useCallback((savedUser: User): Promise<User> => {
         if (!loggedInUser) {
             throw new Error("Logged user not found");
         }
@@ -81,7 +80,7 @@ export function UserDetailsForm({
             displayName: "",
             email: "",
             roles: roles.filter(r => r.id === "editor")
-        } as UserWithRoles,
+        } as User,
         validation: (values) => {
             return UserYupSchema.validate(values, { abortEarly: false })
                 .then(() => {
@@ -93,7 +92,7 @@ export function UserDetailsForm({
                     }, {});
                 });
         },
-        onSubmit: (user: UserWithRoles, formexController) => {
+        onSubmit: (user: User, formexController) => {
 
             return onUserUpdated(user)
                 .then(() => {
@@ -181,7 +180,7 @@ export function UserDetailsForm({
                             <div className={"col-span-12"}>
                                 <MultiSelect
                                     label="Roles"
-                                    value={values.roles.map(r => r.id) ?? []}
+                                    value={values.roles?.map(r => r.id) ?? []}
                                     onMultiValueChange={(value: string[]) => setFieldValue("roles", value.map(id => roles.find(r => r.id === id) as Role))}
                                     renderValue={(value: string) => {
                                         const userRole = roles

package/src/components/users/UsersTable.tsx

@@ -5,9 +5,9 @@ import * as locales from "date-fns/locale";
 
 import {
     defaultDateFormat,
-    DeleteConfirmationDialog,
+    DeleteConfirmationDialog, Role,
     useAuthController,
-    useCustomizationController,
+    useCustomizationController, User,
     useSnackbarController
 } from "@firecms/core";
 import {
@@ -23,19 +23,19 @@ import {
     Tooltip,
     Typography,
 } from "@firecms/ui";
-import { Role, UserWithRoles } from "../../types";
 import { useUserManagement } from "../../hooks";
 import { RoleChip } from "../roles";
+import { PersistedUser } from "../../types";
 
 export function UsersTable({ onUserClicked }: {
-    onUserClicked: (user: UserWithRoles) => void;
+    onUserClicked: (user: User) => void;
 }) {
 
     const {
         users,
         saveUser,
         deleteUser
-    } = useUserManagement();
+    } = useUserManagement<PersistedUser>();
 
     const authController = useAuthController();
     const snackbarController = useSnackbarController();
@@ -44,7 +44,7 @@ export function UsersTable({ onUserClicked }: {
     const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale as keyof typeof locales] : undefined;
     const dateFormat: string = customizationController?.dateTimeFormat ?? defaultDateFormat;
 
-    const [userToBeDeleted, setUserToBeDeleted] = useState<UserWithRoles | undefined>(undefined);
+    const [userToBeDeleted, setUserToBeDeleted] = useState<User | undefined>(undefined);
     const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
 
     return (

package/src/components/users/UsersView.tsx

@@ -3,19 +3,19 @@ import { AddIcon, Button, Container, Typography } from "@firecms/ui";
 import { UsersTable } from "./UsersTable";
 import { UserDetailsForm } from "./UserDetailsForm";
 import React, { useCallback, useState } from "react";
-import { UserWithRoles } from "../../types";
 import { useUserManagement } from "../../hooks/useUserManagement";
+import { User } from "@firecms/core";
 
 export const UsersView = function UsersView({ children }: { children?: React.ReactNode }) {
 
     const [dialogOpen, setDialogOpen] = useState<boolean>();
-    const [selectedUser, setSelectedUser] = useState<UserWithRoles | undefined>();
+    const [selectedUser, setSelectedUser] = useState<User | undefined>();
 
     const { users, usersLimit } = useUserManagement();
 
     const reachedUsersLimit = usersLimit !== undefined && (users && users.length >= usersLimit);
 
-    const onUserClicked = useCallback((user: UserWithRoles) => {
+    const onUserClicked = useCallback((user: User) => {
         setSelectedUser(user);
         setDialogOpen(true);
     }, []);

package/src/hooks/useBuildFirestoreUserManagement.tsx

@@ -10,8 +10,8 @@ import {
     setDoc
 } from "firebase/firestore";
 import { FirebaseApp } from "firebase/app";
-import { Role, UserManagement, UserWithRoles } from "../types";
-import { AuthController, PermissionsBuilder, User } from "@firecms/core";
+import { UserManagement } from "../types";
+import { AuthController, PermissionsBuilder, Role, User } from "@firecms/core";
 import { resolveUserRolePermissions } from "../utils";
 
 type UserWithRoleIds = User & { roles: string[] };
@@ -85,14 +85,14 @@ export function useBuildFirestoreUserManagement({
     const users = usersWithRoleIds.map(u => ({
         ...u,
         roles: roles.filter(r => u.roles?.includes(r.id))
-    }) as UserWithRoles);
+    }) as User);
 
     const [rolesError, setRolesError] = React.useState<Error | undefined>();
     const [usersError, setUsersError] = React.useState<Error | undefined>();
 
     const loading = rolesLoading || usersLoading;
 
-    const loggedInUser: UserWithRoles | undefined = users.find(u => u.email?.toLowerCase() === authController.user?.email?.toLowerCase());
+    const loggedInUser: User | undefined = users.find(u => u.email?.toLowerCase() === authController.user?.email?.toLowerCase());
     // console.log("authController", authController);
     // if (!loading && !authController.authLoading) {
     //     const user = authController.user;
@@ -155,16 +155,19 @@ export function useBuildFirestoreUserManagement({
         );
     }, [firebaseApp, usersPath]);
 
-    const saveUser = useCallback(async (user: UserWithRoles): Promise<UserWithRoles> => {
+    const saveUser = useCallback(async (user: User): Promise<User> => {
         const firestore = firestoreRef.current;
         if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
         console.debug("Persisting user", user);
-        const roleIds = user.roles.map(r => r.id);
+        const roleIds = user.roles?.map(r => r.id);
         const {
             uid,
             ...userData
         } = user;
-        return setDoc(doc(firestore, usersPath, uid), { ...userData, roles: roleIds }, { merge: true }).then(() => user);
+        return setDoc(doc(firestore, usersPath, uid), {
+            ...userData,
+            roles: roleIds
+        }, { merge: true }).then(() => user);
     }, [usersPath]);
 
     const saveRole = useCallback((role: Role): Promise<void> => {
@@ -179,7 +182,7 @@ export function useBuildFirestoreUserManagement({
         return setDoc(ref, roleData, { merge: true });
     }, [rolesPath]);
 
-    const deleteUser = useCallback(async (user: UserWithRoles): Promise<void> => {
+    const deleteUser = useCallback(async (user: User): Promise<void> => {
         const firestore = firestoreRef.current;
         if (!firestore || !usersPath) throw Error("useFirestoreConfigurationPersistence Firestore not initialised");
         console.debug("Deleting", user);

package/src/hooks/useUserManagement.tsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { UserManagement } from "../types/user_management";
+import { UserManagement } from "../types";
 import { UserManagementContext } from "../UserManagementProvider";
-
-export const useUserManagement = () => useContext<UserManagement>(UserManagementContext);
+import { User } from "@firecms/core";
+export const useUserManagement = <USER extends User>() => useContext<UserManagement<USER>>(UserManagementContext);

package/src/types/index.ts

@@ -1,3 +1,2 @@
-export * from "./firecms_user";
-export * from "./roles";
 export * from "./user_management";
+export * from "./persisted_user";

package/src/types/persisted_user.ts

@@ -0,0 +1,6 @@
+import { User } from "@firecms/core";
+
+export type PersistedUser = User & {
+    updated_on?: Date;
+    created_on?: Date;
+}

package/src/types/user_management.tsx

@@ -1,8 +1,6 @@
-import { UserWithRoles } from "./firecms_user";
-import { Role } from "./roles";
-import { PermissionsBuilder } from "@firecms/core";
+import { PermissionsBuilder, Role, User } from "@firecms/core";
 
-export type UserManagement<USER extends UserWithRoles = UserWithRoles> = {
+export type UserManagement<USER extends User = User> = {
 
     loading: boolean;
 

package/src/useUserManagementPlugin.tsx

@@ -1,4 +1,4 @@
-import { AuthController, FireCMSPlugin } from "@firecms/core";
+import { FireCMSPlugin } from "@firecms/core";
 import { UserManagementProvider } from "./UserManagementProvider";
 import { UserManagement } from "./types";
 

package/src/utils/permissions.ts

@@ -1,5 +1,4 @@
-import { CMSType, EntityCollection, Permissions } from "@firecms/core";
-import { Role, UserWithRoles } from "../types";
+import { EntityCollection, Permissions, Role, User } from "@firecms/core";
 
 export const RESERVED_GROUPS = ["Admin"];
 
@@ -10,7 +9,7 @@ const DEFAULT_PERMISSIONS = {
     delete: false
 };
 
-export function resolveUserRolePermissions<UserType extends UserWithRoles>
+export function resolveUserRolePermissions<UserType extends User>
 ({ collection, user }: {
     collection: EntityCollection<any>,
     user: UserType | null
@@ -66,7 +65,7 @@ const mergePermissions = (permA: Permissions, permB: Permissions) => {
     };
 }
 
-export function getUserRoles(roles: Role[], fireCMSUser: UserWithRoles): Role[] | undefined {
+export function getUserRoles(roles: Role[], fireCMSUser: User): Role[] | undefined {
     return !roles
         ? undefined
         : (fireCMSUser.roles

package/dist/types/firecms_user.d.ts

@@ -1,7 +0,0 @@
-import { User } from "@firecms/core";
-import { Role } from "./roles";
-export type UserWithRoles = User & {
-    updated_on?: Date;
-    created_on?: Date;
-    roles: Role[];
-};

package/dist/types/roles.d.ts

@@ -1,31 +0,0 @@
-import { Permissions } from "@firecms/core";
-export type Role = {
-    /**
-     * ID of the role
-     */
-    id: string;
-    /**
-     * Name of the role
-     */
-    name: string;
-    /**
-     * If this flag is true, the user can perform any action
-     */
-    isAdmin?: boolean;
-    /**
-     * Default permissions for all collections for this role.
-     * You can override this values at the collection level using
-     * {@link collectionPermissions}
-     */
-    defaultPermissions?: Permissions;
-    /**
-     * Record of stripped collection ids to their permissions.
-     * @see stripCollectionPath
-     */
-    collectionPermissions?: Record<string, Permissions>;
-    config?: {
-        createCollections?: boolean;
-        editCollections?: boolean | "own";
-        deleteCollections?: boolean | "own";
-    };
-};

package/src/types/firecms_user.ts

@@ -1,8 +0,0 @@
-import { User } from "@firecms/core";
-import { Role } from "./roles";
-
-export type UserWithRoles = User & {
-    updated_on?: Date;
-    created_on?: Date;
-    roles: Role[];
-}

package/src/types/roles.ts

@@ -1,41 +0,0 @@
-import { Permissions } from "@firecms/core";
-
-export type Role = {
-
-    /**
-     * ID of the role
-     */
-    id: string;
-
-    /**
-     * Name of the role
-     */
-    name: string;
-
-    /**
-     * If this flag is true, the user can perform any action
-     */
-    isAdmin?: boolean;
-
-    /**
-     * Default permissions for all collections for this role.
-     * You can override this values at the collection level using
-     * {@link collectionPermissions}
-     */
-    defaultPermissions?: Permissions;
-
-    /**
-     * Record of stripped collection ids to their permissions.
-     * @see stripCollectionPath
-     */
-    collectionPermissions?: Record<string, Permissions>;
-
-    config?: {
-
-        createCollections?: boolean;
-
-        editCollections?: boolean | "own";
-
-        deleteCollections?: boolean | "own";
-    }
-}

package/tailwind.config.js

@@ -1,68 +0,0 @@
-export default {
-    darkMode: ["selector", "[data-theme=\"dark\"]"],
-    mode: "jit",
-    content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-        "./node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
-        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: [
-                    "Rubik",
-                    "Roboto",
-                    "Helvetica",
-                    "Arial",
-                    "sans-serif"
-                ],
-                headers: [
-                    "Rubik",
-                    "Roboto",
-                    "Helvetica",
-                    "Arial",
-                    "sans-serif"
-                ],
-                mono: [
-                    "IBM Plex Mono",
-                    "Space Mono",
-                    "Lucida Console",
-                    "monospace"
-                ]
-            },
-            colors: {
-                primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
-                "primary-bg": "var(--fcms-primary-bg)",
-                secondary: "var(--fcms-secondary)",
-                field: {
-                    disabled: "rgb(224 224 226)",
-                    "disabled-dark": "rgb(35 35 37)"
-                },
-                text: {
-                    primary: "rgba(0, 0, 0, 0.87)",
-                    "primary-dark": "#ffffff",
-                    secondary: "rgba(0, 0, 0, 0.6)",
-                    "secondary-dark": "rgba(255, 255, 255, 0.7)",
-                    disabled: "rgba(0, 0, 0, 0.38)",
-                    "disabled-dark": "rgba(255, 255, 255, 0.5)",
-                    label: "rgb(131, 131, 131)"
-                },
-                gray: {
-                    50: "#f8f8fc",
-                    100: "#E7E7EB",
-                    200: "#CFCFD6",
-                    300: "#B7B7BF",
-                    400: "#A0A0A9",
-                    500: "#87878F",
-                    600: "#6C6C75",
-                    700: "#505058",
-                    800: "#35353A",
-                    900: "#18181C",
-                    950: "#101013"
-                }
-            }
-        }
-    }
-};