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

chore: posthog events improved (#3554)

Browse Source 
* chore: events naming convention changed

* chore: track element added for project related events

* chore: track element added for cycle related events

* chore: track element added for module related events

* chore: issue related events updated

* refactor: event tracker store

* refactor: event-tracker store

* fix: posthog changes

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Lakhan Baheti 2024-02-05 13:19:07 +05:30 committed by GitHub
parent 7d07afd59c
commit 0165abab3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
103 changed files with 1385 additions and 596 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/command-palette/actions/project-actions.tsx
View File

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

8
web/components/command-palette/command-modal.tsx
View File

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

7
web/components/command-palette/command-palette.tsx
View File

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

9
web/components/cycles/cycles-board-card.tsx
View File

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

9
web/components/cycles/cycles-list-item.tsx
View File

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

16
web/components/cycles/delete-modal.tsx
View File

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

17
web/components/cycles/modal.tsx
View File

@ -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
web/components/cycles/sidebar.tsx
View File

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

11
web/components/dashboard/project-empty-state.tsx
View File

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

4
web/components/dashboard/widgets/recent-projects.tsx
View File

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

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

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

6
web/components/headers/cycles.tsx
View File

@ -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
web/components/headers/module-issues.tsx
View File

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

8
web/components/headers/modules-list.tsx
View File

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

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

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

3
web/components/headers/project-view-issues.tsx
View File

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

10
web/components/headers/projects.tsx
View File

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

36
web/components/inbox/inbox-issue-actions.tsx
View File

@ -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,
]
);

35
web/components/inbox/modals/create-issue-modal.tsx
View File

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

10
web/components/integration/jira/give-details.tsx
View File

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

33
web/components/issues/attachment/root.tsx
View File

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

36
web/components/issues/issue-detail/inbox/root.tsx
View File

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

116
web/components/issues/issue-detail/root.tsx
View File

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

16
web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
View File

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

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

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

8
web/components/issues/issue-layouts/empty-states/global-view.tsx
View File

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

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

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

10
web/components/issues/issue-layouts/empty-states/project-issues.tsx
View File

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

10
web/components/issues/issue-layouts/empty-states/project-view.tsx
View File

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

16
web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
View File

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

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

@ -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";
@ -73,6 +73,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();
@ -205,6 +206,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,
});
});
};

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

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

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

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

16
web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
View File

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

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

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

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

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

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

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

18
web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
View File

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

98
web/components/issues/issue-layouts/properties/all-properties.tsx
View File

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

6
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View File

@ -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
@ -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();
@ -81,6 +84,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
@ -92,6 +96,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setCreateUpdateIssueModal(true);
}}
>
@ -102,6 +107,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setDeleteIssueModal(true);
}}
>

14
web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
View File

@ -4,23 +4,30 @@ import { CustomMenu } from "@plane/ui";
import { Link, Trash2 } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
import { useEventTracker, useIssues } from "hooks/store";
// components
import { DeleteArchivedIssueModal } from "components/issues";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IQuickActionProps } from "../list/list-view-types";
// constants
import { EIssuesStoreType } from "constants/issue";
export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, customActionButton, portalElement } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// states
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// 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(() =>
@ -59,6 +66,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>

9
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -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 } from "hooks/store";
// components
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
@ -23,9 +24,14 @@ 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();
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
const handleCopyIssueLink = () => {
copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
setToastAlert({
@ -85,6 +91,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
...issue,
cycle: cycleId?.toString() ?? null,
});
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
@ -105,6 +112,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
@ -115,6 +123,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>

9
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -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 } from "hooks/store";
// components
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
@ -23,9 +24,14 @@ 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();
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
const handleCopyIssueLink = () => {
copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
setToastAlert({
@ -82,6 +88,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
@ -102,6 +109,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
@ -114,6 +122,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>

9
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -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";
@ -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;
@ -91,6 +95,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
<>
<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);
}}
>

13
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View File

@ -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";
@ -201,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}

13
web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View File

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

14
web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View File

@ -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
web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
View File

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

6
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

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

4
web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
View File

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

14
web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View File

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

4
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

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

18
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

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

21
web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
View File

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

22
web/components/issues/issue-modal/draft-issue-layout.tsx
View File

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

