feat: state description in settings

apps/app/components/core/board-view/board-header.tsx

@@ -12,80 +12,97 @@ import {
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue } from "types";
+import { IIssue, IProjectMember, NestedKeyOf } from "types";
 type Props = {
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
   groupedByIssues: {
     [key: string]: IIssue[];
   };
+  selectedGroup: NestedKeyOf<IIssue> | null;
   groupTitle: string;
-  createdBy: string | null;
   bgColor?: string;
   addIssueToState: () => void;
+  members: IProjectMember[] | undefined;
+  isCollapsed: boolean;
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const BoardHeader: React.FC<Props> = ({
-  isCollapsed,
-  setIsCollapsed,
   groupedByIssues,
+  selectedGroup,
   groupTitle,
-  createdBy,
   bgColor,
   addIssueToState,
-}) => (
-  <div
-    className={`flex justify-between p-3 pb-0 ${
-      !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
-    }`}
-  >
-    <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
-      <div
-        className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
-          !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
-        }`}
-        style={{
-          border: `2px solid ${bgColor}`,
-          backgroundColor: `${bgColor}20`,
-        }}
-      >
-        <h2
-          className={`text-[0.9rem] font-medium capitalize`}
+  isCollapsed,
+  setIsCollapsed,
+  members,
+}) => {
+  const createdBy =
+    selectedGroup === "created_by"
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      : null;
+
+  let assignees: any;
+  if (selectedGroup === "assignees") {
+    assignees = groupTitle.split(",");
+    assignees = assignees
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
+      .join(", ");
+  }
+
+  return (
+    <div
+      className={`flex justify-between p-3 pb-0 ${
+        !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
+      }`}
+    >
+      <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+        <div
+          className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
+            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
+          }`}
           style={{
-            writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            border: `2px solid ${bgColor}`,
+            backgroundColor: `${bgColor}20`,
           }}
         >
-          {groupTitle === null || groupTitle === "null"
-            ? "None"
-            : createdBy
-            ? createdBy
-            : addSpaceIfCamelCase(groupTitle)}
-        </h2>
-        <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+          <h2
+            className={`text-[0.9rem] font-medium capitalize`}
+            style={{
+              writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            }}
+          >
+            {selectedGroup === "created_by"
+              ? createdBy
+              : selectedGroup === "assignees"
+              ? assignees
+              : addSpaceIfCamelCase(groupTitle)}
+          </h2>
+          <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+        </div>
       </div>
-    </div>
 
-    <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={() => {
-          setIsCollapsed((prevData) => !prevData);
-        }}
-      >
-        {isCollapsed ? (
-          <ArrowsPointingInIcon className="h-4 w-4" />
-        ) : (
-          <ArrowsPointingOutIcon className="h-4 w-4" />
-        )}
-      </button>
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={addIssueToState}
-      >
-        <PlusIcon className="h-4 w-4" />
-      </button>
+      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={() => {
+            setIsCollapsed((prevData) => !prevData);
+          }}
+        >
+          {isCollapsed ? (
+            <ArrowsPointingInIcon className="h-4 w-4" />
+          ) : (
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+          )}
+        </button>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={addIssueToState}
+        >
+          <PlusIcon className="h-4 w-4" />
+        </button>
+      </div>
     </div>
-  </div>
-);
+  );
+};

apps/app/components/core/board-view/single-board.tsx

@@ -55,11 +55,6 @@ export const SingleBoard: React.FC<Props> = ({
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
-  const createdBy =
-    selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
-      : null;
-
   if (selectedGroup === "priority")
     groupTitle === "high"
       ? (bgColor = "#dc2626")
@@ -77,11 +72,12 @@ export const SingleBoard: React.FC<Props> = ({
         <BoardHeader
           addIssueToState={addIssueToState}
           bgColor={bgColor}
-          createdBy={createdBy}
+          selectedGroup={selectedGroup}
           groupTitle={groupTitle}
           groupedByIssues={groupedByIssues}
           isCollapsed={isCollapsed}
           setIsCollapsed={setIsCollapsed}
+          members={members}
         />
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
@@ -97,7 +93,9 @@ export const SingleBoard: React.FC<Props> = ({
                   key={issue.id}
                   draggableId={issue.id}
                   index={index}
-                  isDragDisabled={isNotAllowed || selectedGroup === "created_by"}
+                  isDragDisabled={
+                    isNotAllowed || selectedGroup === "created_by" || selectedGroup === "assignees"
+                  }
                 >
                   {(provided, snapshot) => (
                     <SingleBoardIssue

apps/app/components/core/list-view/single-list.tsx

@@ -50,9 +50,17 @@ export const SingleList: React.FC<Props> = ({
 
   const createdBy =
     selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "Loading..."
       : null;
 
+  let assignees: any;
+  if (selectedGroup === "assignees") {
+    assignees = groupTitle.split(",");
+    assignees = assignees
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
+      .join(", ");
+  }
+
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
@@ -67,10 +75,10 @@ export const SingleList: React.FC<Props> = ({
                 </span>
                 {selectedGroup !== null ? (
                   <h2 className="font-medium capitalize leading-5">
-                    {groupTitle === null || groupTitle === "null"
-                      ? "None"
-                      : createdBy
+                    {selectedGroup === "created_by"
                       ? createdBy
+                      : selectedGroup === "assignees"
+                      ? assignees
                       : addSpaceIfCamelCase(groupTitle)}
                   </h2>
                 ) : (

apps/app/components/issues/sidebar-select/cycle.tsx

@@ -82,14 +82,14 @@ export const SidebarCycleSelect: React.FC<Props> = ({
           {cycles ? (
             cycles.length > 0 ? (
               <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                 {cycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     {option.name}
                   </CustomSelect.Option>
                 ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No cycles found</div>

apps/app/components/issues/sidebar-select/module.tsx

@@ -81,14 +81,14 @@ export const SidebarModuleSelect: React.FC<Props> = ({
           {modules ? (
             modules.length > 0 ? (
               <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     {option.name}
                   </CustomSelect.Option>
                 ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No modules found</div>

apps/app/components/issues/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -144,6 +144,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     [workspaceSlug, projectId, issueId, issueDetail]
   );
 
+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    reset();
+  }, [createLabelForm, reset]);
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -431,24 +437,25 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </Listbox>
                   )}
                 />
-                <button
-                  type="button"
-                  className={`flex ${
-                    isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
-                  onClick={() => setCreateLabelForm((prevData) => !prevData)}
-                  disabled={isNotAllowed}
-                >
-                  {createLabelForm ? (
-                    <>
-                      <XMarkIcon className="h-3 w-3" /> Cancel
-                    </>
-                  ) : (
-                    <>
-                      <PlusIcon className="h-3 w-3" /> New
-                    </>
-                  )}
-                </button>
+                {!isNotAllowed && (
+                  <button
+                    type="button"
+                    className={`flex ${
+                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                    } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
+                    onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                  >
+                    {createLabelForm ? (
+                      <>
+                        <XMarkIcon className="h-3 w-3" /> Cancel
+                      </>
+                    ) : (
+                      <>
+                        <PlusIcon className="h-3 w-3" /> New
+                      </>
+                    )}
+                  </button>
+                )}
               </div>
             </div>
           </div>