thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge branch 'develop' of github.com:makeplane/plane into fix/yarn-upgrade

Browse Source
This commit is contained in:
sriram veeraghanta 2023-11-28 18:16:14 +05:30
commit 191949657d
61 changed files with 1069 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apiserver/plane/app/serializers/user.py
View File

@ -80,9 +80,18 @@ class UserMeSettingsSerializer(BaseSerializer):
workspace_invites = WorkspaceMemberInvite.objects.filter(
email=obj.email
).count()
if obj.last_workspace_id is not None:
if (
obj.last_workspace_id is not None
and Workspace.objects.filter(
pk=obj.last_workspace_id,
workspace_member__member=obj.id,
workspace_member__is_active=True,
).exists()
):
workspace = Workspace.objects.filter(
pk=obj.last_workspace_id, workspace_member__member=obj.id
pk=obj.last_workspace_id,
workspace_member__member=obj.id,
workspace_member__is_active=True,
).first()
return {
"last_workspace_id": obj.last_workspace_id,
@ -95,7 +104,9 @@ class UserMeSettingsSerializer(BaseSerializer):
}
else:
fallback_workspace = (
Workspace.objects.filter(workspace_member__member_id=obj.id)
Workspace.objects.filter(
workspace_member__member_id=obj.id, workspace_member__is_active=True
)
.order_by("created_at")
.first()
)
@ -159,10 +170,14 @@ class ChangePasswordSerializer(serializers.Serializer):
def validate(self, data):
if data.get("old_password") == data.get("new_password"):
raise serializers.ValidationError({"error": "New password cannot be same as old password."})
raise serializers.ValidationError(
{"error": "New password cannot be same as old password."}
)
if data.get("new_password") != data.get("confirm_password"):
raise serializers.ValidationError({"error": "Confirm password should be same as the new password."})
raise serializers.ValidationError(
{"error": "Confirm password should be same as the new password."}
)
return data

11
apiserver/plane/app/views/issue.py
View File

@ -4,6 +4,7 @@ import random
from itertools import chain
# Django imports
from django.db import models
from django.utils import timezone
from django.db.models import (
Prefetch,
@ -367,6 +368,8 @@ class IssueListGroupedEndpoint(BaseAPIView):
def get(self, request, slug, project_id):
filters = issue_filters(request.query_params, "GET")
archive = request.GET.get("archived", False)
draft = request.GET.get("draft", False)
fields = [field for field in request.GET.get("fields", "").split(",") if field]
issue_queryset = (
@ -384,6 +387,14 @@ class IssueListGroupedEndpoint(BaseAPIView):
)
)
.filter(**filters)
.filter(is_draft=bool(draft))
.filter(~Q(archived_at__isnull=bool(archive)))
.filter(
models.Q(issue_inbox__status=1)
| models.Q(issue_inbox__status=-1)
| models.Q(issue_inbox__status=2)
| models.Q(issue_inbox__isnull=True)
)
.annotate(cycle_id=F("issue_cycle__cycle_id"))
.annotate(module_id=F("issue_module__module_id"))
.annotate(

15
apiserver/plane/app/views/user.py
View File

@ -113,6 +113,15 @@ class UserEndpoint(BaseViewSet):
# Deactivate the user
user.is_active = False
user.last_workspace_id = None
user.is_tour_completed = False
user.is_onboarded = False
user.onboarding_step = {
"workspace_join": False,
"profile_complete": False,
"workspace_create": False,
"workspace_invite": False,
}
user.save()
return Response(status=status.HTTP_204_NO_CONTENT)
@ -135,9 +144,9 @@ class UpdateUserTourCompletedEndpoint(BaseAPIView):
class UserActivityEndpoint(BaseAPIView, BasePaginator):
def get(self, request):
queryset = IssueActivity.objects.filter(
actor=request.user
).select_related("actor", "workspace", "issue", "project")
queryset = IssueActivity.objects.filter(actor=request.user).select_related(
"actor", "workspace", "issue", "project"
)
return self.paginate(
request=request,

36
apiserver/plane/app/views/workspace.py
View File

@ -113,7 +113,10 @@ class WorkSpaceViewSet(BaseViewSet):
return (
self.filter_queryset(super().get_queryset().select_related("owner"))
.order_by("name")
.filter(workspace_member__member=self.request.user)
.filter(
workspace_member__member=self.request.user,
workspace_member__is_active=True,
)
.annotate(total_members=member_count)
.annotate(total_issues=issue_count)
.select_related("owner")
@ -189,17 +192,21 @@ class UserWorkSpacesEndpoint(BaseAPIView):
)
workspace = (
(
Workspace.objects.prefetch_related(
Prefetch("workspace_member", queryset=WorkspaceMember.objects.all())
Workspace.objects.prefetch_related(
Prefetch(
"workspace_member",
queryset=WorkspaceMember.objects.filter(
member=request.user, is_active=True
),
)
.filter(
workspace_member__member=request.user,
)
.select_related("owner")
)
.select_related("owner")
.annotate(total_members=member_count)
.annotate(total_issues=issue_count)
.filter(
workspace_member__member=request.user, workspace_member__is_active=True
)
.distinct()
)
serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
@ -319,7 +326,7 @@ class WorkspaceInvitationsViewset(BaseViewSet):
workspace_invitations, batch_size=10, ignore_conflicts=True
)
current_site = request.META.get('HTTP_ORIGIN')
current_site = request.META.get("HTTP_ORIGIN")
# Send invitations
for invitation in workspace_invitations:
@ -418,7 +425,9 @@ class WorkspaceJoinEndpoint(BaseAPIView):
)
def get(self, request, slug, pk):
workspace_invitation = WorkspaceMemberInvite.objects.get(workspace__slug=slug, pk=pk)
workspace_invitation = WorkspaceMemberInvite.objects.get(
workspace__slug=slug, pk=pk
)
serializer = WorkSpaceMemberInviteSerializer(workspace_invitation)
return Response(serializer.data, status=status.HTTP_200_OK)
@ -1313,9 +1322,7 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
return Response(issues, status=status.HTTP_200_OK)
class WorkspaceUserProfileIssuesGroupedEndpoint(BaseAPIView):
permission_classes = [
WorkspaceViewerPermission,
]
@ -1362,13 +1369,16 @@ class WorkspaceUserProfileIssuesGroupedEndpoint(BaseAPIView):
)
).distinct()
issues = IssueLiteSerializer(issue_queryset, many=True, fields=fields if fields else None).data
issues = IssueLiteSerializer(
issue_queryset, many=True, fields=fields if fields else None
).data
issue_dict = {str(issue["id"]): issue for issue in issues}
return Response(
issue_dict,
status=status.HTTP_200_OK,
)
class WorkspaceLabelsEndpoint(BaseAPIView):
permission_classes = [
WorkspaceViewerPermission,

118
deploy/selfhost/migration-0.13-0.14.sh Executable file
View File

@ -0,0 +1,118 @@
#!/bin/bash
echo '
******************************************************************
This script is solely for the migration purpose only.
This is a 1 time migration of volume data from v0.13.2 => v0.14.x
Assumption:
1. Postgres data volume name ends with _pgdata
2. Minio data volume name ends with _uploads
3. Redis data volume name ends with _redisdata
Any changes to this script can break the migration.
Before you proceed, make sure you run the below command
to know the docker volumes
docker volume ls -q | grep -i "_pgdata"
docker volume ls -q | grep -i "_uploads"
docker volume ls -q | grep -i "_redisdata"
*******************************************************
'
DOWNLOAD_FOL=./download
rm -rf ${DOWNLOAD_FOL}
mkdir -p ${DOWNLOAD_FOL}
function volumeExists {
if [ "$(docker volume ls -f name=$1 | awk '{print $NF}' | grep -E '^'$1'$')" ]; then
return 0
else
return 1
fi
}
function readPrefixes(){
echo ''
echo 'Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata" '
echo '---------------------'
docker volume ls -q | grep -i "_redisdata"
echo ''
read -p "Provide the Source Volume Prefix : " SRC_VOL_PREFIX
until [ "$SRC_VOL_PREFIX" ]; do
read -p "Provide the Source Volume Prefix : " SRC_VOL_PREFIX
done
read -p "Provide the Destination Volume Prefix : " DEST_VOL_PREFIX
until [ "$DEST_VOL_PREFIX" ]; do
read -p "Provide the Source Volume Prefix : " DEST_VOL_PREFIX
done
echo ''
echo 'Prefix Provided '
echo " Source : ${SRC_VOL_PREFIX}"
echo " Destination : ${DEST_VOL_PREFIX}"
echo '---------------------------------------'
}
function migrate(){
SRC_VOLUME=${SRC_VOL_PREFIX}_${VOL_NAME_SUFFIX}
DEST_VOLUME=${DEST_VOL_PREFIX}_${VOL_NAME_SUFFIX}
if volumeExists $SRC_VOLUME; then
if volumeExists $DEST_VOLUME; then
GOOD_TO_GO=1
else
echo "Destination Volume '$DEST_VOLUME' does not exist"
echo ''
fi
else
echo "Source Volume '$SRC_VOLUME' does not exist"
echo ''
fi
if [ $GOOD_TO_GO = 1 ]; then
echo "MIGRATING ${VOL_NAME_SUFFIX} FROM ${SRC_VOLUME} => ${DEST_VOLUME}"
TEMP_CONTAINER=$(docker run -d -v $SRC_VOLUME:$CONTAINER_VOL_FOLDER busybox true)
docker cp -q $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX}
docker rm $TEMP_CONTAINER &> /dev/null
TEMP_CONTAINER=$(docker run -d -v $DEST_VOLUME:$CONTAINER_VOL_FOLDER busybox true)
if [ "$VOL_NAME_SUFFIX" = "pgdata" ]; then
docker cp -q ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX} $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER/_temp
docker run --rm -v $DEST_VOLUME:$CONTAINER_VOL_FOLDER \
-e DATA_FOLDER="${CONTAINER_VOL_FOLDER}" \
busybox /bin/sh -c 'cp -Rf $DATA_FOLDER/_temp/* $DATA_FOLDER '
else
docker cp -q ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX} $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER
fi
docker rm $TEMP_CONTAINER &> /dev/null
echo ''
fi
}
readPrefixes
# MIGRATE DB
CONTAINER_VOL_FOLDER=/var/lib/postgresql/data
VOL_NAME_SUFFIX=pgdata
migrate
# MIGRATE REDIS
CONTAINER_VOL_FOLDER=/data
VOL_NAME_SUFFIX=redisdata
migrate
# MIGRATE MINIO
CONTAINER_VOL_FOLDER=/export
VOL_NAME_SUFFIX=uploads
migrate

