Merge branch 'refactor/mobx-store' of github.com:makeplane/plane into refactor/mobx-store

apiserver/plane/app/serializers/workspace.py

@@ -2,7 +2,7 @@
 from rest_framework import serializers
 
 # Module imports
-from .base import BaseSerializer
+from .base import BaseSerializer, DynamicBaseSerializer
 from .user import UserLiteSerializer, UserAdminLiteSerializer
 
 from plane.db.models import (
@@ -16,7 +16,7 @@ from plane.db.models import (
 )
 
 
-class WorkSpaceSerializer(BaseSerializer):
+class WorkSpaceSerializer(DynamicBaseSerializer):
     owner = UserLiteSerializer(read_only=True)
     total_members = serializers.IntegerField(read_only=True)
     total_issues = serializers.IntegerField(read_only=True)

apiserver/plane/app/views/project.py

@@ -42,6 +42,7 @@ from plane.app.permissions import (
     WorkspaceUserPermission,
     ProjectBasePermission,
     ProjectMemberPermission,
+    ProjectLitePermission,
 )
 
 from plane.db.models import (
@@ -600,6 +601,18 @@ class ProjectMemberViewSet(BaseViewSet):
         ProjectMemberPermission,
     ]
 
+    def get_permissions(self):
+        if self.action == "leave":
+            self.permission_classes = [
+                ProjectLitePermission,
+            ]
+        else:
+            self.permission_classes = [
+                ProjectMemberPermission,
+            ]
+
+        return super(ProjectMemberViewSet, self).get_permissions()
+
     search_fields = [
         "member__display_name",
         "member__first_name",

apiserver/plane/app/views/workspace.py

@@ -214,7 +214,7 @@ class UserWorkSpacesEndpoint(BaseAPIView):
             fields=fields if fields else None,
             many=True,
         ).data
-        workspace_dict = {str(workspaces["id"]): workspaces for workspace in workspaces}
+        workspace_dict = {str(workspace["id"]): workspace for workspace in workspaces}
         return Response(workspace_dict, status=status.HTTP_200_OK)
 
 

space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx

@@ -130,7 +130,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
           />
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" loading={isSubmitting}>
-          Go to board
+          Continue
         </Button>
         <p className="text-xs text-onboarding-text-200">
           When you click the button above, you agree with our{" "}

web/components/account/sign-in-forms/self-hosted-sign-in.tsx

@@ -130,7 +130,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
           />
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" loading={isSubmitting}>
-          Go to workspace
+          Continue
         </Button>
         <p className="text-xs text-onboarding-text-200">
           When you click the button above, you agree with our{" "}

web/components/gantt-chart/sidebar/sidebar.tsx

@@ -27,11 +27,21 @@ type Props = {
     viewId?: string
   ) => Promise<IIssue | undefined>;
   viewId?: string;
+  disableIssueCreation?: boolean;
 };
 
 export const IssueGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, enableReorder, enableQuickIssueCreate, quickAddCallback, viewId } = props;
+  const {
+    title,
+    blockUpdateHandler,
+    blocks,
+    enableReorder,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    viewId,
+    disableIssueCreation,
+  } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -160,7 +170,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
               )}
               {droppableProvided.placeholder}
             </>
