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

added events for project-views

Browse Source
This commit is contained in:
LAKHAN BAHETI 2024-05-29 11:57:38 +05:30
parent c87749cbda
commit 02163f1e95
8 changed files with 122 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,8 @@ import { ProjectLogo } from "@/components/project";
import { ViewListHeader } from "@/components/views";
import { EUserProjectRoles } from "@/constants/project";
// constants
import { useCommandPalette, useProject, useUser } from "@/hooks/store";
import { E_VIEWS } from "@/constants/event-tracker";
import { useCommandPalette, useProject, useUser, useEventTracker } from "@/hooks/store";
export const ProjectViewsHeader: React.FC = observer(() => {
// router
@ -21,6 +22,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
membership: { currentProjectRole },
} = useUser();
const { currentProjectDetails } = useProject();
const { setTrackElement } = useEventTracker();
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@ -60,7 +62,14 @@ export const ProjectViewsHeader: React.FC = observer(() => {
<div className="flex flex-shrink-0 items-center gap-2">
<ViewListHeader />
<div>
<Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
<Button
variant="primary"
size="sm"
onClick={() => {
setTrackElement(E_VIEWS);
toggleCreateViewModal(true);
}}
>
Add View
</Button>
</div>

13
web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View File

@ -3,14 +3,14 @@ import isEqual from "lodash/isEqual";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { Button } from "@plane/ui";
import { AppliedFiltersList } from "@/components/issues";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store";
// components
// ui
// types
import { AppliedFiltersList } from "@/components/issues";
// constants
import { VIEW_UPDATED } from "constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
// hooks
import { useIssues, useLabel, useProjectState, useProjectView, useEventTracker } from "@/hooks/store";
export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
// router
@ -23,6 +23,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
const { projectLabels } = useLabel();
const { projectStates } = useProjectState();
const { viewMap, updateView } = useProjectView();
const { captureEvent } = useEventTracker();
// derived values
const viewDetails = viewId ? viewMap[viewId.toString()] : null;
const userFilters = issueFilters?.filters;

20
web/components/views/delete-view-modal.tsx
View File

@ -7,8 +7,10 @@ import { IProjectView } from "@plane/types";
import { TOAST_TYPE, setToast } from "@plane/ui";
// components
import { AlertModalCore } from "@/components/core";
// constants
import { E_VIEWS, VIEW_DELETED } from "constants/event-tracker";
// hooks
import { useProjectView } from "@/hooks/store";
import { useProjectView, useEventTracker } from "@/hooks/store";
type Props = {
data: IProjectView;
@ -25,6 +27,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId } = router.query;
// store hooks
const { deleteView } = useProjectView();
const { captureEvent } = useEventTracker();
const handleClose = () => {
onClose();
@ -39,20 +42,29 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
await deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
.then(() => {
handleClose();
captureEvent(VIEW_DELETED, {
view_id: data.id,
element: E_VIEWS,
state: "SUCCESS",
});
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "View deleted successfully.",
});
})
.catch(() =>
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "View could not be deleted. Please try again.",
});
captureEvent(VIEW_DELETED, {
view_id: data.id,
element: E_VIEWS,
state: "FAILED",
});
})
)
.finally(() => {
setIsDeleteLoading(false);
});

50
web/components/views/modal.tsx
View File

