Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-09-03 12:50:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #287 from makeplane/sync/ce-ee

Browse Source 
sync: merge conflicts need to be resolved
This commit is contained in:
sriram veeraghanta
2024-05-21 16:39:52 +05:30
committed by GitHub
parent 94ccb275ed 8a960e269f
commit 95316bae50
48 changed files with 1132 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apiserver/plane/authentication/adapter/error.py
View File

@@ -61,6 +61,8 @@ AUTHENTICATION_ERROR_CODES = {
"ADMIN_USER_ALREADY_EXIST": 5180,
"ADMIN_USER_DOES_NOT_EXIST": 5185,
"ADMIN_USER_DEACTIVATED": 5190,
# Rate limit
"RATE_LIMIT_EXCEEDED": 5900,
}

15
apiserver/plane/authentication/adapter/exception.py
View File

@@ -1,5 +1,10 @@
# Third party imports
from rest_framework.views import exception_handler
from rest_framework.exceptions import NotAuthenticated
from rest_framework.exceptions import Throttled
# Module imports
from plane.authentication.adapter.error import AuthenticationException, AUTHENTICATION_ERROR_CODES
def auth_exception_handler(exc, context):
@@ -9,4 +14,14 @@ def auth_exception_handler(exc, context):
if isinstance(exc, NotAuthenticated):
response.status_code = 401
# Check if an Throttled exception is raised.
if isinstance(exc, Throttled):
exc = AuthenticationException(
error_code=AUTHENTICATION_ERROR_CODES["RATE_LIMIT_EXCEEDED"],
error_message="RATE_LIMIT_EXCEEDED",
)
response.data = exc.get_error_dict()
response.status_code = 429
# Return the response that is generated by the default exception handler.
return response

26
apiserver/plane/authentication/rate_limit.py Normal file
View File

@@ -0,0 +1,26 @@
# Third party imports
from rest_framework.throttling import AnonRateThrottle
from rest_framework import status
from rest_framework.response import Response
# Module imports
from plane.authentication.adapter.error import (
AuthenticationException,
AUTHENTICATION_ERROR_CODES,
)
class AuthenticationThrottle(AnonRateThrottle):
rate = "30/minute"
scope = "authentication"
def throttle_failure_view(self, request, *args, **kwargs):
try:
raise AuthenticationException(
error_code=AUTHENTICATION_ERROR_CODES["RATE_LIMIT_EXCEEDED"],
error_message="RATE_LIMIT_EXCEEDED",
)
except AuthenticationException as e:
return Response(
e.get_error_dict(), status=status.HTTP_429_TOO_MANY_REQUESTS
)

10
apiserver/plane/authentication/views/app/check.py
View File

@@ -15,7 +15,7 @@ from plane.authentication.adapter.error import (
AuthenticationException,
AUTHENTICATION_ERROR_CODES,
)
from plane.authentication.rate_limit import AuthenticationThrottle
class EmailCheckSignUpEndpoint(APIView):
@@ -23,6 +23,10 @@ class EmailCheckSignUpEndpoint(APIView):
AllowAny,
]
throttle_classes = [
AuthenticationThrottle,
]
def post(self, request):
try:
# Check instance configuration
@@ -86,6 +90,10 @@ class EmailCheckSignInEndpoint(APIView):
AllowAny,
]
throttle_classes = [
AuthenticationThrottle,
]
def post(self, request):
try:
# Check instance configuration

6
apiserver/plane/authentication/views/app/password_management.py
View File

@@ -32,7 +32,7 @@ from plane.authentication.adapter.error import (
AuthenticationException,
AUTHENTICATION_ERROR_CODES,
)
from plane.authentication.rate_limit import AuthenticationThrottle
def generate_password_token(user):
uidb64 = urlsafe_base64_encode(smart_bytes(user.id))
@@ -46,6 +46,10 @@ class ForgotPasswordEndpoint(APIView):
AllowAny,
]
throttle_classes = [
AuthenticationThrottle,
]
def post(self, request):
email = request.data.get("email")

10
apiserver/plane/authentication/views/common.py
View File

@@ -1,3 +1,6 @@
# Django imports
from django.shortcuts import render
# Third party imports
from rest_framework import status
from rest_framework.permissions import AllowAny
@@ -17,7 +20,7 @@ from plane.authentication.adapter.error import (
)
from django.middleware.csrf import get_token
from plane.utils.cache import invalidate_cache
from plane.authentication.utils.host import base_host
class CSRFTokenEndpoint(APIView):
@@ -34,6 +37,11 @@ class CSRFTokenEndpoint(APIView):
)
def csrf_failure(request, reason=""):
"""Custom CSRF failure view"""
return render(request, "csrf_failure.html", {"reason": reason, "root_url": base_host(request=request)})
class ChangePasswordEndpoint(APIView):
def post(self, request):
user = User.objects.get(pk=request.user.id)

6
apiserver/plane/authentication/views/space/check.py
View File

@@ -15,7 +15,7 @@ from plane.authentication.adapter.error import (
AUTHENTICATION_ERROR_CODES,
AuthenticationException,
)
from plane.authentication.rate_limit import AuthenticationThrottle
class EmailCheckEndpoint(APIView):
@@ -23,6 +23,10 @@ class EmailCheckEndpoint(APIView):
AllowAny,
]
throttle_classes = [
AuthenticationThrottle,
]
def post(self, request):
# Check instance configuration
instance = Instance.objects.first()

5
apiserver/plane/authentication/views/space/password_management.py
View File

@@ -32,6 +32,7 @@ from plane.authentication.adapter.error import (
AuthenticationException,
AUTHENTICATION_ERROR_CODES,
)
from plane.authentication.rate_limit import AuthenticationThrottle
def generate_password_token(user):
@@ -46,6 +47,10 @@ class ForgotPasswordSpaceEndpoint(APIView):
AllowAny,
]
throttle_classes = [
AuthenticationThrottle,
]
def post(self, request):
email = request.data.get("email")

1
apiserver/plane/settings/common.py
View File

@@ -348,6 +348,7 @@ CSRF_COOKIE_SECURE = secure_origins
CSRF_COOKIE_HTTPONLY = True
CSRF_TRUSTED_ORIGINS = cors_allowed_origins
CSRF_COOKIE_DOMAIN = os.environ.get("COOKIE_DOMAIN", None)
CSRF_FAILURE_VIEW = "plane.authentication.views.common.csrf_failure"
# Base URLs
ADMIN_BASE_URL = os.environ.get("ADMIN_BASE_URL", None)

66
apiserver/templates/csrf_failure.html Normal file
View File

