refactor: priority icon component (#2132)

web/components/analytics/custom-analytics/table.tsx

@@ -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"

web/components/command-palette/issue/change-issue-priority.tsx

@@ -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>

web/components/core/filters/filters-list.tsx

@@ -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"

web/components/core/views/board-view/board-header.tsx

@@ -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);

web/components/core/views/issues-view.tsx

@@ -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;

web/components/core/views/list-view/single-list.tsx

@@ -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);

web/components/cycles/active-cycle-details.tsx

@@ -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`}>

web/components/icons/priority-icon.tsx

@@ -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;
+  return (
-
+    <span className={`material-symbols-rounded ${className}`}>
-  switch (priority) {
+      {priority === "urgent"
-    case "urgent":
+        ? "error"
-      return <span className={`material-symbols-rounded ${className}`}>error</span>;
+        : priority === "high"
-    case "high":
+        ? "signal_cellular_alt"
-      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
+        : priority === "medium"
-    case "medium":
+        ? "signal_cellular_alt_2_bar"
-      return (
+        : priority === "low"
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
+        ? "signal_cellular_alt_1_bar"
-      );
+        : "block"}
-    case "low":
+    </span>
-      return (
+  );
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
-      );
-    default:
-      return <span className={`material-symbols-rounded ${className}`}>block</span>;
-  }
 };

web/components/inbox/filters-dropdown.tsx

@@ -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: {

web/components/inbox/filters-list.tsx

@@ -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"

web/components/inbox/inbox-issue-card.tsx

@@ -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(
+                <PriorityIcon priority={issue.priority ?? null} className="text-sm" />
-                  issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                  "text-sm"
-                )}
               </div>
             </Tooltip>
             <Tooltip

web/components/inbox/inbox-main-content.tsx

@@ -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,

web/components/issues/my-issues/my-issues-select-filters.tsx

@@ -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: {

web/components/issues/my-issues/my-issues-view.tsx

@@ -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[];

web/components/issues/peek-overview/issue-properties.tsx

@@ -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>

web/components/issues/select/priority.tsx

@@ -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>

web/components/issues/sidebar-select/priority.tsx

@@ -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;
+  value: TIssuePriorities;
-  onChange: (val: string) => void;
+  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>

web/components/issues/sidebar.tsx

@@ -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}
                           />
                         )}

web/components/issues/view-select/priority.tsx

@@ -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(
+              <PriorityIcon
-                issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+                priority={issue.priority}
-                `text-sm ${
+                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
+              {noBorder ? capitalizeFirstLetter(issue.priority ?? "None") : ""}
-                ? issue.priority && issue.priority !== ""
-                  ? 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>

web/components/profile/profile-issues-view.tsx

@@ -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;

web/components/views/select-filters.tsx

@@ -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: {

web/components/web-view/issue-properties-detail.tsx

@@ -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 })}
                 />
               )}
             />

web/components/web-view/select-priority.tsx

@@ -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>
               ),
             })) || []

web/constants/project.ts

@@ -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",

web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx

@@ -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: "",

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -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: "",

web/types/issues.d.ts

@@ -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;