feat: create label option in create issue modal

apps/app/components/account/email-code-form.tsx

@@ -114,15 +114,15 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               error={errors.token}
               placeholder="Enter code"
             />
-            {/* <span
-              className="text-xs outline-none hover:text-theme"
+            {/* <button
+              type="button"
+              className="text-xs outline-none hover:text-theme cursor-pointer"
               onClick={() => {
-                console.log("Triggered");
                 handleSubmit(onSubmit);
               }}
             >
               Resend code
-            </span> */}
+            </button> */}
           </div>
         )}
         <div>

apps/app/components/core/board-view/all-boards.tsx

@@ -11,9 +11,11 @@ type Props = {
   states: IState[] | undefined;
   members: IProjectMember[] | undefined;
   addIssueToState: (groupTitle: string, stateId: string | null) => void;
+  handleEditIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
   handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
   userAuth: UserAuth;
 };
 
@@ -23,9 +25,11 @@ export const AllBoards: React.FC<Props> = ({
   states,
   members,
   addIssueToState,
+  handleEditIssue,
   openIssuesListModal,
   handleDeleteIssue,
   handleTrashBox,
+  removeIssue,
   userAuth,
 }) => {
   const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
@@ -57,11 +61,13 @@ export const AllBoards: React.FC<Props> = ({
                       groupedByIssues={groupedByIssues}
                       selectedGroup={selectedGroup}
                       members={members}
+                      handleEditIssue={handleEditIssue}
                       addIssueToState={() => addIssueToState(singleGroup, stateId)}
                       handleDeleteIssue={handleDeleteIssue}
                       openIssuesListModal={openIssuesListModal ?? null}
                       orderBy={orderBy}
                       handleTrashBox={handleTrashBox}
+                      removeIssue={removeIssue}
                       userAuth={userAuth}
                     />
                   );

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

@@ -25,11 +25,13 @@ type Props = {
   };
   selectedGroup: NestedKeyOf<IIssue> | null;
   members: IProjectMember[] | undefined;
+  handleEditIssue: (issue: IIssue) => void;
   addIssueToState: () => void;
   handleDeleteIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
   handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
   userAuth: UserAuth;
 };
 
@@ -40,11 +42,13 @@ export const SingleBoard: React.FC<Props> = ({
   groupedByIssues,
   selectedGroup,
   members,
+  handleEditIssue,
   addIssueToState,
   handleDeleteIssue,
   openIssuesListModal,
   orderBy,
   handleTrashBox,
+  removeIssue,
   userAuth,
 }) => {
   // collapse/expand
@@ -104,10 +108,15 @@ export const SingleBoard: React.FC<Props> = ({
                       snapshot={snapshot}
                       type={type}
                       issue={issue}
+                      selectedGroup={selectedGroup}
                       properties={properties}
+                      editIssue={() => handleEditIssue(issue)}
                       handleDeleteIssue={handleDeleteIssue}
                       orderBy={orderBy}
                       handleTrashBox={handleTrashBox}
+                      removeIssue={() => {
+                        removeIssue && removeIssue(issue.bridge);
+                      }}
                       userAuth={userAuth}
                     />
                   )}

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

@@ -23,6 +23,8 @@ import {
   ViewPrioritySelect,
   ViewStateSelect,
 } from "components/issues/view-select";
+// ui
+import { CustomMenu } from "components/ui";
 // types
 import {
   CycleIssueResponse,
@@ -41,7 +43,10 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
+  selectedGroup: NestedKeyOf<IIssue> | null;
   properties: Properties;
+  editIssue: () => void;
+  removeIssue?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
   handleTrashBox: (isDragging: boolean) => void;
@@ -53,7 +58,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
+  selectedGroup,
   properties,
+  editIssue,
+  removeIssue,
   handleDeleteIssue,
   orderBy,
   handleTrashBox,
@@ -170,13 +178,26 @@ export const SingleBoardIssue: React.FC<Props> = ({
       <div className="group/card relative select-none p-2">
         {!isNotAllowed && (
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
-            <button
+            {/* <button
               type="button"
               className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
               onClick={() => handleDeleteIssue(issue)}
             >
               <TrashIcon className="h-4 w-4" />
-            </button>
+            </button> */}
+            {type && !isNotAllowed && (
+              <CustomMenu width="auto" ellipsis>
+                <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
+                {type !== "issue" && removeIssue && (
+                  <CustomMenu.MenuItem onClick={removeIssue}>
+                    <>Remove from {type}</>
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                  Delete permanently
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
           </div>
         )}
         <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
@@ -195,15 +216,15 @@ export const SingleBoardIssue: React.FC<Props> = ({
           </a>
         </Link>
         <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-          {properties.priority && (
+          {properties.priority && selectedGroup !== "priority" && (
             <ViewPrioritySelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
               isNotAllowed={isNotAllowed}
               position="left"
             />
           )}
-          {properties.state && (
+          {properties.state && selectedGroup !== "state_detail.name" && (
             <ViewStateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}

apps/app/components/core/issues-view-filter.tsx

@@ -178,20 +178,29 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
                       <div className="space-y-2 py-3">
                         <h4 className="text-sm text-gray-600">Display Properties</h4>
                         <div className="flex flex-wrap items-center gap-2">
-                          {Object.keys(properties).map((key) => (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
-                                  : "border-gray-300"
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          ))}
+                          {Object.keys(properties).map((key) => {
+                            if (
+                              issueView === "kanban" &&
+                              ((groupByProperty === "state_detail.name" && key === "state") ||
+                                (groupByProperty === "priority" && key === "priority"))
+                            )
+                              return;
+
+                            return (
+                              <button
+                                key={key}
+                                type="button"
+                                className={`rounded border px-2 py-1 text-xs capitalize ${
+                                  properties[key as keyof Properties]
+                                    ? "border-theme bg-theme text-white"
+                                    : "border-gray-300"
+                                }`}
+                                onClick={() => setProperties(key as keyof Properties)}
+                              >
+                                {replaceUnderscoreIfSnakeCase(key)}
+                              </button>
+                            );
+                          })}
                         </div>
                       </div>
                     </div>

apps/app/components/core/issues-view.tsx

@@ -452,9 +452,17 @@ export const IssuesView: React.FC<Props> = ({
               states={states}
               members={members}
               addIssueToState={addIssueToState}
+              handleEditIssue={handleEditIssue}
               openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
               handleDeleteIssue={handleDeleteIssue}
               handleTrashBox={handleTrashBox}
+              removeIssue={
+                type === "cycle"
+                  ? removeIssueFromCycle
+                  : type === "module"
+                  ? removeIssueFromModule
+                  : null
+              }
               userAuth={userAuth}
             />
           )}

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -10,6 +10,8 @@ import { Tab } from "@headlessui/react";
 // services
 import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
@@ -20,7 +22,6 @@ import User from "public/user.png";
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
-import useLocalStorage from "hooks/use-local-storage";
 // types
 type Props = {
   groupedIssues: any;
@@ -39,8 +40,10 @@ const stateGroupColours: {
 
 export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
   const router = useRouter();
-  const [tab, setTab] = useLocalStorage("tab", "Assignees");
   const { workspaceSlug, projectId } = router.query;
+
+  const [tab, setTab] = useLocalStorage("tab", "Assignees");
+
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId

apps/app/components/issues/form.tsx

@@ -16,8 +16,9 @@ import {
   IssueStateSelect,
 } from "components/issues/select";
 import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
-import { CreateUpdateStateModal } from "components/states";
+import { CreateStateModal } from "components/states";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+import { CreateLabelModal } from "components/labels";
 // ui
 import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
 // icons
@@ -74,6 +75,7 @@ export const IssueForm: FC<IssueFormProps> = ({
   const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
   const [cycleModal, setCycleModal] = useState(false);
   const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
 
   const router = useRouter();
@@ -121,7 +123,7 @@ export const IssueForm: FC<IssueFormProps> = ({
     <>
       {projectId && (
         <>
-          <CreateUpdateStateModal
+          <CreateStateModal
             isOpen={stateModal}
             handleClose={() => setStateModal(false)}
             projectId={projectId}
@@ -131,6 +133,11 @@ export const IssueForm: FC<IssueFormProps> = ({
             setIsOpen={setCycleModal}
             projectId={projectId}
           />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+          />
         </>
       )}
       <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
@@ -281,7 +288,12 @@ export const IssueForm: FC<IssueFormProps> = ({
                   control={control}
                   name="labels_list"
                   render={({ field: { value, onChange } }) => (
-                    <IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
+                    <IssueLabelSelect
+                      setIsOpen={setLabelModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={projectId}
+                    />
                   )}
                 />
                 <div>