@@ -0,0 +1,66 @@
<!-- templates/csrf_failure.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSRF Verification Failed</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
max-width: 400px;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-header {
text-align: center;
margin-bottom: 20px;
}
.btn-primary {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
text-align: center;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-primary:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<h3>CSRF Verification Failed</h3>
</div>
<div class="card-body">
<p>
It looks like your form submission has expired or there was a problem
with your request.
</p>
<p>Please try the following:</p>
<ul>
<li>Refresh the page and try submitting the form again.</li>
<li>Ensure that cookies are enabled in your browser.</li>
</ul>
<a href="{{ root_url }}" class="btn-primary">Go to Home Page</a>
</div>
</div>
</body>
</html>

14
web/components/labels/label-block/drag-handle.tsx → packages/ui/src/drag-handle.tsx
View File

@@ -1,19 +1,29 @@
import React from "react";
import { forwardRef } from "react";
import { MoreVertical } from "lucide-react";
interface IDragHandle {
isDragging: boolean;
disabled?: boolean;
}
export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
const { isDragging } = props;
const { isDragging, disabled = false } = props;
if (disabled) {
return <div className="w-[14px] h-[18px]" />;
}
return (
<button
type="button"
className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
isDragging ? "opacity-100" : "opacity-0"
}`}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
}}
ref={ref}
>
<MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />

1
packages/ui/src/index.ts
View File

@@ -12,4 +12,5 @@ export * from "./tooltip";
export * from "./loader";
export * from "./control-link";
export * from "./toast";
export * from "./drag-handle";
export * from "./drop-indicator";

2
space/components/issues/filters/applied-filters/filters-list.tsx
View File

@@ -23,7 +23,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter, states } = props;
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
<div className="flex flex-wrap items-stretch gap-2">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof TFilters;
const filterValue = value as TFilters[keyof TFilters];

6
space/components/issues/peek-overview/header.tsx
View File

@@ -62,7 +62,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
<div className="flex items-center gap-4">
{peekMode === "side" && (
<button type="button" onClick={handleClose}>
<MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
<MoveRight className="h-4 w-4" strokeWidth={2} />
</button>
)}
<Listbox
@@ -72,7 +72,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
className="relative flex-shrink-0 text-left"
>
<Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
<Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
<Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} className="text-[1rem]" />
</Listbox.Button>
<Transition
@@ -120,7 +120,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
{(peekMode === "side" || peekMode === "modal") && (
<div className="flex flex-shrink-0 items-center gap-2">
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
<Icon iconName="link" />
<Icon iconName="link" className="text-[1rem]" />
</button>
</div>
)}

1
space/components/issues/peek-overview/issue-reaction.tsx
View File

@@ -19,7 +19,6 @@ export const IssueReactions: React.FC = () => {
<div className="flex items-center gap-2">
<IssueVotes workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
<div className="h-8 w-0.5 bg-custom-background-200" />
</>
)}
{canReact && (

4
space/components/issues/peek-overview/issue-vote-reactions.tsx
View File

@@ -97,7 +97,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
if (user) handleVote(e, 1);
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 h-7 focus:outline-none ${
isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
}`}
>
@@ -131,7 +131,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
if (user) handleVote(e, -1);
else router.push(`/?next_path=${pathName}?${queryParam}`);
}}
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
className={`flex items-center justify-center gap-x-1 h-7 overflow-hidden rounded border px-2 focus:outline-none ${
isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
}`}
>

4
web/components/account/oauth/github-button.tsx
View File

@@ -25,8 +25,8 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>

4
web/components/account/oauth/google-button.tsx
View File

@@ -24,8 +24,8 @@ export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
return (
<button
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
}`}
onClick={handleSignIn}
>

15
web/components/headers/cycle-issues.tsx
View File

@@ -70,6 +70,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },
issues: { issuesCount },
} = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCycleIds, getCycleById } = useCycle();
const { toggleCreateIssueModal } = useCommandPalette();
@@ -145,12 +146,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
const issueCount = cycleDetails
? !issueFilters?.displayFilters?.sub_issue && cycleDetails?.sub_issues
? cycleDetails.total_issues - cycleDetails?.sub_issues
: cycleDetails.total_issues
: undefined;
const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
return (
@@ -209,16 +204,16 @@ export const CycleIssuesHeader: React.FC = observer(() => {
<ContrastIcon className="h-3 w-3" />
<div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
<p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
{issueCount && issueCount > 0 ? (
{issuesCount && issuesCount > 0 ? (
<Tooltip
isMobile={isMobile}
tooltipContent={`There are ${issueCount} ${
issueCount > 1 ? "issues" : "issue"
tooltipContent={`There are ${issuesCount} ${
issuesCount > 1 ? "issues" : "issue"
} in this cycle`}
position="bottom"
>
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
{issueCount}
{issuesCount}
</span>
</Tooltip>
) : null}

15
web/components/headers/module-issues.tsx
View File

