From c8736f13ec45418b6a157a69513b6b959f6fda81 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Tue, 18 Jun 2024 16:59:15 +0530 Subject: [PATCH 1/3] [WEB-1635] style: fix vertical section tabs highlights. (#4855) * [WEB-1635] style: fix vertical section tabs highlights. * fix: highlights in archive tabs. --- web/core/components/archives/archive-tabs-list.tsx | 3 +-- web/core/constants/dashboard.ts | 10 +++++----- web/core/constants/profile.ts | 8 ++++---- web/core/constants/project.ts | 14 +++++++------- web/core/constants/workspace.ts | 12 ++++++------ 5 files changed, 23 insertions(+), 24 deletions(-) diff --git a/web/core/components/archives/archive-tabs-list.tsx b/web/core/components/archives/archive-tabs-list.tsx index 8088d745b1..d1daeb77fb 100644 --- a/web/core/components/archives/archive-tabs-list.tsx +++ b/web/core/components/archives/archive-tabs-list.tsx @@ -11,7 +11,6 @@ export const ArchiveTabsList: FC = observer(() => { // router const { workspaceSlug, projectId } = useParams(); const pathname = usePathname(); - const activeTab = pathname.split("/").pop(); // store hooks const { getProjectById } = useProject(); @@ -28,7 +27,7 @@ export const ArchiveTabsList: FC = observer(() => { pathname === `${baseUrl}`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`, Icon: Home, }, { @@ -272,7 +272,7 @@ export const SIDEBAR_MENU_ITEMS: { label: "Analytics", href: `/analytics`, access: EUserWorkspaceRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics`), + highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics/`), Icon: BarChart2, }, { @@ -280,7 +280,7 @@ export const SIDEBAR_MENU_ITEMS: { label: "Projects", href: `/projects`, access: EUserWorkspaceRoles.GUEST, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects/`, Icon: Briefcase, }, { @@ -288,7 +288,7 @@ export const SIDEBAR_MENU_ITEMS: { label: "All Issues", href: `/workspace-views/all-issues`, access: EUserWorkspaceRoles.GUEST, - highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views`), + highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views/`), Icon: CheckCircle, }, { @@ -296,7 +296,7 @@ export const SIDEBAR_MENU_ITEMS: { label: "Active Cycles", href: `/active-cycles`, access: EUserWorkspaceRoles.GUEST, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles/`, Icon: ContrastIcon, }, ]; diff --git a/web/core/constants/profile.ts b/web/core/constants/profile.ts index 111332d73b..cf5066177e 100644 --- a/web/core/constants/profile.ts +++ b/web/core/constants/profile.ts @@ -13,21 +13,21 @@ export const PROFILE_ACTION_LINKS: { key: "profile", label: "Profile", href: `/profile`, - highlight: (pathname: string) => pathname === "/profile", + highlight: (pathname: string) => pathname === "/profile/", Icon: CircleUser, }, { key: "security", label: "Security", href: `/profile/security`, - highlight: (pathname: string) => pathname === "/profile/security", + highlight: (pathname: string) => pathname === "/profile/security/", Icon: KeyRound, }, { key: "activity", label: "Activity", href: `/profile/activity`, - highlight: (pathname: string) => pathname === "/profile/activity", + highlight: (pathname: string) => pathname === "/profile/activity/", Icon: Activity, }, { @@ -41,7 +41,7 @@ export const PROFILE_ACTION_LINKS: { key: "notifications", label: "Notifications", href: `/profile/notifications`, - highlight: (pathname: string) => pathname === "/profile/notifications", + highlight: (pathname: string) => pathname === "/profile/notifications/", Icon: Bell, }, ]; diff --git a/web/core/constants/project.ts b/web/core/constants/project.ts index 5cbea431ae..d48d8d1463 100644 --- a/web/core/constants/project.ts +++ b/web/core/constants/project.ts @@ -80,7 +80,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "General", href: `/settings`, access: EUserProjectRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`, Icon: SettingIcon, }, { @@ -88,7 +88,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "Members", href: `/settings/members`, access: EUserProjectRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`, Icon: SettingIcon, }, { @@ -96,7 +96,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "Features", href: `/settings/features`, access: EUserProjectRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features/`, Icon: SettingIcon, }, { @@ -104,7 +104,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "States", href: `/settings/states`, access: EUserProjectRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states/`, Icon: SettingIcon, }, { @@ -112,7 +112,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "Labels", href: `/settings/labels`, access: EUserProjectRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels/`, Icon: SettingIcon, }, { @@ -120,7 +120,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "Estimates", href: `/settings/estimates`, access: EUserProjectRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates/`, Icon: SettingIcon, }, { @@ -128,7 +128,7 @@ export const PROJECT_SETTINGS_LINKS: { label: "Automations", href: `/settings/automations`, access: EUserProjectRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations/`, Icon: SettingIcon, }, ]; diff --git a/web/core/constants/workspace.ts b/web/core/constants/workspace.ts index 1153123652..d5b1bb7b8a 100644 --- a/web/core/constants/workspace.ts +++ b/web/core/constants/workspace.ts @@ -149,7 +149,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "General", href: `/settings`, access: EUserWorkspaceRoles.GUEST, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`, Icon: SettingIcon, }, { @@ -157,7 +157,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "Members", href: `/settings/members`, access: EUserWorkspaceRoles.GUEST, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`, Icon: SettingIcon, }, { @@ -165,7 +165,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "Billing and plans", href: `/settings/billing`, access: EUserWorkspaceRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`, Icon: SettingIcon, }, { @@ -173,7 +173,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "Exports", href: `/settings/exports`, access: EUserWorkspaceRoles.MEMBER, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`, Icon: SettingIcon, }, { @@ -181,7 +181,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "Webhooks", href: `/settings/webhooks`, access: EUserWorkspaceRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`, Icon: SettingIcon, }, { @@ -189,7 +189,7 @@ export const WORKSPACE_SETTINGS_LINKS: { label: "API tokens", href: `/settings/api-tokens`, access: EUserWorkspaceRoles.ADMIN, - highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens`, + highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`, Icon: SettingIcon, }, ]; From 8500c6320528023a339a5d4b5326e53926a14f09 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Tue, 18 Jun 2024 17:45:24 +0530 Subject: [PATCH 2/3] fix issue pagination cursor logic (#4857) --- .../gantt-chart/sidebar/issues/sidebar.tsx | 14 +++++++++++++- web/core/components/inbox/sidebar/root.tsx | 8 +------- .../store/issue/helpers/base-issues.store.ts | 18 +++++++----------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx index e295737dfe..7fe7bbc02c 100644 --- a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx +++ b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx @@ -8,6 +8,7 @@ import { Loader } from "@plane/ui"; import { IGanttBlock, IBlockUpdateData } from "@/components/gantt-chart/types"; //hooks import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; +import { useIssuesStore } from "@/hooks/use-issue-layout-store"; import { TSelectionHelper } from "@/hooks/use-multiple-select"; import { GanttDnDHOC } from "../gantt-dnd-HOC"; import { handleOrderChange } from "../utils"; @@ -41,9 +42,20 @@ export const IssueGanttSidebar: React.FC = observer((props) => { selectionHelpers, } = props; + const { + issues: { getIssueLoader }, + } = useIssuesStore(); + const [intersectionElement, setIntersectionElement] = useState(null); - useIntersectionObserver(ganttContainerRef, intersectionElement, loadMoreBlocks, "50% 0% 50% 0%"); + const isPaginating = !!getIssueLoader(); + + useIntersectionObserver( + ganttContainerRef, + isPaginating ? null : intersectionElement, + loadMoreBlocks, + "50% 0% 50% 0%" + ); const handleOnDrop = ( draggingBlockId: string | undefined, diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx index de6597fc31..1e2ace4aec 100644 --- a/web/core/components/inbox/sidebar/root.tsx +++ b/web/core/components/inbox/sidebar/root.tsx @@ -17,7 +17,6 @@ import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper"; import { useProject, useProjectInbox } from "@/hooks/store"; import { useAppRouter } from "@/hooks/use-app-router"; import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; -import { useIssuesStore } from "@/hooks/use-issue-layout-store"; type IInboxSidebarProps = { workspaceSlug: string; @@ -52,9 +51,6 @@ export const InboxSidebar: FC = observer((props) => { fetchInboxPaginationIssues, getAppliedFiltersCount, } = useProjectInbox(); - const { - issues: { getIssueLoader }, - } = useIssuesStore(); const router = useAppRouter(); @@ -63,10 +59,8 @@ export const InboxSidebar: FC = observer((props) => { fetchInboxPaginationIssues(workspaceSlug.toString(), projectId.toString()); }, [workspaceSlug, projectId, fetchInboxPaginationIssues]); - const isPaginating = !!getIssueLoader(); - // page observer - useIntersectionObserver(containerRef, isPaginating ? null : elementRef, fetchNextPages, "20%"); + useIntersectionObserver(containerRef, elementRef, fetchNextPages, "20%"); return (
diff --git a/web/core/store/issue/helpers/base-issues.store.ts b/web/core/store/issue/helpers/base-issues.store.ts index 2edb11735b..3e70b66d35 100644 --- a/web/core/store/issue/helpers/base-issues.store.ts +++ b/web/core/store/issue/helpers/base-issues.store.ts @@ -299,23 +299,19 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore { getIssueIds = (groupId?: string, subGroupId?: string) => { const groupedIssueIds = this.groupedIssueIds; - const displayFilters = this.issueFilterStore?.issueFilters?.displayFilters; - if (!displayFilters || !groupedIssueIds) return undefined; + if (!groupedIssueIds) return undefined; - const subGroupBy = displayFilters?.sub_group_by; - const groupBy = displayFilters?.group_by; - - const allIssues = groupedIssueIds[ALL_ISSUES]; - if (!groupBy && !subGroupBy && allIssues && Array.isArray(allIssues)) { + const allIssues = groupedIssueIds[ALL_ISSUES] ?? []; + if (!this.groupBy && !this.subGroupBy && allIssues && Array.isArray(allIssues)) { return allIssues as string[]; } - if (groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) { - return groupedIssueIds[groupId] as string[]; + if (this.groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) { + return (groupedIssueIds[groupId] ?? []) as string[]; } - if (groupBy && subGroupBy && groupId && subGroupId) { - return (groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId] as string[]; + if (this.groupBy && this.subGroupBy && groupId && subGroupId) { + return ((groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? []) as string[]; } return undefined; From 135024a9409a69fdafed3b790bfb87c3a4d850ab Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Tue, 18 Jun 2024 17:51:52 +0530 Subject: [PATCH 3/3] [WEB-1397] chore: update space app types (#4861) * chore: update types * chore: dummy page actions components * chore: rename component * refactor: rearrange declarations --- space/core/types/issue.d.ts | 12 +++--------- space/core/types/project.d.ts | 18 ------------------ .../[projectId]/pages/(detail)/header.tsx | 15 +++++++++------ web/ce/components/pages/extra-actions.tsx | 1 + web/ce/components/pages/index.ts | 1 + web/ee/components/pages/extra-actions.tsx | 1 + web/ee/components/pages/index.ts | 1 + 7 files changed, 16 insertions(+), 33 deletions(-) delete mode 100644 space/core/types/project.d.ts create mode 100644 web/ce/components/pages/extra-actions.tsx create mode 100644 web/ce/components/pages/index.ts create mode 100644 web/ee/components/pages/extra-actions.tsx create mode 100644 web/ee/components/pages/index.ts diff --git a/space/core/types/issue.d.ts b/space/core/types/issue.d.ts index 5b729d1c09..b9676810ef 100644 --- a/space/core/types/issue.d.ts +++ b/space/core/types/issue.d.ts @@ -1,4 +1,4 @@ -import { IStateLite, IWorkspaceLite, TIssuePriorities, TStateGroups } from "@plane/types"; +import { IStateLite, IWorkspaceLite, TIssue, TIssuePriorities, TStateGroups } from "@plane/types"; export type TIssueLayout = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt"; export type TIssueLayoutOptions = { @@ -39,18 +39,13 @@ export type TIssuesResponse = { issues: IIssue[]; }; -export interface IIssue { - id: string; +export interface IIssue + extends Pick { comments: Comment[]; - description_html: string; label_details: any; - name: string; - priority: TIssuePriorityKey | null; project: string; project_detail: any; reactions: IIssueReaction[]; - sequence_id: number; - start_date: any; state: string; state_detail: { id: string; @@ -58,7 +53,6 @@ export interface IIssue { group: TIssueGroupKey; color: string; }; - target_date: any; votes: IVote[]; } diff --git a/space/core/types/project.d.ts b/space/core/types/project.d.ts deleted file mode 100644 index c0ae025831..0000000000 --- a/space/core/types/project.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { TLogoProps } from "@plane/types"; - -export type TViewDetails = { - list: boolean; - gantt: boolean; - kanban: boolean; - calendar: boolean; - spreadsheet: boolean; -}; - -export type TProjectDetails = { - id: string; - identifier: string; - name: string; - cover_image: string | undefined; - logo_props: TLogoProps; - description: string; -}; diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx index 73a9deda5f..be903635c2 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx @@ -10,11 +10,13 @@ import { TLogoProps } from "@plane/types"; import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui"; // components import { BreadcrumbLink, Logo } from "@/components/common"; -// helper +// helpers import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper"; // hooks import { usePage, useProject } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; +// plane web components +import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages"; export interface IPagesHeaderProps { showButton?: boolean; @@ -28,6 +30,10 @@ export const PageDetailsHeader = observer(() => { // store hooks const { currentProjectDetails } = useProject(); const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? ""); + // use platform + const { platform } = usePlatformOS(); + // derived values + const isMac = platform === "MacOS"; const handlePageLogoUpdate = async (data: TLogoProps) => { if (data) { @@ -48,10 +54,6 @@ export const PageDetailsHeader = observer(() => { }); } }; - // use platform - const { platform } = usePlatformOS(); - // derived values - const isMac = platform === "MacOS"; return (
@@ -146,6 +148,7 @@ export const PageDetailsHeader = observer(() => {
+ {isContentEditable && (