From a678844073b9541b9a6f4270997c03771649d30a Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 2 May 2024 20:39:43 +0530 Subject: [PATCH] [WEB-859] [WEB-1162] chore: issue detail improvement and assignees filter fix (#4342) * chore: created by option added to inbox issue detail section * chore: issue detail page improvement * fix: inbox assignee filter key --- packages/types/src/inbox.d.ts | 2 +- .../inbox/content/issue-properties.tsx | 1 + .../inbox-filter/applied-filters/member.tsx | 4 +-- .../inbox-filter/applied-filters/root.tsx | 2 +- .../inbox-filter/filters/filter-selection.tsx | 4 +-- .../issues/issue-detail/sidebar.tsx | 22 +--------------- .../issues/peek-overview/properties.tsx | 26 ++----------------- 7 files changed, 10 insertions(+), 51 deletions(-) diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox.d.ts index 01a1dfce3..0f0b93e4f 100644 --- a/packages/types/src/inbox.d.ts +++ b/packages/types/src/inbox.d.ts @@ -20,7 +20,7 @@ export type TInboxIssueCurrentTab = EInboxIssueCurrentTab; export type TInboxIssueStatus = EInboxIssueStatus; // filters -export type TInboxIssueFilterMemberKeys = "assignee" | "created_by"; +export type TInboxIssueFilterMemberKeys = "assignees" | "created_by"; export type TInboxIssueFilterDateKeys = "created_at" | "updated_at"; diff --git a/web/components/inbox/content/issue-properties.tsx b/web/components/inbox/content/issue-properties.tsx index 89ddbdef7..4ec9bb14d 100644 --- a/web/components/inbox/content/issue-properties.tsx +++ b/web/components/inbox/content/issue-properties.tsx @@ -31,6 +31,7 @@ export const InboxIssueContentProperties: React.FC = observer((props) => const minDate = issue.start_date ? getDate(issue.start_date) : null; minDate?.setDate(minDate.getDate()); if (!issue || !issue?.id) return <>; + return (
diff --git a/web/components/inbox/inbox-filter/applied-filters/member.tsx b/web/components/inbox/inbox-filter/applied-filters/member.tsx index 5d488a23c..b234d3c57 100644 --- a/web/components/inbox/inbox-filter/applied-filters/member.tsx +++ b/web/components/inbox/inbox-filter/applied-filters/member.tsx @@ -34,8 +34,8 @@ export const InboxIssueAppliedFiltersMember: FC if (!optionDetail) return <>; return (
-
- +
+
{optionDetail?.display_name}
{ {/* priority */} {/* assignees */} - + {/* created_by */} {/* label */} diff --git a/web/components/inbox/inbox-filter/filters/filter-selection.tsx b/web/components/inbox/inbox-filter/filters/filter-selection.tsx index fd1dc951c..1d7ddd0ed 100644 --- a/web/components/inbox/inbox-filter/filters/filter-selection.tsx +++ b/web/components/inbox/inbox-filter/filters/filter-selection.tsx @@ -60,8 +60,8 @@ export const InboxIssueFilterSelection: FC = observer(() => { {/* assignees */}
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx index 60221f4c2..74be38f02 100644 --- a/web/components/issues/issue-detail/sidebar.tsx +++ b/web/components/issues/issue-detail/sidebar.tsx @@ -13,7 +13,6 @@ import { CopyPlus, CalendarClock, CalendarCheck2, - UserCircle2, } from "lucide-react"; // hooks // components @@ -37,7 +36,6 @@ import { } from "@/components/dropdowns"; // ui // helpers -import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; import { DeleteIssueModal, IssueLinkRoot, @@ -56,7 +54,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper" import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; import { copyTextToClipboard } from "@/helpers/string.helper"; // types -import { useEstimate, useIssueDetail, useMember, useProject, useProjectState, useUser } from "@/hooks/store"; +import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // components import type { TIssueOperations } from "./root"; @@ -90,12 +88,9 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { } = useIssueDetail(); const { getStateById } = useProjectState(); const { isMobile } = usePlatformOS(); - const { getUserDetails } = useMember(); const issue = getIssueById(issueId); if (!issue) return <>; - const createdByDetails = getUserDetails(issue.created_by); - const handleCopyText = () => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => { @@ -262,21 +257,6 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { />
- {createdByDetails && ( -
-
- - Created by -
- -
- - {createdByDetails?.display_name} -
- -
- )} -
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx index 2564918b7..00ffa9100 100644 --- a/web/components/issues/peek-overview/properties.tsx +++ b/web/components/issues/peek-overview/properties.tsx @@ -10,11 +10,10 @@ import { XCircle, CalendarClock, CalendarCheck2, - UserCircle2, } from "lucide-react"; // hooks // ui icons -import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui"; +import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui"; // components import { DateDropdown, @@ -23,7 +22,6 @@ import { MemberDropdown, StateDropdown, } from "@/components/dropdowns"; -import { ButtonAvatars } from "@/components/dropdowns/member/avatar"; import { IssueLinkRoot, IssueCycleSelect, @@ -37,8 +35,7 @@ import { import { cn } from "@/helpers/common.helper"; import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper"; -import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store"; -import { usePlatformOS } from "@/hooks/use-platform-os"; +import { useIssueDetail, useProject, useProjectState } from "@/hooks/store"; interface IPeekOverviewProperties { workspaceSlug: string; @@ -56,12 +53,9 @@ export const PeekOverviewProperties: FC = observer((pro issue: { getIssueById }, } = useIssueDetail(); const { getStateById } = useProjectState(); - const { getUserDetails } = useMember(); - const { isMobile } = usePlatformOS(); // derived values const issue = getIssueById(issueId); if (!issue) return <>; - const createdByDetails = getUserDetails(issue?.created_by); const projectDetails = getProjectById(issue.project_id); const isEstimateEnabled = projectDetails?.estimate; const stateDetails = getStateById(issue.state_id); @@ -137,22 +131,6 @@ export const PeekOverviewProperties: FC = observer((pro />
- {/* created by */} - {createdByDetails && ( -
-
- - Created by -
- -
- - {createdByDetails?.display_name} -
- -
- )} - {/* start date */}