mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge branch 'develop' of https://github.com/makeplane/plane into fix/gantt-scroll
This commit is contained in:
Aaryan Khandelwal
commit
ae86b0c419
@ -243,6 +243,29 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
):
|
||||
serializer = CycleSerializer(data=request.data)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and request.data.get("external_source")
|
||||
and Cycle.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
cycle = Cycle.objects.filter(
|
||||
workspace__slug=slug,
|
||||
project_id=project_id,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).first()
|
||||
return Response(
|
||||
{
|
||||
"error": "Cycle with the same external id and external source already exists",
|
||||
"cycle": str(cycle.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
serializer.save(
|
||||
project_id=project_id,
|
||||
owned_by=request.user,
|
||||
@ -289,6 +312,23 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
|
||||
serializer = CycleSerializer(cycle, data=request.data, partial=True)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and (cycle.external_id != request.data.get("external_id"))
|
||||
and Cycle.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source", cycle.external_source),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
return Response(
|
||||
{
|
||||
"error": "Cycle with the same external id and external source already exists",
|
||||
"cycle_id": str(cycle.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
serializer.save()
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||
|
||||
@ -220,6 +220,30 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
)
|
||||
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and request.data.get("external_source")
|
||||
and Issue.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
issue = Issue.objects.filter(
|
||||
workspace__slug=slug,
|
||||
project_id=project_id,
|
||||
external_id=request.data.get("external_id"),
|
||||
external_source=request.data.get("external_source"),
|
||||
).first()
|
||||
return Response(
|
||||
{
|
||||
"error": "Issue with the same external id and external source already exists",
|
||||
"issue_id": str(issue.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
|
||||
serializer.save()
|
||||
|
||||
# Track the issue
|
||||
@ -256,6 +280,24 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
partial=True,
|
||||
)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
str(request.data.get("external_id"))
|
||||
and (issue.external_id != str(request.data.get("external_id")))
|
||||
and Issue.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source", issue.external_source),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
return Response(
|
||||
{
|
||||
"error": "Issue with the same external id and external source already exists",
|
||||
"issue_id": str(issue.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
|
||||
serializer.save()
|
||||
issue_activity.delay(
|
||||
type="issue.activity.updated",
|
||||
@ -263,6 +305,8 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
actor_id=str(request.user.id),
|
||||
issue_id=str(pk),
|
||||
project_id=str(project_id),
|
||||
external_id__isnull=False,
|
||||
external_source__isnull=False,
|
||||
current_instance=current_instance,
|
||||
epoch=int(timezone.now().timestamp()),
|
||||
)
|
||||
|
||||
@ -132,6 +132,29 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
},
|
||||
)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and request.data.get("external_source")
|
||||
and Module.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
module = Module.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).first()
|
||||
return Response(
|
||||
{
|
||||
"error": "Module with the same external id and external source already exists",
|
||||
"module_id": str(module.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
serializer.save()
|
||||
module = Module.objects.get(pk=serializer.data["id"])
|
||||
serializer = ModuleSerializer(module)
|
||||
@ -149,8 +172,25 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
|
||||
partial=True,
|
||||
)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and (module.external_id != request.data.get("external_id"))
|
||||
and Module.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source", module.external_source),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
return Response(
|
||||
{
|
||||
"error": "Module with the same external id and external source already exists",
|
||||
"module_id": str(module.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
serializer.save()
|
||||
return Response(serializer.data, status=status.HTTP_201_CREATED)
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||
|
||||
def get(self, request, slug, project_id, pk=None):
|
||||
|
||||
@ -38,6 +38,30 @@ class StateAPIEndpoint(BaseAPIView):
|
||||
data=request.data, context={"project_id": project_id}
|
||||
)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
request.data.get("external_id")
|
||||
and request.data.get("external_source")
|
||||
and State.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source"),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
state = State.objects.filter(
|
||||
workspace__slug=slug,
|
||||
project_id=project_id,
|
||||
external_id=request.data.get("external_id"),
|
||||
external_source=request.data.get("external_source"),
|
||||
).first()
|
||||
return Response(
|
||||
{
|
||||
"error": "State with the same external id and external source already exists",
|
||||
"state_id": str(state.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
|
||||
serializer.save(project_id=project_id)
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||
@ -91,6 +115,23 @@ class StateAPIEndpoint(BaseAPIView):
|
||||
)
|
||||
serializer = StateSerializer(state, data=request.data, partial=True)
|
||||
if serializer.is_valid():
|
||||
if (
|
||||
str(request.data.get("external_id"))
|
||||
and (state.external_id != str(request.data.get("external_id")))
|
||||
and State.objects.filter(
|
||||
project_id=project_id,
|
||||
workspace__slug=slug,
|
||||
external_source=request.data.get("external_source", state.external_source),
|
||||
external_id=request.data.get("external_id"),
|
||||
).exists()
|
||||
):
|
||||
return Response(
|
||||
{
|
||||
"error": "State with the same external id and external source already exists",
|
||||
"state_id": str(state.id),
|
||||
},
|
||||
status=status.HTTP_409_CONFLICT,
|
||||
)
|
||||
serializer.save()
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||
|
||||
@ -242,13 +242,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
.values("display_name", "assignee_id", "avatar")
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(archived_at__isnull=True, is_draft=False),
|
||||
),
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -258,7 +258,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
@ -281,13 +281,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
.values("label_name", "color", "label_id")
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(archived_at__isnull=True, is_draft=False),
|
||||
)
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -297,7 +297,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
@ -419,13 +419,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(archived_at__isnull=True, is_draft=False),
|
||||
),
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -435,7 +435,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
@ -459,13 +459,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
.values("label_name", "color", "label_id")
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(archived_at__isnull=True, is_draft=False),
|
||||
),
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -475,7 +475,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
|
||||
@ -197,7 +197,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
archived_at__isnull=True,
|
||||
is_draft=False,
|
||||
@ -206,7 +206,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -216,7 +216,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"assignee_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
@ -239,7 +239,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
.values("label_name", "color", "label_id")
|
||||
.annotate(
|
||||
total_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
archived_at__isnull=True,
|
||||
is_draft=False,
|
||||
@ -248,7 +248,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
completed_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=False,
|
||||
archived_at__isnull=True,
|
||||
@ -258,7 +258,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
|
||||
)
|
||||
.annotate(
|
||||
pending_issues=Count(
|
||||
"label_id",
|
||||
"id",
|
||||
filter=Q(
|
||||
completed_at__isnull=True,
|
||||
archived_at__isnull=True,
|
||||
|
||||
@ -89,8 +89,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="">
|
||||
<div className="flex items-start gap-x-4">
|
||||
<div className="grid place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
|
||||
<Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Command } from "cmdk";
|
||||
import { ContrastIcon, FileText } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication } from "hooks/store";
|
||||
import { useApplication, useEventTracker } from "hooks/store";
|
||||
// ui
|
||||
import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
|
||||
|
||||
@ -14,8 +14,8 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
||||
|
||||
const {
|
||||
commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -23,7 +23,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("COMMAND_PALETTE");
|
||||
setTrackElement("Command palette");
|
||||
toggleCreateCycleModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
@ -39,6 +39,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("Command palette");
|
||||
toggleCreateModuleModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
@ -54,6 +55,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("Command palette");
|
||||
toggleCreateViewModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
@ -69,6 +71,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("Command palette");
|
||||
toggleCreatePageModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
|
||||
@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { FolderPlus, Search, Settings } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject } from "hooks/store";
|
||||
// services
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
import { IssueService } from "services/issue";
|
||||
@ -64,8 +64,8 @@ export const CommandModal: React.FC = observer(() => {
|
||||
toggleCreateIssueModal,
|
||||
toggleCreateProjectModal,
|
||||
},
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
@ -278,7 +278,7 @@ export const CommandModal: React.FC = observer(() => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("COMMAND_PALETTE");
|
||||
setTrackElement("Command Palette");
|
||||
toggleCreateIssueModal(true);
|
||||
}}
|
||||
className="focus:bg-custom-background-80"
|
||||
@ -296,7 +296,7 @@ export const CommandModal: React.FC = observer(() => {
|
||||
<Command.Item
|
||||
onSelect={() => {
|
||||
closePalette();
|
||||
setTrackElement("COMMAND_PALETTE");
|
||||
setTrackElement("Command palette");
|
||||
toggleCreateProjectModal(true);
|
||||
}}
|
||||
className="focus:outline-none"
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useIssues, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CommandModal, ShortcutsModal } from "components/command-palette";
|
||||
@ -32,8 +32,8 @@ export const CommandPalette: FC = observer(() => {
|
||||
const {
|
||||
commandPalette,
|
||||
theme: { toggleSidebar },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { currentUser } = useUser();
|
||||
const {
|
||||
issues: { removeIssue },
|
||||
@ -118,11 +118,10 @@ export const CommandPalette: FC = observer(() => {
|
||||
toggleSidebar();
|
||||
}
|
||||
} else if (!isAnyModalOpen) {
|
||||
setTrackElement("Shortcut key");
|
||||
if (keyPressed === "c") {
|
||||
setTrackElement("SHORTCUT_KEY");
|
||||
toggleCreateIssueModal(true);
|
||||
} else if (keyPressed === "p") {
|
||||
setTrackElement("SHORTCUT_KEY");
|
||||
toggleCreateProjectModal(true);
|
||||
} else if (keyPressed === "h") {
|
||||
toggleShortcutModal(true);
|
||||
|
||||
@ -86,12 +86,15 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
|
||||
{
|
||||
id: "pending",
|
||||
color: "#3F76FF",
|
||||
data: chartData.map((item, index) => ({
|
||||
index,
|
||||
x: item.currentDate,
|
||||
y: item.pending,
|
||||
color: "#3F76FF",
|
||||
})),
|
||||
data:
|
||||
chartData.length > 0
|
||||
? chartData.map((item, index) => ({
|
||||
index,
|
||||
x: item.currentDate,
|
||||
y: item.pending,
|
||||
color: "#3F76FF",
|
||||
}))
|
||||
: [],
|
||||
enableArea: true,
|
||||
},
|
||||
{
|
||||
@ -121,7 +124,9 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
|
||||
enableArea
|
||||
colors={(datum) => datum.color ?? "#3F76FF"}
|
||||
customYAxisTickValues={[0, totalIssues]}
|
||||
gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
|
||||
gridXValues={
|
||||
chartData.length > 0 ? chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")) : undefined
|
||||
}
|
||||
enableSlices="x"
|
||||
sliceTooltip={(datum) => (
|
||||
<div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
|
||||
|
||||
@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
// hooks
|
||||
import { useApplication, useCycle, useUser } from "hooks/store";
|
||||
import { useEventTracker, useCycle, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
|
||||
@ -33,9 +33,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
// store
|
||||
const {
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -117,14 +115,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
|
||||
const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Cycles page board layout");
|
||||
setUpdateModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Cycles page board layout");
|
||||
setDeleteModal(true);
|
||||
setTrackElement("CYCLE_PAGE_BOARD_LAYOUT");
|
||||
};
|
||||
|
||||
const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
|
||||
@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import { useApplication, useCycle, useUser } from "hooks/store";
|
||||
import { useEventTracker, useCycle, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
|
||||
@ -37,9 +37,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -90,14 +88,15 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
|
||||
const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Cycles page list layout");
|
||||
setUpdateModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Cycles page list layout");
|
||||
setDeleteModal(true);
|
||||
setTrackElement("CYCLE_PAGE_LIST_LAYOUT");
|
||||
};
|
||||
|
||||
const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
|
||||
@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useCycle } from "hooks/store";
|
||||
import { useEventTracker, useCycle } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { Button } from "@plane/ui";
|
||||
@ -27,9 +27,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
|
||||
const router = useRouter();
|
||||
const { cycleId, peekCycle } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureCycleEvent } = useEventTracker();
|
||||
const { deleteCycle } = useCycle();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
@ -46,13 +44,15 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
|
||||
title: "Success!",
|
||||
message: "Cycle deleted successfully.",
|
||||
});
|
||||
postHogEventTracker("CYCLE_DELETE", {
|
||||
state: "SUCCESS",
|
||||
captureCycleEvent({
|
||||
eventName: "Cycle deleted",
|
||||
payload: { ...cycle, state: "SUCCESS" },
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
postHogEventTracker("CYCLE_DELETE", {
|
||||
state: "FAILED",
|
||||
captureCycleEvent({
|
||||
eventName: "Cycle deleted",
|
||||
payload: { ...cycle, state: "FAILED" },
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { CycleService } from "services/cycle.service";
|
||||
// hooks
|
||||
import { useApplication, useCycle, useProject } from "hooks/store";
|
||||
import { useEventTracker, useCycle, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// components
|
||||
@ -27,9 +27,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
||||
// states
|
||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureCycleEvent } = useEventTracker();
|
||||
const { workspaceProjectIds } = useProject();
|
||||
const { createCycle, updateCycleDetails } = useCycle();
|
||||
// toast alert
|
||||
@ -48,9 +46,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
||||
title: "Success!",
|
||||
message: "Cycle created successfully.",
|
||||
});
|
||||
postHogEventTracker("CYCLE_CREATE", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
captureCycleEvent({
|
||||
eventName: "Cycle created",
|
||||
payload: { ...res, state: "SUCCESS" },
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -59,8 +57,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
|
||||
title: "Error!",
|
||||
message: err.detail ?? "Error in creating cycle. Please try again.",
|
||||
});
|
||||
postHogEventTracker("CYCLE_CREATE", {
|
||||
state: "FAILED",
|
||||
captureCycleEvent({
|
||||
eventName: "Cycle created",
|
||||
payload: { ...payload, state: "FAILED" },
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ import { Disclosure, Popover, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { CycleService } from "services/cycle.service";
|
||||
// hooks
|
||||
import { useApplication, useCycle, useMember, useUser } from "hooks/store";
|
||||
import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { SidebarProgressStats } from "components/core";
|
||||
@ -66,9 +66,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, peekCycle } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -319,13 +317,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
|
||||
|
||||
const issueCount =
|
||||
cycleDetails.total_issues === 0
|
||||
? "0 Issue"
|
||||
: cycleDetails.total_issues === cycleDetails.completed_issues
|
||||
? cycleDetails.total_issues > 1
|
||||
? `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.total_issues}`
|
||||
: `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
|
||||
cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
@ -575,7 +567,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-3">
|
||||
{isStartValid && isEndValid ? (
|
||||
{cycleDetails.distribution?.completion_chart &&
|
||||
cycleDetails.start_date &&
|
||||
cycleDetails.end_date ? (
|
||||
<div className="h-full w-full pt-4">
|
||||
<div className="flex items-start gap-4 py-2 text-xs">
|
||||
<div className="flex items-center gap-3 text-custom-text-100">
|
||||
@ -589,16 +583,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{cycleDetails && cycleDetails.distribution && (
|
||||
<div className="relative h-40 w-80">
|
||||
<ProgressChart
|
||||
distribution={cycleDetails.distribution?.completion_chart ?? {}}
|
||||
startDate={cycleDetails.start_date ?? ""}
|
||||
endDate={cycleDetails.end_date ?? ""}
|
||||
totalIssues={cycleDetails.total_issues}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative h-40 w-80">
|
||||
<ProgressChart
|
||||
distribution={cycleDetails.distribution?.completion_chart}
|
||||
startDate={cycleDetails.start_date}
|
||||
endDate={cycleDetails.end_date}
|
||||
totalIssues={cycleDetails.total_issues}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import Image from "next/image";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useUser } from "hooks/store";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// assets
|
||||
@ -14,6 +14,7 @@ export const DashboardProjectEmptyState = observer(() => {
|
||||
const {
|
||||
commandPalette: { toggleCreateProjectModal },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
@ -31,7 +32,13 @@ export const DashboardProjectEmptyState = observer(() => {
|
||||
<Image src={ProjectEmptyStateImage} className="w-full" alt="Project empty state" />
|
||||
{canCreateProject && (
|
||||
<div className="flex justify-center">
|
||||
<Button variant="primary" onClick={() => toggleCreateProjectModal(true)}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
setTrackElement("Project empty state");
|
||||
toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
Build your first project
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -26,11 +26,11 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
|
||||
placement="bottom-end"
|
||||
closeOnSelect
|
||||
>
|
||||
{DURATION_FILTER_OPTIONS.map((option) => (
|
||||
<CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
|
||||
{option.label}
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
{DURATION_FILTER_OPTIONS.map((option) => (
|
||||
<CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
|
||||
{option.label}
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
);
|
||||
};
|
||||
|
||||
@ -77,7 +77,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
|
||||
})}
|
||||
>
|
||||
Issues
|
||||
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl h-4 min-w-6 flex items-center text-center justify-center">
|
||||
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
|
||||
{totalIssues}
|
||||
</span>
|
||||
</h6>
|
||||
|
||||
@ -9,6 +9,7 @@ import { WidgetLoader } from "components/dashboard/widgets";
|
||||
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { TOverviewStatsWidgetResponse } from "@plane/types";
|
||||
import { cn } from "helpers/common.helper";
|
||||
|
||||
export type WidgetProps = {
|
||||
dashboardId: string;
|
||||
@ -71,10 +72,18 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
[&>div:nth-child(2)>a>div]:lg:border-r
|
||||
"
|
||||
>
|
||||
{STATS_LIST.map((stat) => (
|
||||
<div className="w-full flex flex-col gap-2 hover:bg-custom-background-80 rounded-[10px]">
|
||||
{STATS_LIST.map((stat, index) => (
|
||||
<div
|
||||
className={cn(
|
||||
`w-full flex flex-col gap-2 hover:bg-custom-background-80`,
|
||||
index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
|
||||
index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
|
||||
index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
|
||||
index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
|
||||
)}
|
||||
>
|
||||
<Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
|
||||
<div className={`relative flex justify-center items-center`}>
|
||||
<div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
|
||||
<div>
|
||||
<h5 className="font-semibold text-xl">{stat.count}</h5>
|
||||
<p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>
|
||||
|
||||
@ -3,7 +3,7 @@ import Link from "next/link";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
|
||||
// components
|
||||
import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
|
||||
// ui
|
||||
@ -72,6 +72,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
const {
|
||||
commandPalette: { toggleCreateProjectModal },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
@ -105,6 +106,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Sidebar");
|
||||
toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -105,6 +105,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full", className)}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Combobox.Button as={React.Fragment}>
|
||||
<button
|
||||
|
||||
@ -5,6 +5,7 @@ import Link from "next/link";
|
||||
// hooks
|
||||
import {
|
||||
useApplication,
|
||||
useEventTracker,
|
||||
useCycle,
|
||||
useLabel,
|
||||
useMember,
|
||||
@ -70,8 +71,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
||||
const { currentProjectCycleIds, getCycleById } = useCycle();
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -238,7 +239,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTrackElement("CYCLE_PAGE_HEADER");
|
||||
setTrackElement("Cycle issues page");
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
|
||||
}}
|
||||
size="sm"
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
|
||||
// ui
|
||||
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
|
||||
// helpers
|
||||
@ -20,8 +20,8 @@ export const CyclesHeader: FC = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: { toggleCreateCycleModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -70,7 +70,7 @@ export const CyclesHeader: FC = observer(() => {
|
||||
size="sm"
|
||||
prependIcon={<Plus />}
|
||||
onClick={() => {
|
||||
setTrackElement("CYCLES_PAGE_HEADER");
|
||||
setTrackElement("Cycles page");
|
||||
toggleCreateCycleModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -5,6 +5,7 @@ import Link from "next/link";
|
||||
// hooks
|
||||
import {
|
||||
useApplication,
|
||||
useEventTracker,
|
||||
useLabel,
|
||||
useMember,
|
||||
useModule,
|
||||
@ -73,8 +74,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
|
||||
const { projectModuleIds, getModuleById } = useModule();
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -241,7 +242,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTrackElement("MODULE_PAGE_HEADER");
|
||||
setTrackElement("Module issues page");
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
|
||||
}}
|
||||
size="sm"
|
||||
|
||||
@ -2,7 +2,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// ui
|
||||
import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
|
||||
@ -21,6 +21,7 @@ export const ModulesListHeader: React.FC = observer(() => {
|
||||
const { workspaceSlug } = router.query;
|
||||
// store hooks
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -90,7 +91,10 @@ export const ModulesListHeader: React.FC = observer(() => {
|
||||
variant="primary"
|
||||
size="sm"
|
||||
prependIcon={<Plus />}
|
||||
onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
|
||||
onClick={() => {
|
||||
setTrackElement("Modules page");
|
||||
commandPaletteStore.toggleCreateModuleModal(true);
|
||||
}}
|
||||
>
|
||||
Add Module
|
||||
</Button>
|
||||
|
||||
@ -4,7 +4,16 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useLabel, useProject, useProjectState, useUser, useInbox, useMember } from "hooks/store";
|
||||
import {
|
||||
useApplication,
|
||||
useEventTracker,
|
||||
useLabel,
|
||||
useProject,
|
||||
useProjectState,
|
||||
useUser,
|
||||
useInbox,
|
||||
useMember,
|
||||
} from "hooks/store";
|
||||
// components
|
||||
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
|
||||
import { ProjectAnalyticsModal } from "components/analytics";
|
||||
@ -36,8 +45,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
} = useIssues(EIssuesStoreType.PROJECT);
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
@ -221,7 +230,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTrackElement("PROJECT_PAGE_HEADER");
|
||||
setTrackElement("Project issues page");
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
}}
|
||||
size="sm"
|
||||
|
||||
@ -6,6 +6,7 @@ import Link from "next/link";
|
||||
// hooks
|
||||
import {
|
||||
useApplication,
|
||||
useEventTracker,
|
||||
useIssues,
|
||||
useLabel,
|
||||
useMember,
|
||||
@ -41,9 +42,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
|
||||
const {
|
||||
issuesFilter: { issueFilters, updateFilters },
|
||||
} = useIssues(EIssuesStoreType.PROJECT_VIEW);
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Search, Plus, Briefcase } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
|
||||
// ui
|
||||
import { Breadcrumbs, Button } from "@plane/ui";
|
||||
// constants
|
||||
@ -12,10 +12,8 @@ import { BreadcrumbLink } from "components/common";
|
||||
|
||||
export const ProjectsHeader = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
@ -53,7 +51,7 @@ export const ProjectsHeader = observer(() => {
|
||||
prependIcon={<Plus />}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setTrackElement("PROJECTS_PAGE_HEADER");
|
||||
setTrackElement("Projects page");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -18,7 +18,7 @@ export const WorkspaceDashboardHeader = () => {
|
||||
return (
|
||||
<>
|
||||
<ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
|
||||
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="relative z-20 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
|
||||
<SidebarHamburgerToggle />
|
||||
<div>
|
||||
|
||||
@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { Popover } from "@headlessui/react";
|
||||
// hooks
|
||||
import { useApplication, useUser, useInboxIssues, useIssueDetail, useWorkspace } from "hooks/store";
|
||||
import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import {
|
||||
@ -38,9 +38,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
// router
|
||||
const router = useRouter();
|
||||
// hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const {
|
||||
issues: { getInboxIssuesByInboxId, getInboxIssueByIssueId, updateInboxIssueStatus, removeInboxIssue },
|
||||
@ -87,17 +85,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !currentWorkspace)
|
||||
throw new Error("Missing required parameters");
|
||||
await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
|
||||
postHogEventTracker(
|
||||
"ISSUE_DELETED",
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: {
|
||||
id: inboxIssueId,
|
||||
state: "SUCCESS",
|
||||
element: "Inbox page",
|
||||
},
|
||||
{
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
|
||||
});
|
||||
@ -107,17 +107,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
title: "Error!",
|
||||
message: "Something went wrong while deleting inbox issue. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"ISSUE_DELETED",
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: {
|
||||
id: inboxIssueId,
|
||||
state: "FAILED",
|
||||
element: "Inbox page",
|
||||
},
|
||||
{
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
}),
|
||||
@ -130,7 +132,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
updateInboxIssueStatus,
|
||||
removeInboxIssue,
|
||||
setToastAlert,
|
||||
postHogEventTracker,
|
||||
captureIssueEvent,
|
||||
router,
|
||||
]
|
||||
);
|
||||
|
||||
@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
|
||||
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
|
||||
import { Sparkle } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useWorkspace, useInboxIssues, useMention } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import { FileService } from "services/file.service";
|
||||
@ -63,8 +63,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
|
||||
} = useInboxIssues();
|
||||
const {
|
||||
config: { envConfig },
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
|
||||
const {
|
||||
@ -93,32 +93,37 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
|
||||
router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.id}`);
|
||||
handleClose();
|
||||
} else reset(defaultValues);
|
||||
postHogEventTracker(
|
||||
"ISSUE_CREATED",
|
||||
{
|
||||
...res,
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: {
|
||||
...formData,
|
||||
state: "SUCCESS",
|
||||
element: "Inbox page",
|
||||
},
|
||||
{
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
path: router.pathname,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
postHogEventTracker(
|
||||
"ISSUE_CREATED",
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: {
|
||||
...formData,
|
||||
state: "FAILED",
|
||||
element: "Inbox page",
|
||||
},
|
||||
{
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
path: router.pathname,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
|
||||
import { useFormContext, Controller } from "react-hook-form";
|
||||
import { Plus } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject } from "hooks/store";
|
||||
// components
|
||||
import { CustomSelect, Input } from "@plane/ui";
|
||||
// helpers
|
||||
@ -14,10 +14,8 @@ import { IJiraImporterForm } from "@plane/types";
|
||||
|
||||
export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { workspaceProjectIds, getProjectById } = useProject();
|
||||
// form info
|
||||
const {
|
||||
@ -202,7 +200,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setTrackElement("JIRA_IMPORT_DETAIL");
|
||||
setTrackElement("Jira import detail page");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
}}
|
||||
className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC, useMemo } from "react";
|
||||
// hooks
|
||||
import { useIssueDetail } from "hooks/store";
|
||||
import { useEventTracker, useIssueDetail } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { IssueAttachmentUpload } from "./attachment-upload";
|
||||
@ -23,6 +23,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
|
||||
const { workspaceSlug, projectId, issueId, disabled = false } = props;
|
||||
// hooks
|
||||
const { createAttachment, removeAttachment } = useIssueDetail();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleAttachmentOperations: TAttachmentOperations = useMemo(
|
||||
@ -30,13 +31,25 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
|
||||
create: async (data: FormData) => {
|
||||
try {
|
||||
if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
|
||||
await createAttachment(workspaceSlug, projectId, issueId, data);
|
||||
const res = await createAttachment(workspaceSlug, projectId, issueId, data);
|
||||
setToastAlert({
|
||||
message: "The attachment has been successfully uploaded",
|
||||
type: "success",
|
||||
title: "Attachment uploaded",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "attachment",
|
||||
change_details: res.id,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
});
|
||||
setToastAlert({
|
||||
message: "The attachment could not be uploaded",
|
||||
type: "error",
|
||||
@ -53,7 +66,23 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
|
||||
type: "success",
|
||||
title: "Attachment removed",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "attachment",
|
||||
change_details: "",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "attachment",
|
||||
change_details: "",
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
message: "The Attachment could not be removed",
|
||||
type: "error",
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { FC, useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { InboxIssueMainContent } from "./main-content";
|
||||
import { InboxIssueDetailsSidebar } from "./sidebar";
|
||||
// hooks
|
||||
import { useInboxIssues, useIssueDetail, useUser } from "hooks/store";
|
||||
import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
@ -21,6 +22,8 @@ export type TInboxIssueDetailRoot = {
|
||||
|
||||
export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
|
||||
const { workspaceSlug, projectId, inboxId, issueId } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
// hooks
|
||||
const {
|
||||
issues: { fetchInboxIssueById, updateInboxIssue, removeInboxIssue },
|
||||
@ -28,6 +31,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
@ -50,7 +54,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
|
||||
showToast: boolean = true
|
||||
) => {
|
||||
try {
|
||||
await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
|
||||
const response = await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
|
||||
if (showToast) {
|
||||
setToastAlert({
|
||||
title: "Issue updated successfully",
|
||||
@ -58,12 +62,30 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
|
||||
message: "Issue updated successfully",
|
||||
});
|
||||
}
|
||||
captureIssueEvent({
|
||||
eventName: "Inbox issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Inbox" },
|
||||
updates: {
|
||||
changed_property: Object.keys(data).join(","),
|
||||
change_details: Object.values(data).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Issue update failed",
|
||||
type: "error",
|
||||
message: "Issue update failed",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Inbox issue updated",
|
||||
payload: { state: "SUCCESS", element: "Inbox" },
|
||||
updates: {
|
||||
changed_property: Object.keys(data).join(","),
|
||||
change_details: Object.values(data).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
}
|
||||
},
|
||||
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
@ -74,7 +96,17 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
|
||||
type: "success",
|
||||
message: "Issue deleted successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Inbox issue deleted",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Inbox" },
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Inbox issue deleted",
|
||||
payload: { id: issueId, state: "FAILED", element: "Inbox" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Issue delete failed",
|
||||
type: "error",
|
||||
|
||||
@ -9,7 +9,7 @@ import { EmptyState } from "components/common";
|
||||
// images
|
||||
import emptyIssue from "public/empty-state/issue.svg";
|
||||
// hooks
|
||||
import { useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
@ -70,6 +70,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
const {
|
||||
issues: { removeIssue: removeArchivedIssue },
|
||||
} = useIssues(EIssuesStoreType.ARCHIVED);
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
@ -92,7 +93,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
showToast: boolean = true
|
||||
) => {
|
||||
try {
|
||||
await updateIssue(workspaceSlug, projectId, issueId, data);
|
||||
const response = await updateIssue(workspaceSlug, projectId, issueId, data);
|
||||
if (showToast) {
|
||||
setToastAlert({
|
||||
title: "Issue updated successfully",
|
||||
@ -100,7 +101,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
message: "Issue updated successfully",
|
||||
});
|
||||
}
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: Object.keys(data).join(","),
|
||||
change_details: Object.values(data).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: Object.keys(data).join(","),
|
||||
change_details: Object.values(data).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Issue update failed",
|
||||
type: "error",
|
||||
@ -110,30 +129,59 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
},
|
||||
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
else await removeIssue(workspaceSlug, projectId, issueId);
|
||||
let response;
|
||||
if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
else response = await removeIssue(workspaceSlug, projectId, issueId);
|
||||
setToastAlert({
|
||||
title: "Issue deleted successfully",
|
||||
type: "success",
|
||||
message: "Issue deleted successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Issue delete failed",
|
||||
type: "error",
|
||||
message: "Issue delete failed",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}
|
||||
},
|
||||
addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
|
||||
try {
|
||||
await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
|
||||
const response = await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
|
||||
setToastAlert({
|
||||
title: "Cycle added to issue successfully",
|
||||
type: "success",
|
||||
message: "Issue added to issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: cycleId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: cycleId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Cycle add to issue failed",
|
||||
type: "error",
|
||||
@ -143,13 +191,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
},
|
||||
removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
|
||||
try {
|
||||
await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
setToastAlert({
|
||||
title: "Cycle removed from issue successfully",
|
||||
type: "success",
|
||||
message: "Cycle removed from issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Cycle remove from issue failed",
|
||||
type: "error",
|
||||
@ -159,13 +225,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
},
|
||||
addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
|
||||
try {
|
||||
await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
|
||||
const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
|
||||
setToastAlert({
|
||||
title: "Module added to issue successfully",
|
||||
type: "success",
|
||||
message: "Module added to issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: moduleIds,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: moduleIds,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Module add to issue failed",
|
||||
type: "error",
|
||||
@ -181,7 +265,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
|
||||
type: "success",
|
||||
message: "Module removed from issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Module remove from issue failed",
|
||||
type: "error",
|
||||
|
||||
@ -11,11 +11,12 @@ import { TGroupedIssues, TIssue } from "@plane/types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { EIssueActions } from "../types";
|
||||
import { handleDragDrop } from "./utils";
|
||||
import { useIssues } from "hooks/store";
|
||||
import { useIssues, useUser } from "hooks/store";
|
||||
import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
|
||||
import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
|
||||
import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
|
||||
import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
interface IBaseCalendarRoot {
|
||||
issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
|
||||
@ -27,10 +28,11 @@ interface IBaseCalendarRoot {
|
||||
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
|
||||
};
|
||||
viewId?: string;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId } = props;
|
||||
const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId, isCompletedCycle = false } = props;
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
@ -39,6 +41,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
const { issueMap } = useIssues();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
|
||||
|
||||
@ -107,10 +114,12 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
|
||||
: undefined
|
||||
}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
)}
|
||||
quickAddCallback={issueStore.quickAddIssue}
|
||||
viewId={viewId}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
|
||||
@ -31,11 +31,21 @@ type Props = {
|
||||
viewId?: string
|
||||
) => Promise<TIssue | undefined>;
|
||||
viewId?: string;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
|
||||
props;
|
||||
const {
|
||||
issuesFilterStore,
|
||||
issues,
|
||||
groupedIssueIds,
|
||||
layout,
|
||||
showWeekends,
|
||||
quickActions,
|
||||
quickAddCallback,
|
||||
viewId,
|
||||
readOnly = false,
|
||||
} = props;
|
||||
// store hooks
|
||||
const {
|
||||
issues: { viewFlags },
|
||||
@ -80,6 +90,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
quickActions={quickActions}
|
||||
quickAddCallback={quickAddCallback}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@ -95,6 +106,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
quickActions={quickActions}
|
||||
quickAddCallback={quickAddCallback}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -28,6 +28,7 @@ type Props = {
|
||||
viewId?: string
|
||||
) => Promise<TIssue | undefined>;
|
||||
viewId?: string;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
@ -41,6 +42,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
disableIssueCreation,
|
||||
quickAddCallback,
|
||||
viewId,
|
||||
readOnly = false,
|
||||
} = props;
|
||||
const [showAllIssues, setShowAllIssues] = useState(false);
|
||||
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
|
||||
@ -73,7 +75,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
|
||||
{/* content */}
|
||||
<div className="h-full w-full">
|
||||
<Droppable droppableId={formattedDatePayload} isDropDisabled={false}>
|
||||
<Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-full w-full select-none overflow-y-auto ${
|
||||
@ -89,9 +91,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
issueIdList={issueIdList}
|
||||
quickActions={quickActions}
|
||||
showAllIssues={showAllIssues}
|
||||
isDragDisabled={readOnly}
|
||||
/>
|
||||
|
||||
{enableQuickIssueCreate && !disableIssueCreation && (
|
||||
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
|
||||
<div className="px-2 py-1">
|
||||
<CalendarQuickAddIssueForm
|
||||
formKey="target_date"
|
||||
|
||||
@ -17,10 +17,11 @@ type Props = {
|
||||
issueIdList: string[] | null;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
showAllIssues?: boolean;
|
||||
isDragDisabled?: boolean;
|
||||
};
|
||||
|
||||
export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
const { issues, issueIdList, quickActions, showAllIssues = false } = props;
|
||||
const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
|
||||
// hooks
|
||||
const {
|
||||
router: { workspaceSlug, projectId },
|
||||
@ -65,7 +66,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
||||
getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
|
||||
|
||||
return (
|
||||
<Draggable key={issue.id} draggableId={issue.id} index={index}>
|
||||
<Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="relative cursor-pointer p-1 px-2"
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
import { useEventTracker, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
@ -64,6 +64,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// store hooks
|
||||
const { getProjectById } = useProject();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
// refs
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
// states
|
||||
@ -126,7 +127,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
||||
...payload,
|
||||
},
|
||||
viewId
|
||||
));
|
||||
).then((res) => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
@ -134,6 +141,11 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
//hooks
|
||||
import { useIssues } from "hooks/store";
|
||||
import { useCycle, useIssues } from "hooks/store";
|
||||
// components
|
||||
import { CycleIssueQuickActions } from "components/issues";
|
||||
// types
|
||||
@ -13,6 +13,7 @@ import { useMemo } from "react";
|
||||
|
||||
export const CycleCalendarLayout: React.FC = observer(() => {
|
||||
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
|
||||
const { currentProjectCompletedCycleIds } = useCycle();
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
||||
@ -38,6 +39,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
|
||||
|
||||
if (!cycleId) return null;
|
||||
|
||||
const isCompletedCycle =
|
||||
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
|
||||
|
||||
return (
|
||||
<BaseCalendarRoot
|
||||
issueStore={issues}
|
||||
@ -45,6 +49,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
|
||||
QuickActions={CycleIssueQuickActions}
|
||||
issueActions={issueActions}
|
||||
viewId={cycleId.toString()}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -26,6 +26,7 @@ type Props = {
|
||||
viewId?: string
|
||||
) => Promise<TIssue | undefined>;
|
||||
viewId?: string;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
@ -39,6 +40,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
disableIssueCreation,
|
||||
quickAddCallback,
|
||||
viewId,
|
||||
readOnly = false,
|
||||
} = props;
|
||||
|
||||
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
|
||||
@ -67,6 +69,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
quickAddCallback={quickAddCallback}
|
||||
viewId={viewId}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -2,7 +2,7 @@ import { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
@ -32,8 +32,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
|
||||
const { updateIssue, fetchIssue } = useIssueDetail();
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole: userRole },
|
||||
} = useUser();
|
||||
@ -81,7 +81,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
|
||||
text: "New issue",
|
||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||
onClick: () => {
|
||||
setTrackElement("CYCLE_EMPTY_STATE");
|
||||
setTrackElement("Cycle issue empty state");
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
|
||||
},
|
||||
}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus, PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject } from "hooks/store";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
// assets
|
||||
@ -12,8 +12,8 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal, toggleCreateProjectModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { workspaceProjectIds } = useProject();
|
||||
|
||||
return (
|
||||
@ -27,7 +27,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
||||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "New Project",
|
||||
onClick: () => {
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE");
|
||||
setTrackElement("All issues empty state");
|
||||
toggleCreateProjectModal(true);
|
||||
},
|
||||
}}
|
||||
@ -41,7 +41,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
||||
text: "New issue",
|
||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||
onClick: () => {
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE");
|
||||
setTrackElement("All issues empty state");
|
||||
toggleCreateIssueModal(true);
|
||||
},
|
||||
}}
|
||||
|
||||
@ -2,7 +2,7 @@ import { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useIssues, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
@ -32,8 +32,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
|
||||
|
||||
const {
|
||||
commandPalette: { toggleCreateIssueModal },
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole: userRole },
|
||||
} = useUser();
|
||||
@ -76,7 +76,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
|
||||
text: "New issue",
|
||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||
onClick: () => {
|
||||
setTrackElement("MODULE_EMPTY_STATE");
|
||||
setTrackElement("Module issue empty state");
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
|
||||
},
|
||||
}}
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import size from "lodash/size";
|
||||
import { useTheme } from "next-themes";
|
||||
// hooks
|
||||
import { useApplication, useIssues, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
|
||||
// components
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
// constants
|
||||
@ -30,10 +30,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
|
||||
// theme
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
currentUser,
|
||||
@ -90,7 +88,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
|
||||
text: "Create your first issue",
|
||||
|
||||
onClick: () => {
|
||||
setTrackElement("PROJECT_EMPTY_STATE");
|
||||
setTrackElement("Project issue empty state");
|
||||
commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication } from "hooks/store";
|
||||
import { useApplication, useEventTracker } from "hooks/store";
|
||||
// components
|
||||
import { EmptyState } from "components/common";
|
||||
// assets
|
||||
@ -10,10 +10,8 @@ import { EIssuesStoreType } from "constants/issue";
|
||||
|
||||
export const ProjectViewEmptyState: React.FC = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
@ -25,7 +23,7 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
|
||||
text: "New issue",
|
||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||
onClick: () => {
|
||||
setTrackElement("VIEW_EMPTY_STATE");
|
||||
setTrackElement("View issue empty state");
|
||||
commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
|
||||
},
|
||||
}}
|
||||
|
||||
@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
import { useEventTracker, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
@ -66,6 +66,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// hooks
|
||||
const { getProjectById } = useProject();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
|
||||
@ -108,13 +109,24 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
|
||||
|
||||
try {
|
||||
quickAddCallback &&
|
||||
(await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
|
||||
(await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
} catch (err: any) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
||||
@ -3,7 +3,7 @@ import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable }
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useUser } from "hooks/store";
|
||||
import { useEventTracker, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
@ -46,6 +46,7 @@ export interface IBaseKanBanLayout {
|
||||
storeType?: TCreateModalStoreTypes;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<any>;
|
||||
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
type KanbanDragState = {
|
||||
@ -65,6 +66,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
canEditPropertiesBasedOnProject,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
@ -73,6 +75,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { issueMap } = useIssues();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
@ -182,6 +185,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
handleRemoveFromView={
|
||||
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
|
||||
}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@ -205,6 +209,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
|
||||
setDeleteIssueModal(false);
|
||||
setDragState({});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: { id: dragState.draggedIssueId!, state: "FAILED", element: "Kanban layout drag & drop" },
|
||||
path: router.asPath,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -237,7 +246,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
)}
|
||||
|
||||
<div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
|
||||
<div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
|
||||
<div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
|
||||
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
|
||||
{/* drag and delete component */}
|
||||
<div
|
||||
@ -276,7 +285,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
|
||||
quickAddCallback={issues?.quickAddIssue}
|
||||
viewId={viewId}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
|
||||
canEditProperties={canEditProperties}
|
||||
storeType={storeType}
|
||||
addIssuesToView={addIssuesToView}
|
||||
|
||||
@ -44,8 +44,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
|
||||
} = useApplication();
|
||||
const { setPeekIssue } = useIssueDetail();
|
||||
|
||||
const updateIssue = (issueToUpdate: TIssue) => {
|
||||
if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
|
||||
const updateIssue = async (issueToUpdate: TIssue) => {
|
||||
if (issueToUpdate) await handleIssues(issueToUpdate, EIssueActions.UPDATE);
|
||||
};
|
||||
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
@ -81,6 +81,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
|
||||
className="flex flex-wrap items-center gap-2 whitespace-nowrap"
|
||||
issue={issue}
|
||||
displayProperties={displayProperties}
|
||||
activeLayout="Kanban"
|
||||
handleIssues={updateIssue}
|
||||
isReadOnly={isReadOnly}
|
||||
/>
|
||||
|
||||
@ -8,6 +8,7 @@ import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/
|
||||
import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useEventTracker } from "hooks/store";
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// types
|
||||
@ -44,10 +45,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
||||
addIssuesToView,
|
||||
} = props;
|
||||
const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
|
||||
|
||||
// states
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
|
||||
|
||||
// hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
|
||||
|
||||
@ -143,17 +146,30 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Kanban layout");
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-2">Create issue</span>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Kanban layout");
|
||||
setOpenExistingIssueListModal(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-2">Add an existing issue</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => setIsOpen(true)}
|
||||
onClick={() => {
|
||||
setTrackElement("Kanban layout");
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Plus width={14} strokeWidth={2} />
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
import { useEventTracker, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
@ -60,6 +60,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// store hooks
|
||||
const { getProjectById } = useProject();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
|
||||
const projectDetail = projectId ? getProjectById(projectId.toString()) : null;
|
||||
|
||||
@ -103,13 +104,24 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
|
||||
...payload,
|
||||
},
|
||||
viewId
|
||||
));
|
||||
).then((res) => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
} catch (err: any) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
console.error(err);
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useIssues } from "hooks/store";
|
||||
import { useCycle, useIssues } from "hooks/store";
|
||||
// ui
|
||||
import { CycleIssueQuickActions } from "components/issues";
|
||||
// types
|
||||
@ -20,6 +20,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
|
||||
|
||||
// store
|
||||
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
|
||||
const { currentProjectCompletedCycleIds } = useCycle();
|
||||
|
||||
const issueActions = useMemo(
|
||||
() => ({
|
||||
@ -42,6 +43,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
|
||||
[issues, workspaceSlug, cycleId]
|
||||
);
|
||||
|
||||
const isCompletedCycle =
|
||||
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
|
||||
|
||||
const canEditIssueProperties = () => !isCompletedCycle;
|
||||
|
||||
return (
|
||||
<BaseKanBanRoot
|
||||
issueActions={issueActions}
|
||||
@ -55,6 +61,8 @@ export const CycleKanBanLayout: React.FC = observer(() => {
|
||||
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
|
||||
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
|
||||
}}
|
||||
canEditPropertiesBasedOnProject={canEditIssueProperties}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -51,6 +51,7 @@ interface IBaseListRoot {
|
||||
storeType: TCreateModalStoreTypes;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<any>;
|
||||
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
@ -63,6 +64,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
canEditPropertiesBasedOnProject,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
// mobx store
|
||||
const {
|
||||
@ -112,6 +114,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
handleRemoveFromView={
|
||||
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
|
||||
}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@ -136,6 +139,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
|
||||
storeType={storeType}
|
||||
addIssuesToView={addIssuesToView}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -14,7 +14,7 @@ import { EIssueActions } from "../types";
|
||||
interface IssueBlockProps {
|
||||
issueId: string;
|
||||
issuesMap: TIssueMap;
|
||||
handleIssues: (issue: TIssue, action: EIssueActions) => void;
|
||||
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
@ -29,8 +29,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
|
||||
const { getProjectById } = useProject();
|
||||
const { peekIssue, setPeekIssue } = useIssueDetail();
|
||||
|
||||
const updateIssue = (issueToUpdate: TIssue) => {
|
||||
handleIssues(issueToUpdate, EIssueActions.UPDATE);
|
||||
const updateIssue = async (issueToUpdate: TIssue) => {
|
||||
await handleIssues(issueToUpdate, EIssueActions.UPDATE);
|
||||
};
|
||||
|
||||
const handleIssuePeekOverview = (issue: TIssue) =>
|
||||
@ -88,6 +88,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
|
||||
isReadOnly={!canEditIssueProperties}
|
||||
handleIssues={updateIssue}
|
||||
displayProperties={displayProperties}
|
||||
activeLayout="List"
|
||||
/>
|
||||
{quickActions(issue)}
|
||||
</>
|
||||
|
||||
@ -9,7 +9,7 @@ interface Props {
|
||||
issueIds: TGroupedIssues | TUnGroupedIssues | any;
|
||||
issuesMap: TIssueMap;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
handleIssues: (issue: TIssue, action: EIssueActions) => void;
|
||||
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@ export interface IGroupByList {
|
||||
storeType: TCreateModalStoreTypes;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||
viewId?: string;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
@ -55,6 +56,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
disableIssueCreation,
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
// store hooks
|
||||
const member = useMember();
|
||||
@ -115,7 +117,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
title={_list.name || ""}
|
||||
count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
|
||||
issuePayload={_list.payload}
|
||||
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
|
||||
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
|
||||
storeType={storeType}
|
||||
addIssuesToView={addIssuesToView}
|
||||
/>
|
||||
@ -132,7 +134,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
|
||||
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
|
||||
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
|
||||
<ListQuickAddIssueForm
|
||||
prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
|
||||
@ -168,6 +170,7 @@ export interface IList {
|
||||
disableIssueCreation?: boolean;
|
||||
storeType: TCreateModalStoreTypes;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
export const List: React.FC<IList> = (props) => {
|
||||
@ -186,6 +189,7 @@ export const List: React.FC<IList> = (props) => {
|
||||
disableIssueCreation,
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
@ -205,6 +209,7 @@ export const List: React.FC<IList> = (props) => {
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
storeType={storeType}
|
||||
addIssuesToView={addIssuesToView}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,6 +7,8 @@ import { ExistingIssuesListModal } from "components/core";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useEventTracker } from "hooks/store";
|
||||
// types
|
||||
import { TIssue, ISearchIssueResponse } from "@plane/types";
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -27,6 +29,8 @@ export const HeaderGroupByCard = observer(
|
||||
({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
|
||||
// hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@ -76,17 +80,30 @@ export const HeaderGroupByCard = observer(
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("List layout");
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-2">Create issue</span>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("List layout");
|
||||
setOpenExistingIssueListModal(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-2">Add an existing issue</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => setIsOpen(true)}
|
||||
onClick={() => {
|
||||
setTrackElement("List layout");
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Plus width={14} strokeWidth={2} />
|
||||
</div>
|
||||
|
||||
@ -5,4 +5,5 @@ export interface IQuickActionProps {
|
||||
handleRemoveFromView?: () => Promise<void>;
|
||||
customActionButton?: React.ReactElement;
|
||||
portalElement?: HTMLDivElement | null;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { FC, useEffect, useState, useRef } from "react";
|
||||
import { FC, useEffect, useState, useRef, use } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
import { useEventTracker, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
@ -64,6 +64,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// hooks
|
||||
const { getProjectById } = useProject();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
|
||||
const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
|
||||
|
||||
@ -100,13 +101,24 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
|
||||
|
||||
try {
|
||||
quickAddCallback &&
|
||||
(await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
|
||||
(await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...res, state: "SUCCESS", element: "List quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
} catch (err: any) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED", element: "List quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useIssues } from "hooks/store";
|
||||
import { useCycle, useIssues } from "hooks/store";
|
||||
// components
|
||||
import { CycleIssueQuickActions } from "components/issues";
|
||||
// types
|
||||
@ -19,6 +19,7 @@ export const CycleListLayout: React.FC = observer(() => {
|
||||
const { workspaceSlug, projectId, cycleId } = router.query;
|
||||
// store
|
||||
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
|
||||
const { currentProjectCompletedCycleIds } = useCycle();
|
||||
|
||||
const issueActions = useMemo(
|
||||
() => ({
|
||||
@ -40,6 +41,10 @@ export const CycleListLayout: React.FC = observer(() => {
|
||||
}),
|
||||
[issues, workspaceSlug, cycleId]
|
||||
);
|
||||
const isCompletedCycle =
|
||||
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
|
||||
|
||||
const canEditIssueProperties = () => !isCompletedCycle;
|
||||
|
||||
return (
|
||||
<BaseListRoot
|
||||
@ -53,6 +58,8 @@ export const CycleListLayout: React.FC = observer(() => {
|
||||
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
|
||||
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
|
||||
}}
|
||||
canEditPropertiesBasedOnProject={canEditIssueProperties}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
|
||||
// hooks
|
||||
import { useEstimate, useLabel } from "hooks/store";
|
||||
import { useEventTracker, useEstimate, useLabel } from "hooks/store";
|
||||
// components
|
||||
import { IssuePropertyLabels } from "../properties/labels";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
@ -20,43 +21,118 @@ import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types"
|
||||
|
||||
export interface IIssueProperties {
|
||||
issue: TIssue;
|
||||
handleIssues: (issue: TIssue) => void;
|
||||
handleIssues: (issue: TIssue) => Promise<void>;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
isReadOnly: boolean;
|
||||
className: string;
|
||||
activeLayout: string;
|
||||
}
|
||||
|
||||
export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
|
||||
const { issue, handleIssues, displayProperties, isReadOnly, className } = props;
|
||||
const { issue, handleIssues, displayProperties, activeLayout, isReadOnly, className } = props;
|
||||
// store hooks
|
||||
const { labelMap } = useLabel();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { areEstimatesEnabledForCurrentProject } = useEstimate();
|
||||
|
||||
const currentLayout = `${activeLayout} layout`;
|
||||
const handleState = (stateId: string) => {
|
||||
handleIssues({ ...issue, state_id: stateId });
|
||||
handleIssues({ ...issue, state_id: stateId }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "state",
|
||||
change_details: stateId,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handlePriority = (value: TIssuePriorities) => {
|
||||
handleIssues({ ...issue, priority: value });
|
||||
handleIssues({ ...issue, priority: value }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "priority",
|
||||
change_details: value,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleLabel = (ids: string[]) => {
|
||||
handleIssues({ ...issue, label_ids: ids });
|
||||
handleIssues({ ...issue, label_ids: ids }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "labels",
|
||||
change_details: ids,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleAssignee = (ids: string[]) => {
|
||||
handleIssues({ ...issue, assignee_ids: ids });
|
||||
handleIssues({ ...issue, assignee_ids: ids }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "assignees",
|
||||
change_details: ids,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleStartDate = (date: Date | null) => {
|
||||
handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null });
|
||||
handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "start_date",
|
||||
change_details: date ? renderFormattedPayloadDate(date) : null,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleTargetDate = (date: Date | null) => {
|
||||
handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null });
|
||||
handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "target_date",
|
||||
change_details: date ? renderFormattedPayloadDate(date) : null,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleEstimate = (value: number | null) => {
|
||||
handleIssues({ ...issue, estimate_point: value });
|
||||
handleIssues({ ...issue, estimate_point: value }).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...issue, state: "SUCCESS", element: currentLayout },
|
||||
path: router.asPath,
|
||||
updates: {
|
||||
changed_property: "estimate_point",
|
||||
change_details: value,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
if (!displayProperties) return null;
|
||||
|
||||
@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useEventTracker } from "hooks/store";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
@ -15,7 +16,7 @@ import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
|
||||
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
|
||||
const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
|
||||
// states
|
||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
|
||||
@ -23,6 +24,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
@ -79,37 +82,44 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
{!readOnly && (
|
||||
<>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Global issues");
|
||||
setIssueToEdit(issue);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Global issues");
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Global issues");
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,24 +4,38 @@ import { CustomMenu } from "@plane/ui";
|
||||
import { Link, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useEventTracker, useIssues ,useUser} from "hooks/store";
|
||||
// components
|
||||
import { DeleteArchivedIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
|
||||
export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, customActionButton, portalElement } = props;
|
||||
|
||||
const { issue, handleDelete, customActionButton, portalElement, readOnly = false } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// states
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
// store hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
|
||||
|
||||
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
@ -57,16 +71,19 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
{isEditingAllowed && !readOnly && (
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useEventTracker, useIssues,useUser } from "hooks/store";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
@ -13,9 +14,18 @@ import { TIssue } from "@plane/types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
// constants
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
|
||||
const {
|
||||
issue,
|
||||
handleDelete,
|
||||
handleUpdate,
|
||||
handleRemoveFromView,
|
||||
customActionButton,
|
||||
portalElement,
|
||||
readOnly = false,
|
||||
} = props;
|
||||
// states
|
||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
|
||||
@ -23,9 +33,21 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, cycleId } = router.query;
|
||||
// store hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
@ -79,50 +101,57 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
cycle: cycleId?.toString() ?? null,
|
||||
});
|
||||
{isEditingAllowed && !readOnly && (
|
||||
<>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setIssueToEdit({
|
||||
...issue,
|
||||
cycle: cycleId?.toString() ?? null,
|
||||
});
|
||||
setTrackElement(activeLayout);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
handleRemoveFromView && handleRemoveFromView();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Remove from cycle
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
handleRemoveFromView && handleRemoveFromView();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Remove from cycle
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useIssues, useEventTracker ,useUser } from "hooks/store";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
@ -13,9 +14,18 @@ import { TIssue } from "@plane/types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
// constants
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
|
||||
const {
|
||||
issue,
|
||||
handleDelete,
|
||||
handleUpdate,
|
||||
handleRemoveFromView,
|
||||
customActionButton,
|
||||
portalElement,
|
||||
readOnly = false,
|
||||
} = props;
|
||||
// states
|
||||
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
|
||||
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
|
||||
@ -23,9 +33,21 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, moduleId } = router.query;
|
||||
// store hooks
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
@ -79,49 +101,56 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
|
||||
{isEditingAllowed && !readOnly && (
|
||||
<>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
|
||||
setTrackElement(activeLayout);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
handleRemoveFromView && handleRemoveFromView();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Remove from module
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
handleRemoveFromView && handleRemoveFromView();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Remove from module
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Copy className="h-3 w-3" />
|
||||
Make a copy
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement(activeLayout);
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</>
|
||||
)}
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import { Copy, Link, Pencil, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import { useUser } from "hooks/store";
|
||||
import { useEventTracker, useIssues, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
@ -17,7 +17,7 @@ import { EUserProjectRoles } from "constants/project";
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
|
||||
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
|
||||
const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
|
||||
const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -29,6 +29,10 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
|
||||
|
||||
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
@ -87,10 +91,11 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
{isEditingAllowed && (
|
||||
{isEditingAllowed && !readOnly && (
|
||||
<>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setIssueToEdit(issue);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
@ -102,6 +107,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setCreateUpdateIssueModal(true);
|
||||
}}
|
||||
>
|
||||
@ -112,6 +118,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement(activeLayout);
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -5,7 +5,7 @@ import useSWR from "swr";
|
||||
import isEmpty from "lodash/isEmpty";
|
||||
import { useTheme } from "next-themes";
|
||||
// hooks
|
||||
import { useApplication, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
|
||||
import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
|
||||
// components
|
||||
import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
|
||||
@ -44,6 +44,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
} = useUser();
|
||||
const { fetchAllGlobalViews } = useGlobalView();
|
||||
const { workspaceProjectIds } = useProject();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
|
||||
const isDefaultView = ["all-issues", "assigned", "created", "subscribed"].includes(groupedIssueIds.dataViewId);
|
||||
const currentView = isDefaultView ? groupedIssueIds.dataViewId : "custom-view";
|
||||
@ -148,9 +149,15 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug) return;
|
||||
if (!workspaceSlug || !globalViewId) return;
|
||||
|
||||
updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
|
||||
updateFilters(
|
||||
workspaceSlug.toString(),
|
||||
undefined,
|
||||
EIssueFilterType.DISPLAY_FILTERS,
|
||||
{ ...updatedDisplayFilter },
|
||||
globalViewId.toString()
|
||||
);
|
||||
},
|
||||
[updateFilters, workspaceSlug]
|
||||
);
|
||||
@ -195,12 +202,18 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
? currentView !== "custom-view" && currentView !== "subscribed"
|
||||
? {
|
||||
text: "Create new issue",
|
||||
onClick: () => commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT),
|
||||
onClick: () => {
|
||||
setTrackElement("All issues empty state");
|
||||
commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
: {
|
||||
text: "Start your first project",
|
||||
onClick: () => commandPaletteStore.toggleCreateProjectModal(true),
|
||||
onClick: () => {
|
||||
setTrackElement("All issues empty state");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
},
|
||||
}
|
||||
}
|
||||
disabled={!isEditingAllowed}
|
||||
|
||||
@ -28,10 +28,19 @@ interface IBaseSpreadsheetRoot {
|
||||
[EIssueActions.REMOVE]?: (issue: TIssue) => void;
|
||||
};
|
||||
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
|
||||
const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions, canEditPropertiesBasedOnProject } = props;
|
||||
const {
|
||||
issueFiltersStore,
|
||||
issueStore,
|
||||
viewId,
|
||||
QuickActions,
|
||||
issueActions,
|
||||
canEditPropertiesBasedOnProject,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
|
||||
@ -95,6 +104,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
|
||||
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
|
||||
}
|
||||
portalElement={portalElement}
|
||||
readOnly={!isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@ -113,7 +123,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
|
||||
quickAddCallback={issueStore.quickAddIssue}
|
||||
viewId={viewId}
|
||||
enableQuickCreateIssue={enableQuickAdd}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -18,7 +18,16 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
|
||||
<div className="h-11 border-b-[0.5px] border-custom-border-200">
|
||||
<ProjectMemberDropdown
|
||||
value={issue?.assignee_ids ?? []}
|
||||
onChange={(data) => onChange(issue, { assignee_ids: data })}
|
||||
onChange={(data) => {
|
||||
onChange(
|
||||
issue,
|
||||
{ assignee_ids: data },
|
||||
{
|
||||
changed_property: "assignees",
|
||||
change_details: data,
|
||||
}
|
||||
);
|
||||
}}
|
||||
projectId={issue?.project_id}
|
||||
disabled={disabled}
|
||||
multiple
|
||||
|
||||
@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -20,7 +20,17 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
|
||||
<div className="h-11 border-b-[0.5px] border-custom-border-200">
|
||||
<DateDropdown
|
||||
value={issue.target_date}
|
||||
onChange={(data) => onChange(issue, { target_date: data ? renderFormattedPayloadDate(data) : null })}
|
||||
onChange={(data) => {
|
||||
const targetDate = data ? renderFormattedPayloadDate(data) : null;
|
||||
onChange(
|
||||
issue,
|
||||
{ target_date: targetDate },
|
||||
{
|
||||
changed_property: "target_date",
|
||||
change_details: targetDate,
|
||||
}
|
||||
);
|
||||
}}
|
||||
disabled={disabled}
|
||||
placeholder="Due date"
|
||||
buttonVariant="transparent-with-text"
|
||||
|
||||
@ -6,7 +6,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -17,7 +17,9 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
|
||||
<div className="h-11 border-b-[0.5px] border-custom-border-200">
|
||||
<EstimateDropdown
|
||||
value={issue.estimate_point}
|
||||
onChange={(data) => onChange(issue, { estimate_point: data })}
|
||||
onChange={(data) =>
|
||||
onChange(issue, { estimate_point: data }, { changed_property: "estimate_point", change_details: data })
|
||||
}
|
||||
projectId={issue.project_id}
|
||||
disabled={disabled}
|
||||
buttonVariant="transparent-with-text"
|
||||
|
||||
@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -25,9 +25,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
|
||||
projectId={issue.project_id ?? null}
|
||||
value={issue.label_ids}
|
||||
defaultOptions={defaultLabelOptions}
|
||||
onChange={(data) => {
|
||||
onChange(issue, { label_ids: data });
|
||||
}}
|
||||
onChange={(data) => onChange(issue, { label_ids: data },{ changed_property: "labels", change_details: data })}
|
||||
className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
|
||||
buttonClassName="px-2.5 h-full"
|
||||
hideDropdownArrow
|
||||
|
||||
@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>,updates:any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props
|
||||
<div className="h-11 border-b-[0.5px] border-custom-border-200">
|
||||
<PriorityDropdown
|
||||
value={issue.priority}
|
||||
onChange={(data) => onChange(issue, { priority: data })}
|
||||
onChange={(data) => onChange(issue, { priority: data },{changed_property:"priority",change_details:data})}
|
||||
disabled={disabled}
|
||||
buttonVariant="transparent-with-text"
|
||||
buttonClassName="rounded-none text-left"
|
||||
|
||||
@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -20,7 +20,17 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
|
||||
<div className="h-11 border-b-[0.5px] border-custom-border-200">
|
||||
<DateDropdown
|
||||
value={issue.start_date}
|
||||
onChange={(data) => onChange(issue, { start_date: data ? renderFormattedPayloadDate(data) : null })}
|
||||
onChange={(data) => {
|
||||
const startDate = data ? renderFormattedPayloadDate(data) : null;
|
||||
onChange(
|
||||
issue,
|
||||
{ start_date: startDate },
|
||||
{
|
||||
changed_property: "start_date",
|
||||
change_details: startDate,
|
||||
}
|
||||
);
|
||||
}}
|
||||
disabled={disabled}
|
||||
placeholder="Start date"
|
||||
buttonVariant="transparent-with-text"
|
||||
|
||||
@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issue: TIssue;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>) => void;
|
||||
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
@ -19,7 +19,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
|
||||
<StateDropdown
|
||||
projectId={issue.project_id}
|
||||
value={issue.state_id}
|
||||
onChange={(data) => onChange(issue, { state_id: data })}
|
||||
onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
|
||||
disabled={disabled}
|
||||
buttonVariant="transparent-with-text"
|
||||
buttonClassName="rounded-none text-left"
|
||||
|
||||
@ -11,7 +11,7 @@ import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-
|
||||
import { ControlLink, Tooltip } from "@plane/ui";
|
||||
// hooks
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
import { useIssueDetail, useProject } from "hooks/store";
|
||||
import { useEventTracker, useIssueDetail, useProject } from "hooks/store";
|
||||
// helper
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
@ -51,6 +51,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
|
||||
//hooks
|
||||
const { getProjectById } = useProject();
|
||||
const { peekIssue, setPeekIssue } = useIssueDetail();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
// states
|
||||
const [isMenuActive, setIsMenuActive] = useState(false);
|
||||
const [isExpanded, setExpanded] = useState<boolean>(false);
|
||||
@ -174,8 +175,19 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
|
||||
<td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
|
||||
<Column
|
||||
issue={issueDetail}
|
||||
onChange={(issue: TIssue, data: Partial<TIssue>) =>
|
||||
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
|
||||
onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
|
||||
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: {
|
||||
...issue,
|
||||
...data,
|
||||
element: "Spreadsheet layout",
|
||||
},
|
||||
updates: updates,
|
||||
path: router.asPath,
|
||||
});
|
||||
})
|
||||
}
|
||||
disabled={disableUserActions}
|
||||
/>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// hooks
|
||||
import { useProject, useWorkspace } from "hooks/store";
|
||||
import { useEventTracker, useProject, useWorkspace } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
@ -58,6 +59,9 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
|
||||
// store hooks
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { currentProjectDetails } = useProject();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
// router
|
||||
const router = useRouter();
|
||||
// form info
|
||||
const {
|
||||
reset,
|
||||
@ -155,13 +159,26 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
|
||||
|
||||
try {
|
||||
quickAddCallback &&
|
||||
(await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId));
|
||||
(await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId).then(
|
||||
(res) => {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}
|
||||
));
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
} catch (err: any) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
|
||||
path: router.asPath,
|
||||
});
|
||||
console.error(err);
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useMemo } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// mobx store
|
||||
import { useIssues } from "hooks/store";
|
||||
import { useCycle, useIssues } from "hooks/store";
|
||||
// components
|
||||
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
|
||||
import { EIssueActions } from "../../types";
|
||||
@ -15,6 +15,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
|
||||
const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
|
||||
|
||||
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
|
||||
const { currentProjectCompletedCycleIds } = useCycle();
|
||||
|
||||
const issueActions = useMemo(
|
||||
() => ({
|
||||
@ -35,6 +36,11 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
|
||||
[issues, workspaceSlug, cycleId]
|
||||
);
|
||||
|
||||
const isCompletedCycle =
|
||||
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
|
||||
|
||||
const canEditIssueProperties = () => !isCompletedCycle;
|
||||
|
||||
return (
|
||||
<BaseSpreadsheetRoot
|
||||
issueStore={issues}
|
||||
@ -42,6 +48,8 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
|
||||
viewId={cycleId}
|
||||
issueActions={issueActions}
|
||||
QuickActions={CycleIssueQuickActions}
|
||||
canEditPropertiesBasedOnProject={canEditIssueProperties}
|
||||
isCompletedCycle={isCompletedCycle}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -3,6 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useEventTracker } from "hooks/store";
|
||||
// services
|
||||
import { IssueDraftService } from "services/issue";
|
||||
// components
|
||||
@ -42,6 +43,8 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
|
||||
const { workspaceSlug } = router.query;
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
// store hooks
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
|
||||
const handleClose = () => {
|
||||
if (changesMade) setIssueDiscardModal(true);
|
||||
@ -55,24 +58,33 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
|
||||
|
||||
await issueDraftService
|
||||
.createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
|
||||
.then(() => {
|
||||
.then((res) => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Draft Issue created successfully.",
|
||||
});
|
||||
|
||||
captureIssueEvent({
|
||||
eventName: "Draft issue created",
|
||||
payload: { ...res, state: "SUCCESS" },
|
||||
path: router.asPath,
|
||||
});
|
||||
onChange(null);
|
||||
setIssueDiscardModal(false);
|
||||
onClose(false);
|
||||
})
|
||||
.catch(() =>
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
})
|
||||
);
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Draft issue created",
|
||||
payload: { ...payload, state: "FAILED" },
|
||||
path: router.asPath,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useCycle, useIssues, useModule, useProject, useWorkspace } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// components
|
||||
@ -12,7 +13,6 @@ import { IssueFormRoot } from "./form";
|
||||
import type { TIssue } from "@plane/types";
|
||||
// constants
|
||||
import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
|
||||
|
||||
export interface IssuesModalProps {
|
||||
data?: Partial<TIssue>;
|
||||
isOpen: boolean;
|
||||
@ -29,10 +29,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
const [createMore, setCreateMore] = useState(false);
|
||||
const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { currentUser } = useUser();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const {
|
||||
router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
|
||||
} = useApplication();
|
||||
@ -49,36 +46,33 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
const issueStores = {
|
||||
[EIssuesStoreType.PROJECT]: {
|
||||
store: projectIssues,
|
||||
dataIdToUpdate: activeProjectId,
|
||||
viewId: undefined,
|
||||
},
|
||||
[EIssuesStoreType.PROJECT_VIEW]: {
|
||||
store: viewIssues,
|
||||
dataIdToUpdate: activeProjectId,
|
||||
viewId: projectViewId,
|
||||
},
|
||||
[EIssuesStoreType.PROFILE]: {
|
||||
store: profileIssues,
|
||||
dataIdToUpdate: currentUser?.id || undefined,
|
||||
viewId: undefined,
|
||||
},
|
||||
[EIssuesStoreType.CYCLE]: {
|
||||
store: cycleIssues,
|
||||
dataIdToUpdate: activeProjectId,
|
||||
viewId: cycleId,
|
||||
},
|
||||
[EIssuesStoreType.MODULE]: {
|
||||
store: moduleIssues,
|
||||
dataIdToUpdate: activeProjectId,
|
||||
viewId: moduleId,
|
||||
},
|
||||
};
|
||||
// router
|
||||
const router = useRouter();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
// local storage
|
||||
const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
|
||||
// current store details
|
||||
const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[storeType];
|
||||
const { store: currentIssueStore, viewId } = issueStores[storeType];
|
||||
|
||||
useEffect(() => {
|
||||
// if modal is closed, reset active project to null
|
||||
@ -129,13 +123,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
};
|
||||
|
||||
const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
|
||||
if (!workspaceSlug || !dataIdToUpdate) return;
|
||||
if (!workspaceSlug || !payload.project_id) return;
|
||||
|
||||
try {
|
||||
const response = await currentIssueStore.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId);
|
||||
const response = await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
|
||||
if (!response) throw new Error();
|
||||
|
||||
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
|
||||
currentIssueStore.fetchIssues(workspaceSlug, payload.project_id, "mutation", viewId);
|
||||
|
||||
if (payload.cycle_id && payload.cycle_id !== "" && storeType !== EIssuesStoreType.CYCLE)
|
||||
await addIssueToCycle(response, payload.cycle_id);
|
||||
@ -147,18 +141,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
title: "Success!",
|
||||
message: "Issue created successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"ISSUE_CREATED",
|
||||
{
|
||||
...response,
|
||||
state: "SUCCESS",
|
||||
},
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...response, state: "SUCCESS" },
|
||||
path: router.asPath,
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
!createMore && handleClose();
|
||||
return response;
|
||||
} catch (error) {
|
||||
@ -167,42 +159,39 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"ISSUE_CREATED",
|
||||
{
|
||||
state: "FAILED",
|
||||
},
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue created",
|
||||
payload: { ...payload, state: "FAILED" },
|
||||
path: router.asPath,
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
|
||||
if (!workspaceSlug || !dataIdToUpdate || !data?.id) return;
|
||||
if (!workspaceSlug || !payload.project_id || !data?.id) return;
|
||||
|
||||
try {
|
||||
const response = await currentIssueStore.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId);
|
||||
const response = await currentIssueStore.updateIssue(workspaceSlug, payload.project_id, data.id, payload, viewId);
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Issue updated successfully.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"ISSUE_UPDATED",
|
||||
{
|
||||
...response,
|
||||
state: "SUCCESS",
|
||||
},
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS" },
|
||||
path: router.asPath,
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
handleClose();
|
||||
return response;
|
||||
} catch (error) {
|
||||
@ -211,22 +200,21 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
|
||||
title: "Error!",
|
||||
message: "Issue could not be created. Please try again.",
|
||||
});
|
||||
postHogEventTracker(
|
||||
"ISSUE_UPDATED",
|
||||
{
|
||||
state: "FAILED",
|
||||
},
|
||||
{
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...payload, state: "FAILED" },
|
||||
path: router.asPath,
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = async (formData: Partial<TIssue>) => {
|
||||
if (!workspaceSlug || !dataIdToUpdate || !storeType) return;
|
||||
if (!workspaceSlug || !formData.project_id || !storeType) return;
|
||||
|
||||
const payload: Partial<TIssue> = {
|
||||
...formData,
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { FC, Fragment, useEffect, useState, useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
|
||||
// components
|
||||
import { IssueView } from "components/issues";
|
||||
// types
|
||||
@ -47,6 +48,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
const { is_archived = false, onIssueUpdate } = props;
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const {
|
||||
membership: { currentWorkspaceAllProjectsRole },
|
||||
} = useUser();
|
||||
@ -61,6 +64,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
} = useIssueDetail();
|
||||
const { addIssueToCycle, removeIssueFromCycle, addModulesToIssue, removeIssueFromModule, removeModulesFromIssue } =
|
||||
useIssueDetail();
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
// state
|
||||
const [loader, setLoader] = useState(false);
|
||||
|
||||
@ -98,7 +102,21 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
type: "success",
|
||||
message: "Issue updated successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: Object.keys(data).join(","),
|
||||
change_details: Object.values(data).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue peek-overview" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Issue update failed",
|
||||
type: "error",
|
||||
@ -108,30 +126,59 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
},
|
||||
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
else await removeIssue(workspaceSlug, projectId, issueId);
|
||||
let response;
|
||||
if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
else response = await removeIssue(workspaceSlug, projectId, issueId);
|
||||
setToastAlert({
|
||||
title: "Issue deleted successfully",
|
||||
type: "success",
|
||||
message: "Issue deleted successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Issue delete failed",
|
||||
type: "error",
|
||||
message: "Issue delete failed",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue deleted",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
|
||||
path: router.asPath,
|
||||
});
|
||||
}
|
||||
},
|
||||
addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
|
||||
try {
|
||||
await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
|
||||
const response = await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
|
||||
setToastAlert({
|
||||
title: "Cycle added to issue successfully",
|
||||
type: "success",
|
||||
message: "Issue added to issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: cycleId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: cycleId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Cycle add to issue failed",
|
||||
type: "error",
|
||||
@ -141,29 +188,65 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
},
|
||||
removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
|
||||
try {
|
||||
await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
setToastAlert({
|
||||
title: "Cycle removed from issue successfully",
|
||||
type: "success",
|
||||
message: "Cycle removed from issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Cycle remove from issue failed",
|
||||
type: "error",
|
||||
message: "Cycle remove from issue failed",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { state: "FAILED", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "cycle_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
}
|
||||
},
|
||||
addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
|
||||
try {
|
||||
await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
|
||||
const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
|
||||
setToastAlert({
|
||||
title: "Module added to issue successfully",
|
||||
type: "success",
|
||||
message: "Module added to issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: moduleIds,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: moduleIds,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Module add to issue failed",
|
||||
type: "error",
|
||||
@ -179,7 +262,25 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
type: "success",
|
||||
message: "Module removed from issue successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Issue updated",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
|
||||
updates: {
|
||||
changed_property: "module_id",
|
||||
change_details: "",
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
title: "Module remove from issue failed",
|
||||
type: "error",
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { FC, useMemo, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Plus, ChevronRight, ChevronDown, Loader } from "lucide-react";
|
||||
// hooks
|
||||
import { useIssueDetail } from "hooks/store";
|
||||
import { useEventTracker, useIssueDetail } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { ExistingIssuesListModal } from "components/core";
|
||||
@ -43,6 +44,8 @@ export type TSubIssueOperations = {
|
||||
|
||||
export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
// store hooks
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
@ -54,6 +57,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
removeSubIssue,
|
||||
deleteSubIssue,
|
||||
} = useIssueDetail();
|
||||
const { setTrackElement, captureIssueEvent } = useEventTracker();
|
||||
// state
|
||||
|
||||
type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
|
||||
@ -151,6 +155,15 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
try {
|
||||
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
|
||||
await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue updated",
|
||||
payload: { ...oldIssue, ...issueData, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: Object.keys(issueData).join(","),
|
||||
change_details: Object.values(issueData).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Sub-issue updated successfully",
|
||||
@ -158,6 +171,15 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
});
|
||||
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue updated",
|
||||
payload: { ...oldIssue, ...issueData, state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: Object.keys(issueData).join(","),
|
||||
change_details: Object.values(issueData).join(","),
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error updating sub-issue",
|
||||
@ -174,8 +196,26 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
title: "Sub-issue removed successfully",
|
||||
message: "Sub-issue removed successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue removed",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "parent_id",
|
||||
change_details: parentIssueId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue removed",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
updates: {
|
||||
changed_property: "parent_id",
|
||||
change_details: parentIssueId,
|
||||
},
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error removing sub-issue",
|
||||
@ -192,8 +232,18 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
title: "Issue deleted successfully",
|
||||
message: "Issue deleted successfully",
|
||||
});
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue deleted",
|
||||
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
|
||||
} catch (error) {
|
||||
captureIssueEvent({
|
||||
eventName: "Sub-issue removed",
|
||||
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
|
||||
path: router.asPath,
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error deleting issue",
|
||||
@ -258,13 +308,19 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
<div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
|
||||
<div
|
||||
className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
|
||||
onClick={() => handleIssueCrudState("create", parentIssueId, null)}
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("create", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
Add sub-issue
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
|
||||
onClick={() => handleIssueCrudState("existing", parentIssueId, null)}
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("existing", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
Add an existing issue
|
||||
</div>
|
||||
@ -301,6 +357,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("create", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
@ -308,6 +365,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail add sub-issue");
|
||||
handleIssueCrudState("existing", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
@ -335,6 +393,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail nested sub-issue");
|
||||
handleIssueCrudState("create", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
@ -342,6 +401,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Issue detail nested sub-issue");
|
||||
handleIssueCrudState("existing", parentIssueId, null);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useModule } from "hooks/store";
|
||||
import { useEventTracker, useModule } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
@ -26,9 +26,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, moduleId, peekModule } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureModuleEvent } = useEventTracker();
|
||||
const { deleteModule } = useModule();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
@ -52,8 +50,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
||||
title: "Success!",
|
||||
message: "Module deleted successfully.",
|
||||
});
|
||||
postHogEventTracker("MODULE_DELETED", {
|
||||
state: "SUCCESS",
|
||||
captureModuleEvent({
|
||||
eventName: "Module deleted",
|
||||
payload: { ...data, state: "SUCCESS" },
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
@ -62,8 +61,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
|
||||
title: "Error!",
|
||||
message: "Module could not be deleted. Please try again.",
|
||||
});
|
||||
postHogEventTracker("MODULE_DELETED", {
|
||||
state: "FAILED",
|
||||
captureModuleEvent({
|
||||
eventName: "Module deleted",
|
||||
payload: { ...data, state: "FAILED" },
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
|
||||
@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import { useApplication, useModule, useProject } from "hooks/store";
|
||||
import { useEventTracker, useModule, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { ModuleForm } from "components/modules";
|
||||
@ -31,9 +31,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
// states
|
||||
const [activeProject, setActiveProject] = useState<string | null>(null);
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureModuleEvent } = useEventTracker();
|
||||
const { workspaceProjectIds } = useProject();
|
||||
const { createModule, updateModuleDetails } = useModule();
|
||||
// toast alert
|
||||
@ -55,15 +53,14 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
await createModule(workspaceSlug.toString(), selectedProjectId, payload)
|
||||
.then((res) => {
|
||||
handleClose();
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Module created successfully.",
|
||||
});
|
||||
postHogEventTracker("MODULE_CREATED", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
captureModuleEvent({
|
||||
eventName: "Module created",
|
||||
payload: { ...res, state: "SUCCESS" },
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -72,8 +69,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
title: "Error!",
|
||||
message: err.detail ?? "Module could not be created. Please try again.",
|
||||
});
|
||||
postHogEventTracker("MODULE_CREATED", {
|
||||
state: "FAILED",
|
||||
captureModuleEvent({
|
||||
eventName: "Module created",
|
||||
payload: { ...data, state: "FAILED" },
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -91,9 +89,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
title: "Success!",
|
||||
message: "Module updated successfully.",
|
||||
});
|
||||
postHogEventTracker("MODULE_UPDATED", {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
captureModuleEvent({
|
||||
eventName: "Module updated",
|
||||
payload: { ...res, state: "SUCCESS" },
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -102,8 +100,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
|
||||
title: "Error!",
|
||||
message: err.detail ?? "Module could not be updated. Please try again.",
|
||||
});
|
||||
postHogEventTracker("MODULE_UPDATED", {
|
||||
state: "FAILED",
|
||||
captureModuleEvent({
|
||||
eventName: "Module updated",
|
||||
payload: { ...data, state: "FAILED" },
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
import { useEventTracker, useModule, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||
@ -36,6 +36,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
// derived values
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
@ -83,12 +84,14 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
|
||||
const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Modules page board layout");
|
||||
setEditModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Modules page board layout");
|
||||
setDeleteModal(true);
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
import { useModule, useUser, useEventTracker } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
|
||||
@ -36,6 +36,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
// derived values
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
@ -83,12 +84,14 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
|
||||
const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Modules page list layout");
|
||||
setEditModal(true);
|
||||
};
|
||||
|
||||
const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setTrackElement("Modules page list layout");
|
||||
setDeleteModal(true);
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useTheme } from "next-themes";
|
||||
// hooks
|
||||
import { useApplication, useModule, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useModule, useUser } from "hooks/store";
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
// components
|
||||
import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
|
||||
@ -20,6 +20,7 @@ export const ModulesListView: React.FC = observer(() => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
currentUser,
|
||||
@ -106,7 +107,10 @@ export const ModulesListView: React.FC = observer(() => {
|
||||
}}
|
||||
primaryButton={{
|
||||
text: "Build your first module",
|
||||
onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
|
||||
onClick: () => {
|
||||
setTrackElement("Module empty state");
|
||||
commandPaletteStore.toggleCreateModuleModal(true);
|
||||
},
|
||||
}}
|
||||
size="lg"
|
||||
disabled={!isEditingAllowed}
|
||||
|
||||
@ -16,7 +16,7 @@ import {
|
||||
UserCircle2,
|
||||
} from "lucide-react";
|
||||
// hooks
|
||||
import { useModule, useUser } from "hooks/store";
|
||||
import { useModule, useUser, useEventTracker } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
|
||||
@ -66,7 +66,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
|
||||
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const moduleDetails = getModuleById(moduleId);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
@ -262,13 +262,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
|
||||
|
||||
const issueCount =
|
||||
moduleDetails.total_issues === 0
|
||||
? "0 Issue"
|
||||
: moduleDetails.total_issues === moduleDetails.completed_issues
|
||||
? moduleDetails.total_issues > 1
|
||||
? `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.total_issues}`
|
||||
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||
moduleDetails.total_issues === 0 ? "0 Issue" : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
@ -303,7 +297,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
</button>
|
||||
{isEditingAllowed && (
|
||||
<CustomMenu placement="bottom-end" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setTrackElement("Module peek-overview");
|
||||
setModuleDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<span>Delete module</span>
|
||||
@ -582,7 +581,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
<Transition show={open}>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-3">
|
||||
{isStartValid && isEndValid ? (
|
||||
{moduleDetails.start_date && moduleDetails.target_date ? (
|
||||
<div className=" h-full w-full pt-4">
|
||||
<div className="flex items-start gap-4 py-2 text-xs">
|
||||
<div className="flex items-center gap-3 text-custom-text-100">
|
||||
@ -598,9 +597,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
<div className="relative h-40 w-80">
|
||||
<ProgressChart
|
||||
distribution={moduleDetails.distribution?.completion_chart}
|
||||
startDate={moduleDetails.start_date ?? ""}
|
||||
endDate={moduleDetails.target_date ?? ""}
|
||||
distribution={moduleDetails.distribution?.completion_chart ?? {}}
|
||||
startDate={moduleDetails.start_date}
|
||||
endDate={moduleDetails.target_date}
|
||||
totalIssues={moduleDetails.total_issues}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import useSWR, { mutate } from "swr";
|
||||
// hooks
|
||||
import { useApplication, useUser, useWorkspace } from "hooks/store";
|
||||
import { useEventTracker, useUser, useWorkspace } from "hooks/store";
|
||||
// components
|
||||
import { Button } from "@plane/ui";
|
||||
// helpers
|
||||
@ -15,6 +15,7 @@ import { ROLE } from "constants/workspace";
|
||||
import { IWorkspaceMemberInvitation } from "@plane/types";
|
||||
// icons
|
||||
import { CheckCircle2, Search } from "lucide-react";
|
||||
import {} from "hooks/store/use-event-tracker";
|
||||
|
||||
type Props = {
|
||||
handleNextStep: () => void;
|
||||
@ -28,9 +29,7 @@ export const Invitations: React.FC<Props> = (props) => {
|
||||
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
|
||||
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureEvent } = useEventTracker();
|
||||
const { currentUser, updateCurrentUser } = useUser();
|
||||
const { workspaces, fetchWorkspaces } = useWorkspace();
|
||||
|
||||
@ -63,7 +62,7 @@ export const Invitations: React.FC<Props> = (props) => {
|
||||
await workspaceService
|
||||
.joinWorkspaces({ invitations: invitationsRespond })
|
||||
.then(async (res) => {
|
||||
postHogEventTracker("MEMBER_ACCEPTED", { ...res, state: "SUCCESS", accepted_from: "App" });
|
||||
captureEvent("Member accepted", { ...res, state: "SUCCESS", accepted_from: "App" });
|
||||
await fetchWorkspaces();
|
||||
await mutate(USER_WORKSPACES);
|
||||
await updateLastWorkspace();
|
||||
@ -72,7 +71,7 @@ export const Invitations: React.FC<Props> = (props) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
postHogEventTracker("MEMBER_ACCEPTED", { state: "FAILED", accepted_from: "App" });
|
||||
captureEvent("Member accepted", { state: "FAILED", accepted_from: "App" });
|
||||
})
|
||||
.finally(() => setIsJoiningWorkspaces(false));
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@ import Image from "next/image";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { X } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useUser } from "hooks/store";
|
||||
// components
|
||||
import { TourSidebar } from "components/onboarding";
|
||||
// ui
|
||||
@ -78,10 +78,8 @@ export const TourRoot: React.FC<Props> = observer((props) => {
|
||||
// states
|
||||
const [step, setStep] = useState<TTourSteps>("welcome");
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { currentUser } = useUser();
|
||||
|
||||
const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
|
||||
@ -159,7 +157,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
onComplete();
|
||||
setTrackElement("ONBOARDING_TOUR");
|
||||
setTrackElement("Onboarding tour");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -2,7 +2,7 @@ import { useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
|
||||
// components
|
||||
import { TourRoot } from "components/onboarding";
|
||||
import { UserGreetingsView } from "components/user";
|
||||
@ -18,9 +18,9 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
// theme
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const { captureEvent, setTrackElement } = useEventTracker();
|
||||
const {
|
||||
commandPalette: { toggleCreateProjectModal },
|
||||
eventTracker: { postHogEventTracker },
|
||||
router: { workspaceSlug },
|
||||
} = useApplication();
|
||||
const {
|
||||
@ -37,7 +37,7 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
const handleTourCompleted = () => {
|
||||
updateTourCompleted()
|
||||
.then(() => {
|
||||
postHogEventTracker("USER_TOUR_COMPLETE", {
|
||||
captureEvent("User tour complete", {
|
||||
user_id: currentUser?.id,
|
||||
email: currentUser?.email,
|
||||
state: "SUCCESS",
|
||||
@ -62,7 +62,7 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
{homeDashboardId && joinedProjectIds ? (
|
||||
<>
|
||||
{joinedProjectIds.length > 0 ? (
|
||||
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
|
||||
<div className="flex h-full w-full flex-col space-y-7 overflow-y-auto bg-custom-background-90 p-7">
|
||||
<IssuePeekOverview />
|
||||
{currentUser && <UserGreetingsView user={currentUser} />}
|
||||
{currentUser && !currentUser.is_tour_completed && (
|
||||
@ -81,7 +81,10 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
progress."
|
||||
primaryButton={{
|
||||
text: "Build your first project",
|
||||
onClick: () => toggleCreateProjectModal(true),
|
||||
onClick: () => {
|
||||
setTrackElement("Dashboard");
|
||||
toggleCreateProjectModal(true);
|
||||
},
|
||||
}}
|
||||
comicBox={{
|
||||
title: "Everything starts with a project in Plane",
|
||||
@ -93,7 +96,7 @@ export const WorkspaceDashboardView = observer(() => {
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -229,7 +229,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
|
||||
)}
|
||||
<Tooltip
|
||||
position="top-right"
|
||||
tooltipContent={`Created by ${ownerDetails?.member.display_name} on ${renderFormattedDate(
|
||||
tooltipContent={`Created by ${ownerDetails?.member?.display_name} on ${renderFormattedDate(
|
||||
created_at
|
||||
)}`}
|
||||
>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useTheme } from "next-themes";
|
||||
// hooks
|
||||
import { useApplication, useProject, useUser } from "hooks/store";
|
||||
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
|
||||
// components
|
||||
import { ProjectCard } from "components/project";
|
||||
import { Loader } from "@plane/ui";
|
||||
@ -13,10 +13,8 @@ export const ProjectCardList = observer(() => {
|
||||
// theme
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
currentUser,
|
||||
@ -66,7 +64,7 @@ export const ProjectCardList = observer(() => {
|
||||
primaryButton={{
|
||||
text: "Start your first project",
|
||||
onClick: () => {
|
||||
setTrackElement("PROJECTS_EMPTY_STATE");
|
||||
setTrackElement("Project empty state");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
},
|
||||
}}
|
||||
|
||||
@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { X } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject, useUser, useWorkspace } from "hooks/store";
|
||||
import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
|
||||
@ -61,9 +61,7 @@ export interface ICreateProjectForm {
|
||||
export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
|
||||
// store
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureProjectEvent } = useEventTracker();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
@ -135,10 +133,14 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
...res,
|
||||
state: "SUCCESS",
|
||||
};
|
||||
postHogEventTracker("PROJECT_CREATED", newPayload, {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: res.workspace,
|
||||
captureProjectEvent({
|
||||
eventName: "Project created",
|
||||
payload: newPayload,
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: res.workspace,
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
@ -157,17 +159,18 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
title: "Error!",
|
||||
message: err.data[key],
|
||||
});
|
||||
postHogEventTracker(
|
||||
"PROJECT_CREATED",
|
||||
{
|
||||
captureProjectEvent({
|
||||
eventName: "Project created",
|
||||
payload: {
|
||||
...payload,
|
||||
state: "FAILED",
|
||||
},
|
||||
{
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useProject, useWorkspace } from "hooks/store";
|
||||
import { useEventTracker, useProject, useWorkspace } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button, Input } from "@plane/ui";
|
||||
@ -25,9 +25,7 @@ const defaultValues = {
|
||||
export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
|
||||
const { isOpen, project, onClose } = props;
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureProjectEvent } = useEventTracker();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { deleteProject } = useProject();
|
||||
// router
|
||||
@ -63,17 +61,15 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
|
||||
if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
|
||||
|
||||
handleClose();
|
||||
postHogEventTracker(
|
||||
"PROJECT_DELETED",
|
||||
{
|
||||
state: "SUCCESS",
|
||||
},
|
||||
{
|
||||
captureProjectEvent({
|
||||
eventName: "Project deleted",
|
||||
payload: { ...project, state: "SUCCESS", element: "Project general settings" },
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
@ -81,17 +77,15 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
postHogEventTracker(
|
||||
"PROJECT_DELETED",
|
||||
{
|
||||
state: "FAILED",
|
||||
},
|
||||
{
|
||||
captureProjectEvent({
|
||||
eventName: "Project deleted",
|
||||
payload: { ...project, state: "FAILED", element: "Project general settings" },
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// hooks
|
||||
import { useApplication, useProject, useWorkspace } from "hooks/store";
|
||||
import { useEventTracker, useProject, useWorkspace } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import EmojiIconPicker from "components/emoji-icon-picker";
|
||||
@ -32,9 +32,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
||||
// states
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureProjectEvent } = useEventTracker();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { updateProject } = useProject();
|
||||
// toast alert
|
||||
@ -79,15 +77,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
||||
|
||||
return updateProject(workspaceSlug.toString(), project.id, payload)
|
||||
.then((res) => {
|
||||
postHogEventTracker(
|
||||
"PROJECT_UPDATED",
|
||||
{ ...res, state: "SUCCESS" },
|
||||
{
|
||||
captureProjectEvent({
|
||||
eventName: "Project updated",
|
||||
payload: { ...res, state: "SUCCESS", element: "Project general settings" },
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: res.workspace,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
@ -95,17 +93,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
postHogEventTracker(
|
||||
"PROJECT_UPDATED",
|
||||
{
|
||||
state: "FAILED",
|
||||
},
|
||||
{
|
||||
captureProjectEvent({
|
||||
eventName: "Project updated",
|
||||
payload: { ...payload, state: "FAILED", element: "Project general settings" },
|
||||
group: {
|
||||
isGrouping: true,
|
||||
groupType: "Workspace_metrics",
|
||||
groupId: currentWorkspace?.id!,
|
||||
}
|
||||
);
|
||||
groupId: currentWorkspace?.id,
|
||||
},
|
||||
});
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
|
||||
@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
import { AlertTriangleIcon } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useApplication, useUser } from "hooks/store";
|
||||
import { useEventTracker, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button, Input } from "@plane/ui";
|
||||
@ -34,9 +34,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { postHogEventTracker },
|
||||
} = useApplication();
|
||||
const { captureEvent } = useEventTracker();
|
||||
const {
|
||||
membership: { leaveProject },
|
||||
} = useUser();
|
||||
@ -65,7 +63,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
|
||||
.then(() => {
|
||||
handleClose();
|
||||
router.push(`/${workspaceSlug}/projects`);
|
||||
postHogEventTracker("PROJECT_MEMBER_LEAVE", {
|
||||
captureEvent("Project member leave", {
|
||||
state: "SUCCESS",
|
||||
});
|
||||
})
|
||||
@ -75,7 +73,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
|
||||
title: "Error!",
|
||||
message: "Something went wrong please try again later.",
|
||||
});
|
||||
postHogEventTracker("PROJECT_MEMBER_LEAVE", {
|
||||
captureEvent("Project member leave", {
|
||||
state: "FAILED",
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@ import { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Search } from "lucide-react";
|
||||
// hooks
|
||||
import { useApplication, useMember } from "hooks/store";
|
||||
import { useEventTracker, useMember } from "hooks/store";
|
||||
// components
|
||||
import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
|
||||
// ui
|
||||
@ -13,9 +13,7 @@ export const ProjectMemberList: React.FC = observer(() => {
|
||||
const [inviteModal, setInviteModal] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
// store hooks
|
||||
const {
|
||||
eventTracker: { setTrackElement },
|
||||
} = useApplication();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const {
|
||||
project: { projectMemberIds, getProjectMemberDetails },
|
||||
} = useMember();
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user