@@ -71,6 +71,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
// store hooks
const {
issuesFilter: { issueFilters },
issues: { issuesCount },
} = useIssues(EIssuesStoreType.MODULE);
const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
const { projectModuleIds, getModuleById } = useModule();
@@ -145,12 +146,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
const issueCount = moduleDetails
? !issueFilters?.displayFilters?.sub_issue && moduleDetails.sub_issues
? moduleDetails.total_issues - moduleDetails.sub_issues
: moduleDetails.total_issues
: undefined;
const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
return (
@@ -209,16 +204,16 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<DiceIcon className="h-3 w-3" />
<div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
<p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
{issueCount && issueCount > 0 ? (
{issuesCount && issuesCount > 0 ? (
<Tooltip
isMobile={isMobile}
tooltipContent={`There are ${issueCount} ${
issueCount > 1 ? "issues" : "issue"
tooltipContent={`There are ${issuesCount} ${
issuesCount > 1 ? "issues" : "issue"
} in this module`}
position="bottom"
>
<span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
{issueCount}
{issuesCount}
</span>
</Tooltip>
) : null}

13
web/components/headers/project-issues.tsx
View File

@@ -43,6 +43,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
} = useMember();
const {
issuesFilter: { issueFilters, updateFilters },
issues: { issuesCount },
} = useIssues(EIssuesStoreType.PROJECT);
const { toggleCreateIssueModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
@@ -105,12 +106,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
const issueCount = currentProjectDetails
? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails?.sub_issues
? currentProjectDetails?.total_issues - currentProjectDetails?.sub_issues
: currentProjectDetails?.total_issues
: undefined;
const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
return (
@@ -153,14 +148,14 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
{issueCount && issueCount > 0 ? (
{issuesCount && issuesCount > 0 ? (
<Tooltip
isMobile={isMobile}
tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in this project`}
tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
position="bottom"
>
<span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
{issueCount}
{issuesCount}
</span>
</Tooltip>
) : null}

2
web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
View File

@@ -38,7 +38,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
<div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
{icon ? icon : <Network className="w-3.5 h-3.5" />}
</div>
<div className="w-full text-custom-text-200">
<div className="w-full truncate text-custom-text-200">
<IssueUser activityId={activityId} customUserName={customUserName} />
<span> {children} </span>
<span>

4
web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
View File

@@ -48,8 +48,8 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
<MessageCircle className="w-3 h-3" color="#6b7280" />
</div>
</div>
<div className="w-full relative flex ">
<div className="w-full space-y-1">
<div className="w-full truncate relative flex ">
<div className="w-full truncate space-y-1">
<div>
<div className="text-xs capitalize">
{comment.actor_detail.is_bot

61
web/components/issues/issue-layouts/group-drag-overlay.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { AlertCircle } from "lucide-react";
import { TIssueOrderByOptions } from "@plane/types";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
import { cn } from "@/helpers/common.helper";
type Props = {
dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
canDropOverIssue: boolean;
isDropDisabled: boolean;
dropErrorMessage?: string;
orderBy: TIssueOrderByOptions | undefined;
isDraggingOverColumn: boolean;
};
export const GroupDragOverlay = (props: Props) => {
const { dragColumnOrientation, canDropOverIssue, isDropDisabled, dropErrorMessage, orderBy, isDraggingOverColumn } =
props;
const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
return (
<div
className={cn(
`absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay ${dragColumnOrientation}`,
{
"flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
},
{ hidden: !shouldOverlay }
)}
>
<div
className={cn(
"p-3 mt-8 flex flex-col rounded items-center",
{
"text-custom-text-200": shouldOverlay,
},
{
"text-custom-text-error": isDropDisabled,
}
)}
>
{dropErrorMessage ? (
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span>
</div>
) : (
<>
{readableOrderBy && (
<span>
The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
</span>
)}
<span>Drop here to move the issue.</span>
</>
)}
</div>
</div>
);
};

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

@@ -4,26 +4,24 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { TIssue } from "@plane/types";
import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
import { Spinner } from "@plane/ui";
import { DeleteIssueModal } from "@/components/issues";
import { ISSUE_DELETED } from "@/constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
// hooks
import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUser } from "@/hooks/store";
import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
import { useIssuesActions } from "@/hooks/use-issues-actions";
// store
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
// ui
// types
import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
//components
import { GroupDropLocation, handleGroupDragDrop, getSourceFromDropPayload } from "../utils";
import { getSourceFromDropPayload } from "../utils";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
export type KanbanStoreType =
| EIssuesStoreType.PROJECT
| EIssuesStoreType.MODULE
@@ -65,12 +63,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
} = useIssueDetail();
const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
useIssuesActions(storeType);
const {
issues: { addCycleToIssue, removeCycleFromIssue },
} = useIssues(EIssuesStoreType.CYCLE);
const {
issues: { changeModulesInIssue },
} = useIssues(EIssuesStoreType.MODULE);
const deleteAreaRef = useRef<HTMLDivElement | null>(null);
const [isDragOverDelete, setIsDragOverDelete] = useState(false);
@@ -101,6 +93,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
const canEditProperties = useCallback(
(projectId: string | undefined) => {
const isEditingAllowedBasedOnProject =
@@ -153,86 +147,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
);
}, [deleteAreaRef?.current, setIsDragOverDelete, setDraggedIssueId, setDeleteIssueModal]);
/**
* update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
* @param projectId
* @param issueId
* @param data
* @param issueUpdates
*/
const updateIssueOnDrop = async (
projectId: string,
issueId: string,
data: Partial<TIssue>,
issueUpdates: {
[groupKey: string]: {
ADD: string[];
REMOVE: string[];
};
}
) => {
const errorToastProps = {
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Error while updating issue"
}
const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
const isModuleChanged = Object.keys(data).includes(moduleKey);
const isCycleChanged = Object.keys(data).includes(cycleKey);
if (isCycleChanged && workspaceSlug) {
if(data[cycleKey]) {
addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() => setToast(errorToastProps));
} else {
removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps))
}
delete data[cycleKey];
}
if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
changeModulesInIssue(
workspaceSlug.toString(),
projectId,
issueId,
issueUpdates[moduleKey].ADD,
issueUpdates[moduleKey].REMOVE
).catch(() => setToast(errorToastProps));
delete data[moduleKey];
}
updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
};
const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
if (
source.columnId &&
destination.columnId &&
destination.columnId === source.columnId &&
destination.id === source.id
)
return;
await handleGroupDragDrop(
source,
destination,
getIssueById,
issues.getIssueIds,
updateIssueOnDrop,
group_by,
sub_group_by,
orderBy !== "sort_order"
).catch((err) => {
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: err?.detail ?? "Failed to perform this action",
});
});
};
const renderQuickActions: TRenderQuickActions = useCallback(
({ issue, parentRef, customActionButton }) => (
<QuickActions

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

@@ -169,7 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
}),
dropTargetForElements({
element,
canDrop: () => canDropOverIssue,
canDrop: ({ source }) => source?.data?.id !== issue?.id && canDropOverIssue,
getData: () => ({ id: issue?.id, type: "ISSUE" }),
onDragEnter: () => {
setIsDraggingOverBlock(true);
@@ -182,7 +182,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
},
})
);
}, [cardRef?.current, issue?.id, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
}, [cardRef?.current, issue?.id, isDragAllowed, canDropOverIssue, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
if (!issue) return null;

71
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { AlertCircle } from "lucide-react";
import { observer } from "mobx-react";
//types
import {
TGroupedIssues,
@@ -14,13 +14,14 @@ import {
TIssueGroupByOptions,
TIssueOrderByOptions,
} from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
import { useProjectState } from "@/hooks/store";
//components
import { GroupDragOverlay } from "../group-drag-overlay";
import { TRenderQuickActions } from "../list/list-view-types";
import { GroupDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload, getIssueBlockId } from "../utils";
import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
@@ -54,7 +55,7 @@ interface IKanbanGroup {
orderBy: TIssueOrderByOptions | undefined;
}
export const KanbanGroup = (props: IKanbanGroup) => {
export const KanbanGroup = observer((props: IKanbanGroup) => {
const {
groupId,
sub_group_id,
@@ -108,7 +109,17 @@ export const KanbanGroup = (props: IKanbanGroup) => {
const source = getSourceFromDropPayload(payload);
const destination = getDestinationFromDropPayload(payload);
if (!source || !destination || isDropDisabled) return;
if (!source || !destination) return;
if (isDropDisabled) {
dropErrorMessage &&
setToast({
type: TOAST_TYPE.WARNING,
title: "Warning!",
message: dropErrorMessage,
});
return;
}
handleOnDrop(source, destination);
@@ -122,7 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
element,
})
);
}, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, handleOnDrop]);
}, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
const prePopulateQuickAddData = (
groupByKey: string | undefined,
@@ -178,7 +189,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
const canDropOverIssue = orderBy === "sort_order";
const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
return (
<div
@@ -190,45 +200,14 @@ export const KanbanGroup = (props: IKanbanGroup) => {
)}
ref={columnRef}
>
<div
//column overlay when issues are not sorted by manual
className={cn(
"absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay",
{
"flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
},
{ hidden: !shouldOverlay },
{ "justify-center": !sub_group_by }
)}
>
<div
className={cn(
"p-3 mt-8 flex flex-col rounded items-center",
{
"text-custom-text-200": shouldOverlay,
},
{
"text-custom-text-error": isDropDisabled,
}
)}
>
{dropErrorMessage ? (
<div className="flex items-center">
<AlertCircle width={13} height={13} /> &nbsp;
<span>{dropErrorMessage}</span>
</div>
) : (
<>
{readableOrderBy && (
<span>
The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
</span>
)}
<span>Drop here to move the issue.</span>
</>
)}
</div>
</div>
<GroupDragOverlay
dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
canDropOverIssue={canDropOverIssue}
isDropDisabled={isDropDisabled}
dropErrorMessage={dropErrorMessage}
orderBy={orderBy}
isDraggingOverColumn={isDraggingOverColumn}
/>
<KanbanIssueBlocksList
sub_group_id={sub_group_id}
groupId={groupId}
@@ -259,4 +238,4 @@ export const KanbanGroup = (props: IKanbanGroup) => {
)}
</div>
);
};
});

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

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
import { useIssues, useUser } from "@/hooks/store";
import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
import { useIssuesActions } from "@/hooks/use-issues-actions";
// components
import { List } from "./default";
@@ -17,9 +17,9 @@ type ListStoreType =
| EIssuesStoreType.MODULE
| EIssuesStoreType.CYCLE
| EIssuesStoreType.PROJECT_VIEW
| EIssuesStoreType.ARCHIVED
| EIssuesStoreType.DRAFT
| EIssuesStoreType.PROFILE;
| EIssuesStoreType.PROFILE
| EIssuesStoreType.ARCHIVED;
interface IBaseListRoot {
QuickActions: FC<IQuickActionProps>;
viewId?: string;
@@ -37,7 +37,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// router
//stores
const { issuesFilter, issues } = useIssues(storeType);
const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
// mobx store
@@ -66,8 +67,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
const displayProperties = issuesFilter?.issueFilters?.displayProperties;
const group_by = displayFilters?.group_by || null;
const orderBy = displayFilters?.order_by || undefined;
const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by);
const renderQuickActions: TRenderQuickActions = useCallback(
({ issue, parentRef }) => (
<QuickActions
@@ -91,6 +95,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
issuesMap={issueMap}
displayProperties={displayProperties}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={renderQuickActions}
issueIds={issueIds}
@@ -103,6 +108,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
storeType={storeType}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
handleOnDrop={handleOnDrop}
/>
</div>
);

86
web/components/issues/issue-layouts/list/block-root.tsx
View File

@@ -1,12 +1,18 @@
import React, { FC, MutableRefObject, useState } from "react";
import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import { observer } from "mobx-react";
import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
// components
import { DropIndicator } from "@plane/ui";
import RenderIfVisible from "@/components/core/render-if-visible-HOC";
import { IssueBlock } from "@/components/issues/issue-layouts/list";
// hooks
import { useIssueDetail } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
// types
import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
import { TRenderQuickActions } from "./list-view-types";
type Props = {
@@ -20,6 +26,11 @@ type Props = {
nestingLevel: number;
spacingLeft?: number;
containerRef: MutableRefObject<HTMLDivElement | null>;
groupId: string;
isDragAllowed: boolean;
canDropOverIssue: boolean;
isParentIssueBeingDragged?: boolean;
isLastChild?: boolean;
};
export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -27,6 +38,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
issueIds,
issueId,
issuesMap,
groupId,
updateIssue,
quickActions,
canEditProperties,
@@ -34,26 +46,84 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
nestingLevel,
spacingLeft = 14,
containerRef,
isDragAllowed,
canDropOverIssue,
isParentIssueBeingDragged = false,
isLastChild = false,
} = props;
// states
const [isExpanded, setExpanded] = useState<boolean>(false);
const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
// ref
const issueBlockRef = useRef<HTMLDivElement | null>(null);
// store hooks
const { subIssues: subIssuesStore } = useIssueDetail();
const isSubIssue = nestingLevel !== 0;
useEffect(() => {
const blockElement = issueBlockRef.current;
if (!blockElement) return;
return combine(
dropTargetForElements({
element: blockElement,
canDrop: ({ source }) => source?.data?.id !== issueId && !isSubIssue && canDropOverIssue,
getData: ({ input, element }) => {
const data = { id: issueId, type: "ISSUE" };
// attach instruction for last in list
return attachInstruction(data, {
input,
element,
currentLevel: 0,
indentPerLevel: 0,
mode: isLastChild ? "last-in-group" : "standard",
});
},
onDrag: ({ self }) => {
const extractedInstruction = extractInstruction(self?.data)?.type;
// check if the highlight is to be shown above or below
setInstruction(
extractedInstruction
? extractedInstruction === "reorder-below" && isLastChild
? "DRAG_BELOW"
: "DRAG_OVER"
: undefined
);
},
onDragLeave: () => {
setInstruction(undefined);
},
onDrop: () => {
setInstruction(undefined);
},
})
);
}, [issueId, isLastChild, issueBlockRef, isSubIssue, canDropOverIssue, setInstruction]);
useOutsideClickDetector(issueBlockRef, () => {
issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
});
if (!issueId) return null;
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
return (
<>
<div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
<DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
<RenderIfVisible
key={`${issueId}`}
defaultHeight="3rem"
root={containerRef}
classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
classNames={`relative ${isLastChild ? "" : "border-b border-b-custom-border-200"}`}
>
<IssueBlock
issueId={issueId}
issuesMap={issuesMap}
groupId={groupId}
updateIssue={updateIssue}
quickActions={quickActions}
canEditProperties={canEditProperties}
@@ -62,6 +132,9 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
setExpanded={setExpanded}
nestingLevel={nestingLevel}
spacingLeft={spacingLeft}
canDrag={!isSubIssue && isDragAllowed}
isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
setIsCurrentBlockDragging={setIsCurrentBlockDragging}
/>
</RenderIfVisible>
@@ -81,8 +154,13 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
nestingLevel={nestingLevel + 1}
spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
containerRef={containerRef}
groupId={groupId}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
/>
))}
</>
{isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}
</div>
);
});