72
web/components/issues/issue-modal/modal.tsx
View File

@ -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, 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,9 +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 { captureIssueEvent } = useEventTracker();
const {
router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
} = useApplication();
@ -67,6 +65,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
viewId: moduleId,
},
};
// router
const router = useRouter();
// toast alert
const { setToastAlert } = useToast();
// local storage
@ -141,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) {
@ -161,17 +159,16 @@ 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!,
}
);
},
});
}
};
@ -185,18 +182,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
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) {
@ -205,17 +200,16 @@ 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!,
}
);
},
});
}
};

113
web/components/issues/peek-overview/root.tsx
View File

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

66
web/components/issues/sub-issues/root.tsx
View File

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

16
web/components/modules/delete-module-modal.tsx
View File

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

29
web/components/modules/modal.tsx
View File

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

5
web/components/modules/module-card-item.tsx
View File

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

5
web/components/modules/module-list-item.tsx
View File

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

8
web/components/modules/modules-list-view.tsx
View File

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

11
web/components/modules/sidebar.tsx
View File

@ -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();
@ -297,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>

11
web/components/onboarding/invitations.tsx
View File

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

10
web/components/onboarding/tour/root.tsx
View File

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

15
web/components/page-views/workspace-dashboard.tsx
View File

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

10
web/components/project/card-list.tsx
View File

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

31
web/components/project/create-project-modal.tsx
View File

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

34
web/components/project/delete-project-modal.tsx
View File

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

34
web/components/project/form.tsx
View File

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

10
web/components/project/leave-project-modal.tsx
View File

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

6
web/components/project/member-list.tsx
View File

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

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

