github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: issue-open from sidebar events added

Browse Source
This commit is contained in:
LAKHAN BAHETI 2024-02-22 15:22:20 +05:30
parent fc5901d2d6
commit 8886aface1
10 changed files with 89 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useIssues } from "hooks/store";
import { useEventTracker, useIssues } from "hooks/store";
// components
import {
ArchivedIssueListLayout,
@ -21,12 +21,14 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
const { workspaceSlug, projectId } = router.query;
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
const { captureIssuesListOpenedEvent } = useEventTracker();
useSWR(
workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
async () => {
if (workspaceSlug && projectId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

4
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import useSWR from "swr";
import size from "lodash/size";
// hooks
import { useCycle, useIssues } from "hooks/store";
import { useCycle, useEventTracker, useIssues } from "hooks/store";
// components
import {
CycleAppliedFiltersRoot,
@ -29,6 +29,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
// store hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { getCycleById } = useCycle();
const { captureIssuesListOpenedEvent } = useEventTracker();
// state
const [transferIssuesModal, setTransferIssuesModal] = useState(false);
@ -39,6 +40,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
async () => {
if (workspaceSlug && projectId && cycleId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

4
web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import { useIssues } from "hooks/store";
import { useEventTracker, useIssues } from "hooks/store";
// components
import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
@ -21,12 +21,14 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
const { workspaceSlug, projectId } = router.query;
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
const { captureIssuesListOpenedEvent } = useEventTracker();
useSWR(
workspaceSlug && projectId ? `DRAFT_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
async () => {
if (workspaceSlug && projectId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

4
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
import useSWR from "swr";
import size from "lodash/size";
// mobx store
import { useIssues } from "hooks/store";
import { useEventTracker, useIssues } from "hooks/store";
// components
import {
IssuePeekOverview,
@ -28,6 +28,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
const { workspaceSlug, projectId, moduleId } = router.query;
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
const { captureIssuesListOpenedEvent } = useEventTracker();
useSWR(
workspaceSlug && projectId && moduleId
@ -36,6 +37,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
async () => {
if (workspaceSlug && projectId && moduleId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

4
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -16,7 +16,7 @@ import {
// ui
import { Spinner } from "@plane/ui";
// hooks
import { useIssues } from "hooks/store";
import { useEventTracker, useIssues } from "hooks/store";
// helpers
import { ActiveLoader } from "components/ui";
// constants
@ -28,10 +28,12 @@ export const ProjectLayoutRoot: FC = observer(() => {
const { workspaceSlug, projectId } = router.query;
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
const { captureIssuesListOpenedEvent } = useEventTracker();
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null, async () => {
if (workspaceSlug && projectId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

4
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useIssues } from "hooks/store";
import { useEventTracker, useIssues } from "hooks/store";
// components
import {
IssuePeekOverview,
@ -28,12 +28,14 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
const { workspaceSlug, projectId, viewId } = router.query;
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const { captureIssuesListOpenedEvent } = useEventTracker();
useSWR(
workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
async () => {
if (workspaceSlug && projectId && viewId) {
await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), viewId.toString());
captureIssuesListOpenedEvent(router.asPath, issuesFilter?.issueFilters?.filters);
await issues?.fetchIssues(
workspaceSlug.toString(),
projectId.toString(),

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

@ -145,6 +145,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
if (window.innerWidth < 768) {
themeStore.toggleMobileSidebar();
}
setTrackElement('Project sidebar');
};
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));

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

@ -139,7 +139,7 @@ export const ProjectSidebarList: FC = observer(() => {
<button
className="opacity-0 group-hover:opacity-100"
onClick={() => {
setTrackElement("APP_SIDEBAR_FAVORITES_BLOCK");
setTrackElement("Sidebar");
setIsFavoriteProjectCreate(true);
setIsProjectModalOpen(true);
}}

44
web/constants/event-tracker.ts
View File

@ -21,7 +21,6 @@ export const getWorkspaceEventPayload = (payload: any) => ({
});
export const getProjectEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.id,
identifier: payload.identifier,
project_visibility: payload.network == 2 ? "Public" : "Private",
@ -34,8 +33,6 @@ export const getProjectEventPayload = (payload: any) => ({
});
export const getCycleEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.project,
cycle_id: payload.id,
created_at: payload.created_at,
updated_at: payload.updated_at,
@ -48,8 +45,6 @@ export const getCycleEventPayload = (payload: any) => ({
});
export const getModuleEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.project,
module_id: payload.id,
created_at: payload.created_at,
updated_at: payload.updated_at,
@ -64,8 +59,6 @@ export const getModuleEventPayload = (payload: any) => ({
});
export const getPageEventPayload = (payload: any) => ({
workspace_id: payload.workspace_id,
project_id: payload.project,
created_at: payload.created_at,
updated_at: payload.updated_at,
access: payload.access === 0 ? "Public" : "Private",
@ -109,19 +102,7 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
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",
updated_from: elementFromPath(path),
};
}
return eventPayload;
@ -129,8 +110,6 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
export const getProjectStateEventPayload = (payload: any) => {
return {
workspace_id: payload.workspace_id,
project_id: payload.id,
state_id: payload.id,
created_at: payload.created_at,
updated_at: payload.updated_at,
@ -142,6 +121,25 @@ export const getProjectStateEventPayload = (payload: any) => {
};
};
export const getIssuesListOpenedPayload = (payload: any) => ({
element: elementFromPath(payload.path),
type: payload.project_id ? "Project" : "Workspace",
layout: payload?.displayFilters?.layout,
filters: payload?.filters,
display_properties: payload?.displayProperties,
});
const elementFromPath = (path?: string) => {
if (path?.includes("workspace-views")) return "Workspace view";
if (path?.includes("cycles")) return "Cycle";
if (path?.includes("modules")) return "Module";
if (path?.includes("views")) return "Project view";
if (path?.includes("inbox")) return "Inbox";
if (path?.includes("draft")) return "Draft";
if (path?.includes("archived")) return "Archive";
return "Project";
};
// Workspace crud Events
export const WORKSPACE_CREATED = "Workspace created";
export const WORKSPACE_UPDATED = "Workspace updated";
@ -175,6 +173,8 @@ export const VIEW_UNFAVORITED = "View unfavorited";
export const ISSUE_CREATED = "Issue created";
export const ISSUE_UPDATED = "Issue updated";
export const ISSUE_DELETED = "Issue deleted";
// Issue Checkout Events
export const ISSUES_LIST_OPENED = "Issues list opened";
export const ISSUE_OPENED = "Issue opened";
// Project State Events
export const STATE_CREATED = "State created";

64
web/store/event-tracker.store.ts
View File

@ -17,6 +17,8 @@ import {
getProjectStateEventPayload,
getWorkspaceEventPayload,
getPageEventPayload,
ISSUES_LIST_OPENED,
getIssuesListOpenedPayload,
} from "constants/event-tracker";
export interface IEventTrackerStore {
@ -37,6 +39,7 @@ export interface IEventTrackerStore {
capturePageEvent: (props: EventProps) => void;
captureIssueEvent: (props: IssueEventProps) => void;
captureProjectStateEvent: (props: EventProps) => void;
captureIssuesListOpenedEvent: (path: string, filters: any) => void;
}
export class EventTrackerStore implements IEventTrackerStore {
@ -55,6 +58,12 @@ export class EventTrackerStore implements IEventTrackerStore {
captureEvent: action,
captureProjectEvent: action,
captureCycleEvent: action,
captureModuleEvent: action,
capturePageEvent: action,
captureIssueEvent: action,
captureProjectStateEvent: action,
captureIssuesListOpenedEvent: action,
joinWorkspaceMetricGroup: action,
});
// store
this.rootStore = _rootStore;
@ -133,10 +142,11 @@ export class EventTrackerStore implements IEventTrackerStore {
if (eventName === WORKSPACE_CREATED && payload.state == "SUCCESS") {
this.joinWorkspaceMetricGroup(payload.id);
}
const eventPayload: any = getWorkspaceEventPayload({
...payload,
const eventPayload: any = {
...getWorkspaceEventPayload(payload),
...this.getRequiredProperties,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
@ -147,11 +157,11 @@ export class EventTrackerStore implements IEventTrackerStore {
*/
captureProjectEvent = (props: EventProps) => {
const { eventName, payload } = props;
const eventPayload: any = getProjectEventPayload({
const eventPayload: any = {
...getProjectEventPayload(payload),
...this.getRequiredProperties,
...payload,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
@ -162,11 +172,11 @@ export class EventTrackerStore implements IEventTrackerStore {
*/
captureCycleEvent = (props: EventProps) => {
const { eventName, payload } = props;
const eventPayload: any = getCycleEventPayload({
const eventPayload: any = {
...getCycleEventPayload(payload),
...this.getRequiredProperties,
...payload,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
@ -177,11 +187,11 @@ export class EventTrackerStore implements IEventTrackerStore {
*/
captureModuleEvent = (props: EventProps) => {
const { eventName, payload } = props;
const eventPayload: any = getModuleEventPayload({
const eventPayload: any = {
...getModuleEventPayload(payload),
...this.getRequiredProperties,
...payload,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
@ -192,11 +202,11 @@ export class EventTrackerStore implements IEventTrackerStore {
*/
capturePageEvent = (props: EventProps) => {
const { eventName, payload } = props;
const eventPayload: any = getPageEventPayload({
const eventPayload: any = {
...getPageEventPayload(payload),
...this.getRequiredProperties,
...payload,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
@ -223,12 +233,30 @@ export class EventTrackerStore implements IEventTrackerStore {
*/
captureProjectStateEvent = (props: EventProps) => {
const { eventName, payload } = props;
const eventPayload: any = getProjectStateEventPayload({
const eventPayload: any = {
...getProjectStateEventPayload(payload),
...this.getRequiredProperties,
...payload,
element: payload.element ?? this.trackElement,
});
};
posthog?.capture(eventName, eventPayload);
this.setTrackElement(undefined);
};
/**
* @description: Captures the event whenever the issues list is opened.
* @param {string} path
* @param {any} filters
*/
captureIssuesListOpenedEvent = (path: string, filters: any) => {
const eventPayload = {
...getIssuesListOpenedPayload({
path: path,
filters: filters,
}),
...this.getRequiredProperties,
};
posthog?.capture(ISSUES_LIST_OPENED, eventPayload);
this.setTrackElement(undefined);
};
}