refactor: priority icon component (#2132)

This commit is contained in:
Aaryan Khandelwal 2023-09-11 14:35:58 +05:30 committed by GitHub
parent 991258084e
commit 7bb73b74ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 117 additions and 95 deletions

View File

@ -1,13 +1,13 @@
// nivo
import { BarDatum } from "@nivo/bar";
// icons
import { getPriorityIcon } from "components/icons";
import { PriorityIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
// types
import { IAnalyticsParams, IAnalyticsResponse } from "types";
import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
// constants
import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
@ -53,7 +53,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
>
<div className="flex items-center gap-2">
{params.segment === "priority" ? (
getPriorityIcon(key)
<PriorityIcon priority={key as TIssuePriorities} />
) : (
<span
className="h-3 w-3 flex-shrink-0 rounded"
@ -91,7 +91,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
}`}
>
{params.x_axis === "priority" ? (
getPriorityIcon(`${item.name}`)
<PriorityIcon priority={item.name as TIssuePriorities} />
) : (
<span
className="h-3 w-3 rounded"

View File

@ -1,5 +1,7 @@
import { useRouter } from "next/router";
import React, { Dispatch, SetStateAction, useCallback } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// cmdk
@ -7,12 +9,12 @@ import { Command } from "cmdk";
// services
import issuesService from "services/issues.service";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
// constants
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
import { PRIORITIES } from "constants/project";
// icons
import { CheckIcon, getPriorityIcon } from "components/icons";
import { CheckIcon, PriorityIcon } from "components/icons";
type Props = {
setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
@ -54,7 +56,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
[workspaceSlug, issueId, projectId, user]
);
const handleIssueState = (priority: string | null) => {
const handleIssueState = (priority: TIssuePriorities) => {
submitChanges({ priority });
setIsPaletteOpen(false);
};
@ -68,7 +70,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
className="focus:outline-none"
>
<div className="flex items-center space-x-3">
{getPriorityIcon(priority)}
<PriorityIcon priority={priority} />
<span className="capitalize">{priority ?? "None"}</span>
</div>
<div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>

View File

@ -2,7 +2,7 @@ import React from "react";
// icons
import { XMarkIcon } from "@heroicons/react/24/outline";
import { getPriorityIcon, StateGroupIcon } from "components/icons";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// ui
import { Avatar } from "components/ui";
// helpers
@ -136,7 +136,9 @@ export const FiltersList: React.FC<Props> = ({
: "bg-custom-background-90 text-custom-text-200"
}`}
>
<span>{getPriorityIcon(priority)}</span>
<span>
<PriorityIcon priority={priority} />
</span>
<span>{priority === "null" ? "None" : priority}</span>
<span
className="cursor-pointer"

View File

@ -13,12 +13,12 @@ import useProjects from "hooks/use-projects";
import { Avatar, Icon } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { StateGroupIcon, getPriorityIcon } from "components/icons";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IIssueViewProps, IState, TStateGroups } from "types";
import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
// constants
@ -119,7 +119,7 @@ export const BoardHeader: React.FC<Props> = ({
);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "text-lg");
icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
break;
case "project":
const project = projects?.find((p) => p.id === groupTitle);

View File

@ -29,7 +29,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
import { getStatesList } from "helpers/state.helper";
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue, IIssueFilterOptions, IState } from "types";
import { IIssue, IIssueFilterOptions, IState, TIssuePriorities } from "types";
// fetch-keys
import {
CYCLE_DETAILS,
@ -184,7 +184,8 @@ export const IssuesView: React.FC<Props> = ({
// if the issue is moved to a different group, then we will change the group of the
// dragged item(or issue)
if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
if (selectedGroup === "priority")
draggedItem.priority = destinationGroup as TIssuePriorities;
else if (selectedGroup === "state") {
draggedItem.state = destinationGroup;
draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;

View File

@ -15,7 +15,7 @@ import { SingleListIssue } from "components/core";
import { Avatar, CustomMenu } from "components/ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
import { StateGroupIcon, getPriorityIcon } from "components/icons";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
@ -26,6 +26,7 @@ import {
IIssueLabels,
IIssueViewProps,
IState,
TIssuePriorities,
TStateGroups,
UserAuth,
} from "types";
@ -134,7 +135,7 @@ export const SingleList: React.FC<Props> = ({
);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "text-lg");
icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
break;
case "project":
const project = projects?.find((p) => p.id === groupTitle);

View File

@ -19,7 +19,7 @@ import { ActiveCycleProgressStats } from "components/cycles";
// icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { getPriorityIcon } from "components/icons/priority-icon";
import { PriorityIcon } from "components/icons/priority-icon";
import {
TargetIcon,
ContrastIcon,
@ -477,7 +477,7 @@ export const ActiveCycleDetails: React.FC = () => {
: "border-orange-500/20 bg-orange-500/20 text-orange-500"
}`}
>
{getPriorityIcon(issue.priority, "text-sm")}
<PriorityIcon priority={issue.priority} className="text-sm" />
</div>
<ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
<div className={`flex items-center gap-2 text-custom-text-200`}>

View File

@ -1,22 +1,25 @@
export const getPriorityIcon = (priority: string | null, className?: string) => {
// types
import { TIssuePriorities } from "types";
type Props = {
priority: TIssuePriorities | null;
className?: string;
};
export const PriorityIcon: React.FC<Props> = ({ priority, className = "" }) => {
if (!className || className === "") className = "text-xs flex items-center";
priority = priority?.toLowerCase() ?? null;
switch (priority) {
case "urgent":
return <span className={`material-symbols-rounded ${className}`}>error</span>;
case "high":
return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
case "medium":
return (
<span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
);
case "low":
return (
<span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
);
default:
return <span className={`material-symbols-rounded ${className}`}>block</span>;
}
return (
<span className={`material-symbols-rounded ${className}`}>
{priority === "urgent"
? "error"
: priority === "high"
? "signal_cellular_alt"
: priority === "medium"
? "signal_cellular_alt_2_bar"
: priority === "low"
? "signal_cellular_alt_1_bar"
: "block"}
</span>
);
};

View File

@ -3,7 +3,7 @@ import useInboxView from "hooks/use-inbox-view";
// ui
import { MultiLevelDropdown } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons";
import { PriorityIcon } from "components/icons";
// constants
import { PRIORITIES } from "constants/project";
import { INBOX_STATUS } from "constants/inbox";
@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC = () => {
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2 capitalize">
{getPriorityIcon(priority)} {priority ?? "None"}
<PriorityIcon priority={priority} /> {priority ?? "None"}
</div>
),
value: {

View File

@ -2,9 +2,11 @@
import useInboxView from "hooks/use-inbox-view";
// icons
import { XMarkIcon } from "@heroicons/react/24/outline";
import { getPriorityIcon } from "components/icons";
import { PriorityIcon } from "components/icons";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types
import { TIssuePriorities } from "types";
// constants
import { INBOX_STATUS } from "constants/inbox";
@ -48,7 +50,9 @@ export const InboxFiltersList = () => {
: "bg-custom-background-90 text-custom-text-200"
}`}
>
<span>{getPriorityIcon(priority)}</span>
<span>
<PriorityIcon priority={priority as TIssuePriorities} />
</span>
<button
type="button"
className="cursor-pointer"

View File

@ -4,7 +4,7 @@ import Link from "next/link";
// ui
import { Tooltip } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons";
import { PriorityIcon } from "components/icons";
import {
CalendarDaysIcon,
CheckCircleIcon,
@ -65,10 +65,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
: "border-custom-border-200"
}`}
>
{getPriorityIcon(
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
"text-sm"
)}
<PriorityIcon priority={issue.priority ?? null} className="text-sm" />
</div>
</Tooltip>
<Tooltip

View File

@ -35,7 +35,7 @@ import type { IInboxIssue, IIssue } from "types";
// fetch-keys
import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
const defaultValues = {
const defaultValues: Partial<IInboxIssue> = {
name: "",
description_html: "",
estimate_point: null,

View File

@ -11,7 +11,7 @@ import { DateFilterModal } from "components/core";
// ui
import { MultiLevelDropdown } from "components/ui";
// icons
import { StateGroupIcon, getPriorityIcon } from "components/icons";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
// types
@ -83,7 +83,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2 capitalize">
{getPriorityIcon(priority)} {priority ?? "None"}
<PriorityIcon priority={priority} /> {priority ?? "None"}
</div>
),
value: {

View File

@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue, IIssueFilterOptions } from "types";
import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
// fetch-keys
import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
import { PlusIcon } from "@heroicons/react/24/outline";
@ -96,7 +96,7 @@ export const MyIssuesView: React.FC<Props> = ({
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
draggedItem[groupBy] = destinationGroup;
draggedItem[groupBy] = destinationGroup as TIssuePriorities;
mutate<{
[key: string]: IIssue[];

View File

@ -19,7 +19,7 @@ import { CustomDatePicker, Icon } from "components/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
import { IIssue, TIssuePriorities } from "types";
type Props = {
handleDeleteIssue: () => void;
@ -117,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
<div className="w-3/4">
<SidebarPrioritySelect
value={issue.priority}
onChange={(val: string) => handleUpdateIssue({ priority: val })}
onChange={(val) => handleUpdateIssue({ priority: val })}
disabled={readOnly}
/>
</div>

View File

@ -3,12 +3,14 @@ import React from "react";
// ui
import { CustomSelect } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons/priority-icon";
import { PriorityIcon } from "components/icons/priority-icon";
// types
import { TIssuePriorities } from "types";
// constants
import { PRIORITIES } from "constants/project";
type Props = {
value: string | null;
value: TIssuePriorities;
onChange: (value: string) => void;
};
@ -18,7 +20,10 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
label={
<div className="flex items-center justify-center gap-2 text-xs">
<span className="flex items-center">
{getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
<PriorityIcon
priority={value}
className={`text-xs ${value ? "" : "text-custom-text-200"}`}
/>
</span>
<span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
{value ?? "Priority"}
@ -32,7 +37,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<CustomSelect.Option key={priority} value={priority}>
<div className="flex w-full justify-between gap-2 rounded">
<div className="flex items-center justify-start gap-2">
<span>{getPriorityIcon(priority)}</span>
<span>
<PriorityIcon priority={priority} />
</span>
<span className="capitalize">{priority ?? "None"}</span>
</div>
</div>

View File

@ -3,13 +3,15 @@ import React from "react";
// ui
import { CustomSelect } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons/priority-icon";
import { PriorityIcon } from "components/icons/priority-icon";
// types
import { TIssuePriorities } from "types";
// constants
import { PRIORITIES } from "constants/project";
type Props = {
value: string | null;
onChange: (val: string) => void;
value: TIssuePriorities;
onChange: (val: TIssuePriorities) => void;
disabled?: boolean;
};
@ -31,7 +33,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
}`}
>
<span className="grid place-items-center -my-1">
{getPriorityIcon(value ?? "None", "!text-sm")}
<PriorityIcon priority={value} className="!text-sm" />
</span>
<span>{value ?? "None"}</span>
</button>
@ -44,7 +46,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
<PriorityIcon priority={option} className="text-sm" />
{option ?? "None"}
</>
</CustomSelect.Option>

View File

@ -401,7 +401,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
render={({ field: { value } }) => (
<SidebarPrioritySelect
value={value}
onChange={(val: string) => submitChanges({ priority: val })}
onChange={(val) => submitChanges({ priority: val })}
disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
/>
)}

View File

@ -2,18 +2,18 @@ import React from "react";
import { useRouter } from "next/router";
// services
import trackEventServices from "services/track-event.service";
// ui
import { CustomSelect, Tooltip } from "components/ui";
// icons
import { getPriorityIcon } from "components/icons/priority-icon";
import { PriorityIcon } from "components/icons/priority-icon";
// helpers
import { capitalizeFirstLetter } from "helpers/string.helper";
// types
import { ICurrentUserResponse, IIssue } from "types";
import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
// constants
import { PRIORITIES } from "constants/project";
// services
import trackEventServices from "services/track-event.service";
// helper
import { capitalizeFirstLetter } from "helpers/string.helper";
type Props = {
issue: IIssue;
@ -42,7 +42,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
return (
<CustomSelect
value={issue.priority}
onChange={(data: string) => {
onChange={(data: TIssuePriorities) => {
partialUpdateIssue({ priority: data }, issue);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
@ -77,9 +77,9 @@ export const ViewPrioritySelect: React.FC<Props> = ({
position={tooltipPosition}
>
<span className="flex gap-1 items-center text-custom-text-200 text-xs">
{getPriorityIcon(
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
`text-sm ${
<PriorityIcon
priority={issue.priority}
className={`text-sm ${
issue.priority === "urgent"
? "text-white"
: issue.priority === "high"
@ -89,13 +89,9 @@ export const ViewPrioritySelect: React.FC<Props> = ({
: issue.priority === "low"
? "text-green-500"
: "text-custom-text-200"
}`
)}
{noBorder
? issue.priority && issue.priority !== ""
? capitalizeFirstLetter(issue.priority) ?? ""
: "None"
: ""}
}`}
/>
{noBorder ? capitalizeFirstLetter(issue.priority ?? "None") : ""}
</span>
</Tooltip>
</button>
@ -108,7 +104,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
{PRIORITIES?.map((priority) => (
<CustomSelect.Option key={priority} value={priority} className="capitalize">
<>
{getPriorityIcon(priority, "text-sm")}
<PriorityIcon priority={priority} className="text-sm" />
{priority ?? "None"}
</>
</CustomSelect.Option>

View File

@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue, IIssueFilterOptions } from "types";
import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
// fetch-keys
import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys";
@ -108,7 +108,7 @@ export const ProfileIssuesView = () => {
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
draggedItem[groupByProperty] = destinationGroup;
draggedItem[groupByProperty] = destinationGroup as TIssuePriorities;
mutateProfileIssues((prevData: any) => {
if (!prevData) return prevData;

View File

@ -13,7 +13,7 @@ import { DateFilterModal } from "components/core";
// ui
import { Avatar, MultiLevelDropdown } from "components/ui";
// icons
import { StateGroupIcon, getPriorityIcon } from "components/icons";
import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@ -99,7 +99,8 @@ export const SelectFilters: React.FC<Props> = ({
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2 capitalize">
{getPriorityIcon(priority)} {priority ?? "None"}
<PriorityIcon priority={priority} />
{priority ?? "None"}
</div>
),
value: {

View File

@ -109,7 +109,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
render={({ field: { value } }) => (
<PrioritySelect
value={value}
onChange={(val: string) => submitChanges({ priority: val })}
onChange={(val) => submitChanges({ priority: val })}
/>
)}
/>

View File

@ -8,15 +8,17 @@ import { ChevronDown } from "lucide-react";
import { PRIORITIES } from "constants/project";
// components
import { getPriorityIcon } from "components/icons";
import { PriorityIcon } from "components/icons";
import { WebViewModal } from "./web-view-modal";
// helpers
import { capitalizeFirstLetter } from "helpers/string.helper";
// types
import { TIssuePriorities } from "types";
type Props = {
value: any;
onChange: (value: any) => void;
onChange: (value: TIssuePriorities) => void;
disabled?: boolean;
};
@ -59,7 +61,7 @@ export const PrioritySelect: React.FC<Props> = (props) => {
: "border-custom-border-200 text-custom-text-200"
}`}
>
{getPriorityIcon(priority, "text-sm")}
<PriorityIcon priority={priority} className="text-sm" />
</span>
),
})) || []

View File

@ -1,3 +1,5 @@
import { TIssuePriorities } from "types";
export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
{
key: 0,
@ -19,7 +21,7 @@ export const GROUP_CHOICES = {
cancelled: "Cancelled",
};
export const PRIORITIES = ["urgent", "high", "medium", "low", null];
export const PRIORITIES: TIssuePriorities[] = ["urgent", "high", "medium", "low", null];
export const MONTHS = [
"January",

View File

@ -26,7 +26,7 @@ import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues = {
const defaultValues: Partial<IIssue> = {
name: "",
description: "",
description_html: "",

View File

@ -27,7 +27,7 @@ import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
// helper
import { truncateText } from "helpers/string.helper";
const defaultValues = {
const defaultValues: Partial<IIssue> = {
assignees_list: [],
description: "",
description_html: "",

View File

@ -102,7 +102,7 @@ export interface IIssue {
name: string;
parent: string | null;
parent_detail: IIssueParent | null;
priority: string | null;
priority: TIssuePriorities;
project: string;
project_detail: IProjectLite;
sequence_id: number;
@ -294,3 +294,5 @@ export interface IIssueViewProps {
properties: Properties;
showEmptyGroups: boolean;
}
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | null;