@ -5,7 +5,7 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
import { ChevronDown, Plus, X } from "lucide-react";
// hooks
import { useApplication, useMember, useUser, useWorkspace } from "hooks/store";
import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
@ -45,9 +45,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
// toast alert
const { setToastAlert } = useToast();
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const {
membership: { currentProjectRole },
} = useUser();
@ -89,8 +87,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
type: "success",
message: "Members added successfully.",
});
postHogEventTracker(
"MEMBER_ADDED",
captureEvent(
"Member added",
{
...res,
state: "SUCCESS",
@ -104,8 +102,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
})
.catch((error) => {
console.error(error);
postHogEventTracker(
"MEMBER_ADDED",
captureEvent(
"Member added",
{
state: "FAILED",
},

8
web/components/project/settings/features-list.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
import { DiceIcon, ToggleSwitch } from "@plane/ui";
// hooks
import { useApplication, useProject, useUser, useWorkspace } from "hooks/store";
import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// types
import { IProject } from "@plane/types";
@ -51,9 +51,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
eventTracker: { setTrackElement, postHogEventTracker },
} = useApplication();
const { setTrackElement, captureEvent } = useEventTracker();
const {
currentUser,
membership: { currentProjectRole },
@ -94,7 +92,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
value={Boolean(currentProjectDetails?.[feature.property as keyof IProject])}
onChange={() => {
setTrackElement("PROJECT_SETTINGS_FEATURES_PAGE");
postHogEventTracker(`TOGGLE_${feature.title.toUpperCase()}`, {
captureEvent(`Toggle ${feature.title.toLowerCase()}`, {
workspace_id: currentWorkspace?.id,
workspace_slug: currentWorkspace?.slug,
project_id: currentProjectDetails?.id,

45
web/components/project/sidebar-list-item.tsx
View File

@ -18,7 +18,7 @@ import {
MoreHorizontal,
} from "lucide-react";
// hooks
import { useApplication, useProject } from "hooks/store";
import { useApplication,useEventTracker, useProject } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import useToast from "hooks/use-toast";
// helpers
@ -73,10 +73,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { projectId, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
// store hooks
const {
theme: themeStore,
eventTracker: { setTrackElement },
} = useApplication();
const { theme: themeStore } = useApplication();
const { setTrackElement } = useEventTracker();
const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
// states
const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
@ -149,8 +147,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
{({ open }) => (
<>
<div
className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${snapshot?.isDragging ? "opacity-60" : ""
} ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
snapshot?.isDragging ? "opacity-60" : ""
} ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
>
{provided && (
<Tooltip
@ -159,9 +158,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
>
<button
type="button"
className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${isCollapsed ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${isMenuActive ? "!flex" : ""
}`}
className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
isCollapsed ? "" : "group-hover:!flex"
} ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
isMenuActive ? "!flex" : ""
}`}
{...provided?.dragHandleProps}
>
<MoreVertical className="h-3.5" />
@ -172,12 +173,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
<Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
<Disclosure.Button
as="div"
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${isCollapsed ? "justify-center" : `justify-between`
}`}
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
isCollapsed ? "justify-center" : `justify-between`
}`}
>
<div
className={`flex w-full flex-grow items-center gap-x-2 truncate ${isCollapsed ? "justify-center" : ""
}`}
className={`flex w-full flex-grow items-center gap-x-2 truncate ${
isCollapsed ? "justify-center" : ""
}`}
>
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
@ -197,8 +200,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
</div>
{!isCollapsed && (
<ChevronDown
className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${isMenuActive ? "!block" : ""
} mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
isMenuActive ? "!block" : ""
} mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
/>
)}
</Disclosure.Button>
@ -322,10 +326,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
disabled={!isCollapsed}
>
<div
className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${isCollapsed ? "justify-center" : ""}`}
className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
router.asPath.includes(item.href)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${isCollapsed ? "justify-center" : ""}`}
>
<item.Icon className="h-4 w-4 stroke-[1.5]" />
{!isCollapsed && item.name}

7
web/components/project/sidebar-list.tsx
View File

@ -5,7 +5,7 @@ import { Disclosure, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
import { ChevronDown, ChevronRight, Plus } from "lucide-react";
// hooks
import { useApplication, useProject, useUser } from "hooks/store";
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
@ -25,8 +25,8 @@ export const ProjectSidebarList: FC = observer(() => {
const {
theme: { sidebarCollapsed },
commandPalette: { toggleCreateProjectModal },
eventTracker: { setTrackElement },
} = useApplication();
const { setTrackElement } = useEventTracker();
const {
membership: { currentWorkspaceRole },
} = useUser();
@ -217,6 +217,7 @@ export const ProjectSidebarList: FC = observer(() => {
<button
className="opacity-0 group-hover:opacity-100"
onClick={() => {
setTrackElement("Sidebar");
setIsFavoriteProjectCreate(false);
setIsProjectModalOpen(true);
}}
@ -267,7 +268,7 @@ export const ProjectSidebarList: FC = observer(() => {
type="button"
className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
onClick={() => {
setTrackElement("APP_SIDEBAR");
setTrackElement("Sidebar");
toggleCreateProjectModal(true);
}}
>

14
web/components/states/create-update-state-inline.tsx
View File

@ -5,7 +5,7 @@ import { TwitterPicker } from "react-color";
import { Popover, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication, useProjectState } from "hooks/store";
import { useEventTracker, useProjectState } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
@ -36,9 +36,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
eventTracker: { postHogEventTracker, setTrackElement },
} = useApplication();
const { captureEvent, setTrackElement } = useEventTracker();
const { createState, updateState } = useProjectState();
// toast alert
const { setToastAlert } = useToast();
@ -88,7 +86,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
title: "Success!",
message: "State created successfully.",
});
postHogEventTracker("STATE_CREATE", {
captureEvent("State created", {
...res,
state: "SUCCESS",
});
@ -106,7 +104,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
title: "Error!",
message: "State could not be created. Please try again.",
});
postHogEventTracker("STATE_CREATE", {
captureEvent("State created", {
state: "FAILED",
});
});
@ -118,7 +116,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
await updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
.then((res) => {
handleClose();
postHogEventTracker("STATE_UPDATE", {
captureEvent("State updated", {
...res,
state: "SUCCESS",
});
@ -141,7 +139,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
title: "Error!",
message: "State could not be updated. Please try again.",
});
postHogEventTracker("STATE_UPDATE", {
captureEvent("State updated", {
state: "FAILED",
});
});

10
web/components/states/delete-state-modal.tsx
View File

@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
import { AlertTriangle } from "lucide-react";
// hooks
import { useApplication, useProjectState } from "hooks/store";
import { useEventTracker, useProjectState } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Button } from "@plane/ui";
@ -25,9 +25,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const { deleteState } = useProjectState();
// toast alert
const { setToastAlert } = useToast();
@ -44,7 +42,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
await deleteState(workspaceSlug.toString(), data.project_id, data.id)
.then(() => {
postHogEventTracker("STATE_DELETE", {
captureEvent("State deleted", {
state: "SUCCESS",
});
handleClose();
@ -63,7 +61,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
title: "Error!",
message: "State could not be deleted. Please try again.",
});
postHogEventTracker("STATE_DELETE", {
captureEvent("State deleted", {
state: "FAILED",
});
})

6
web/components/states/project-setting-state-list-item.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication, useProjectState } from "hooks/store";
import { useEventTracker, useProjectState } from "hooks/store";
// ui
import { Tooltip, StateGroupIcon } from "@plane/ui";
// icons
@ -28,9 +28,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const {
eventTracker: { setTrackElement },
} = useApplication();
const { setTrackElement } = useEventTracker();
const { markStateAsDefault, moveStatePosition } = useProjectState();
// derived values
const groupStates = statesList.filter((s) => s.group === state.group);

6
web/components/states/project-setting-state-list.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication, useProjectState } from "hooks/store";
import { useEventTracker, useProjectState } from "hooks/store";
// components
import { CreateUpdateStateInline, DeleteStateModal, StateGroup, StatesListItem } from "components/states";
// ui
@ -21,9 +21,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store
const {
eventTracker: { setTrackElement },
} = useApplication();
const { setTrackElement } = useEventTracker();
const { groupedProjectStates, projectStates, fetchProjectStates } = useProjectState();
// state
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);

12
web/components/workspace/create-workspace-form.tsx
View File

@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form";
// services
import { WorkspaceService } from "services/workspace.service";
// hooks
import { useApplication, useWorkspace } from "hooks/store";
import { useEventTracker, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input } from "@plane/ui";
@ -48,9 +48,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
// router
const router = useRouter();
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const { createWorkspace } = useWorkspace();
// toast alert
const { setToastAlert } = useToast();
@ -72,7 +70,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
await createWorkspace(formData)
.then(async (res) => {
postHogEventTracker("WORKSPACE_CREATED", {
captureEvent("Workspace created", {
...res,
state: "SUCCESS",
});
@ -90,7 +88,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
title: "Error!",
message: "Workspace could not be created. Please try again.",
});
postHogEventTracker("WORKSPACE_CREATED", {
captureEvent("Workspace created", {
state: "FAILED",
});
});
@ -102,7 +100,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
title: "Error!",
message: "Some error occurred while creating workspace. Please try again.",
});
postHogEventTracker("WORKSPACE_CREATED", {
captureEvent("Workspace created", {
state: "FAILED",
});
});

10
web/components/workspace/delete-workspace-modal.tsx
View File

@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
import { AlertTriangle } from "lucide-react";
// hooks
import { useApplication, useWorkspace } from "hooks/store";
import { useEventTracker, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Button, Input } from "@plane/ui";
@ -28,9 +28,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
// router
const router = useRouter();
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const { deleteWorkspace } = useWorkspace();
// toast alert
const { setToastAlert } = useToast();
@ -61,7 +59,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
.then((res) => {
handleClose();
router.push("/");
postHogEventTracker("WORKSPACE_DELETED", {
captureEvent("Workspace deleted", {
res,
state: "SUCCESS",
});
@ -77,7 +75,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
title: "Error!",
message: "Something went wrong. Please try again later.",
});
postHogEventTracker("WORKSPACE_DELETED", {
captureEvent("Workspace deleted", {
state: "FAILED",
});
});

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

@ -6,7 +6,7 @@ import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
// services
import { FileService } from "services/file.service";
// hooks
import { useApplication, useUser, useWorkspace } from "hooks/store";
import { useEventTracker, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { DeleteWorkspaceModal } from "components/workspace";
@ -37,9 +37,7 @@ export const WorkspaceDetails: FC = observer(() => {
const [isImageRemoving, setIsImageRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const {
membership: { currentWorkspaceRole },
} = useUser();
@ -70,7 +68,7 @@ export const WorkspaceDetails: FC = observer(() => {
await updateWorkspace(currentWorkspace.slug, payload)
.then((res) => {
postHogEventTracker("WORKSPACE_UPDATED", {
captureEvent("Workspace updated", {
...res,
state: "SUCCESS",
});
@ -81,7 +79,7 @@ export const WorkspaceDetails: FC = observer(() => {
});
})
.catch((err) => {
postHogEventTracker("WORKSPACE_UPDATED", {
captureEvent("Workspace updated", {
state: "FAILED",
});
console.error(err);

31
web/components/workspace/sidebar-dropdown.tsx
View File

@ -8,7 +8,7 @@ import { mutate } from "swr";
import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
import { usePopper } from "react-popper";
// hooks
import { useApplication, useUser, useWorkspace } from "hooks/store";
import { useApplication, useEventTracker, useUser, useWorkspace } from "hooks/store";
// hooks
import useToast from "hooks/use-toast";
// ui
@ -55,8 +55,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
// store hooks
const {
theme: { sidebarCollapsed, toggleSidebar },
eventTracker: { setTrackElement },
} = useApplication();
const { setTrackElement } = useEventTracker();
const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
// hooks
@ -110,13 +110,15 @@ export const WorkspaceSidebarDropdown = observer(() => {
<>
<Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none">
<div
className={`flex items-center gap-x-2 truncate rounded p-1 ${sidebarCollapsed ? "justify-center" : "justify-between"
}`}
className={`flex items-center gap-x-2 truncate rounded p-1 ${
sidebarCollapsed ? "justify-center" : "justify-between"
}`}
>
<div className="flex items-center gap-2 truncate">
<div
className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
>
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
<img
@ -136,8 +138,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
</div>
{!sidebarCollapsed && (
<ChevronDown
className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${open ? "rotate-180" : ""
} text-custom-sidebar-text-400 duration-300`}
className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${
open ? "rotate-180" : ""
} text-custom-sidebar-text-400 duration-300`}
/>
)}
</div>
@ -176,8 +179,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
>
<div className="flex items-center justify-start gap-2.5 truncate">
<span
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${
!workspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
>
{workspace?.logo && workspace.logo !== "" ? (
<img
@ -190,8 +194,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
)}
</span>
<h5
className={`truncate text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
}`}
className={`truncate text-sm font-medium ${
workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
}`}
>
{workspace.name}
</h5>
@ -338,4 +343,4 @@ export const WorkspaceSidebarDropdown = observer(() => {
)}
</div>
);
});
});

9
web/components/workspace/sidebar-quick-action.tsx
View File

@ -2,7 +2,7 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { ChevronUp, PenSquare, Search } from "lucide-react";
// hooks
import { useApplication, useUser } from "hooks/store";
import { useApplication, useEventTracker, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage";
// components
import { CreateUpdateDraftIssueModal } from "components/issues";
@ -14,11 +14,8 @@ export const WorkspaceSidebarQuickAction = observer(() => {
// states
const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
const {
theme: themeStore,
commandPalette: commandPaletteStore,
eventTracker: { setTrackElement },
} = useApplication();
const { theme: themeStore, commandPalette: commandPaletteStore } = useApplication();
const { setTrackElement } = useEventTracker();
const {
membership: { currentWorkspaceRole },
} = useUser();

105
web/constants/event-tracker.ts Normal file
View File

@ -0,0 +1,105 @@
export type IssueEventProps = {
eventName: string;
payload: any;
updates?: any;
group?: EventGroupProps;
path?: string;
};
export type EventProps = {
eventName: string;
payload: any;
group?: EventGroupProps;
};
export type EventGroupProps = {
isGrouping?: boolean;
groupType?: string;
groupId?: string;
};
export const getProjectEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.id,
identifier: payload.identifier,
created_at: payload.created_at,
updated_at: payload.updated_at,
state: payload.state,
element: payload.element,
});
export const getCycleEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.id,
cycle_id: payload.id,
created_at: payload.created_at,
updated_at: payload.updated_at,
start_date: payload.start_date,
target_date: payload.target_date,
cycle_status: payload.status,
state: payload.state,
element: payload.element,
});
export const getModuleEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.id,
module_id: payload.id,
created_at: payload.created_at,
updated_at: payload.updated_at,
start_date: payload.start_date,
target_date: payload.target_date,
module_status: payload.status,
state: payload.state,
element: payload.element,
});
export const getIssueEventPayload = (props: IssueEventProps) => {
const { eventName, payload, updates, path } = props;
let eventPayload: any = {
issue_id: payload.id,
estimate_point: payload.estimate_point,
link_count: payload.link_count,
target_date: payload.target_date,
is_draft: payload.is_draft,
label_ids: payload.label_ids,
assignee_ids: payload.assignee_ids,
created_at: payload.created_at,
updated_at: payload.updated_at,
sequence_id: payload.sequence_id,
module_ids: payload.module_ids,
sub_issues_count: payload.sub_issues_count,
parent_id: payload.parent_id,
project_id: payload.project_id,
priority: payload.priority,
state_id: payload.state_id,
start_date: payload.start_date,
attachment_count: payload.attachment_count,
cycle_id: payload.cycle_id,
module_id: payload.module_id,
archived_at: payload.archived_at,
state: payload.state,
view_id: path?.includes("workspace-views") || path?.includes("views") ? path.split("/").pop() : "",
};
if (eventName === "Issue updated") {
eventPayload = {
...eventPayload,
...updates,
updated_from: props.path?.includes("workspace-views")
? "All views"
: props.path?.includes("cycles")
? "Cycle"
: props.path?.includes("modules")
? "Module"
: props.path?.includes("views")
? "Project view"
: props.path?.includes("inbox")
? "Inbox"
: props.path?.includes("draft")
? "Draft"
: "Project",
};
}
return eventPayload;
};

6
web/constants/spreadsheet.ts
View File

@ -26,7 +26,11 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
descendingOrderKey: TIssueOrderByOptions;
descendingOrderTitle: string;
icon: FC<ISvgIcons>;
Column: React.FC<{ issue: TIssue; onChange: (issue: TIssue, data: Partial<TIssue>) => void; disabled: boolean }>;
Column: React.FC<{
issue: TIssue;
onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
disabled: boolean;
}>;
};
} = {
assignee: {

1
web/hooks/store/index.ts
View File

@ -1,4 +1,5 @@
export * from "./use-application";
export * from "./use-event-tracker"
export * from "./use-calendar-view";
export * from "./use-cycle";
export * from "./use-dashboard";

11
web/hooks/store/use-event-tracker.ts Normal file
View File

@ -0,0 +1,11 @@
import { useContext } from "react";
// mobx store
import { StoreContext } from "contexts/store-context";
// types
import { IEventTrackerStore } from "store/event-tracker.store";
export const useEventTracker = (): IEventTrackerStore => {
const context = useContext(StoreContext);
if (context === undefined) throw new Error("useEventTracker must be used within StoreProvider");
return context.eventTracker;
};

7
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -5,6 +5,7 @@ import useSWR from "swr";
// hooks
import {
useApplication,
useEventTracker,
useCycle,
useEstimate,
useLabel,
@ -34,6 +35,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
const {
commandPalette: { toggleCreateProjectModal },
} = useApplication();
const { setTrackElement } = useEventTracker();
const {
membership: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToProject },
} = useUser();
@ -135,7 +137,10 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
image={emptyProject}
primaryButton={{
text: "Create Project",
onClick: () => toggleCreateProjectModal(true),
onClick: () => {
setTrackElement("Projects page empty state");
toggleCreateProjectModal(true);
},
}}
/>
</div>

6
web/lib/app-provider.tsx
View File

@ -17,7 +17,7 @@ import { SWRConfig } from "swr";
import { SWR_CONFIG } from "constants/swr-config";
// dynamic imports
const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
const PostHogProvider = dynamic(() => import("lib/posthog-provider"), { ssr: false });
const CrispWrapper = dynamic(() => import("lib/wrappers/crisp-wrapper"), { ssr: false });
// nprogress
@ -47,7 +47,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
<InstanceLayout>
<StoreWrapper>
<CrispWrapper user={currentUser}>
<PosthogWrapper
<PostHogProvider
user={currentUser}
workspaceRole={currentWorkspaceRole}
projectRole={currentProjectRole}
@ -55,7 +55,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
posthogHost={envConfig?.posthog_host || null}
>
<SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
</PosthogWrapper>
</PostHogProvider>
</CrispWrapper>
</StoreWrapper>
</InstanceLayout>

12
web/lib/wrappers/posthog-wrapper.tsx → web/lib/posthog-provider.tsx
View File

@ -1,7 +1,7 @@
import { FC, ReactNode, useEffect } from "react";
import { useRouter } from "next/router";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { PostHogProvider as PHProvider } from "posthog-js/react";
// mobx store provider
import { IUser } from "@plane/types";
// helpers
@ -16,7 +16,7 @@ export interface IPosthogWrapper {
posthogHost: string | null;
}
const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
const PostHogProvider: FC<IPosthogWrapper> = (props) => {
const { children, user, workspaceRole, projectRole, posthogAPIKey, posthogHost } = props;
// router
const router = useRouter();
@ -39,10 +39,6 @@ const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
if (posthogAPIKey && posthogHost) {
posthog.init(posthogAPIKey, {
api_host: posthogHost || "https://app.posthog.com",
// Enable debug mode in development
// loaded: (posthog) => {
// if (process.env.NODE_ENV === "development") posthog.debug();
// },
autocapture: false,
capture_pageview: false, // Disable automatic pageview capture, as we capture manually
});
@ -63,9 +59,9 @@ const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
}, []);
if (posthogAPIKey) {
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
return <PHProvider client={posthog}>{children}</PHProvider>;
}
return <>{children}</>;
};
export default PosthogWrapper;
export default PostHogProvider;

16
web/lib/redirect.ts
View File

@ -1,16 +0,0 @@
import Router from "next/router";
import type { NextPageContext } from "next";
const redirect = (context: NextPageContext, target: any) => {
if (context.res) {
// server
// 303: "See other"
context.res.writeHead(301, { Location: target });
context.res.end();
} else {
// In the browser, we just pretend like this never even happened ;)
Router.push(target);
}
};
export default redirect;

6
web/pages/[workspaceSlug]/analytics.tsx
View File

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { Tab } from "@headlessui/react";
import { useTheme } from "next-themes";
// hooks
import { useApplication, useProject, useUser } from "hooks/store";
import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
@ -22,8 +22,8 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
// store hooks
const {
commandPalette: { toggleCreateProjectModal },
eventTracker: { setTrackElement },
} = useApplication();
const { setTrackElement } = useEventTracker();
const {
membership: { currentWorkspaceRole },
currentUser,
@ -72,7 +72,7 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
primaryButton={{
text: "Create Cycles and Modules first",
onClick: () => {
setTrackElement("ANALYTICS_EMPTY_STATE");
setTrackElement("Analytics empty state");
toggleCreateProjectModal(true);
},
}}

4
web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import { Tab } from "@headlessui/react";
import { useTheme } from "next-themes";
// hooks
import { useCycle, useUser } from "hooks/store";
import { useEventTracker, useCycle, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage";
// layouts
import { AppLayout } from "layouts/app-layout";
@ -26,6 +26,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
// theme
const { resolvedTheme } = useTheme();
// store hooks
const { setTrackElement } = useEventTracker();
const {
membership: { currentProjectRole },
currentUser,
@ -91,6 +92,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
primaryButton={{
text: "Set your first cycle",
onClick: () => {
setTrackElement("Cycle empty state");
setCreateModal(true);
},
}}

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

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Search } from "lucide-react";
// hooks
import { useApplication, useMember, useUser } from "hooks/store";
import { useEventTracker, useMember, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// layouts
import { AppLayout } from "layouts/app-layout";
@ -27,9 +27,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
eventTracker: { postHogEventTracker, setTrackElement },
} = useApplication();
const { captureEvent, setTrackElement } = useEventTracker();
const {
membership: { currentWorkspaceRole },
} = useUser();
@ -45,7 +43,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
return inviteMembersToWorkspace(workspaceSlug.toString(), data)
.then(() => {
setInviteModal(false);
postHogEventTracker("MEMBER_INVITED", { state: "SUCCESS" });
captureEvent("Member invited", { state: "SUCCESS" });
setToastAlert({
type: "success",
title: "Success!",
@ -53,7 +51,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
});
})
.catch((err) => {
postHogEventTracker("MEMBER_INVITED", { state: "FAILED" });
captureEvent("Member invited", { state: "FAILED" });
setToastAlert({
type: "error",
title: "Error!",

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

@ -10,7 +10,7 @@ import { CheckCircle2 } from "lucide-react";
import { WorkspaceService } from "services/workspace.service";
import { UserService } from "services/user.service";
// hooks
import { useApplication, useUser } from "hooks/store";
import { useEventTracker, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// layouts
import DefaultLayout from "layouts/default-layout";
@ -40,9 +40,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const { currentUser, currentUserSettings } = useUser();
// router
const router = useRouter();
@ -84,7 +82,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
mutate("USER_WORKSPACES");
const firstInviteId = invitationsRespond[0];
const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
postHogEventTracker("MEMBER_ACCEPTED", {
captureEvent("Member accepted", {
...res,
state: "SUCCESS",
accepted_from: "App",

8
web/pages/onboarding/index.tsx
View File

@ -8,7 +8,7 @@ import { ChevronDown } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
import { Controller, useForm } from "react-hook-form";
// hooks
import { useApplication, useUser, useWorkspace } from "hooks/store";
import { useEventTracker, useUser, useWorkspace } from "hooks/store";
import useUserAuth from "hooks/use-user-auth";
// services
import { WorkspaceService } from "services/workspace.service";
@ -35,9 +35,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
// store hooks
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { captureEvent } = useEventTracker();
const { currentUser, currentUserLoader, updateCurrentUser, updateUserOnBoard } = useUser();
const { workspaces, fetchWorkspaces } = useWorkspace();
// custom hooks
@ -81,7 +79,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
await updateUserOnBoard()
.then(() => {
postHogEventTracker("USER_ONBOARDING_COMPLETE", {
captureEvent("User onboarding completed", {
user_role: user.role,
email: user.email,
user_id: user.id,

79
web/store/application/event-tracker.store.ts
View File

@ -1,79 +0,0 @@
import { action, makeObservable, observable } from "mobx";
import posthog from "posthog-js";
// stores
import { RootStore } from "../root.store";
export interface IEventTrackerStore {
trackElement: string;
setTrackElement: (element: string) => void;
postHogEventTracker: (
eventName: string,
payload: object | [] | null,
group?: { isGrouping: boolean | null; groupType: string | null; groupId: string | null } | null
) => void;
}
export class EventTrackerStore implements IEventTrackerStore {
trackElement: string = "";
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
trackElement: observable,
setTrackElement: action.bound,
postHogEventTracker: action,
});
this.rootStore = _rootStore;
}
setTrackElement = (element: string) => {
this.trackElement = element;
};
postHogEventTracker = (
eventName: string,
payload: object | [] | null,
group?: { isGrouping: boolean | null; groupType: string | null; groupId: string | null } | null
) => {
try {
const currentWorkspaceDetails = this.rootStore.workspaceRoot.workspaces.currentWorkspace;
const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
let extras: any = {
workspace_name: currentWorkspaceDetails?.name ?? "",
workspace_id: currentWorkspaceDetails?.id ?? "",
workspace_slug: currentWorkspaceDetails?.slug ?? "",
project_name: currentProjectDetails?.name ?? "",
project_id: currentProjectDetails?.id ?? "",
project_identifier: currentProjectDetails?.identifier ?? "",
};
if (["PROJECT_CREATED", "PROJECT_UPDATED"].includes(eventName)) {
const project_details: any = payload as object;
extras = {
...extras,
project_name: project_details?.name ?? "",
project_id: project_details?.id ?? "",
project_identifier: project_details?.identifier ?? "",
};
}
if (group && group!.isGrouping === true) {
posthog?.group(group!.groupType!, group!.groupId!, {
date: new Date(),
workspace_id: group!.groupId,
});
posthog?.capture(eventName, {
...payload,
extras: extras,
element: this.trackElement ?? "",
});
} else {
posthog?.capture(eventName, {
...payload,
extras: extras,
element: this.trackElement ?? "",
});
}
} catch (error) {
throw error;
}
this.setTrackElement("");
};
}

Some files were not shown because too many files have changed in this diff Show More