feature/casl-integration

package.json

@@ -23,6 +23,8 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@casl/ability": "^7.0.0",
+    "@casl/react": "^7.0.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

src/app/providers/AppProviders.tsx

@@ -2,12 +2,17 @@ import { PropsWithChildren } from 'react';
 import { QueryProvider } from './QueryProvider';
 import { Toaster, TooltipProvider } from 'shared/ui';
 import { FrontendObservability } from 'shared/config/';
+import { AbilityProvider, SyncAbilityStore } from 'features/ability';
+
 export function AppProviders({ children }: PropsWithChildren) {
   return (
     <>
       <FrontendObservability />
       <QueryProvider>
-        <TooltipProvider>{children}</TooltipProvider>
+        <AbilityProvider>
+          <TooltipProvider>{children}</TooltipProvider>
+        </AbilityProvider>
+        <SyncAbilityStore />
       </QueryProvider>
       <Toaster richColors />
     </>

src/features/ability/index.ts

@@ -0,0 +1,5 @@
+export { useAbility } from './lib/useAbility';
+export { teamSubject, teamSettingsSubject } from './model/team.ability';
+export { Can } from './ui/Can';
+export { AbilityProvider } from './ui/AbilityProvider';
+export { SyncAbilityStore } from './ui/SyncAbilityStore';

src/features/ability/lib/create-builder.ts

@@ -0,0 +1,6 @@
+import { AbilityBuilder, createMongoAbility } from '@casl/ability';
+import { type AppAbility } from '../ui/AbilityProvider';
+
+export function createBuilder() {
+  return new AbilityBuilder<AppAbility>(createMongoAbility);
+}

src/features/ability/lib/useAbility.ts

@@ -0,0 +1,14 @@
+'use client';
+import { useAbility as useCaslAbility } from '@casl/react';
+import { type TeamAbility } from '../model/team.ability';
+import { type ProjectAbility } from '../model/project.ability';
+
+type SubjectMap = {
+  Team: TeamAbility;
+  Project: ProjectAbility;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useAbility<T extends keyof SubjectMap>(_subject: T) {
+  return useCaslAbility<SubjectMap[T]>();
+}

src/features/ability/lib/with-subject-type.ts

@@ -0,0 +1,3 @@
+export type WithSubjectType<T, S extends string = string> = T & {
+  readonly __caslSubjectType__: S;
+};

src/features/ability/model/project.ability.ts

@@ -0,0 +1,21 @@
+import type { AbilityBuilder, MongoAbility } from '@casl/ability';
+import { type TProject } from 'entities/project';
+import { type AbilityState } from './store';
+import { type Action } from './types';
+
+export type Project = Pick<TProject.ProjectListItemResponse, 'role'>;
+
+export type ProjectSubject = 'Project';
+export type ProjectAction = 'publish' | 'archive' | 'share' | Action;
+
+export type ProjectAbility = MongoAbility<[ProjectAction, ProjectSubject]>;
+
+export function defineProjectRules(
+  { teamRole }: AbilityState,
+  { can }: AbilityBuilder<ProjectAbility>
+) {
+  if (teamRole === 'admin' || teamRole === 'owner') {
+    // Пользователи с ролями администратор и владелец могут управлять любыми проектами
+    can('manage', 'Project');
+  }
+}

src/features/ability/model/store.ts

@@ -0,0 +1,28 @@
+import { type TProject } from 'entities/project/';
+import { type TTeam } from 'entities/team/';
+import { createStore } from 'shared/lib/store';
+
+export type AbilityState = {
+  userId: string | null;
+  projectRole: TProject.ProjectMemberRole | null;
+  teamRole: TTeam.TeamRole | null;
+};
+
+export type AbilityActions = {
+  setAbility: (data: AbilityState) => void;
+  clearAbility: () => void;
+};
+
+export type UseAbilityStore = AbilityState & AbilityActions;
+
+const initialState: AbilityState = {
+  userId: null,
+  projectRole: null,
+  teamRole: null,
+};
+
+export const useAbilityStore = createStore<UseAbilityStore>((set) => ({
+  ...initialState,
+  setAbility: (data) => set(data),
+  clearAbility: () => set(initialState),
+}));

src/features/ability/model/team.ability.ts

@@ -0,0 +1,57 @@
+import type { AbilityBuilder } from '@casl/ability';
+import { type MongoAbility, subject } from '@casl/ability';
+import { type AbilityState } from './store';
+import { type InferSubjects } from '@casl/ability';
+import { type TTeam } from 'entities/team';
+import { type Action } from './types';
+import { type WithSubjectType } from '../lib/with-subject-type';
+
+export const SUBJECTS = {
+  'team.settings': 'TeamSettings',
+  'team.member': 'TeamMember',
+} as const;
+
+export type SubjectsType = typeof SUBJECTS;
+
+export type TeamMember = TTeam.TeamMemberResponse;
+export type TeamSettings = TTeam.UpdateTeamBody;
+
+export type TeamAction = 'invite' | Action;
+
+export type TeamSubject = InferSubjects<
+  | WithSubjectType<TeamMember, SubjectsType['team.member']>
+  | WithSubjectType<TeamSettings, SubjectsType['team.settings']>
+>;
+
+export type TeamAbility = MongoAbility<[TeamAction, TeamSubject]>;
+
+export const teamSubject = (member: NonNullable<TeamMember>) => subject('TeamMember', member);
+export const teamSettingsSubject = (settings: NonNullable<TeamSettings>) =>
+  subject('TeamSettings', settings);
+
+export function defineTeamRules({ teamRole }: AbilityState, { can }: AbilityBuilder<TeamAbility>) {
+  const isAdmin = teamRole === 'admin';
+  const isOwner = teamRole === 'owner';
+
+  if (isAdmin) {
+    // Если пользователь администратор, он может (can) управлять (manage) участниками с ролями member и viewer (role: { $in: ['member', 'viewer'] })
+    can('manage', 'TeamMember', {
+      role: { $in: ['member', 'viewer'] },
+    });
+  }
+  if (isOwner) {
+    // Если пользователь владелец, он может  управлять участниками с ролями member, viewer и admin
+    can('manage', 'TeamMember', {
+      role: { $in: ['admin', 'member', 'viewer'] },
+    });
+  }
+
+  if (isAdmin || isOwner) {
+    // Пользователь с ролью администратор и владелец могут изменять настройки любой команды
+    can('update', 'TeamSettings');
+  }
+}
+
+// - Владелец может управлять всеми участниками
+// - Администратор может управлять всеми участниками, кроме владельца
+// - Участник и гость ничего не могут

src/features/ability/model/types.ts

@@ -0,0 +1,2 @@
+export type Action = 'manage' | 'read' | 'create' | 'update' | 'delete';
+export type Subject = 'all';

src/features/ability/ui/AbilityProvider.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { AbilityProvider as CaslAbilityProvider } from '@casl/react';
+import { type PropsWithChildren, useEffect, useState } from 'react';
+import {
+  defineTeamRules,
+  type TeamAbility,
+  type TeamAction,
+  type TeamSubject,
+} from '../model/team.ability';
+import type { AbilityState } from '../model/store';
+import { useAbilityStore } from '../model/store';
+import type { ProjectAbility, ProjectAction, ProjectSubject } from '../model/project.ability';
+import { defineProjectRules } from '../model/project.ability';
+import { createBuilder } from '../lib/create-builder';
+import type { AbilityBuilder } from '@casl/ability';
+import { type MongoAbility } from '@casl/ability';
+import { useShallow } from 'zustand/shallow';
+
+export type AppAbility = MongoAbility<[TeamAction, TeamSubject] | [ProjectAction, ProjectSubject]>;
+
+export function AbilityProvider({ children }: PropsWithChildren) {
+  const user = useAbilityStore(
+    useShallow(
+      ({ userId, teamRole, projectRole }): AbilityState => ({ userId, teamRole, projectRole })
+    )
+  );
+
+  const [ability] = useState(() => {
+    const builder = createBuilder();
+    defineProjectRules(user, builder as AbilityBuilder<ProjectAbility>);
+    defineTeamRules(user, builder as AbilityBuilder<TeamAbility>);
+    return builder.build();
+  });
+
+  useEffect(() => {
+    const builder = createBuilder();
+    defineProjectRules(user, builder as AbilityBuilder<ProjectAbility>);
+    defineTeamRules(user, builder as AbilityBuilder<TeamAbility>);
+    ability.update(builder.rules);
+  }, [ability, user]);
+
+  return <CaslAbilityProvider value={ability}>{children}</CaslAbilityProvider>;
+}

src/features/ability/ui/Can.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Can as CaslCan, type CanProps } from '@casl/react';
+import type { AppAbility } from './AbilityProvider';
+
+export function Can({ children, ...props }: CanProps<AppAbility>) {
+  return <CaslCan {...props}>{children}</CaslCan>;
+}

src/features/ability/ui/SyncAbilityStore.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { TeamQueries, useTeamStore } from 'entities/team';
+import { UserQueries } from 'entities/user';
+import { useAbilityStore } from '../model/store';
+import { useEffect } from 'react';
+
+export function SyncAbilityStore() {
+  const teamId = useTeamStore((s) => s.teamId);
+  const setAbilityData = useAbilityStore((s) => s.setAbility);
+  const { data: user } = useQuery({ ...UserQueries.getMe(), select: (data) => ({ id: data.id }) });
+  const { data: teamRole } = useQuery({
+    ...TeamQueries.getMembers(teamId!),
+    enabled: !!teamId && !!user,
+    select: (data) => {
+      return data.items.find((v) => v.id === user?.id)?.role;
+    },
+  });
+
+  useEffect(() => {
+    setAbilityData({
+      userId: user?.id ?? null,
+      teamRole: teamRole ?? null,
+      projectRole: teamRole ?? null,
+    });
+  }, [setAbilityData, teamRole, user]);
+
+  return null;
+}

src/features/task/create/model/useCreateTask.tsx

@@ -17,7 +17,6 @@ export function useCreateTask({ onSuccess, ...rest }: UseCreateProjectOptions =
   return useMutation<TTask.CreateTaskResponse, DefaultError, CreateTaskVariables>({
     ...rest,
     mutationFn: ({ body }) => TaskHttp.createTask(body),
-    onMutate: (data, ctx) => {},
     onSuccess: async (res, variables, _r, context) => {
       onSuccess?.(res, variables, _r, context);
     },

src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx

@@ -1,4 +1,4 @@
-import { CardSection, OptionGroup, Skeleton } from 'shared/ui';
+import { CardSection, Skeleton } from 'shared/ui';
 
 export function NotificationsPageFallback() {
   return (