16
web/components/issues/issue-layouts/empty-states/cycle.tsx
View File

@ -28,7 +28,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
const {
cycleIssue: cycleIssueStore,
cycleIssues: cycleIssueStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
@ -40,15 +40,13 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
const issueIds = data.map((i) => i.id);
await cycleIssueStore
.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
await cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), cycleId.toString(), issueIds).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
});
};
return (

26
web/components/issues/issue-layouts/empty-states/module.tsx
View File

@ -22,7 +22,11 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
// states
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
const { moduleIssue: moduleIssueStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
const {
moduleIssues: moduleIssueStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const { setToastAlert } = useToast();
@ -31,15 +35,13 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
const issueIds = data.map((i) => i.id);
await moduleIssueStore
.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the module. Please try again.",
})
);
await moduleIssueStore.addIssueToModule(workspaceSlug.toString(), moduleId.toString(), issueIds).catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the module. Please try again.",
})
);
};
return (
@ -60,8 +62,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("MODULE_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true)
}
commandPaletteStore.toggleCreateIssueModal(true);
},
}}
secondaryButton={
<Button

3
web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
View File

@ -18,6 +18,7 @@ export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
const {
workspace: { workspaceLabels },
workspaceProfileIssuesFilter: { issueFilters, updateFilters },
projectMember: { projectMembers },
} = useMobxStore();
const userFilters = issueFilters?.filters;
@ -64,7 +65,7 @@ export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={workspaceLabels ?? []}
members={[]}
members={projectMembers?.map((m) => m.member)}
states={[]}
/>
</div>

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

@ -25,7 +25,6 @@ import {
IViewIssuesFilterStore,
IViewIssuesStore,
} from "store/issues";
import { EUserWorkspaceRoles } from "layouts/settings-layout/workspace/sidebar";
import { TUnGroupedIssues } from "store/issues/types";
interface IBaseGanttRoot {
@ -46,6 +45,10 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
const { projectDetails } = useProjectDetails();
const {
user: { currentProjectRole },
} = useMobxStore();
const appliedDisplayFilters = issueFiltersStore.issueFilters?.displayFilters;
const issuesResponse = issueStore.getIssues;
@ -69,7 +72,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
);
};
const isAllowed = (projectDetails?.member_role || 0) >= EUserWorkspaceRoles.MEMBER;
const isAllowed = currentProjectRole && currentProjectRole >= 15;
return (
<>

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

@ -54,6 +54,7 @@ export interface IBaseKanBanLayout {
showLoader?: boolean;
viewId?: string;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
@ -66,6 +67,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
showLoader,
viewId,
currentStore,
addIssuesToView,
} = props;
const {
@ -186,6 +188,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
disableIssueCreation={!enableIssueCreation}
isReadOnly={!enableInlineEditing}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
) : (
<KanBanSwimLanes
@ -226,6 +229,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
enableQuickIssueCreate={enableQuickAdd}
isReadOnly={!enableInlineEditing}
currentStore={currentStore}
addIssuesToView={(issues) => {
console.log("kanban existingIds", issues);
return Promise.resolve({} as IIssue);
}}
/>
)}
</DragDropContext>

12
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -43,6 +43,7 @@ export interface IGroupByKanBan {
viewId?: string;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
isReadOnly: boolean;
}
@ -70,6 +71,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
disableIssueCreation,
isReadOnly,
currentStore,
addIssuesToView,
} = props;
const verticalAlignPosition = (_list: any) =>
@ -95,6 +97,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
</div>
)}
@ -201,6 +204,7 @@ export interface IKanBan {
viewId?: string;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
isReadOnly: boolean;
}
@ -231,6 +235,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation,
isReadOnly,
currentStore,
addIssuesToView,
} = props;
const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
@ -262,6 +267,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -290,6 +296,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -318,6 +325,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -346,6 +354,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -374,6 +383,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -402,6 +412,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -430,6 +441,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</div>

4
web/components/issues/issue-layouts/kanban/headers/assignee.tsx
View File

