diff --git a/packages/constants/src/inbox.ts b/packages/constants/src/inbox.ts index 856e341b309..45a9755dbf9 100644 --- a/packages/constants/src/inbox.ts +++ b/packages/constants/src/inbox.ts @@ -1,5 +1,34 @@ +import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types"; + +export enum EInboxIssueCurrentTab { + OPEN = "open", + CLOSED = "closed", +} + +export enum EInboxIssueStatus { + PENDING = -2, + DECLINED = -1, + SNOOZED = 0, + ACCEPTED = 1, + DUPLICATE = 2, +} + +export type TInboxIssueCurrentTab = EInboxIssueCurrentTab; +export type TInboxIssueStatus = EInboxIssueStatus; +export type TInboxIssue = { + id: string; + status: TInboxIssueStatus; + snoozed_till: Date | null; + duplicate_to: string | undefined; + source: string; + issue: TIssue; + created_by: string; + duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined; +}; + export const INBOX_STATUS: { key: string; + status: TInboxIssueStatus; title: string; description: () => string; textColor: (snoozeDatePassed: boolean) => string; @@ -8,6 +37,7 @@ export const INBOX_STATUS: { { key: "pending", title: "inbox_issue.status.pending.title", + status: EInboxIssueStatus.PENDING, description: () => `inbox_issue.status.pending.description`, textColor: (snoozeDatePassed: boolean = false) => snoozeDatePassed ? "" : "text-[#AB6400]", @@ -17,6 +47,7 @@ export const INBOX_STATUS: { { key: "declined", title: "inbox_issue.status.declined.title", + status: EInboxIssueStatus.DECLINED, description: () => `inbox_issue.status.declined.description`, textColor: (snoozeDatePassed: boolean = false) => snoozeDatePassed ? "" : "text-[#CE2C31]", @@ -26,6 +57,7 @@ export const INBOX_STATUS: { { key: "snoozed", title: "inbox_issue.status.snoozed.title", + status: EInboxIssueStatus.SNOOZED, description: () => `inbox_issue.status.snoozed.description`, textColor: (snoozeDatePassed: boolean = false) => snoozeDatePassed ? "text-red-500" : "text-custom-text-400", @@ -35,6 +67,7 @@ export const INBOX_STATUS: { { key: "accepted", title: "inbox_issue.status.accepted.title", + status: EInboxIssueStatus.ACCEPTED, description: () => `inbox_issue.status.accepted.description`, textColor: (snoozeDatePassed: boolean = false) => snoozeDatePassed ? "" : "text-[#3E9B4F]", @@ -44,6 +77,7 @@ export const INBOX_STATUS: { { key: "duplicate", title: "inbox_issue.status.duplicate.title", + status: EInboxIssueStatus.DUPLICATE, description: () => `inbox_issue.status.duplicate.description`, textColor: (snoozeDatePassed: boolean = false) => snoozeDatePassed ? "" : "text-custom-text-200", diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox.d.ts index 9cbd91003c6..30ad0120c81 100644 --- a/packages/types/src/inbox.d.ts +++ b/packages/types/src/inbox.d.ts @@ -2,23 +2,6 @@ import { TPaginationInfo } from "./common"; import { TIssuePriorities } from "./issues"; import { TIssue } from "./issues/base"; -enum EInboxIssueCurrentTab { - OPEN = "open", - CLOSED = "closed", -} - -enum EInboxIssueStatus { - PENDING = -2, - DECLINED = -1, - SNOOZED = 0, - ACCEPTED = 1, - DUPLICATE = 2, -} - -export type TInboxIssueCurrentTab = EInboxIssueCurrentTab; - -export type TInboxIssueStatus = EInboxIssueStatus; - // filters export type TInboxIssueFilterMemberKeys = "assignees" | "created_by"; @@ -75,17 +58,6 @@ export type TInboxDuplicateIssueDetails = { name: string; }; -export type TInboxIssue = { - id: string; - status: TInboxIssueStatus; - snoozed_till: Date | null; - duplicate_to: string | undefined; - source: string; - issue: TIssue; - created_by: string; - duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined; -}; - export type TInboxIssuePaginationInfo = TPaginationInfo & { total_results: number; }; diff --git a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx index dcd3cadec03..e3ba761f5d8 100644 --- a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx +++ b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx @@ -1,13 +1,13 @@ import { FC } from "react"; import { observer } from "mobx-react"; import { X } from "lucide-react"; +import { INBOX_STATUS, TInboxIssueStatus } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; -import { TInboxIssueStatus } from "@plane/types"; // constants import { Tag } from "@plane/ui"; // hooks -import { INBOX_STATUS } from "@/helpers/inbox.helper"; import { useProjectInbox } from "@/hooks/store"; +import { InboxStatusIcon } from "../../inbox-status-icon"; export const InboxIssueAppliedFiltersStatus: FC = observer(() => { // hooks @@ -30,7 +30,7 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => { return (
- +
{t(optionDetail?.title)}
{handleFilterValue(optionDetail?.status).length >= 1 && ( diff --git a/web/core/components/inbox/inbox-filter/filters/status.tsx b/web/core/components/inbox/inbox-filter/filters/status.tsx index 8e00b76292f..4fe5f563de0 100644 --- a/web/core/components/inbox/inbox-filter/filters/status.tsx +++ b/web/core/components/inbox/inbox-filter/filters/status.tsx @@ -1,14 +1,14 @@ import { FC, useState } from "react"; import { observer } from "mobx-react"; // types +import { INBOX_STATUS, TInboxIssueStatus } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; -import { TInboxIssueStatus } from "@plane/types"; // components import { FilterHeader, FilterOption } from "@/components/issues"; // constants // hooks -import { INBOX_STATUS } from "@/helpers/inbox.helper"; import { useProjectInbox } from "@/hooks/store/use-project-inbox"; +import { InboxStatusIcon } from "../../inbox-status-icon"; type Props = { searchQuery: string; @@ -54,7 +54,7 @@ export const FilterStatus: FC = observer((props) => { key={status.key} isChecked={filterValue?.includes(status.status) ? true : false} onClick={() => handleStatusFilterSelect(status.status)} - icon={} + icon={} title={t(status.title)} /> )) diff --git a/web/core/components/inbox/inbox-issue-status.tsx b/web/core/components/inbox/inbox-issue-status.tsx index b09f7baa1d5..96d46025cd5 100644 --- a/web/core/components/inbox/inbox-issue-status.tsx +++ b/web/core/components/inbox/inbox-issue-status.tsx @@ -2,12 +2,13 @@ import React from "react"; import { observer } from "mobx-react"; // constants // helpers +import { INBOX_STATUS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { cn } from "@/helpers/common.helper"; import { findHowManyDaysLeft } from "@/helpers/date-time.helper"; // store -import { INBOX_STATUS } from "@/helpers/inbox.helper"; import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store"; +import { InboxStatusIcon } from "./inbox-status-icon"; type Props = { inboxIssue: IInboxIssueStore; @@ -38,7 +39,7 @@ export const InboxIssueStatus: React.FC = observer((props) => { )} >
- +
{inboxIssue?.status === 0 && inboxIssue?.snoozed_till ? description : t(inboxIssueStatusDetail.title)}
diff --git a/web/core/components/inbox/inbox-status-icon.tsx b/web/core/components/inbox/inbox-status-icon.tsx new file mode 100644 index 00000000000..d1f7b93f8ee --- /dev/null +++ b/web/core/components/inbox/inbox-status-icon.tsx @@ -0,0 +1,24 @@ +import { AlertTriangle, CheckCircle2, Clock, Copy, XCircle } from "lucide-react"; +import { TInboxIssueStatus, EInboxIssueStatus } from "@plane/constants"; + +export const InboxStatusIcon = ({ + type, + size, + className, +}: { + type: TInboxIssueStatus; + size?: number; + className?: string; +}) => { + const icons = { + [EInboxIssueStatus.PENDING]: AlertTriangle, + [EInboxIssueStatus.DECLINED]: XCircle, + [EInboxIssueStatus.SNOOZED]: Clock, + [EInboxIssueStatus.ACCEPTED]: CheckCircle2, + [EInboxIssueStatus.DUPLICATE]: Copy, + }; + + if (type === undefined) return null; + const Icon = icons[type]; + return ; +}; diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx index b8c86e0dee5..060c845b8c8 100644 --- a/web/core/components/inbox/sidebar/root.tsx +++ b/web/core/components/inbox/sidebar/root.tsx @@ -2,7 +2,7 @@ import { FC, useCallback, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react"; -import { TInboxIssueCurrentTab } from "@plane/types"; +import { TInboxIssueCurrentTab } from "@plane/constants"; import { Header, Loader, EHeaderVariant } from "@plane/ui"; // components import { EmptyState } from "@/components/empty-state"; diff --git a/web/core/services/inbox/inbox-issue.service.ts b/web/core/services/inbox/inbox-issue.service.ts index 8837b6e74a3..737065d7003 100644 --- a/web/core/services/inbox/inbox-issue.service.ts +++ b/web/core/services/inbox/inbox-issue.service.ts @@ -1,5 +1,6 @@ // types -import type { TInboxIssue, TIssue, TInboxIssueWithPagination, TInboxForm } from "@plane/types"; +import { TInboxIssue } from "@plane/constants"; +import type { TIssue, TInboxIssueWithPagination, TInboxForm } from "@plane/types"; import { API_BASE_URL } from "@/helpers/common.helper"; import { APIService } from "@/services/api.service"; // helpers diff --git a/web/core/store/inbox/inbox-issue.store.ts b/web/core/store/inbox/inbox-issue.store.ts index 31bb5f591a4..2f72575b142 100644 --- a/web/core/store/inbox/inbox-issue.store.ts +++ b/web/core/store/inbox/inbox-issue.store.ts @@ -1,7 +1,8 @@ import clone from "lodash/clone"; import set from "lodash/set"; import { makeObservable, observable, runInAction, action } from "mobx"; -import { TIssue, TInboxIssue, TInboxIssueStatus, TInboxDuplicateIssueDetails } from "@plane/types"; +import { TInboxIssue, TInboxIssueStatus } from "@plane/constants"; +import { TIssue, TInboxDuplicateIssueDetails } from "@plane/types"; // helpers import { EInboxIssueStatus } from "@/helpers/inbox.helper"; // local db diff --git a/web/core/store/inbox/project-inbox.store.ts b/web/core/store/inbox/project-inbox.store.ts index 4dcb7297734..6ca0f31ba29 100644 --- a/web/core/store/inbox/project-inbox.store.ts +++ b/web/core/store/inbox/project-inbox.store.ts @@ -5,9 +5,8 @@ import set from "lodash/set"; import { action, computed, makeObservable, observable, runInAction } from "mobx"; import { computedFn } from "mobx-utils"; // types +import { TInboxIssue, TInboxIssueCurrentTab } from "@plane/constants"; import { - TInboxIssue, - TInboxIssueCurrentTab, TInboxIssueFilter, TInboxIssueSorting, TInboxIssuePaginationInfo, diff --git a/web/helpers/inbox.helper.ts b/web/helpers/inbox.helper.ts index 3ffa01386e9..52a85b0ba29 100644 --- a/web/helpers/inbox.helper.ts +++ b/web/helpers/inbox.helper.ts @@ -1,7 +1,4 @@ import { subDays } from "date-fns"; -import { AlertTriangle, CheckCircle2, Clock, Copy, LucideIcon, XCircle } from "lucide-react"; -import { INBOX_STATUS as INBOX_STATUS_CONSTANTS } from "@plane/constants"; -import { TInboxIssueStatus } from "@plane/types"; import { renderFormattedPayloadDate } from "./date-time.helper"; export enum EInboxIssueCurrentTab { @@ -74,33 +71,3 @@ export const PAST_DURATION_FILTER_OPTIONS: { value: EPastDurationFilters.LAST_30_DAYS, }, ]; - -const INBOX_STATUS_ICONS = { - pending: AlertTriangle, - declined: XCircle, - snoozed: Clock, - accepted: CheckCircle2, - duplicate: Copy, -}; - -const INBOX_STATUS_KEYS = { - pending: EInboxIssueStatus.PENDING, - declined: EInboxIssueStatus.DECLINED, - snoozed: EInboxIssueStatus.SNOOZED, - accepted: EInboxIssueStatus.ACCEPTED, - duplicate: EInboxIssueStatus.DUPLICATE, -}; - -export const INBOX_STATUS: { - key: string; - status: TInboxIssueStatus; - icon: LucideIcon; - title: string; - description: () => string; - textColor: (snoozeDatePassed: boolean) => string; - bgColor: (snoozeDatePassed: boolean) => string; -}[] = INBOX_STATUS_CONSTANTS.map((s) => ({ - ...s, - icon: INBOX_STATUS_ICONS[s.key as keyof typeof INBOX_STATUS_ICONS], - status: INBOX_STATUS_KEYS[s.key as keyof typeof INBOX_STATUS_KEYS], -}));