59
web/components/issues/issue-layouts/list/block.tsx
View File

@@ -1,10 +1,12 @@
import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react-lite";
import { ChevronRight } from "lucide-react";
// types
import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
// ui
import { Spinner, Tooltip, ControlLink } from "@plane/ui";
import { Spinner, Tooltip, ControlLink, DragHandle } from "@plane/ui";
// components
import { IssueProperties } from "@/components/issues/issue-layouts/properties";
// helpers
@@ -18,6 +20,7 @@ import { TRenderQuickActions } from "./list-view-types";
interface IssueBlockProps {
issueId: string;
issuesMap: TIssueMap;
groupId: string;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@@ -26,12 +29,16 @@ interface IssueBlockProps {
spacingLeft?: number;
isExpanded: boolean;
setExpanded: Dispatch<SetStateAction<boolean>>;
isCurrentBlockDragging: boolean;
setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
canDrag: boolean;
}
export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
export const IssueBlock = observer((props: IssueBlockProps) => {
const {
issuesMap,
issueId,
groupId,
updateIssue,
quickActions,
displayProperties,
@@ -40,9 +47,13 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
spacingLeft = 14,
isExpanded,
setExpanded,
isCurrentBlockDragging,
setIsCurrentBlockDragging,
canDrag,
} = props;
// refs
const parentRef = useRef(null);
// ref
const issueRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef(null);
// hooks
const { workspaceSlug } = useAppRouter();
const { getProjectIdentifierById } = useProject();
@@ -59,6 +70,29 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
const issue = issuesMap[issueId];
const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
const { isMobile } = usePlatformOS();
useEffect(() => {
const element = issueRef.current;
const dragHandleElement = dragHandleRef.current;
if (!element || !dragHandleElement) return;
return combine(
draggable({
element,
dragHandle: dragHandleElement,
canDrag: () => canDrag,
getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
onDragStart: () => {
setIsCurrentBlockDragging(true);
},
onDrop: () => {
setIsCurrentBlockDragging(false);
},
})
);
}, [issueRef?.current, canDrag, issueId, groupId, dragHandleRef?.current, setIsCurrentBlockDragging]);
if (!issue) return null;
const canEditIssueProperties = canEditProperties(issue.project_id);
@@ -84,13 +118,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return (
<div
ref={parentRef}
ref={issueRef}
className={cn(
"min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
"group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70":
getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
"bg-custom-background-80": isCurrentBlockDragging,
}
)}
>
@@ -98,11 +133,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="flex flex-grow items-center gap-3 truncate">
<div className="flex items-center gap-0.5">
<div className="flex items-center group">
<span className="size-3.5" />
<div className="flex h-4 w-4 items-center justify-center">
<DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
<div className="flex h-5 w-5 items-center justify-center">
{subIssuesCount > 0 && (
<button
className="flex items-center justify-center h-4 w-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
@@ -146,7 +181,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="block md:hidden border border-custom-border-300 rounded ">
{quickActions({
issue,
parentRef,
parentRef: issueRef,
})}
</div>
)}
@@ -165,7 +200,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
<div className="hidden md:block">
{quickActions({
issue,
parentRef,
parentRef: issueRef,
})}
</div>
</>

34
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@@ -1,27 +1,42 @@
import { FC, MutableRefObject } from "react";
// components
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import { TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
// types
import { TRenderQuickActions } from "./list-view-types";
interface Props {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issueIds: TUnGroupedIssues;
issuesMap: TIssueMap;
groupId: string;
canEditProperties: (projectId: string | undefined) => boolean;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
containerRef: MutableRefObject<HTMLDivElement | null>;
isDragAllowed: boolean;
canDropOverIssue: boolean;
}
export const IssueBlocksList: FC<Props> = (props) => {
const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
const {
issueIds,
issuesMap,
groupId,
updateIssue,
quickActions,
displayProperties,
canEditProperties,
containerRef,
isDragAllowed,
canDropOverIssue,
} = props;
return (
<div className="relative h-full w-full">
{issueIds && issueIds.length > 0 ? (
issueIds.map((issueId: string) => (
{issueIds &&
issueIds.length > 0 &&
issueIds.map((issueId: string, index) => (
<IssueBlockRoot
key={`${issueId}`}
issueIds={issueIds}
@@ -34,11 +49,12 @@ export const IssueBlocksList: FC<Props> = (props) => {
nestingLevel={0}
spacingLeft={0}
containerRef={containerRef}
groupId={groupId}
isLastChild={index === issueIds.length - 1}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
))
) : (
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
)}
))}
</div>
);
};

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

@@ -1,4 +1,6 @@
import { useRef } from "react";
import { useEffect, useRef } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
// components
import {
GroupByColumnTypes,
@@ -8,20 +10,22 @@ import {
TIssueMap,
TUnGroupedIssues,
IGroupByColumn,
TIssueOrderByOptions,
TIssueGroupByOptions,
} from "@plane/types";
import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
// utils
import { getGroupByColumns, isWorkspaceLevel } from "../utils";
import { HeaderGroupByCard } from "./headers/group-by-card";
import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
import { ListGroup } from "./list-group";
import { TRenderQuickActions } from "./list-view-types";
export interface IGroupByList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@@ -36,6 +40,7 @@ export interface IGroupByList {
) => Promise<TIssue | undefined>;
disableIssueCreation?: boolean;
storeType: EIssuesStoreType;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
@@ -46,6 +51,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
issueIds,
issuesMap,
group_by,
orderBy,
updateIssue,
quickActions,
displayProperties,
@@ -56,6 +62,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
viewId,
disableIssueCreation,
storeType,
handleOnDrop,
addIssuesToView,
isCompletedCycle = false,
} = props;
@@ -81,46 +88,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
isWorkspaceLevel(storeType)
);
// Enable Auto Scroll for Main Kanban
useEffect(() => {
const element = containerRef.current;
if (!element) return;
return combine(
autoScrollForElements({
element,
})
);
}, [containerRef]);
if (!groups) return null;
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
let preloadedData: object = { state_id: defaultState?.id };
if (groupByKey === null) {
preloadedData = { ...preloadedData };
} else {
if (groupByKey === "state") {
preloadedData = { ...preloadedData, state_id: value };
} else if (groupByKey === "priority") {
preloadedData = { ...preloadedData, priority: value };
} else if (groupByKey === "labels" && value != "None") {
preloadedData = { ...preloadedData, label_ids: [value] };
} else if (groupByKey === "assignees" && value != "None") {
preloadedData = { ...preloadedData, assignee_ids: [value] };
} else if (groupByKey === "cycle" && value != "None") {
preloadedData = { ...preloadedData, cycle_id: value };
} else if (groupByKey === "module" && value != "None") {
preloadedData = { ...preloadedData, module_ids: [value] };
} else if (groupByKey === "created_by") {
preloadedData = { ...preloadedData };
} else {
preloadedData = { ...preloadedData, [groupByKey]: value };
}
}
return preloadedData;
};
const validateEmptyIssueGroups = (issues: TIssue[]) => {
const issuesCount = issues?.length || 0;
if (!showEmptyGroup && issuesCount <= 0) return false;
return true;
};
const is_list = group_by === null ? true : false;
const getGroupIndex = (groupId: string | undefined) => groups.findIndex(({ id }) => id === groupId);
const isGroupByCreatedBy = group_by === "created_by";
const is_list = group_by === null ? true : false;
return (
<div
@@ -130,43 +121,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
{groups &&
groups.length > 0 &&
groups.map(
(_list: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
<div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
<HeaderGroupByCard
icon={_list.icon}
title={_list.name || ""}
count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
issuePayload={_list.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
{issueIds && (
<IssueBlocksList
issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
containerRef={containerRef}
/>
)}
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
</div>
)}
</div>
(group: IGroupByColumn) =>
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
<ListGroup
key={group.id}
group={group}
getGroupIndex={getGroupIndex}
issueIds={issueIds}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
enableIssueQuickAdd={enableIssueQuickAdd}
canEditProperties={canEditProperties}
storeType={storeType}
containerRef={containerRef}
quickAddCallback={quickAddCallback}
disableIssueCreation={disableIssueCreation}
addIssuesToView={addIssuesToView}
handleOnDrop={handleOnDrop}
viewId={viewId}
isCompletedCycle={isCompletedCycle}
/>
)
)}
</div>
@@ -176,7 +154,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
export interface IList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
@@ -192,6 +171,7 @@ export interface IList {
viewId?: string;
disableIssueCreation?: boolean;
storeType: EIssuesStoreType;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
isCompletedCycle?: boolean;
}
@@ -201,6 +181,7 @@ export const List: React.FC<IList> = (props) => {
issueIds,
issuesMap,
group_by,
orderBy,
updateIssue,
quickActions,
quickAddCallback,
@@ -211,6 +192,7 @@ export const List: React.FC<IList> = (props) => {
canEditProperties,
disableIssueCreation,
storeType,
handleOnDrop,
addIssuesToView,
isCompletedCycle = false,
} = props;
@@ -221,6 +203,7 @@ export const List: React.FC<IList> = (props) => {
issueIds={issueIds as TUnGroupedIssues}
issuesMap={issuesMap}
group_by={group_by}
orderBy={orderBy}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
@@ -231,6 +214,7 @@ export const List: React.FC<IList> = (props) => {
viewId={viewId}
disableIssueCreation={disableIssueCreation}
storeType={storeType}
handleOnDrop={handleOnDrop}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
/>

242
web/components/issues/issue-layouts/list/list-group.tsx Normal file
View File

@@ -0,0 +1,242 @@
import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react";
import { cn } from "@plane/editor-core";
// plane
import {
IGroupByColumn,
IIssueDisplayProperties,
TGroupedIssues,
TIssue,
TIssueGroupByOptions,
TIssueMap,
TIssueOrderByOptions,
TUnGroupedIssues,
} from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
// constants
import { DRAG_ALLOWED_GROUPS, EIssuesStoreType } from "@/constants/issue";
// hooks
import { useProjectState } from "@/hooks/store";
// components
import { GroupDragOverlay } from "../group-drag-overlay";
import {
GroupDropLocation,
getDestinationFromDropPayload,
getIssueBlockId,
getSourceFromDropPayload,
highlightIssueOnDrop,
} from "../utils";
import { IssueBlocksList } from "./blocks-list";
import { HeaderGroupByCard } from "./headers/group-by-card";
import { TRenderQuickActions } from "./list-view-types";
import { ListQuickAddIssueForm } from "./quick-add-issue-form";
type Props = {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
group: IGroupByColumn;
issuesMap: TIssueMap;
group_by: TIssueGroupByOptions | null;
orderBy: TIssueOrderByOptions | undefined;
getGroupIndex: (groupId: string | undefined) => number;
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
quickActions: TRenderQuickActions;
displayProperties: IIssueDisplayProperties | undefined;
enableIssueQuickAdd: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
storeType: EIssuesStoreType;
containerRef: MutableRefObject<HTMLDivElement | null>;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: TIssue,
viewId?: string
) => Promise<TIssue | undefined>;
handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
disableIssueCreation?: boolean;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
};
export const ListGroup = observer((props: Props) => {
const {
group,
issueIds,
group_by,
orderBy,
issuesMap,
getGroupIndex,
disableIssueCreation,
addIssuesToView,
updateIssue,
quickActions,
displayProperties,
canEditProperties,
quickAddCallback,
containerRef,
viewId,
handleOnDrop,
enableIssueQuickAdd,
isCompletedCycle,
storeType,
} = props;
const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start");
const groupRef = useRef<HTMLDivElement | null>(null);
const projectState = useProjectState();
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
let preloadedData: object = { state_id: defaultState?.id };
if (groupByKey === null) {
preloadedData = { ...preloadedData };
} else {
if (groupByKey === "state") {
preloadedData = { ...preloadedData, state_id: value };
} else if (groupByKey === "priority") {
preloadedData = { ...preloadedData, priority: value };
} else if (groupByKey === "labels" && value != "None") {
preloadedData = { ...preloadedData, label_ids: [value] };
} else if (groupByKey === "assignees" && value != "None") {
preloadedData = { ...preloadedData, assignee_ids: [value] };
} else if (groupByKey === "cycle" && value != "None") {
preloadedData = { ...preloadedData, cycle_id: value };
} else if (groupByKey === "module" && value != "None") {
preloadedData = { ...preloadedData, module_ids: [value] };
} else if (groupByKey === "created_by") {
preloadedData = { ...preloadedData };
} else {
preloadedData = { ...preloadedData, [groupByKey]: value };
}
}
return preloadedData;
};
useEffect(() => {
const element = groupRef.current;
if (!element) return;
return combine(
dropTargetForElements({
element,
getData: () => ({ groupId: group.id, type: "COLUMN" }),
onDragEnter: () => {
setIsDraggingOverColumn(true);
},
onDragLeave: () => {
setIsDraggingOverColumn(false);
},
onDragStart: () => {
setIsDraggingOverColumn(true);
},
onDrag: ({ source }) => {
const sourceGroupId = source?.data?.groupId as string | undefined;
const currentGroupId = group.id;
const sourceIndex = getGroupIndex(sourceGroupId);
const currentIndex = getGroupIndex(currentGroupId);
if (sourceIndex > currentIndex) {
setDragColumnOrientation("justify-end");
} else {
setDragColumnOrientation("justify-start");
}
},
onDrop: (payload) => {
setIsDraggingOverColumn(false);
const source = getSourceFromDropPayload(payload);
const destination = getDestinationFromDropPayload(payload);
if (!source || !destination) return;
if (group.isDropDisabled) {
group.dropErrorMessage &&
setToast({
type: TOAST_TYPE.WARNING,
title: "Warning!",
message: group.dropErrorMessage,
});
return;
}
handleOnDrop(source, destination);
highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order");
},
})
);
}, [groupRef?.current, group, orderBy, getGroupIndex, setDragColumnOrientation, setIsDraggingOverColumn]);
const is_list = group_by === null ? true : false;
const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
const canDropOverIssue = orderBy === "sort_order";
const issueCount: number = is_list ? issueIds?.length ?? 0 : issueIds?.[group.id]?.length ?? 0;
const isGroupByCreatedBy = group_by === "created_by";
return (
<div
ref={groupRef}
className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
"border-custom-primary-100 ": isDraggingOverColumn,
})}
>
<div className="sticky top-0 z-[3] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
<HeaderGroupByCard
icon={group.icon}
title={group.name || ""}
count={issueCount}
issuePayload={group.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
{!!issueCount && (
<div className="relative">
<GroupDragOverlay
dragColumnOrientation={dragColumnOrientation}
canDropOverIssue={canDropOverIssue}
isDropDisabled={!!group.isDropDisabled}
dropErrorMessage={group.dropErrorMessage}
orderBy={orderBy}
isDraggingOverColumn={isDraggingOverColumn}
/>
{issueIds && (
<IssueBlocksList
issueIds={is_list ? issueIds : issueIds?.[group.id]}
groupId={group.id}
issuesMap={issuesMap}
updateIssue={updateIssue}
quickActions={quickActions}
displayProperties={displayProperties}
canEditProperties={canEditProperties}
containerRef={containerRef}
isDragAllowed={isDragAllowed}
canDropOverIssue={canDropOverIssue}
/>
)}
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
</div>
)}
</div>
)}
</div>
);
});