@ -6,6 +6,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
// ui
import { Avatar } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IAssigneesHeader {
column_id: string;
@ -18,6 +19,7 @@ export interface IAssigneesHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
@ -34,6 +36,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const assignee = column_value ?? null;
@ -63,6 +66,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
issuePayload={{ assignees: [assignee?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

4
web/components/issues/issue-layouts/kanban/headers/created_by.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { Icon } from "./assignee";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface ICreatedByHeader {
column_id: string;
@ -17,6 +18,7 @@ export interface ICreatedByHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
@ -31,6 +33,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const createdBy = column_value ?? null;
@ -60,6 +63,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
issuePayload={{ created_by: createdBy?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

36
web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View File

@ -29,11 +29,9 @@ interface IHeaderGroupByCard {
issuePayload: Partial<IIssue>;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const moduleService = new ModuleService();
const issueService = new IssueService();
export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
const {
sub_group_by,
@ -46,6 +44,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
issuePayload,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
@ -60,34 +59,13 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
const renderExistingIssueModal = moduleId || cycleId;
const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
const issues = data.map((i) => i.id);
await moduleService
.addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the module. Please try again.",
})
);
};
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
await issueService
.addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload)
.catch(() => {
addIssuesToView &&
addIssuesToView(issues)?.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
@ -109,7 +87,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
isOpen={openExistingIssueListModal}
handleClose={() => setOpenExistingIssueListModal(false)}
searchParams={ExistingIssuesListModalPayload}
handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
handleOnSubmit={handleAddIssuesToView}
/>
)}
<div

10
web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
View File

@ -9,6 +9,7 @@ import { CreatedByHeader } from "./created_by";
// mobx
import { observer } from "mobx-react-lite";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IKanBanGroupByHeaderRoot {
column_id: string;
@ -20,6 +21,7 @@ export interface IKanBanGroupByHeaderRoot {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
@ -33,6 +35,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
disableIssueCreation,
handleKanBanToggle,
currentStore,
addIssuesToView,
}) => (
<>
{group_by && group_by === "project" && (
@ -47,6 +50,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -62,6 +66,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "state_detail.group" && (
@ -76,6 +81,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "priority" && (
@ -90,6 +96,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "labels" && (
@ -104,6 +111,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "assignees" && (
@ -118,6 +126,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "created_by" && (
@ -132,6 +141,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

4
web/components/issues/issue-layouts/kanban/headers/label.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface ILabelHeader {
column_id: string;
@ -16,6 +17,7 @@ export interface ILabelHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const Icon = ({ color }: any) => (
@ -34,6 +36,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const label = column_value ?? null;
@ -63,6 +66,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
issuePayload={{ labels: [label?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

4
web/components/issues/issue-layouts/kanban/headers/priority.tsx
View File

@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
// Icons
import { PriorityIcon } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IPriorityHeader {
column_id: string;
@ -20,6 +21,7 @@ export interface IPriorityHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
@ -34,6 +36,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const priority = column_value || null;
@ -63,6 +66,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
issuePayload={{ priority: priority?.key }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

4
web/components/issues/issue-layouts/kanban/headers/project.tsx
View File

@ -6,6 +6,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
// emoji helper
import { renderEmoji } from "helpers/emoji.helper";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IProjectHeader {
column_id: string;
@ -18,6 +19,7 @@ export interface IProjectHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
@ -34,6 +36,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const project = column_value ?? null;
@ -63,6 +66,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
issuePayload={{ project: project?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

4
web/components/issues/issue-layouts/kanban/headers/state-group.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { StateGroupIcon } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IStateGroupHeader {
column_id: string;
@ -17,6 +18,7 @@ export interface IStateGroupHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@ -37,6 +39,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const stateGroup = column_value || null;
@ -66,6 +69,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

4
web/components/issues/issue-layouts/kanban/headers/state.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { Icon } from "./state-group";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IStateHeader {
column_id: string;
@ -17,6 +18,7 @@ export interface IStateHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const StateHeader: FC<IStateHeader> = observer((props) => {
@ -31,6 +33,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const state = column_value ?? null;
@ -60,6 +63,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
issuePayload={{ state: state?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
))}
</>

9
web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
View File

@ -8,6 +8,7 @@ import { PriorityHeader } from "./priority";
import { LabelHeader } from "./label";
import { CreatedByHeader } from "./created_by";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IKanBanSubGroupByHeaderRoot {
column_id: string;
@ -19,6 +20,7 @@ export interface IKanBanSubGroupByHeaderRoot {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
@ -32,6 +34,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
return (
@ -48,6 +51,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{sub_group_by && sub_group_by === "state_detail.group" && (
@ -62,6 +66,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{sub_group_by && sub_group_by === "priority" && (
@ -76,6 +81,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{sub_group_by && sub_group_by === "labels" && (
@ -90,6 +96,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{sub_group_by && sub_group_by === "assignees" && (
@ -104,6 +111,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{sub_group_by && sub_group_by === "created_by" && (
@ -118,6 +126,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

1
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -50,6 +50,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
QuickActions={CycleIssueQuickActions}
viewId={cycleId}
currentStore={EProjectStore.CYCLE}
addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
/>
);
});

1
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -72,6 +72,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
QuickActions={ModuleIssueQuickActions}
viewId={moduleId}
currentStore={EProjectStore.MODULE}
addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
/>
);
});

15
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -23,6 +23,7 @@ interface ISubGroupSwimlaneHeader {
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
issueIds,
@ -34,6 +35,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
handleKanBanToggle,
disableIssueCreation,
currentStore,
addIssuesToView,
}) => {
const calculateIssueCount = (column_id: string) => {
let issueCount = 0;
@ -60,6 +62,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
</div>
))}
@ -114,6 +117,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
disableIssueCreation,
enableQuickIssueCreate,
isReadOnly,
addIssuesToView,
} = props;
const calculateIssueCount = (column_id: string) => {
@ -142,6 +146,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
addIssuesToView={addIssuesToView}
/>
</div>
<div className="w-full border-b border-custom-border-400 border-dashed" />
@ -170,6 +175,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
enableQuickIssueCreate={enableQuickIssueCreate}
isDragStarted={isDragStarted}
isReadOnly={isReadOnly}
addIssuesToView={addIssuesToView}
/>
</div>
)}
@ -200,6 +206,7 @@ export interface IKanBanSwimLanes {
isDragStarted?: boolean;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
enableQuickIssueCreate: boolean;
isReadOnly: boolean;
}
@ -228,6 +235,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
enableQuickIssueCreate,
isReadOnly,
currentStore,
addIssuesToView,
} = props;
return (
@ -245,6 +253,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -260,6 +269,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -275,6 +285,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -289,6 +300,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -304,6 +316,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -319,6 +332,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -334,6 +348,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</div>

13
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -54,10 +54,20 @@ interface IBaseListRoot {
getProjects: (projectStore: IProjectStore) => IProject[] | null;
viewId?: string;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const BaseListRoot = observer((props: IBaseListRoot) => {
const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId, currentStore } = props;
const {
issueFilterStore,
issueStore,
QuickActions,
issueActions,
getProjects,
viewId,
currentStore,
addIssuesToView,
} = props;
const {
project: projectStore,
@ -130,6 +140,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
isReadonly={!enableInlineEditing}
disableIssueCreation={!enableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
</div>
)}

13
web/components/issues/issue-layouts/list/default.tsx
View File

@ -32,6 +32,7 @@ export interface IGroupByList {
) => Promise<IIssue | undefined>;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
viewId?: string;
}
@ -54,6 +55,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
viewId,
disableIssueCreation,
currentStore,
addIssuesToView,
} = props;
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
@ -91,6 +93,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
</div>
@ -147,6 +150,7 @@ export interface IList {
viewId?: string;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const List: React.FC<IList> = (props) => {
@ -170,6 +174,7 @@ export const List: React.FC<IList> = (props) => {
members,
projects,
currentStore,
addIssuesToView,
} = props;
return (
@ -193,6 +198,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -214,6 +220,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -235,6 +242,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -256,6 +264,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -277,6 +286,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -298,6 +308,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -319,6 +330,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -340,6 +352,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</div>

5
web/components/issues/issue-layouts/list/headers/assignee.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
// ui
import { Avatar } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IAssigneesHeader {
column_id: string;
@ -12,12 +13,13 @@ export interface IAssigneesHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const assignee = column_value ?? null;
@ -31,6 +33,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
issuePayload={{ assignees: [assignee?.member?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/created-by.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { Icon } from "./assignee";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface ICreatedByHeader {
column_id: string;
@ -11,10 +12,11 @@ export interface ICreatedByHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const createdBy = column_value ?? null;
@ -28,6 +30,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
issuePayload={{ created_by: createdBy?.member?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/empty-group.tsx
View File

@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IEmptyHeader {
column_id: string;
@ -9,10 +10,11 @@ export interface IEmptyHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
return (
<HeaderGroupByCard
@ -21,6 +23,7 @@ export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
);
});

49
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View File

@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
// types
import { IIssue, ISearchIssueResponse } from "types";
import { EProjectStore } from "store/command-palette.store";
import useToast from "hooks/use-toast";
interface IHeaderGroupByCard {
icon?: React.ReactNode;
@ -19,10 +20,11 @@ interface IHeaderGroupByCard {
issuePayload: Partial<IIssue>;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const HeaderGroupByCard = observer(
({ icon, title, count, issuePayload, disableIssueCreation, currentStore }: IHeaderGroupByCard) => {
({ icon, title, count, issuePayload, disableIssueCreation, currentStore, addIssuesToView }: IHeaderGroupByCard) => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
@ -30,43 +32,24 @@ export const HeaderGroupByCard = observer(
const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
const { setToastAlert } = useToast();
const renderExistingIssueModal = moduleId || cycleId;
const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
const issues = data.map((i) => i.id);
// await moduleService
// .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
// .catch(() =>
// setToastAlert({
// type: "error",
// title: "Error!",
// message: "Selected issues could not be added to the module. Please try again.",
// })
// );
};
const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
if (!workspaceSlug || !projectId) return;
const payload = {
issues: data.map((i) => i.id),
};
// await issueService
// .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
// .catch(() => {
// setToastAlert({
// type: "error",
// title: "Error!",
// message: "Selected issues could not be added to the cycle. Please try again.",
// });
// });
addIssuesToView &&
addIssuesToView(issues)?.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Selected issues could not be added to the cycle. Please try again.",
});
});
};
return (
@ -119,7 +102,7 @@ export const HeaderGroupByCard = observer(
isOpen={openExistingIssueListModal}
handleClose={() => setOpenExistingIssueListModal(false)}
searchParams={ExistingIssuesListModalPayload}
handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
handleOnSubmit={handleAddIssuesToView}
/>
)}
</div>

13
web/components/issues/issue-layouts/list/headers/group-by-root.tsx
View File

@ -10,6 +10,7 @@ import { CreatedByHeader } from "./created-by";
// mobx
import { observer } from "mobx-react-lite";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IListGroupByHeaderRoot {
column_id: string;
@ -18,10 +19,12 @@ export interface IListGroupByHeaderRoot {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore } = props;
const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore, addIssuesToView } =
props;
return (
<>
@ -32,6 +35,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "project" && (
@ -41,6 +45,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
@ -51,6 +56,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "state_detail.group" && (
@ -60,6 +66,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "priority" && (
@ -69,6 +76,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "labels" && (
@ -78,6 +86,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "assignees" && (
@ -87,6 +96,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
{group_by && group_by === "created_by" && (
@ -96,6 +106,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/label.tsx
View File

@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface ILabelHeader {
column_id: string;
@ -10,6 +11,7 @@ export interface ILabelHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const Icon = ({ color }: any) => (
@ -17,7 +19,7 @@ const Icon = ({ color }: any) => (
);
export const LabelHeader: FC<ILabelHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const label = column_value ?? null;
@ -31,6 +33,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
issuePayload={{ labels: [label.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/priority.tsx
View File

@ -4,6 +4,7 @@ import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-re
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IPriorityHeader {
column_id: string;
@ -11,6 +12,7 @@ export interface IPriorityHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const Icon = ({ priority }: any) => (
@ -40,7 +42,7 @@ const Icon = ({ priority }: any) => (
);
export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const priority = column_value ?? null;
@ -54,6 +56,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
issuePayload={{ priority: priority?.key }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/project.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
// emoji helper
import { renderEmoji } from "helpers/emoji.helper";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IProjectHeader {
column_id: string;
@ -12,12 +13,13 @@ export interface IProjectHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const project = column_value ?? null;
@ -31,6 +33,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
issuePayload={{ project: project?.id ?? "" }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/state-group.tsx
View File

@ -7,6 +7,7 @@ import { StateGroupIcon } from "@plane/ui";
// helpers
import { capitalizeFirstLetter } from "helpers/string.helper";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IStateGroupHeader {
column_id: string;
@ -14,6 +15,7 @@ export interface IStateGroupHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@ -23,7 +25,7 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
);
export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const stateGroup = column_value ?? null;
@ -37,6 +39,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

5
web/components/issues/issue-layouts/list/headers/state.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { Icon } from "./state-group";
import { EProjectStore } from "store/command-palette.store";
import { IIssue } from "types";
export interface IStateHeader {
column_id: string;
@ -11,10 +12,11 @@ export interface IStateHeader {
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
}
export const StateHeader: FC<IStateHeader> = observer((props) => {
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
const state = column_value ?? null;
@ -28,6 +30,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
issuePayload={{ state: state?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
addIssuesToView={addIssuesToView}
/>
)}
</>

1
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -49,6 +49,7 @@ export const CycleListLayout: React.FC = observer(() => {
getProjects={getProjects}
viewId={cycleId}
currentStore={EProjectStore.CYCLE}
addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
/>
);
});

1
web/components/issues/issue-layouts/list/roots/module-root.tsx
View File

@ -50,6 +50,7 @@ export const ModuleListLayout: React.FC = observer(() => {
getProjects={getProjects}
viewId={moduleId}
currentStore={EProjectStore.MODULE}
addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
/>
);
});

6
web/components/issues/modal.tsx
View File

@ -220,13 +220,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
if (!workspaceSlug || !activeProject) return;
cycleIssueStore.addIssueToCycle(workspaceSlug, activeProject, cycleId, issue);
cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, [issue.id]);
};
const addIssueToModule = async (issue: IIssue, moduleId: string) => {
if (!workspaceSlug || !activeProject) return;
moduleIssueStore.addIssueToModule(workspaceSlug, activeProject, moduleId, issue);
moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, [issue.id]);
};
const createIssue = async (payload: Partial<IIssue>) => {
@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
if (handleSubmit) {
await handleSubmit(res);
} else {
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation");
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);

333
web/components/onboarding/invite-members.tsx
View File

@ -2,7 +2,17 @@ import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Listbox, Transition } from "@headlessui/react";
import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
import {
Control,
Controller,
FieldArrayWithId,
UseFieldArrayRemove,
UseFormGetValues,
UseFormSetValue,
UseFormWatch,
useFieldArray,
useForm,
} from "react-hook-form";
import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
// services
import { WorkspaceService } from "services/workspace.service";
@ -34,6 +44,7 @@ type Props = {
type EmailRole = {
email: string;
role: TUserWorkspaceRole;
role_active: boolean;
};
type FormValues = {
@ -44,6 +55,9 @@ type InviteMemberFormProps = {
index: number;
remove: UseFieldArrayRemove;
control: Control<FormValues, any>;
setValue: UseFormSetValue<FormValues>;
getValues: UseFormGetValues<FormValues>;
watch: UseFormWatch<FormValues>;
field: FieldArrayWithId<FormValues, "emails", "id">;
fields: FieldArrayWithId<FormValues, "emails", "id">[];
errors: any;
@ -53,9 +67,33 @@ type InviteMemberFormProps = {
// services
const workspaceService = new WorkspaceService();
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const placeholderEmails = [
"charlie.taylor@frstflit.com",
"octave.chanute@frstflit.com",
"george.spratt@frstflit.com",
"frank.coffyn@frstflit.com",
"amos.root@frstflit.com",
"edward.deeds@frstflit.com",
"charles.m.manly@frstflit.com",
"glenn.curtiss@frstflit.com",
"thomas.selfridge@frstflit.com",
"albert.zahm@frstflit.com",
];
const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
const { control, index, fields, remove, errors, isInvitationDisabled, setIsInvitationDisabled } = props;
const {
control,
index,
fields,
remove,
errors,
isInvitationDisabled,
setIsInvitationDisabled,
setValue,
getValues,
watch,
} = props;
const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
@ -64,131 +102,159 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
const email = watch(`emails.${index}.email`);
const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.value === "") {
const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
if (validEmail) {
setIsInvitationDisabled(false);
} else {
setIsInvitationDisabled(true);
}
if (getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, false);
}
} else {
if (!getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, true);
}
if (isInvitationDisabled && emailRegex.test(event.target.value)) {
setIsInvitationDisabled(false);
} else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
setIsInvitationDisabled(true);
}
}
};
return (
<div className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7 bg-onboarding-background-200 rounded-md">
<Controller
control={control}
name={`emails.${index}.email`}
rules={{
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Invalid Email ID",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id={`emails.${index}.email`}
name={`emails.${index}.email`}
type="text"
value={value}
onChange={(event) => {
if (event.target.value === "") {
const validEmail = !fields
.filter((ele) => {
ele.id !== `emails.${index}.email`;
})
.map((ele) => ele.email)
.includes("");
if (validEmail) {
setIsInvitationDisabled(false);
} else {
setIsInvitationDisabled(true);
}
} else if (
isInvitationDisabled &&
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(event.target.value)
) {
setIsInvitationDisabled(false);
} else if (
!isInvitationDisabled &&
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(event.target.value)
) {
setIsInvitationDisabled(true);
}
onChange(event);
}}
ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)}
placeholder="Enter their email..."
className="text-xs sm:text-sm w-full h-12 placeholder:text-onboarding-text-400 border-onboarding-border-100"
/>
)}
/>
</div>
<div className="col-span-3 bg-onboarding-background-200 rounded-md border items-center flex border-onboarding-border-100">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Listbox
as="div"
value={value}
onChange={(val) => {
onChange(val);
setIsDropdownOpen(false);
}}
className="flex-shrink-0 text-left w-full"
>
<Listbox.Button
type="button"
ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md duration-300"
<div>
<div className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7 bg-onboarding-background-200 rounded-md">
<Controller
control={control}
name={`emails.${index}.email`}
rules={{
pattern: {
value: emailRegex,
message: "Invalid Email ID",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id={`emails.${index}.email`}
name={`emails.${index}.email`}
type="text"
value={value}
onChange={(event) => {
emailOnChange(event);
onChange(event);
}}
ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)}
placeholder={placeholderEmails[index % placeholderEmails.length]}
className="text-xs sm:text-sm w-full h-12 placeholder:text-onboarding-text-400 border-onboarding-border-100"
/>
)}
/>
</div>
<div className="col-span-3 bg-onboarding-background-200 rounded-md border items-center flex border-onboarding-border-100">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Listbox
as="div"
value={value}
onChange={(val) => {
onChange(val);
setIsDropdownOpen(false);
setValue(`emails.${index}.role_active`, true);
}}
className="flex-shrink-0 text-left w-full"
>
<span className="text-xs text-onboarding-text-400 sm:text-sm">{ROLE[value]}</span>
<ChevronDown className="h-4 w-4 stroke-onboarding-text-400" />
</Listbox.Button>
<Transition
show={isDropdownOpen}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options
ref={dropdownRef}
className="fixed w-36 z-10 border border-onboarding-border-100 mt-1 overflow-y-auto rounded-md bg-onboarding-background-200 text-xs shadow-lg focus:outline-none max-h-48"
<Listbox.Button
type="button"
ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md duration-300"
>
<div className="space-y-1 p-2">
{Object.entries(ROLE).map(([key, value]) => (
<Listbox.Option
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{value}</div>
{selected && <Check className="h-4 w-4 flex-shrink-0" />}
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</Listbox>
)}
/>
<span
className={`text-xs ${
!getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400"
: "text-onboarding-text-100"
} sm:text-sm`}
>
{ROLE[value]}
</span>
<ChevronDown
className={`h-4 w-4 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
}`}
/>
</Listbox.Button>
<Transition
show={isDropdownOpen}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options
ref={dropdownRef}
className="fixed w-36 z-10 border border-onboarding-border-100 mt-1 overflow-y-auto rounded-md bg-onboarding-background-200 text-xs shadow-lg focus:outline-none max-h-48"
>
<div className="space-y-1 p-2">
{Object.entries(ROLE).map(([key, value]) => (
<Listbox.Option
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{value}</div>
{selected && <Check className="h-4 w-4 flex-shrink-0" />}
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</Listbox>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="hidden group-hover:grid self-center place-items-center rounded ml-3"
onClick={() => remove(index)}
>
<XCircle className="h-3.5 w-3.5 text-custom-text-400" />
</button>
)}
</div>
{fields.length > 1 && (
<button
type="button"
className="hidden group-hover:grid self-center place-items-center rounded ml-3"
onClick={() => remove(index)}
>
<XCircle className="h-3.5 w-3.5 text-custom-text-400" />
</button>
{email && !emailRegex.test(email) && (
<div className="">
<span className="text-sm">🤥</span>{" "}
<span className="text-xs text-red-500 mt-1">That doesn{"'"}t look like an email address.</span>
</div>
)}
</div>
);
@ -204,6 +270,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
const {
control,
watch,
getValues,
setValue,
handleSubmit,
formState: { isSubmitting, errors, isValid },
} = useForm<FormValues>();
@ -229,7 +298,12 @@ export const InviteMembers: React.FC<Props> = (props) => {
payload = { emails: payload.emails.filter((email) => email.email !== "") };
await workspaceService
.inviteWorkspace(workspace.slug, payload)
.inviteWorkspace(workspace.slug, {
emails: payload.emails.map((email) => ({
email: email.email,
role: email.role,
})),
})
.then(async () => {
setToastAlert({
type: "success",
@ -249,16 +323,16 @@ export const InviteMembers: React.FC<Props> = (props) => {
};
const appendField = () => {
append({ email: "", role: 15 });
append({ email: "", role: 15, role_active: false });
};
useEffect(() => {
if (fields.length === 0) {
append(
[
{ email: "", role: 15 },
{ email: "", role: 15 },
{ email: "", role: 15 },
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
],
{
focusIndex: 0,
@ -325,6 +399,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
<div className="space-y-3 sm:space-y-4 mb-3">
{fields.map((field, index) => (
<InviteMemberForm
watch={watch}
getValues={getValues}
setValue={setValue}
isInvitationDisabled={isInvitationDisabled}
setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
control={control}

19
web/components/profile/profile-issues.tsx
View File

@ -1,12 +1,8 @@
import React, { ReactElement } from "react";
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
import { ProfileIssuesAppliedFiltersRoot } from "components/issues";
@ -31,12 +27,15 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
workspaceProfileIssuesFilter: { issueFilters, fetchFilters },
}: RootStore = useMobxStore();
useSWR(workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}` : null, async () => {
if (workspaceSlug && userId) {
await fetchFilters(workspaceSlug);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
useSWR(
workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${props.type}` : null,
async () => {
if (workspaceSlug && userId) {
await fetchFilters(workspaceSlug);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
}
}
});
);
const activeLayout = issueFilters?.displayFilters?.layout || undefined;

52
web/components/workspace/send-workspace-invitation-modal.tsx
View File

@ -1,10 +1,12 @@
import React, { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
import { Plus, X } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Button, CustomSelect, Input } from "@plane/ui";
// icons
import { Plus, X } from "lucide-react";
// types
import { IWorkspaceBulkInviteFormData, TUserWorkspaceRole } from "types";
// constants
@ -34,9 +36,12 @@ const defaultValues: FormValues = {
],
};
export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose, onSubmit } = props;
// mobx store
const {
user: { currentWorkspaceRole },
} = useMobxStore();
// form info
const {
control,
@ -59,30 +64,6 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
}, 350);
};
// const onSubmit = async (formData: FormValues) => {
// if (!workspaceSlug) return;
// return workspaceService
// .inviteWorkspace(workspaceSlug, formData, user)
// .then(async () => {
// if (onSuccess) await onSuccess();
// handleClose();
// setToastAlert({
// type: "success",
// title: "Success!",
// message: "Invitations sent successfully.",
// });
// })
// .catch((err) =>
// setToastAlert({
// type: "error",
// title: "Error!",
// message: `${err.error ?? "Something went wrong. Please try again."}`,
// })
// );
// };
const appendField = () => {
append({ email: "", role: 15 });
};
@ -181,11 +162,14 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
width="w-full"
input
>
{Object.entries(ROLE).map(([key, value]) => (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
))}
{Object.entries(ROLE).map(([key, value]) => {
if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
return (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
);
})}
</CustomSelect>
)}
/>
@ -230,4 +214,4 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
</Dialog>
</Transition.Root>
);
};
});

67
web/components/workspace/settings/members-list-item.tsx
View File

@ -1,7 +1,9 @@
import { useState, FC } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
import { ChevronDown, Dot, XCircle } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -10,12 +12,10 @@ import useToast from "hooks/use-toast";
import { ConfirmWorkspaceMemberRemove } from "components/workspace";
// ui
import { CustomSelect, Tooltip } from "@plane/ui";
// icons
import { ChevronDown, Dot, XCircle } from "lucide-react";
// types
import { TUserWorkspaceRole } from "types";
// constants
import { ROLE } from "constants/workspace";
import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
type Props = {
member: {
@ -33,7 +33,7 @@ type Props = {
};
};
export const WorkspaceMembersListItem: FC<Props> = (props) => {
export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
const { member } = props;
// router
const router = useRouter();
@ -43,7 +43,6 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings, leaveWorkspace },
} = useMobxStore();
const isAdmin = currentWorkspaceRole === 20;
// states
const [removeMemberModal, setRemoveMemberModal] = useState(false);
// hooks
@ -53,10 +52,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
if (!workspaceSlug || !currentUserSettings) return;
await leaveWorkspace(workspaceSlug.toString())
.then(() => {
if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
else router.push("/create-workspace");
})
.then(() => router.push("/profile"))
.catch((err) =>
setToastAlert({
type: "error",
@ -114,6 +110,20 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
} else await handleRemoveInvitation();
};
// is the member current logged in user
const isCurrentUser = member.memberId === currentWorkspaceMemberInfo?.member;
// is the current logged in user admin
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
// role change access-
// 1. user cannot change their own role
// 2. only admin or member can change role
// 3. user cannot change role of higher role
const hasRoleChangeAccess =
currentWorkspaceRole &&
!isCurrentUser &&
[EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole) &&
member.role <= currentWorkspaceRole;
if (!currentWorkspaceMemberInfo) return null;
return (
@ -180,12 +190,12 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
<div className="flex item-center gap-1 px-2 py-0.5 rounded">
<span
className={`flex items-center text-xs font-medium rounded ${
member.memberId !== currentWorkspaceMemberInfo.member ? "" : "text-custom-sidebar-text-400"
hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
}`}
>
{ROLE[member.role as keyof typeof ROLE]}
</span>
{member.memberId !== currentWorkspaceMemberInfo.member && (
{hasRoleChangeAccess && (
<span className="grid place-items-center">
<ChevronDown className="h-3 w-3" />
</span>
@ -206,11 +216,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
});
});
}}
disabled={
member.memberId === currentWorkspaceMemberInfo.member ||
!member.status ||
Boolean(currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < member.role)
}
disabled={!hasRoleChangeAccess}
placement="bottom-end"
>
{Object.keys(ROLE).map((key) => {
@ -224,23 +230,24 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
);
})}
</CustomSelect>
{isAdmin && (
<Tooltip
tooltipContent={
member.memberId === currentWorkspaceMemberInfo.member ? "Leave workspace" : "Remove member"
<Tooltip
tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
disabled={!isAdmin && !isCurrentUser}
>
<button
type="button"
onClick={() => setRemoveMemberModal(true)}
className={
isAdmin || isCurrentUser
? "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
: "opacity-0 pointer-events-none"
}
>
<button
type="button"
onClick={() => setRemoveMemberModal(true)}
className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
>
<XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
</button>
</Tooltip>
)}
<XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
</button>
</Tooltip>
</div>
</div>
</>
);
};
});

19
web/components/workspace/settings/members-list.tsx
View File

@ -9,18 +9,14 @@ import { WorkspaceMembersListItem } from "components/workspace";
// ui
import { Loader } from "@plane/ui";
export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ searchQuery }) => {
export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props) => {
const { searchQuery } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const {
workspaceMember: {
workspaceMembers,
workspaceMembersWithInvitations,
workspaceMemberInvitations,
fetchWorkspaceMemberInvitations,
},
user: { currentWorkspaceMemberInfo },
workspaceMember: { workspaceMembersWithInvitations, fetchWorkspaceMemberInvitations },
} = useMobxStore();
// fetching workspace invitations
useSWR(
@ -36,12 +32,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
return `${email}${displayName}${fullName}`.includes(searchQuery.toLowerCase());
});
if (
!workspaceMembers ||
!workspaceMemberInvitations ||
!workspaceMembersWithInvitations ||
!currentWorkspaceMemberInfo
)
if (!workspaceMembersWithInvitations)
return (
<Loader className="space-y-5">
<Loader.Item height="40px" />

68
web/components/workspace/settings/workspace-details.tsx
View File

@ -14,12 +14,12 @@ import { DeleteWorkspaceModal } from "components/workspace";
import { WorkspaceImageUploadModal } from "components/core";
// ui
import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IWorkspace } from "types";
// constants
import { ORGANIZATION_SIZE } from "constants/workspace";
import { trackEvent } from "helpers/event-tracker.helper";
import { copyUrlToClipboard } from "helpers/string.helper";
import { EUserWorkspaceRoles, ORGANIZATION_SIZE } from "constants/workspace";
const defaultValues: Partial<IWorkspace> = {
name: "",
@ -40,9 +40,9 @@ export const WorkspaceDetails: FC = observer(() => {
const {
workspace: { currentWorkspace, updateWorkspace },
user: { currentWorkspaceRole },
trackEvent: { postHogEventTracker }
trackEvent: { postHogEventTracker },
} = useMobxStore();
const isAdmin = currentWorkspaceRole === 20;
// hooks
const { setToastAlert } = useToast();
// form info
@ -67,28 +67,22 @@ export const WorkspaceDetails: FC = observer(() => {
await updateWorkspace(currentWorkspace.slug, payload)
.then((res) => {
postHogEventTracker(
'WORKSPACE_UPDATE',
{
...res,
state: "SUCCESS"
}
)
postHogEventTracker("WORKSPACE_UPDATE", {
...res,
state: "SUCCESS",
});
setToastAlert({
title: "Success",
type: "success",
message: "Workspace updated successfully",
});
}).catch((err) => {
postHogEventTracker(
'WORKSPACE_UPDATE',
{
state: "FAILED"
}
);
console.error(err)
}
);
})
.catch((err) => {
postHogEventTracker("WORKSPACE_UPDATE", {
state: "FAILED",
});
console.error(err);
});
};
const handleRemoveLogo = () => {
@ -136,6 +130,8 @@ export const WorkspaceDetails: FC = observer(() => {
if (currentWorkspace) reset({ ...currentWorkspace });
}, [currentWorkspace, reset]);
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
if (!currentWorkspace)
return (
<div className="grid place-items-center h-full w-full px-4 sm:px-0">
@ -192,11 +188,10 @@ export const WorkspaceDetails: FC = observer(() => {
<button type="button" onClick={handleCopyUrl} className="text-sm tracking-tight">{`${
typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
}/${currentWorkspace.slug}`}</button>
<div className="flex item-center gap-2.5">
{isAdmin && (
<button
className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
onClick={() => setIsImageUploadModalOpen(true)}
disabled={!isAdmin}
>
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
<>
@ -207,14 +202,14 @@ export const WorkspaceDetails: FC = observer(() => {
"Upload logo"
)}
</button>
</div>
)}
</div>
</div>
<div className="flex flex-col gap-8 my-10">
<div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Workspace Name</h4>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Workspace name</h4>
<Controller
control={control}
name="name"
@ -243,7 +238,7 @@ export const WorkspaceDetails: FC = observer(() => {
</div>
<div className="flex flex-col gap-1 ">
<h4 className="text-sm">Company Size</h4>
<h4 className="text-sm">Company size</h4>
<Controller
name="organization_size"
control={control}
@ -277,9 +272,10 @@ export const WorkspaceDetails: FC = observer(() => {
id="url"
name="url"
type="url"
value={`${typeof window !== "undefined" &&
value={`${
typeof window !== "undefined" &&
window.location.origin.replace("http://", "").replace("https://", "")
}/${currentWorkspace.slug}`}
}/${currentWorkspace.slug}`}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.url)}
@ -291,11 +287,13 @@ export const WorkspaceDetails: FC = observer(() => {
</div>
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
{isSubmitting ? "Updating..." : "Update Workspace"}
</Button>
</div>
{isAdmin && (
<div className="flex items-center justify-between py-2">
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Updating..." : "Update Workspace"}
</Button>
</div>
)}
</div>
{isAdmin && (
<Disclosure as="div" className="border-t border-custom-border-100">

55
web/constants/workspace.ts
View File

@ -4,8 +4,16 @@ import JiraLogo from "public/services/jira.svg";
import CSVLogo from "public/services/csv.svg";
import ExcelLogo from "public/services/excel.svg";
import JSONLogo from "public/services/json.svg";
// types
import { TStaticViewTypes } from "types";
export enum EUserWorkspaceRoles {
GUEST = 5,
VIEWER = 10,
MEMBER = 15,
ADMIN = 20,
}
export const ROLE = {
5: "Guest",
10: "Viewer",
@ -105,3 +113,50 @@ export const RESTRICTED_URLS = [
"spaces",
"workspace-invitations",
];
export const WORKSPACE_SETTINGS_LINKS: {
label: string;
href: string;
access: EUserWorkspaceRoles;
}[] = [
{
label: "General",
href: `/settings`,
access: EUserWorkspaceRoles.GUEST,
},
{
label: "Members",
href: `/settings/members`,
access: EUserWorkspaceRoles.GUEST,
},
{
label: "Billing and plans",
href: `/settings/billing`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Integrations",
href: `/settings/integrations`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Imports",
href: `/settings/imports`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Exports",
href: `/settings/exports`,
access: EUserWorkspaceRoles.MEMBER,
},
{
label: "Webhooks",
href: `/settings/webhooks`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "API tokens",
href: `/settings/api-tokens`,
access: EUserWorkspaceRoles.ADMIN,
},
];

71
web/layouts/settings-layout/workspace/sidebar.tsx
View File

@ -1,82 +1,35 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { RootStore } from "store/root";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
export enum EUserWorkspaceRoles {
GUEST = 5,
MEMBER = 15,
ADMIN = 20,
}
// constants
import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
export const WorkspaceSettingsSidebar = () => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { user: userStore }: RootStore = useMobxStore();
// mobx store
const {
user: { currentWorkspaceRole },
} = useMobxStore();
const workspaceMemberInfo = userStore.currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
const workspaceLinks: Array<{
label: string;
href: string;
access: EUserWorkspaceRoles;
}> = [
{
label: "General",
href: `/${workspaceSlug}/settings`,
access: EUserWorkspaceRoles.GUEST,
},
{
label: "Members",
href: `/${workspaceSlug}/settings/members`,
access: EUserWorkspaceRoles.GUEST,
},
{
label: "Billing and plans",
href: `/${workspaceSlug}/settings/billing`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Integrations",
href: `/${workspaceSlug}/settings/integrations`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Imports",
href: `/${workspaceSlug}/settings/imports`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "Exports",
href: `/${workspaceSlug}/settings/exports`,
access: EUserWorkspaceRoles.MEMBER,
},
{
label: "Webhooks",
href: `/${workspaceSlug}/settings/webhooks`,
access: EUserWorkspaceRoles.ADMIN,
},
{
label: "API tokens",
href: `/${workspaceSlug}/settings/api-tokens`,
access: EUserWorkspaceRoles.ADMIN,
},
];
const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
return (
<div className="flex flex-col gap-6 w-80 px-5">
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
<div className="flex flex-col gap-1 w-full">
{workspaceLinks.map(
{WORKSPACE_SETTINGS_LINKS.map(
(link) =>
workspaceMemberInfo >= link.access && (
<Link key={link.href} href={link.href}>
<Link key={link.href} href={`/${workspaceSlug}/${link.href}`}>
<a>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
router.pathname.split("/")?.[3] === link.href.split("/")?.[2]
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`}

8
web/pages/[workspaceSlug]/settings/api-tokens.tsx
View File

@ -1,6 +1,9 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
@ -15,8 +18,7 @@ import { APITokenService } from "services/api_token.service";
import { NextPageWithLayout } from "types/app";
// constants
import { API_TOKENS_LIST } from "constants/fetch-keys";
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { EUserWorkspaceRoles } from "constants/workspace";
const apiTokenService = new APITokenService();
@ -31,7 +33,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
user: { currentWorkspaceRole },
} = useMobxStore();
const isAdmin = currentWorkspaceRole === 20;
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
const { data: tokens } = useSWR(workspaceSlug && isAdmin ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
workspaceSlug && isAdmin ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null

53
web/pages/[workspaceSlug]/settings/billing.tsx
View File

@ -1,4 +1,6 @@
import { ReactElement } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
@ -8,27 +10,44 @@ import { WorkspaceSettingHeader } from "components/headers";
import { Button } from "@plane/ui";
// types
import { NextPageWithLayout } from "types/app";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const BillingSettingsPage: NextPageWithLayout = () => (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div>
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Billing & Plans</h3>
const BillingSettingsPage: NextPageWithLayout = observer(() => {
const {
user: { currentWorkspaceRole },
} = useMobxStore();
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
if (!isAdmin)
return (
<div className="h-full w-full flex justify-center mt-10 p-4">
<p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
</div>
</div>
<div className="px-4 py-6">
);
return (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div>
<h4 className="text-md mb-1 leading-6">Current plan</h4>
<p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
<a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
<Button variant="neutral-primary">View Plans</Button>
</a>
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Billing & Plans</h3>
</div>
</div>
</div>
</section>
);
<div className="px-4 py-6">
<div>
<h4 className="text-md mb-1 leading-6">Current plan</h4>
<p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
<a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
<Button variant="neutral-primary">View Plans</Button>
</a>
</div>
</div>
</section>
);
});
BillingSettingsPage.getLayout = function getLayout(page: ReactElement) {
BillingSettingsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

38
web/pages/[workspaceSlug]/settings/exports.tsx
View File

@ -1,4 +1,6 @@
import { ReactElement } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layout
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
@ -7,17 +9,35 @@ import { WorkspaceSettingHeader } from "components/headers";
import ExportGuide from "components/exporter/guide";
// types
import { NextPageWithLayout } from "types/app";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const ExportsPage: NextPageWithLayout = () => (
<div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Exports</h3>
const ExportsPage: NextPageWithLayout = observer(() => {
const {
user: { currentWorkspaceRole },
} = useMobxStore();
const hasPageAccess =
currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole);
if (!hasPageAccess)
return (
<div className="h-full w-full flex justify-center mt-10 p-4">
<p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
</div>
);
return (
<div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Exports</h3>
</div>
<ExportGuide />
</div>
<ExportGuide />
</div>
);
);
});
ExportsPage.getLayout = function getLayout(page: ReactElement) {
ExportsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

39
web/pages/[workspaceSlug]/settings/imports.tsx
View File

@ -1,4 +1,6 @@
import { ReactElement } from "react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { WorkspaceSettingLayout } from "layouts/settings-layout";
import { AppLayout } from "layouts/app-layout";
@ -7,17 +9,34 @@ import IntegrationGuide from "components/integration/guide";
import { WorkspaceSettingHeader } from "components/headers";
// types
import { NextPageWithLayout } from "types/app";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const ImportsPage: NextPageWithLayout = () => (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Imports</h3>
</div>
<IntegrationGuide />
</section>
);
const ImportsPage: NextPageWithLayout = observer(() => {
const {
user: { currentWorkspaceRole },
} = useMobxStore();
ImportsPage.getLayout = function getLayout(page: ReactElement) {
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
if (!isAdmin)
return (
<div className="h-full w-full flex justify-center mt-10 p-4">
<p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
</div>
);
return (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Imports</h3>
</div>
<IntegrationGuide />
</section>
);
});
ImportsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>

28
web/pages/[workspaceSlug]/settings/integrations.tsx
View File

@ -1,6 +1,9 @@
import { ReactElement } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { IntegrationService } from "services/integrations";
// layouts
@ -16,16 +19,31 @@ import { Loader } from "@plane/ui";
import { NextPageWithLayout } from "types/app";
// fetch-keys
import { APP_INTEGRATIONS } from "constants/fetch-keys";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
// services
const integrationService = new IntegrationService();
const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// mobx store
const {
user: { currentWorkspaceRole },
} = useMobxStore();
const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
workspaceSlug ? integrationService.getAppIntegrationsList() : null
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
if (!isAdmin)
return (
<div className="h-full w-full flex justify-center mt-10 p-4">
<p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
</div>
);
const { data: appIntegrations } = useSWR(workspaceSlug && isAdmin ? APP_INTEGRATIONS : null, () =>
workspaceSlug && isAdmin ? integrationService.getAppIntegrationsList() : null
);
return (
@ -43,7 +61,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
</div>
</section>
);
};
});
WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
return (

47
web/pages/[workspaceSlug]/settings/members.tsx
View File

@ -1,9 +1,11 @@
import { useState, ReactElement } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Search } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
@ -12,21 +14,20 @@ import { WorkspaceSettingHeader } from "components/headers";
import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace";
// ui
import { Button } from "@plane/ui";
// icons
import { Search } from "lucide-react";
// helpers
import { trackEvent } from "helpers/event-tracker.helper";
// types
import { NextPageWithLayout } from "types/app";
import { IWorkspaceBulkInviteFormData } from "types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store
const {
user: { currentWorkspaceRole },
workspaceMember: { inviteMembersToWorkspace },
trackEvent: { postHogEventTracker, setTrackElement }
trackEvent: { postHogEventTracker, setTrackElement },
} = useMobxStore();
// states
const [inviteModal, setInviteModal] = useState(false);
@ -57,15 +58,16 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
});
};
const hasAddMemberPermission =
currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole);
return (
<>
{workspaceSlug && (
<SendWorkspaceInvitationModal
isOpen={inviteModal}
onClose={() => setInviteModal(false)}
onSubmit={handleWorkspaceInvite}
/>
)}
<SendWorkspaceInvitationModal
isOpen={inviteModal}
onClose={() => setInviteModal(false)}
onSubmit={handleWorkspaceInvite}
/>
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
<h4 className="text-xl font-medium">Members</h4>
@ -79,13 +81,18 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<Button variant="primary" size="sm" onClick={() => {
setTrackElement("WORKSPACE_SETTINGS_MEMBERS_PAGE_HEADER");
setInviteModal(true)
}
}>
Add Member
</Button>
{hasAddMemberPermission && (
<Button
variant="primary"
size="sm"
onClick={() => {
setTrackElement("WORKSPACE_SETTINGS_MEMBERS_PAGE_HEADER");
setInviteModal(true);
}}
>
Add member
</Button>
)}
</div>
<WorkspaceMembersList searchQuery={searchQuery} />
</section>

46
web/store/issues/global/filter.store.ts
View File

@ -5,6 +5,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
import { EFilterType } from "store/issues/types";
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
import { IssueFilterBaseStore } from "../project-issues/base-issue-filter.store";
import { isEmpty } from "lodash";
interface IProjectIssuesFiltersOptions {
filters: IIssueFilterOptions;
@ -121,12 +122,18 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
let _projectIssueFilters = this.projectIssueFilters;
if (!_projectIssueFilters) _projectIssueFilters = {};
if (!_projectIssueFilters[workspaceSlug])
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
...issueFilters,
};
if (!_projectIssueFilters[workspaceSlug]) {
_projectIssueFilters[workspaceSlug] = { displayProperties: {} } as IProjectIssuesDisplayOptions;
}
if (
isEmpty(_projectIssueFilters[workspaceSlug].filters) ||
isEmpty(_projectIssueFilters[workspaceSlug].displayFilters)
) {
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
...issueFilters,
};
}
runInAction(() => {
this.projectIssueFilters = _projectIssueFilters;
@ -192,15 +199,15 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
fetchDisplayProperties = async (workspaceSlug: string) => {
try {
const displayProperties: IIssueDisplayProperties = {
assignee: false,
start_date: false,
due_date: false,
assignee: true,
start_date: true,
due_date: true,
labels: false,
key: false,
priority: false,
priority: true,
state: false,
sub_issue_count: false,
link: false,
sub_issue_count: true,
link: true,
attachment_count: false,
estimate: false,
created_on: false,
@ -209,12 +216,15 @@ export class GlobalIssuesFilterStore extends IssueFilterBaseStore implements IGl
let _projectIssueFilters = { ...this.projectIssueFilters };
if (!_projectIssueFilters) _projectIssueFilters = {};
if (!_projectIssueFilters[workspaceSlug])
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
displayProperties: displayProperties,
};
if (!_projectIssueFilters[workspaceSlug]) {
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {} } as IProjectIssuesDisplayOptions;
}
if (isEmpty(_projectIssueFilters[workspaceSlug].displayProperties)) {
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
displayProperties: displayProperties,
};
}
runInAction(() => {
this.projectIssueFilters = _projectIssueFilters;

44
web/store/issues/profile/filter.store.ts
View File

@ -5,6 +5,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
import { EFilterType } from "store/issues/types";
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
import { IssueFilterBaseStore } from "../project-issues/base-issue-filter.store";
import isEmpty from "lodash/isEmpty";
interface IProjectIssuesFiltersOptions {
filters: IIssueFilterOptions;
@ -121,12 +122,18 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
let _projectIssueFilters = this.projectIssueFilters;
if (!_projectIssueFilters) _projectIssueFilters = {};
if (!_projectIssueFilters[workspaceSlug])
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
...issueFilters,
};
if (!_projectIssueFilters[workspaceSlug]) {
_projectIssueFilters[workspaceSlug] = { displayProperties: {} } as IProjectIssuesDisplayOptions;
}
if (
isEmpty(_projectIssueFilters[workspaceSlug].filters) ||
isEmpty(_projectIssueFilters[workspaceSlug].displayFilters)
) {
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
...issueFilters,
};
}
runInAction(() => {
this.projectIssueFilters = _projectIssueFilters;
@ -184,7 +191,6 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
return _filters;
} catch (error) {
this.fetchDisplayFilters(workspaceSlug);
throw error;
}
};
@ -192,12 +198,12 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
fetchDisplayProperties = async (workspaceSlug: string) => {
try {
const displayProperties: IIssueDisplayProperties = {
assignee: false,
assignee: true,
start_date: false,
due_date: false,
labels: false,
key: false,
priority: false,
labels: true,
key: true,
priority: true,
state: false,
sub_issue_count: false,
link: false,
@ -209,12 +215,15 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
let _projectIssueFilters = { ...this.projectIssueFilters };
if (!_projectIssueFilters) _projectIssueFilters = {};
if (!_projectIssueFilters[workspaceSlug])
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {}, displayProperties: {} };
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
displayProperties: displayProperties,
};
if (!_projectIssueFilters[workspaceSlug]) {
_projectIssueFilters[workspaceSlug] = { filters: {}, displayFilters: {} } as IProjectIssuesDisplayOptions;
}
if (isEmpty(_projectIssueFilters[workspaceSlug].displayProperties)) {
_projectIssueFilters[workspaceSlug] = {
..._projectIssueFilters[workspaceSlug],
displayProperties: displayProperties,
};
}
runInAction(() => {
this.projectIssueFilters = _projectIssueFilters;
@ -242,7 +251,6 @@ export class ProfileIssuesFilterStore extends IssueFilterBaseStore implements IP
return properties;
} catch (error) {
this.fetchDisplayProperties(workspaceSlug);
throw error;
}
};

32
web/store/issues/profile/issue.store.ts
View File

@ -19,7 +19,7 @@ export interface IProfileIssuesStore {
loader: TLoader;
issues: { [user_id: string]: IProfileIssueTabTypes } | undefined;
currentUserId: string | null;
currentUserIssueTab: "assigned" | "created" | "subscribed" | null;
currentUserIssueTab: "assigned" | "created" | "subscribed" | undefined;
// computed
getIssues: IIssueResponse | undefined;
getIssuesIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined;
@ -28,6 +28,7 @@ export interface IProfileIssuesStore {
workspaceSlug: string,
userId: string,
loadType: TLoader,
_?: string,
type?: "assigned" | "created" | "subscribed"
) => Promise<IIssueResponse>;
createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@ -51,7 +52,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
loader: TLoader = "init-loader";
issues: { [user_id: string]: IProfileIssueTabTypes } | undefined = undefined;
currentUserId: string | null = null;
currentUserIssueTab: "assigned" | "created" | "subscribed" | null = null;
currentUserIssueTab: "assigned" | "created" | "subscribed" | undefined = undefined;
// root store
rootStore;
// service
@ -86,7 +87,9 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
if (!workspaceSlug || !this.currentUserId || !this.currentUserIssueTab) return;
const userFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, this.currentUserId, "mutation", this.currentUserIssueTab);
if (userFilters) {
this.fetchIssues(workspaceSlug, this.currentUserId, "mutation", this.currentUserIssueTab);
}
});
}
@ -102,6 +105,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
const displayFilters = this.rootStore?.workspaceProfileIssuesFilter?.issueFilters?.displayFilters;
if (!displayFilters) return undefined;
const subGroupBy = displayFilters?.sub_group_by;
const groupBy = displayFilters?.group_by;
const orderBy = displayFilters?.order_by;
const layout = displayFilters?.layout;
@ -113,6 +117,15 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
if (layout === "list" && orderBy) {
if (groupBy) issues = this.groupedIssues(groupBy, orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
else issues = this.unGroupedIssues(orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
} else if (layout === "kanban" && groupBy && orderBy) {
if (subGroupBy)
issues = this.subGroupedIssues(
subGroupBy,
groupBy,
orderBy,
this.issues[currentUserId][this.currentUserIssueTab]
);
else issues = this.groupedIssues(groupBy, orderBy, this.issues[currentUserId][this.currentUserIssueTab]);
}
return issues;
@ -138,6 +151,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
workspaceSlug: string,
userId: string,
loadType: TLoader = "init-loader",
_?: string,
type?: "assigned" | "created" | "subscribed"
) => {
try {
@ -186,20 +200,12 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
createIssue = async (workspaceSlug: string, userId: string, data: Partial<IIssue>) => {
try {
const projectId = data.project;
const moduleId = data.module_id;
const cycleId = data.cycle_id;
if (!projectId) return;
let response = {} as IIssue;
response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
// if (moduleId)
// response = await this.rootStore.moduleIssues.addIssueToModule(workspaceSlug, projectId, moduleId, response);
// if (cycleId)
// response = await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
let _issues = this.issues;
if (!_issues) _issues = {};
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
@ -227,8 +233,8 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
let _issues = { ...this.issues };
if (!_issues) _issues = {};
if (!_issues[userId]) _issues[userId] = { assigned: {}, created: {}, subscribed: {} };
_issues[projectId][this.currentUserIssueTab][userId] = {
..._issues[projectId][this.currentUserIssueTab][userId],
_issues[userId][this.currentUserIssueTab][userId] = {
..._issues[userId][this.currentUserIssueTab][userId],
...data,
};

26
web/store/issues/project-issues/archived/issue.store.ts
View File

@ -119,8 +119,17 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
return;
let _issues = { ...this.issues };
if (!_issues) _issues = {};
if (!_issues[projectId]) _issues[projectId] = {};
delete _issues?.[projectId]?.[issueId];
runInAction(() => {
this.issues = _issues;
});
const response = await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issueId);
return response;
} catch (error) {
throw error;
}
@ -128,8 +137,17 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
removeIssueFromArchived = async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issueId);
return;
let _issues = { ...this.issues };
if (!_issues) _issues = {};
if (!_issues[projectId]) _issues[projectId] = {};
delete _issues?.[projectId]?.[issueId];
runInAction(() => {
this.issues = _issues;
});
const response = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
return response;
} catch (error) {
throw error;
}

44
web/store/issues/project-issues/cycle/issue.store.ts
View File

@ -5,7 +5,7 @@ import { IssueBaseStore } from "store/issues";
import { IssueService } from "services/issue";
import { CycleService } from "services/cycle.service";
// types
import { TIssueGroupByOptions } from "types";
import { CycleIssueResponse, TIssueGroupByOptions } from "types";
import { IIssue } from "types/issues";
import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
import { RootStore } from "store/root";
@ -49,7 +49,12 @@ export interface ICycleIssuesStore {
data: IIssue,
cycleId?: string | undefined
) => Promise<IIssue | undefined>;
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => Promise<IIssue>;
addIssueToCycle: (
workspaceSlug: string,
cycleId: string,
issueIds: string[],
fetchAfterAddition?: boolean
) => Promise<IIssue>;
removeIssueFromCycle: (
workspaceSlug: string,
projectId: string,
@ -70,6 +75,9 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
cycleService;
issueService;
//projectId
currentProjectId: string | undefined;
//viewData
viewFlags = {
enableQuickAdd: true,
@ -157,6 +165,8 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
try {
this.loader = loadType;
this.currentProjectId = projectId;
const params = this.rootStore?.cycleIssuesFilter?.appliedFilters;
const response = await this.cycleService.getV3CycleIssues(workspaceSlug, projectId, cycleId, params);
@ -185,7 +195,16 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
try {
const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
const issueToCycle = await this.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
const issueToCycle = await this.addIssueToCycle(workspaceSlug, cycleId, [response.id], false);
let _issues = this.issues;
if (!_issues) _issues = {};
if (!_issues[cycleId]) _issues[cycleId] = {};
_issues[cycleId] = { ..._issues[cycleId], ...{ [response.id]: response } };
runInAction(() => {
this.issues = _issues;
});
return issueToCycle;
} catch (error) {
@ -287,24 +306,19 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
}
};
addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => {
addIssueToCycle = async (workspaceSlug: string, cycleId: string, issueIds: string[], fetchAfterAddition = true) => {
if (!this.currentProjectId) return;
try {
const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
issues: [data.id],
const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, this.currentProjectId, cycleId, {
issues: issueIds,
});
let _issues = this.issues;
if (!_issues) _issues = {};
if (!_issues[cycleId]) _issues[cycleId] = {};
_issues[cycleId] = { ..._issues[cycleId], ...{ [data.id]: data } };
runInAction(() => {
this.issues = _issues;
});
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
return issueToCycle;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
throw error;
}
};

40
web/store/issues/project-issues/module/issue.store.ts
View File

@ -49,7 +49,12 @@ export interface IModuleIssuesStore {
data: IIssue,
moduleId?: string | undefined
) => Promise<IIssue | undefined>;
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => Promise<IIssue>;
addIssueToModule: (
workspaceSlug: string,
moduleId: string,
issueIds: string[],
fetchAfterAddition?: boolean
) => Promise<IIssue>;
removeIssueFromModule: (
workspaceSlug: string,
projectId: string,
@ -70,6 +75,8 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
moduleService;
issueService;
currentProjectId: string | undefined;
//viewData
viewFlags = {
enableQuickAdd: true,
@ -154,6 +161,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
) => {
if (!moduleId) return undefined;
this.currentProjectId = projectId;
try {
this.loader = loadType;
@ -185,7 +193,16 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
try {
const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
const issueToModule = await this.addIssueToModule(workspaceSlug, projectId, moduleId, response);
const issueToModule = await this.addIssueToModule(workspaceSlug, moduleId, [response.id], false);
let _issues = this.issues;
if (!_issues) _issues = {};
if (!_issues[moduleId]) _issues[moduleId] = {};
_issues[moduleId] = { ..._issues[moduleId], ...{ [response.id]: response } };
runInAction(() => {
this.issues = _issues;
});
return issueToModule;
} catch (error) {
@ -289,24 +306,19 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
}
};
addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => {
addIssueToModule = async (workspaceSlug: string, moduleId: string, issueIds: string[], fetchAfterAddition = true) => {
if (!this.currentProjectId) return;
try {
const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
issues: [data.id],
const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, this.currentProjectId, moduleId, {
issues: issueIds,
});
let _issues = this.issues;
if (!_issues) _issues = {};
if (!_issues[moduleId]) _issues[moduleId] = {};
_issues[moduleId] = { ..._issues[moduleId], ...{ [data.id]: data } };
runInAction(() => {
this.issues = _issues;
});
if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
return issueToModule;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
throw error;
}
};

3
web/store/workspace/workspace-member.store.ts
View File

@ -88,7 +88,8 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
* computed value provides the members information including the invitations.
*/
get workspaceMembersWithInvitations() {
if (!this.workspaceMembers || !this.workspaceMemberInvitations) return null;
if (!this.workspaceMembers) return null;
return [
...(this.workspaceMemberInvitations?.map((item) => ({
id: item.id,

2
web/types/workspace.d.ts vendored
View File

@ -1,4 +1,4 @@
import type { IProjectMember, IUser, IUserLite, IUserMemberLite, IWorkspaceViewProps } from "types";
import type { IProjectMember, IUser, IUserLite, IWorkspaceViewProps } from "types";
export type TUserWorkspaceRole = 5 | 10 | 15 | 20;