From 242797d89e6bd38120b363511e14106eef4267e4 Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Dec 2024 12:04:28 +0530 Subject: [PATCH 1/5] chore: added icons and splitted issue header --- packages/hooks/src/index.ts | 1 + packages/types/src/project/index.ts | 1 + packages/types/src/project/project_link.d.ts | 22 +++ packages/ui/src/icons/activity-icon.tsx | 22 +++ packages/ui/src/icons/at-risk-icon.tsx | 30 ++++ packages/ui/src/icons/index.ts | 6 + packages/ui/src/icons/off-track-icon.tsx | 30 ++++ packages/ui/src/icons/on-track-icon.tsx | 48 +++++++ packages/ui/src/icons/overview-icon.tsx | 21 +++ packages/ui/src/icons/updates-icon.tsx | 18 +++ .../[projectId]/issues/(list)/header.tsx | 131 +----------------- web/ce/components/issues/header.tsx | 130 +++++++++++++++++ web/ce/components/issues/index.ts | 1 + .../components/dropdowns/member/avatar.tsx | 10 +- web/core/constants/event-tracker.ts | 4 +- 15 files changed, 341 insertions(+), 134 deletions(-) create mode 100644 packages/types/src/project/project_link.d.ts create mode 100644 packages/ui/src/icons/activity-icon.tsx create mode 100644 packages/ui/src/icons/at-risk-icon.tsx create mode 100644 packages/ui/src/icons/off-track-icon.tsx create mode 100644 packages/ui/src/icons/on-track-icon.tsx create mode 100644 packages/ui/src/icons/overview-icon.tsx create mode 100644 packages/ui/src/icons/updates-icon.tsx create mode 100644 web/ce/components/issues/header.tsx diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index c07642907fe..5e6ab579b5c 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,2 +1,3 @@ export * from "./use-local-storage"; export * from "./use-outside-click-detector"; +export * from "./use-local-storage"; diff --git a/packages/types/src/project/index.ts b/packages/types/src/project/index.ts index ef7308bf7da..f5478051eb5 100644 --- a/packages/types/src/project/index.ts +++ b/packages/types/src/project/index.ts @@ -1,2 +1,3 @@ export * from "./project_filters"; export * from "./projects"; +export * from "./project_link"; diff --git a/packages/types/src/project/project_link.d.ts b/packages/types/src/project/project_link.d.ts new file mode 100644 index 00000000000..45b9dfc6ac0 --- /dev/null +++ b/packages/types/src/project/project_link.d.ts @@ -0,0 +1,22 @@ +export type TProjectLinkEditableFields = { + title: string; + url: string; +}; + +export type TProjectLink = TProjectLinkEditableFields & { + created_by_id: string; + id: string; + metadata: any; + project_id: string; + + //need + created_at: Date; +}; + +export type TProjectLinkMap = { + [project_id: string]: TProjectLink; +}; + +export type TProjectLinkIdMap = { + [project_id: string]: string[]; +}; diff --git a/packages/ui/src/icons/activity-icon.tsx b/packages/ui/src/icons/activity-icon.tsx new file mode 100644 index 00000000000..2ac48283608 --- /dev/null +++ b/packages/ui/src/icons/activity-icon.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const ActivityIcon: React.FC = ({ className = "text-current", ...rest }) => ( + + + + + + + + + + +); diff --git a/packages/ui/src/icons/at-risk-icon.tsx b/packages/ui/src/icons/at-risk-icon.tsx new file mode 100644 index 00000000000..bb4437e6d9b --- /dev/null +++ b/packages/ui/src/icons/at-risk-icon.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const AtRiskIcon: React.FC = ({ width = "16", height = "16" }) => ( + + + + + + + + + + + + +); diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts index 573efd99fb7..01480c78d2f 100644 --- a/packages/ui/src/icons/index.ts +++ b/packages/ui/src/icons/index.ts @@ -41,3 +41,9 @@ export * from "./pi-chat"; export * from "./workspace-icon"; export * from "./teams"; export * from "./lead-icon"; +export * from "./activity-icon"; +export * from "./updates-icon"; +export * from "./overview-icon"; +export * from "./on-track-icon"; +export * from "./off-track-icon"; +export * from "./at-risk-icon"; diff --git a/packages/ui/src/icons/off-track-icon.tsx b/packages/ui/src/icons/off-track-icon.tsx new file mode 100644 index 00000000000..0d93d1b6057 --- /dev/null +++ b/packages/ui/src/icons/off-track-icon.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const OffTrackIcon: React.FC = ({ width = "16", height = "16" }) => ( + + + + + + + + + + + + +); diff --git a/packages/ui/src/icons/on-track-icon.tsx b/packages/ui/src/icons/on-track-icon.tsx new file mode 100644 index 00000000000..c384d4c8d76 --- /dev/null +++ b/packages/ui/src/icons/on-track-icon.tsx @@ -0,0 +1,48 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const OnTrackIcon: React.FC = ({ width = "16", height = "16" }) => ( + + + + + + + + + + + + + + + +); diff --git a/packages/ui/src/icons/overview-icon.tsx b/packages/ui/src/icons/overview-icon.tsx new file mode 100644 index 00000000000..81b07224b69 --- /dev/null +++ b/packages/ui/src/icons/overview-icon.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const OverviewIcon: React.FC = ({ width = "16", height = "16", className = "" }) => ( + + + +); diff --git a/packages/ui/src/icons/updates-icon.tsx b/packages/ui/src/icons/updates-icon.tsx new file mode 100644 index 00000000000..978eb5f0573 --- /dev/null +++ b/packages/ui/src/icons/updates-icon.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; + +import { ISvgIcons } from "./type"; + +export const UpdatesIcon: React.FC = ({ className = "text-current", ...rest }) => ( + + + + +); diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx index 1b1cffcc64a..a6d641a22e9 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx @@ -1,130 +1,3 @@ -"use client"; +import { IssuesHeader } from "@/plane-web/components/issues"; -import { observer } from "mobx-react"; -import { useParams } from "next/navigation"; -// icons -import { Briefcase, Circle, ExternalLink } from "lucide-react"; -// ui -import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui"; -// components -import { BreadcrumbLink, CountChip, Logo } from "@/components/common"; -// constants -import HeaderFilters from "@/components/issues/filters"; -import { EIssuesStoreType } from "@/constants/issue"; -// helpers -import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper"; -// hooks -import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store"; -import { useIssues } from "@/hooks/store/use-issues"; -import { useAppRouter } from "@/hooks/use-app-router"; -import { usePlatformOS } from "@/hooks/use-platform-os"; -import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions"; - -export const ProjectIssuesHeader = observer(() => { - // router - const router = useAppRouter(); - const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string }; - // store hooks - const { - issues: { getGroupIssueCount }, - } = useIssues(EIssuesStoreType.PROJECT); - - const { currentProjectDetails, loader } = useProject(); - - const { toggleCreateIssueModal } = useCommandPalette(); - const { setTrackElement } = useEventTracker(); - const { allowPermissions } = useUserPermissions(); - const { isMobile } = usePlatformOS(); - - const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH; - const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`; - - const issuesCount = getGroupIssueCount(undefined, undefined, false); - const canUserCreateIssue = allowPermissions( - [EUserPermissions.ADMIN, EUserPermissions.MEMBER], - EUserPermissionsLevel.PROJECT - ); - - return ( -
- -
- router.back()} isLoading={loader}> - - - - ) - ) : ( - - - - ) - } - /> - } - /> - - } />} - /> - - {issuesCount && issuesCount > 0 ? ( - 1 ? "issues" : "issue"} in this project`} - position="bottom" - > - - - ) : null} -
- {currentProjectDetails?.anchor ? ( - - - Public - - - ) : ( - <> - )} - - -
- -
- {canUserCreateIssue ? ( - - ) : ( - <> - )} - -
- ); -}); +export const ProjectIssueHeader = () => ; diff --git a/web/ce/components/issues/header.tsx b/web/ce/components/issues/header.tsx new file mode 100644 index 00000000000..a4c750061de --- /dev/null +++ b/web/ce/components/issues/header.tsx @@ -0,0 +1,130 @@ +"use client"; + +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +// icons +import { Briefcase, Circle, ExternalLink } from "lucide-react"; +// ui +import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui"; +// components +import { BreadcrumbLink, CountChip, Logo } from "@/components/common"; +// constants +import HeaderFilters from "@/components/issues/filters"; +import { EIssuesStoreType } from "@/constants/issue"; +// helpers +import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper"; +// hooks +import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store"; +import { useIssues } from "@/hooks/store/use-issues"; +import { useAppRouter } from "@/hooks/use-app-router"; +import { usePlatformOS } from "@/hooks/use-platform-os"; +import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions"; + +export const IssuesHeader = observer(() => { + // router + const router = useAppRouter(); + const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string }; + // store hooks + const { + issues: { getGroupIssueCount }, + } = useIssues(EIssuesStoreType.PROJECT); + + const { currentProjectDetails, loader } = useProject(); + + const { toggleCreateIssueModal } = useCommandPalette(); + const { setTrackElement } = useEventTracker(); + const { allowPermissions } = useUserPermissions(); + const { isMobile } = usePlatformOS(); + + const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH; + const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`; + + const issuesCount = getGroupIssueCount(undefined, undefined, false); + const canUserCreateIssue = allowPermissions( + [EUserPermissions.ADMIN, EUserPermissions.MEMBER], + EUserPermissionsLevel.PROJECT + ); + + return ( +
+ +
+ router.back()} isLoading={loader}> + + + + ) + ) : ( + + + + ) + } + /> + } + /> + + } />} + /> + + {issuesCount && issuesCount > 0 ? ( + 1 ? "issues" : "issue"} in this project`} + position="bottom" + > + + + ) : null} +
+ {currentProjectDetails?.anchor ? ( + + + Public + + + ) : ( + <> + )} + + +
+ +
+ {canUserCreateIssue ? ( + + ) : ( + <> + )} + +
+ ); +}); diff --git a/web/ce/components/issues/index.ts b/web/ce/components/issues/index.ts index 97b57af4b0c..01fc1d9acfa 100644 --- a/web/ce/components/issues/index.ts +++ b/web/ce/components/issues/index.ts @@ -4,3 +4,4 @@ export * from "./issue-modal"; export * from "./issue-details"; export * from "./quick-add"; export * from "./filters"; +export * from "./header"; diff --git a/web/core/components/dropdowns/member/avatar.tsx b/web/core/components/dropdowns/member/avatar.tsx index 0a7a92d4380..9907de3599e 100644 --- a/web/core/components/dropdowns/member/avatar.tsx +++ b/web/core/components/dropdowns/member/avatar.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react"; import { LucideIcon, Users } from "lucide-react"; // plane ui +import { cn } from "@plane/editor"; import { Avatar, AvatarGroup } from "@plane/ui"; // helpers import { getFileURL } from "@/helpers/file.helper"; @@ -13,17 +14,18 @@ type AvatarProps = { showTooltip: boolean; userIds: string | string[] | null; icon?: LucideIcon; + size?: "sm" | "md" | "base" | "lg" | number; }; export const ButtonAvatars: React.FC = observer((props) => { - const { showTooltip, userIds, icon: Icon } = props; + const { showTooltip, userIds, icon: Icon, size = "md" } = props; // store hooks const { getUserDetails } = useMember(); if (Array.isArray(userIds)) { if (userIds.length > 0) return ( - + {userIds.map((userId) => { const userDetails = getUserDetails(userId); @@ -39,12 +41,12 @@ export const ButtonAvatars: React.FC = observer((props) => { ); } } - return Icon ? : ; + return Icon ? : ; }); diff --git a/web/core/constants/event-tracker.ts b/web/core/constants/event-tracker.ts index 881c75b1929..7bcc6776007 100644 --- a/web/core/constants/event-tracker.ts +++ b/web/core/constants/event-tracker.ts @@ -8,6 +8,8 @@ export type IssueEventProps = { export type EventProps = { eventName: string; payload: any; + updates?: any; + path?: string; }; export const getWorkspaceEventPayload = (payload: any) => ({ @@ -206,7 +208,7 @@ export const PRODUCT_TOUR_COMPLETED = "Product tour completed"; export const PRODUCT_TOUR_SKIPPED = "Product tour skipped"; // Dashboard Events export const CHANGELOG_REDIRECTED = "Changelog redirected"; -export const GITHUB_REDIRECTED = "GitHub redirected"; +export const GITHUB_REDIRECTED = "Github redirected"; // Sidebar Events export const SIDEBAR_CLICKED = "Sidenav clicked"; // Global View Events From a88daaeb310865248fa2a92dd953545a902fefd1 Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Dec 2024 12:10:05 +0530 Subject: [PATCH 2/5] fix: added ee filler component --- web/ee/components/issues/header.tsx | 1 + web/ee/components/issues/index.ts | 1 + 2 files changed, 2 insertions(+) create mode 100644 web/ee/components/issues/header.tsx diff --git a/web/ee/components/issues/header.tsx b/web/ee/components/issues/header.tsx new file mode 100644 index 00000000000..8049127f423 --- /dev/null +++ b/web/ee/components/issues/header.tsx @@ -0,0 +1 @@ +export * from "ce/components/issues/header"; diff --git a/web/ee/components/issues/index.ts b/web/ee/components/issues/index.ts index 97b57af4b0c..01fc1d9acfa 100644 --- a/web/ee/components/issues/index.ts +++ b/web/ee/components/issues/index.ts @@ -4,3 +4,4 @@ export * from "./issue-modal"; export * from "./issue-details"; export * from "./quick-add"; export * from "./filters"; +export * from "./header"; From 59cc69e9758da36ba2cba918fb08a00de71addcc Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Dec 2024 12:35:10 +0530 Subject: [PATCH 3/5] fix: component name fixed --- .../projects/(detail)/[projectId]/issues/(list)/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx index a6d641a22e9..c3aacaebb0a 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx @@ -1,3 +1,3 @@ import { IssuesHeader } from "@/plane-web/components/issues"; -export const ProjectIssueHeader = () => ; +export const ProjectIssuesHeader = () => ; From 349e001333d0d54ed7d6bf43d471f9e9f7f4822a Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Dec 2024 12:40:01 +0530 Subject: [PATCH 4/5] fix: removed dupes --- packages/hooks/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 5e6ab579b5c..c07642907fe 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,3 +1,2 @@ export * from "./use-local-storage"; export * from "./use-outside-click-detector"; -export * from "./use-local-storage"; From 5329e6dbf3129bfc428618da5deaa524bbf00bc3 Mon Sep 17 00:00:00 2001 From: gakshita Date: Fri, 13 Dec 2024 12:44:11 +0530 Subject: [PATCH 5/5] fix: casing --- web/core/constants/event-tracker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/core/constants/event-tracker.ts b/web/core/constants/event-tracker.ts index 7bcc6776007..cd2e1c3bec6 100644 --- a/web/core/constants/event-tracker.ts +++ b/web/core/constants/event-tracker.ts @@ -208,7 +208,7 @@ export const PRODUCT_TOUR_COMPLETED = "Product tour completed"; export const PRODUCT_TOUR_SKIPPED = "Product tour skipped"; // Dashboard Events export const CHANGELOG_REDIRECTED = "Changelog redirected"; -export const GITHUB_REDIRECTED = "Github redirected"; +export const GITHUB_REDIRECTED = "GitHub redirected"; // Sidebar Events export const SIDEBAR_CLICKED = "Sidenav clicked"; // Global View Events