28
web/components/issues/issue-layouts/utils.tsx
View File

@@ -1,3 +1,4 @@
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import clone from "lodash/clone";
import concat from "lodash/concat";
import pull from "lodash/pull";
@@ -37,6 +38,7 @@ export type GroupDropLocation = {
groupId: string;
subGroupId?: string;
id: string | undefined;
canAddIssueBelow?: boolean;
};
export type IssueUpdates = {
@@ -353,11 +355,15 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): G
if (!destinationColumnData?.groupId) return;
// extract instruction from destination issue
const extractedInstruction = destinationIssueData ? extractInstruction(destinationIssueData)?.type : "";
return {
groupId: destinationColumnData.groupId as string,
subGroupId: destinationColumnData.subGroupId as string,
columnId: destinationColumnData.columnId as string,
id: destinationIssueData?.id as string | undefined,
canAddIssueBelow: extractedInstruction === "reorder-below",
};
};
@@ -372,17 +378,25 @@ const handleSortOrder = (
destinationIssues: string[],
destinationIssueId: string | undefined,
getIssueById: (issueId: string) => TIssue | undefined,
shouldAddIssueAtTop = false
shouldAddIssueAtTop = false,
canAddIssueBelow = false
) => {
const sortOrderDefaultValue = 65535;
let currentIssueState = {};
const destinationIndex = destinationIssueId
let destinationIndex = destinationIssueId
? destinationIssues.indexOf(destinationIssueId)
: shouldAddIssueAtTop
? 0
: destinationIssues.length;
const isDestinationLastChild = destinationIndex === destinationIssues.length - 1;
// if issue can be added below and if the destination issue is the last child, then add to the end of the list
if (canAddIssueBelow && isDestinationLastChild) {
destinationIndex = destinationIssues.length;
}
if (destinationIssues && destinationIssues.length > 0) {
if (destinationIndex === 0) {
const destinationIssueId = destinationIssues[0];
@@ -428,7 +442,7 @@ const handleSortOrder = (
export const getIssueBlockId = (
issueId: string | undefined,
groupId: string | undefined,
subGroupId: string | undefined
subGroupId?: string | undefined
) => `issue_${issueId}_${groupId}_${subGroupId}`;
/**
@@ -469,7 +483,13 @@ export const handleGroupDragDrop = async (
// for both horizontal and vertical dnd
updatedIssue = {
...updatedIssue,
...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
...handleSortOrder(
destinationIssues,
destination.id,
getIssueById,
shouldAddIssueAtTop,
!!destination.canAddIssueBelow
),
};
// update updatedIssue values based on the source and destination groupIds

85
web/components/issues/title-input.tsx
View File

@@ -47,13 +47,18 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
useEffect(() => {
const textarea = document.querySelector("#title-input");
if (debouncedValue && debouncedValue !== value) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
if (debouncedValue.trim().length > 0) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
setIsSubmitting("saved");
if (textarea && !textarea.matches(":focus")) {
const trimmedTitle = debouncedValue.trim();
if (trimmedTitle !== title) setTitle(trimmedTitle);
}
});
} else {
setTitle(value || "");
setIsSubmitting("saved");
if (textarea && !textarea.matches(":focus")) {
const trimmedTitle = debouncedValue.trim();
if (trimmedTitle !== title) setTitle(trimmedTitle);
}
});
}
}
// DO NOT Add more dependencies here. It will cause multiple requests to be sent.
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,8 +68,13 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
const handleBlur = () => {
const trimmedTitle = title.trim();
if (trimmedTitle !== title && isSubmitting !== "submitting") {
setTitle(trimmedTitle);
setIsSubmitting("submitting");
if (trimmedTitle.length > 0) {
setTitle(trimmedTitle);
setIsSubmitting("submitting");
} else {
setTitle(value || "");
setIsSubmitting("saved");
}
}
};
@@ -91,35 +101,38 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
if (disabled) return <div className="text-2xl font-medium">{title}</div>;
return (
<div className={cn("relative", containerClassName)}>
<TextArea
id="title-input"
className={cn(
"block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
{
"ring-red-400": title.length === 0,
},
className
)}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder="Issue title"
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
<div
className={cn(
"pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
{
"opacity-100": isLengthVisible,
}
)}
>
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
/255
<div className="flex flex-col gap-1.5">
<div className={cn("relative", containerClassName)}>
<TextArea
id="title-input"
className={cn(
"block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
{
"ring-1 ring-red-400 mx-3": title.length === 0,
},
className
)}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder="Issue title"
onFocus={() => setIsLengthVisible(true)}
onBlur={() => setIsLengthVisible(false)}
/>
<div
className={cn(
"pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
{
"opacity-100": isLengthVisible,
}
)}
>
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
/255
</div>
</div>
{title.length === 0 && <span className="text-sm text-red-500">Title is required</span>}
</div>
);
});

3
web/components/labels/label-block/label-item-block.tsx
View File

@@ -2,12 +2,11 @@ import { MutableRefObject, useRef, useState } from "react";
import { LucideIcon, X } from "lucide-react";
import { IIssueLabel } from "@plane/types";
//ui
import { CustomMenu } from "@plane/ui";
import { CustomMenu, DragHandle } from "@plane/ui";
//types
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
//hooks
//components
import { DragHandle } from "./drag-handle";
import { LabelName } from "./label-name";
//types

10
web/components/project/send-project-invitation-modal.tsx
View File

@@ -206,9 +206,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
{fields.map((field, index) => (
<div
key={field.id}
className="group mb-1 grid grid-cols-6 sm:grid-cols-12 items-start gap-x-4 text-sm"
className="group mb-1 flex items-center justify-between gap-x-4 text-sm w-full"
>
<div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
<div className="flex flex-col gap-1 flex-grow w-full">
<Controller
control={control}
name={`members.${index}.member_id`}
@@ -250,8 +250,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
)}
</div>
<div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
<div className="flex w-full flex-col gap-1">
<div className="flex items-center justify-between gap-2 flex-shrink-0 ">
<div className="flex flex-col gap-1">
<Controller
name={`members.${index}.role`}
control={control}
@@ -260,7 +260,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
<CustomSelect
{...field}
customButton={
<div className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
<div className="flex w-24 items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
<span className="capitalize">
{field.value ? ROLE[field.value] : "Select role"}
</span>

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

@@ -121,7 +121,10 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
<div className="mb-3 space-y-4">
{fields.map((field, index) => (
<div key={field.id} className="group relative flex items-start gap-4">
<div
key={field.id}
className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
>
<div className="w-full">
<Controller
control={control}
@@ -155,39 +158,43 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
)}
/>
</div>
<div className="flex items-center gap-2">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
optionsClassName="w-full"
className="flex-grow"
input
>
{Object.entries(ROLE).map(([key, value]) => {
if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
return (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
);
})}
</CustomSelect>
)}
/>
<div className="flex items-center justify-between gap-2 flex-shrink-0 ">
<div className="flex flex-col gap-1">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
optionsClassName="w-full"
className="flex-grow w-24"
input
>
{Object.entries(ROLE).map(([key, value]) => {
if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
return (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
);
})}
</CustomSelect>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="grid place-items-center self-center rounded flex-shrink-0"
onClick={() => remove(index)}
>
<X className="h-3.5 w-3.5 text-custom-text-200" />
</button>
<div className="flex-item flex w-6">
<button
type="button"
className="place-items-center self-center rounded"
onClick={() => remove(index)}
>
<X className="h-4 w-4 text-custom-text-200" />
</button>
</div>
)}
</div>
</div>

10
web/constants/issue.ts
View File

@@ -12,6 +12,15 @@ import {
TIssueTypeFilters,
} from "@plane/types";
export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
"state",
"priority",
"assignees",
"labels",
"module",
"cycle",
];
export enum EIssuesStoreType {
GLOBAL = "GLOBAL",
PROFILE = "PROFILE",
@@ -422,3 +431,4 @@ export const groupReactionEmojis = (reactions: any) => {
return groupedEmojis;
};

43
web/helpers/issue.helper.ts
View File

@@ -2,12 +2,15 @@ import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
import { v4 as uuidv4 } from "uuid";
// types
import {
TGroupedIssues,
TIssue,
TIssueGroupByOptions,
TIssueLayouts,
TIssueOrderByOptions,
TIssueParams,
TStateGroups,
TSubGroupedIssues,
TUnGroupedIssues,
} from "@plane/types";
import { IGanttBlock } from "@/components/gantt-chart";
// constants
@@ -211,3 +214,43 @@ export const getDescriptionPlaceholder = (isFocused: boolean, description: strin
if (!isDescriptionEmpty || isFocused) return "Press '/' for commands...";
else return "Click to add description";
};
export const issueCountBasedOnFilters = (
issueIds: TUnGroupedIssues | TGroupedIssues | TSubGroupedIssues,
layout: TIssueLayouts,
groupBy: string | undefined,
subGroupBy: string | undefined
): number => {
let issuesCount = 0;
if (!layout) return issuesCount;
if (["spreadsheet", "gantt_chart"].includes(layout)) {
issuesCount = (issueIds as TUnGroupedIssues)?.length;
} else if (layout === "calendar") {
Object.keys(issueIds || {}).map((groupId) => {
issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
});
} else if (layout === "list") {
if (groupBy) {
Object.keys(issueIds || {}).map((groupId) => {
issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
});
} else {
issuesCount = (issueIds as TUnGroupedIssues)?.length;
}
} else if (layout === "kanban") {
if (groupBy && subGroupBy) {
Object.keys(issueIds || {}).map((groupId) => {
Object.keys((issueIds as TSubGroupedIssues)?.[groupId] || {}).map((subGroupId) => {
issuesCount += (issueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId]?.length || 0;
});
});
} else if (groupBy) {
Object.keys(issueIds || {}).map((groupId) => {
issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
});
}
}
return issuesCount;
};

124
web/hooks/use-group-dragndrop.ts Normal file
View File

@@ -0,0 +1,124 @@
import { useRouter } from "next/router";
import { TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
import { GroupDropLocation, handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
import { EIssuesStoreType } from "@/constants/issue";
import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
import { useIssueDetail, useIssues } from "./store";
import { useIssuesActions } from "./use-issues-actions";
type DNDStoreType =
| EIssuesStoreType.PROJECT
| EIssuesStoreType.MODULE
| EIssuesStoreType.CYCLE
| EIssuesStoreType.PROJECT_VIEW
| EIssuesStoreType.DRAFT
| EIssuesStoreType.PROFILE
| EIssuesStoreType.ARCHIVED;
export const useGroupIssuesDragNDrop = (
storeType: DNDStoreType,
orderBy: TIssueOrderByOptions | undefined,
groupBy: TIssueGroupByOptions | undefined,
subGroupBy?: TIssueGroupByOptions
) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
issue: { getIssueById },
} = useIssueDetail();
const { updateIssue } = useIssuesActions(storeType);
const {
issues: { getIssueIds },
} = useIssues(storeType);
const {
issues: { addCycleToIssue, removeCycleFromIssue },
} = useIssues(EIssuesStoreType.CYCLE);
const {
issues: { changeModulesInIssue },
} = useIssues(EIssuesStoreType.MODULE);
/**
* update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
* @param projectId
* @param issueId
* @param data
* @param issueUpdates
*/
const updateIssueOnDrop = async (
projectId: string,
issueId: string,
data: Partial<TIssue>,
issueUpdates: {
[groupKey: string]: {
ADD: string[];
REMOVE: string[];
};
}
) => {
const errorToastProps = {
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Error while updating issue",
};
const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
const isModuleChanged = Object.keys(data).includes(moduleKey);
const isCycleChanged = Object.keys(data).includes(cycleKey);
if (isCycleChanged && workspaceSlug) {
if (data[cycleKey]) {
addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() =>
setToast(errorToastProps)
);
} else {
removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps));
}
delete data[cycleKey];
}
if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
changeModulesInIssue(
workspaceSlug.toString(),
projectId,
issueId,
issueUpdates[moduleKey].ADD,
issueUpdates[moduleKey].REMOVE
).catch(() => setToast(errorToastProps));
delete data[moduleKey];
}
updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
};
const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
if (
source.columnId &&
destination.columnId &&
destination.columnId === source.columnId &&
destination.id === source.id
)
return;
await handleGroupDragDrop(
source,
destination,
getIssueById,
getIssueIds,
updateIssueOnDrop,
groupBy,
subGroupBy,
orderBy !== "sort_order"
).catch((err) => {
setToast({
title: "Error!",
type: TOAST_TYPE.ERROR,
message: err?.detail ?? "Failed to perform this action",
});
});
};
return handleOnDrop;
};