-            {enableQuickIssueCreate && (
+            {enableQuickIssueCreate && !disableIssueCreation && (
               <GanttInlineCreateIssueForm quickAddCallback={quickAddCallback} viewId={viewId} />
             )}
           </div>

web/components/instance/setup-done-view.tsx

@@ -5,7 +5,7 @@ import { useTheme } from "next-themes";
 import { Button } from "@plane/ui";
 import { UserCog2 } from "lucide-react";
 // images
-import instanceSetupDone from "public/instance-setup-done.svg";
+import instanceSetupDone from "public/instance-setup-done.webp";
 import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 import { useMobxStore } from "lib/mobx/store-provider";

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -16,6 +16,8 @@ import {
   IProjectIssuesFilterStore,
   IViewIssuesFilterStore,
 } from "store_legacy/issues";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   issuesFilterStore:
@@ -41,7 +43,14 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
     props;
 
-  const { calendar: calendarStore } = useMobxStore();
+  const {
+    calendar: calendarStore,
+    projectIssues: issueStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
+
+  const { enableIssueCreation } = issueStore?.viewFlags || {};
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const calendarPayload = calendarStore.calendarPayload;
 
@@ -71,6 +80,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                     issues={issues}
                     groupedIssueIds={groupedIssueIds}
                     enableQuickIssueCreate
+                    disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
                     quickActions={quickActions}
                     quickAddCallback={quickAddCallback}
                     viewId={viewId}
@@ -85,6 +95,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               issues={issues}
               groupedIssueIds={groupedIssueIds}
               enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
               quickActions={quickActions}
               quickAddCallback={quickAddCallback}
               viewId={viewId}

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -26,6 +26,7 @@ type Props = {
   groupedIssueIds: IGroupedIssues;
   quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -43,6 +44,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     groupedIssueIds,
     quickActions,
     enableQuickIssueCreate,
+    disableIssueCreation,
     quickAddCallback,
     viewId,
   } = props;
@@ -86,7 +88,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks issues={issues} issueIdList={issueIdList} quickActions={quickActions} />
-                {enableQuickIssueCreate && (
+                {enableQuickIssueCreate && !disableIssueCreation && (
                   <div className="px-2 py-1">
                     <CalendarQuickAddIssueForm
                       formKey="target_date"

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -25,6 +25,7 @@ type Props = {
   week: ICalendarWeek | undefined;
   quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -42,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     week,
     quickActions,
     enableQuickIssueCreate,
+    disableIssueCreation,
     quickAddCallback,
     viewId,
   } = props;
@@ -69,6 +71,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             groupedIssueIds={groupedIssueIds}
             quickActions={quickActions}
             enableQuickIssueCreate={enableQuickIssueCreate}
+            disableIssueCreation={disableIssueCreation}
             quickAddCallback={quickAddCallback}
             viewId={viewId}
           />

web/components/issues/issue-layouts/gantt/base-gantt-root.tsx

@@ -51,6 +51,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
 
   const issuesResponse = issueStore.getIssues;
   const issueIds = (issueStore.getIssuesIds ?? []) as TUnGroupedIssues;
+  const { enableIssueCreation } = issueStore?.viewFlags || {};
 
   const issues = issueIds.map((id) => issuesResponse?.[id]);
 
@@ -87,6 +88,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
               quickAddCallback={issueStore.quickAddIssue}
               viewId={viewId}
               enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isAllowed}
             />
           )}
           enableBlockLeftResize={isAllowed}

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -330,7 +330,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               projects={workspaceProjects}
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               isDragStarted={isDragStarted}
-              disableIssueCreation={true}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
               enableQuickIssueCreate={enableQuickAdd}
               currentStore={currentStore}
               quickAddCallback={issueStore?.quickAddIssue}

web/components/issues/issue-layouts/kanban/default.tsx

@@ -149,7 +149,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
               </Droppable>
 
               <div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
-                {enableQuickIssueCreate && (
+                {enableQuickIssueCreate && !disableIssueCreation && (
                   <KanBanQuickAddIssueForm
                     formKey="name"
                     groupId={getValueFromObject(_list, listKey) as string}

web/components/issues/issue-layouts/list/default.tsx

@@ -109,7 +109,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                   />
                 )}
 
-                {enableIssueQuickAdd && (
+                {enableIssueQuickAdd && !disableIssueCreation && (
                   <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
                     <ListQuickAddIssueForm
                       prePopulatedData={prePopulateQuickAddData(group_by, getValueFromObject(_list, listKey))}

web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx

@@ -50,7 +50,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
     user: userStore,
   } = useMobxStore();
 
-  const { enableInlineEditing, enableQuickAdd } = issueStore?.viewFlags || {};
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
 
   const { currentProjectRole } = userStore;
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
@@ -120,6 +120,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
       quickAddCallback={issueStore.quickAddIssue}
       viewId={viewId}
       enableQuickCreateIssue={enableQuickAdd}
+      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
     />
   );
 });

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -33,6 +33,7 @@ type Props = {
   viewId?: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   enableQuickCreateIssue?: boolean;
+  disableIssueCreation?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -50,6 +51,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     viewId,
     canEditProperties,
     enableQuickCreateIssue,
+    disableIssueCreation,
   } = props;
   // states
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
@@ -147,7 +149,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
         <div className="border-t border-custom-border-100">
           <div className="z-5 sticky bottom-0 left-0 mb-3">
-            {enableQuickCreateIssue && (
+            {enableQuickCreateIssue && !disableIssueCreation && (
               <SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
             )}
           </div>

web/components/project/member-list-item.tsx

@@ -168,7 +168,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
               );
             })}
           </CustomSelect>
-          {isAdmin && (
+          {(isAdmin || memberDetails.id === currentProjectMemberInfo?.member.id) && (
             <Tooltip
               tooltipContent={
                 memberDetails.id === currentProjectMemberInfo?.member.id ? "Leave project" : "Remove member"

web/services/workspace.service.ts

@@ -16,8 +16,6 @@ import {
   IUserProjectsRole,
 } from "types";
 import { IWorkspaceView } from "types/workspace-views";
-// store
-import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store_legacy/issue";
 import { IIssueResponse } from "store_legacy/issues/types";
 
 export class WorkspaceService extends APIService {
@@ -25,7 +23,7 @@ export class WorkspaceService extends APIService {
     super(API_BASE_URL);
   }
 
-  async userWorkspaces(): Promise<IWorkspace[]> {
+  async userWorkspaces(): Promise<Record<string, IWorkspace>> {
     return this.get("/api/users/me/workspaces/")
       .then((response) => response?.data)
       .catch((error) => {

web/store/workspace/index.ts

@@ -1,5 +1,6 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { RootStore } from "../root.store";
+import { set } from "lodash";
 // types
 import { IWorkspace } from "types";
 // services
@@ -12,24 +13,19 @@ export interface IWorkspaceRootStore {
   // states
   loader: boolean;
   error: any | null;
-
   // observables
-  workspaces: IWorkspace[] | undefined;
+  workspaces: Record<string, IWorkspace>;
-
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
-
   // computed actions
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
   getWorkspaceById: (workspaceId: string) => IWorkspace | null;
-
   // actions
-  fetchWorkspaces: () => Promise<IWorkspace[]>;
+  fetchWorkspaces: () => Promise<Record<string, IWorkspace>>;
   createWorkspace: (data: Partial<IWorkspace>) => Promise<IWorkspace>;
   updateWorkspace: (workspaceSlug: string, data: Partial<IWorkspace>) => Promise<IWorkspace>;
   deleteWorkspace: (workspaceSlug: string) => Promise<void>;
-
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
@@ -39,10 +35,8 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
   // states
   loader: boolean = false;
   error: any | null = null;
-
   // observables
-  workspaces: IWorkspace[] | undefined = [];
+  workspaces: Record<string, IWorkspace> = {};
-
   // services
   workspaceService;
   // root store
@@ -56,18 +50,14 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       // states
       loader: observable.ref,
       error: observable.ref,
-
       // observables
       workspaces: observable,
-
       // computed
       currentWorkspace: computed,
       workspacesCreatedByCurrentUser: computed,
-
       // computed actions
       getWorkspaceBySlug: action,
       getWorkspaceById: action,
-
       // actions
       fetchWorkspaces: action,
       createWorkspace: action,
@@ -92,7 +82,9 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
     if (!workspaceSlug) return null;
 
-    return this.workspaces?.find((workspace) => workspace.slug === workspaceSlug) || null;
+    const workspaceDetails = Object.values(this.workspaces ?? {})?.find((w) => w.slug === workspaceSlug);
+
+    return workspaceDetails || null;
   }
 
   /**
@@ -105,20 +97,23 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
     if (!user) return null;
 
-    return this.workspaces.filter((w) => w.created_by === user?.id);
+    const userWorkspaces = Object.values(this.workspaces ?? {})?.filter((w) => w.created_by === user?.id);
+
+    return userWorkspaces || null;
   }
 
   /**
    * get workspace info from the array of workspaces in the store using workspace slug
    * @param workspaceSlug
    */
-  getWorkspaceBySlug = (workspaceSlug: string) => this.workspaces?.find((w) => w.slug == workspaceSlug) || null;
+  getWorkspaceBySlug = (workspaceSlug: string) =>
+    Object.values(this.workspaces ?? {})?.find((w) => w.slug == workspaceSlug) || null;
 
   /**
    * get workspace info from the array of workspaces in the store using workspace id
    * @param workspaceId
    */
-  getWorkspaceById = (workspaceId: string) => this.workspaces?.find((w) => w.id == workspaceId) || null;
+  getWorkspaceById = (workspaceId: string) => this.workspaces?.[workspaceId] || null;
 
   /**
    * fetch user workspaces from API
@@ -143,7 +138,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       runInAction(() => {
         this.loader = false;
         this.error = error;
-        this.workspaces = [];
+        this.workspaces = {};
       });
 
       throw error;
@@ -163,10 +158,12 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
       const response = await this.workspaceService.createWorkspace(data);
 
+      const updatedWorkspacesList = set(this.workspaces, response.id, response);
+
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.workspaces = [...(this.workspaces ?? []), response];
+        this.workspaces = updatedWorkspacesList;
       });
 
       return response;
@@ -186,8 +183,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    * @param data
    */
   updateWorkspace = async (workspaceSlug: string, data: Partial<IWorkspace>) => {
-    const newWorkspaces = this.workspaces?.map((w) => (w.slug === workspaceSlug ? { ...w, ...data } : w));
-
     try {
       runInAction(() => {
         this.loader = true;
@@ -196,10 +191,12 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
       const response = await this.workspaceService.updateWorkspace(workspaceSlug, data);
 
+      const updatedWorkspacesList = set(this.workspaces, response.id, data);
+
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.workspaces = newWorkspaces;
+        this.workspaces = updatedWorkspacesList;
       });
 
       return response;
@@ -218,8 +215,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
    * @param workspaceSlug
    */
   deleteWorkspace = async (workspaceSlug: string) => {
-    const newWorkspaces = this.workspaces?.filter((w) => w.slug !== workspaceSlug);
-
     try {
       runInAction(() => {
         this.loader = true;
@@ -228,10 +223,15 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
 
       await this.workspaceService.deleteWorkspace(workspaceSlug);
 
+      const updatedWorkspacesList = this.workspaces;
+      const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
+
+      delete updatedWorkspacesList[`${workspaceId}`];
+
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.workspaces = newWorkspaces;
+        this.workspaces = updatedWorkspacesList;
       });
     } catch (error) {
       runInAction(() => {