@ -1,5 +1,6 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// types
import { IProjectView } from "@plane/types";
// ui
@ -7,8 +8,10 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
// components
import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
import { ProjectViewForm } from "@/components/views";
// constants
import { VIEW_CREATED, VIEW_UPDATED } from "constants/event-tracker";
// hooks
import { useProjectView } from "@/hooks/store";
import { useProjectView, useEventTracker } from "@/hooks/store";
type Props = {
data?: IProjectView | null;
@ -21,8 +24,11 @@ type Props = {
export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
// router
const router = useRouter();
// store hooks
const { createView, updateView } = useProjectView();
const { captureEvent, trackElement } = useEventTracker();
const handleClose = () => {
onClose();
@ -30,33 +36,59 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
const handleCreateView = async (payload: IProjectView) => {
await createView(workspaceSlug, projectId, payload)
.then(() => {
.then((res) => {
handleClose();
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "View created successfully.",
});
captureEvent(VIEW_CREATED, {
view_id: res.id,
filters: res.filters,
// element_id: getElementFromPath(router.asPath),
// element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
state: "SUCCESS",
});
})
.catch(() =>
.catch(() => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Something went wrong. Please try again.",
})
);
});
captureEvent(VIEW_CREATED, {
// element_id: getElementFromPath(router.asPath),
// element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
state: "FAILED",
});
});
};
const handleUpdateView = async (payload: IProjectView) => {
await updateView(workspaceSlug, projectId, data?.id as string, payload)
.then(() => handleClose())
.catch((err) =>
.then((res) => {
handleClose();
captureEvent(VIEW_UPDATED, {
view_id: res.id,
filters: res.filters,
// element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
state: "SUCCESS",
});
})
.catch((err) => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: err?.detail ?? "Something went wrong. Please try again.",
})
);
});
captureEvent(VIEW_UPDATED, {
view_id: payload.id,
filters: payload.filters,
// element: trackElement ? trackElement : getElementIdFromPath(router.asPath),
state: "FAILED",
});
});
};
const handleFormSubmit = async (formData: IProjectView) => {

14
web/components/views/quick-actions.tsx
View File

@ -8,12 +8,13 @@ import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from
// components
import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
// constants
import { E_VIEWS } from "@/constants/event-tracker";
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { cn } from "@/helpers/common.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useUser } from "@/hooks/store";
import { useUser, useEventTracker } from "@/hooks/store";
type Props = {
parentRef: React.RefObject<HTMLElement>;
@ -31,6 +32,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
const {
membership: { currentProjectRole },
} = useUser();
const { setTrackElement } = useEventTracker();
// auth
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@ -48,7 +50,10 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
const MENU_ITEMS: TContextMenuItem[] = [
{
key: "edit",
action: () => setCreateUpdateViewModal(true),
action: () => {
setTrackElement(E_VIEWS);
setCreateUpdateViewModal(true);
},
title: "Edit",
icon: Pencil,
shouldRender: isEditingAllowed,
@ -67,7 +72,10 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
},
{
key: "delete",
action: () => setDeleteViewModal(true),
action: () => {
setTrackElement(E_VIEWS);
setDeleteViewModal(true);
},
title: "Delete",
icon: Trash2,
shouldRender: isEditingAllowed,

18
web/components/views/view-list-item-action.tsx
View File

@ -7,11 +7,12 @@ import { IProjectView } from "@plane/types";
import { FavoriteStar } from "@/components/core";
import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions } from "@/components/views";
// constants
import { E_VIEWS, VIEW_FAVORITED, VIEW_UNFAVORITED } from "constants/event-tracker";
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useMember, useProjectView, useUser } from "@/hooks/store";
import { useMember, useProjectView, useUser, useEventTracker } from "@/hooks/store";
import { ButtonAvatars } from "../dropdowns/member/avatar";
type Props = {
@ -33,6 +34,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
} = useUser();
const { addViewToFavorites, removeViewFromFavorites } = useProjectView();
const { getUserDetails } = useMember();
const { captureEvent } = useEventTracker();
// derived values
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@ -43,13 +45,23 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
const handleAddToFavorites = () => {
if (!workspaceSlug || !projectId) return;
addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id).then(() => {
captureEvent(VIEW_FAVORITED, {
view_id: view.id,
element: E_VIEWS,
});
});
};
const handleRemoveFromFavorites = () => {
if (!workspaceSlug || !projectId) return;
removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id).then(() => {
captureEvent(VIEW_UNFAVORITED, {
view_id: view.id,
element: E_VIEWS,
});
});
};
const createdByDetails = view.created_by ? getUserDetails(view.created_by) : undefined;

12
web/components/views/views-list.tsx
View File

@ -6,13 +6,15 @@ import { ViewListLoader } from "@/components/ui";
import { ProjectViewListItem } from "@/components/views";
// constants
import { EmptyStateType } from "@/constants/empty-state";
import { E_VIEWS_EMPTY_STATE } from "@/constants/event-tracker";
// hooks
import { useCommandPalette, useProjectView } from "@/hooks/store";
import { useCommandPalette, useProjectView, useEventTracker } from "@/hooks/store";
export const ProjectViewsList = observer(() => {
// store hooks
const { toggleCreateViewModal } = useCommandPalette();
const { projectViewIds, getViewById, loader, searchQuery } = useProjectView();
const { setTrackElement } = useEventTracker();
if (loader || !projectViewIds) return <ViewListLoader />;
@ -34,7 +36,13 @@ export const ProjectViewsList = observer(() => {
</ListLayout>
</div>
) : (
<EmptyState type={EmptyStateType.PROJECT_VIEW} primaryButtonOnClick={() => toggleCreateViewModal(true)} />
<EmptyState
type={EmptyStateType.PROJECT_VIEW}
primaryButtonOnClick={() => {
setTrackElement(E_VIEWS_EMPTY_STATE);
toggleCreateViewModal(true);
}}
/>
)}
</>
);

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

@ -170,6 +170,12 @@ export const ISSUE_DELETED = "Issue deleted";
export const ISSUE_ARCHIVED = "Issue archived";
export const ISSUE_RESTORED = "Issue restored";
export const ISSUE_OPENED = "Issue opened";
// Project View Events
export const VIEW_CREATED = "View created";
export const VIEW_UPDATED = "View updated";
export const VIEW_DELETED = "View deleted";
export const VIEW_FAVORITED = "View favorited";
export const VIEW_UNFAVORITED = "View unfavorited";
// Project State Events
export const STATE_CREATED = "State created";
export const STATE_UPDATED = "State updated";
@ -222,3 +228,7 @@ export const SNOOZED_NOTIFICATIONS = "Snoozed notifications viewed";
export const ARCHIVED_NOTIFICATIONS = "Archived notifications viewed";
// Groups
export const GROUP_WORKSPACE = "Workspace_metrics";
// Elements
export const E_VIEWS = "Views page";
export const E_VIEWS_EMPTY_STATE = "Views empty state";