4
web/pages/create-workspace.tsx
View File

@@ -33,7 +33,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
organization_size: "",
});
// hooks
const { theme } = useTheme();
const { resolvedTheme } = useTheme();
const onSubmit = async (workspace: IWorkspace) => {
await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
@@ -50,7 +50,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
href="/"
>
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
{resolvedTheme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />

4
web/pages/invitations/index.tsx
View File

@@ -49,7 +49,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
const { fetchWorkspaces } = useWorkspace();
// next-themes
const { theme } = useTheme();
const { resolvedTheme } = useTheme();
const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
@@ -135,7 +135,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
<div className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3">
<div className="h-[30px] w-[133px]">
{theme === "light" ? (
{resolvedTheme === "light" ? (
<Image src={BlackHorizontalLogo} alt="Plane black logo" />
) : (
<Image src={WhiteHorizontalLogo} alt="Plane white logo" />

21
web/store/issue/archived/issue.store.ts
View File

@@ -17,6 +17,7 @@ export interface IArchivedIssues {
// computed
groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
// actions
getIssueIds: (groupId?: string) => string[] | undefined;
fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue[]>;
removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -84,6 +85,26 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
return issues;
}
getIssueIds = (groupId?: string) => {
const groupedIssueIds = this.groupedIssueIds;
const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
if (!displayFilters || !groupedIssueIds) return undefined;
const subGroupBy = displayFilters?.sub_group_by;
const groupBy = displayFilters?.group_by;
if (!groupBy && !subGroupBy) {
return groupedIssueIds as string[];
}
if (groupBy && groupId) {
return (groupedIssueIds as TGroupedIssues)?.[groupId] as string[];
}
return undefined;
};
fetchIssues = async (workspaceSlug: string, projectId: string, loadType: TLoader = "init-loader") => {
try {
this.loader = loadType;

32
web/store/issue/cycle/issue.store.ts
View File

@@ -6,6 +6,8 @@ import update from "lodash/update";
import { action, observable, makeObservable, computed, runInAction } from "mobx";
// types
import { TIssue, TSubGroupedIssues, TGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
// helpers
import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
// services
import { CycleService } from "@/services/cycle.service";
import { IssueService } from "@/services/issue";
@@ -21,6 +23,7 @@ export interface ICycleIssues {
issues: { [cycle_id: string]: string[] };
viewFlags: ViewFlags;
// computed
issuesCount: number;
groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
// actions
getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
@@ -60,7 +63,7 @@ export interface ICycleIssues {
) => Promise<void>;
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>
removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
transferIssuesFromCycle: (
workspaceSlug: string,
projectId: string,
@@ -93,6 +96,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
loader: observable.ref,
issues: observable,
// computed
issuesCount: computed,
groupedIssueIds: computed,
// action
fetchIssues: action,
@@ -113,6 +117,22 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
this.cycleService = new CycleService();
}
get issuesCount() {
let issuesCount = 0;
const displayFilters = this.rootStore?.cycleIssuesFilter?.issueFilters?.displayFilters;
const groupedIssueIds = this.groupedIssueIds;
if (!displayFilters || !groupedIssueIds) return issuesCount;
const layout = displayFilters?.layout || undefined;
const groupBy = displayFilters?.group_by || undefined;
const subGroupBy = displayFilters?.sub_group_by || undefined;
if (!layout) return issuesCount;
issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
return issuesCount;
}
get groupedIssueIds() {
const cycleId = this.rootIssueStore?.cycleId;
if (!cycleId) return undefined;
@@ -336,14 +356,14 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
/**
* Remove a cycle from issue
* @param workspaceSlug
* @param projectId
* @param issueId
* @returns
* @param workspaceSlug
* @param projectId
* @param issueId
* @returns
*/
removeCycleFromIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
const issueCycleId = this.rootIssueStore.issues.getIssueById(issueId)?.cycle_id;
if(!issueCycleId) return;
if (!issueCycleId) return;
try {
// perform optimistic update, update store
runInAction(() => {

3
web/store/issue/issue_kanban_view.store.ts
View File

@@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from "mobx";
import { computedFn } from "mobx-utils";
import { IssueRootStore } from "./root.store";
import { TIssueGroupByOptions } from "@plane/types";
import { DRAG_ALLOWED_GROUPS } from "@/constants/issue";
// types
export interface IIssueKanBanViewStore {
@@ -22,8 +23,6 @@ export interface IIssueKanBanViewStore {
setIsDragging: (isDragging: boolean) => void;
}
const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = ["state", "priority", "assignees", "labels", "module", "cycle"];
export class IssueKanBanViewStore implements IIssueKanBanViewStore {
kanBanToggle: {
groupByHeaderMinMax: string[];

29
web/store/issue/module/issue.store.ts
View File

@@ -7,6 +7,8 @@ import update from "lodash/update";
import { action, observable, makeObservable, computed, runInAction } from "mobx";
// types
import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
// helpers
import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
// services
import { IssueService } from "@/services/issue";
import { ModuleService } from "@/services/module.service";
@@ -21,6 +23,7 @@ export interface IModuleIssues {
issues: { [module_id: string]: string[] };
viewFlags: ViewFlags;
// computed
issuesCount: number;
groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
// actions
getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
@@ -95,6 +98,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
loader: observable.ref,
issues: observable,
// computed
issuesCount: computed,
groupedIssueIds: computed,
// action
fetchIssues: action,
@@ -113,6 +117,22 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
this.moduleService = new ModuleService();
}
get issuesCount() {
let issuesCount = 0;
const displayFilters = this.rootIssueStore?.moduleIssuesFilter?.issueFilters?.displayFilters;
const groupedIssueIds = this.groupedIssueIds;
if (!displayFilters || !groupedIssueIds) return issuesCount;
const layout = displayFilters?.layout || undefined;
const groupBy = displayFilters?.group_by || undefined;
const subGroupBy = displayFilters?.sub_group_by || undefined;
if (!layout) return issuesCount;
issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
return issuesCount;
}
get groupedIssueIds() {
const moduleId = this.rootIssueStore?.moduleId;
if (!moduleId) return undefined;
@@ -370,9 +390,9 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
/**
* change modules array in issue
* @param workspaceSlug
* @param projectId
* @param issueId
* @param workspaceSlug
* @param projectId
* @param issueId
* @param addModuleIds array of modules to be added
* @param removeModuleIds array of modules to be removed
*/
@@ -404,7 +424,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
});
});
});
if(originalModuleIds){
if (originalModuleIds) {
// update the root issue map with the new module ids
let currentModuleIds = concat([...originalModuleIds], addModuleIds);
currentModuleIds = pull(currentModuleIds, ...removeModuleIds);
@@ -420,7 +440,6 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
if (!isEmpty(removeModuleIds)) {
await this.moduleService.removeModulesFromIssueBulk(workspaceSlug, projectId, issueId, removeModuleIds);
}
} catch (error) {
// revert the issue back to its original module ids
set(this.rootStore.issues.issuesMap, [issueId, "module_ids"], originalModuleIds);

20
web/store/issue/project/issue.store.ts
View File

@@ -5,6 +5,8 @@ import update from "lodash/update";
import { action, makeObservable, observable, runInAction, computed } from "mobx";
// types
import { TIssue, TGroupedIssues, TSubGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
// helpers
import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
// base class
import { IssueService, IssueArchiveService } from "@/services/issue";
import { IssueHelperStore } from "../helpers/issue-helper.store";
@@ -17,6 +19,7 @@ export interface IProjectIssues {
issues: Record<string, string[]>; // Record of project_id as key and issue_ids as value
viewFlags: ViewFlags;
// computed
issuesCount: number;
groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
// action
@@ -51,6 +54,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
loader: observable.ref,
issues: observable,
// computed
issuesCount: computed,
groupedIssueIds: computed,
// action
fetchIssues: action,
@@ -68,6 +72,22 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
this.issueArchiveService = new IssueArchiveService();
}
get issuesCount() {
let issuesCount = 0;
const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
const groupedIssueIds = this.groupedIssueIds;
if (!displayFilters || !groupedIssueIds) return issuesCount;
const layout = displayFilters?.layout || undefined;
const groupBy = displayFilters?.group_by || undefined;
const subGroupBy = displayFilters?.sub_group_by || undefined;
if (!layout) return issuesCount;
issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
return issuesCount;
}
get groupedIssueIds() {
const projectId = this.rootStore?.projectId;
if (!projectId) return undefined;