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

This commit is contained in:
sriram veeraghanta 2023-12-13 01:09:29 +05:30
commit f3748d09a5
21 changed files with 87 additions and 105 deletions

View File

@ -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)

View File

@ -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",

View File

@ -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)

View File

@ -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{" "}

View File

@ -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{" "}

View File

@ -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>

View File

@ -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";

View File

@ -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}

View File

@ -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"

View File

@ -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}
/>

View File

@ -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}

View File

@ -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}

View File

@ -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}

View File

@ -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))}

View File

@ -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}
/>
);
});

View File

@ -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>

View File

@ -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"

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 13 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -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) => {

View File

@ -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(() => {