fix: consistent icons and modal fixes (#216)

* fix: consistent icons and modal fixes

* fix: total worspace members

* fix: sub issue mutation

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

@@ -28,7 +28,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
             <span className="bg-white px-2 text-gray-500">or</span>
           </div>
         </div>
-        <div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
+        {/* <div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
           <button
             type="button"
             className="flex w-full items-center rounded border border-gray-300 px-3 py-2 text-sm duration-300 hover:bg-gray-100"
@@ -39,7 +39,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
               {useCode ? "Continue with Password" : "Continue with Code"}
             </span>
           </button>
-        </div>
+        </div> */}
       </div>
     </>
   );

apps/app/components/common/bulk-delete-issues-modal.tsx

@@ -24,8 +24,7 @@ import { IIssue, IssueResponse } from "types";
 import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 
 type FormInput = {
-  issue_ids: string[];
+  delete_issue_ids: string[];
-  cycleId: string;
 };
 
 type Props = {
@@ -61,17 +60,27 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
+    watch,
     reset,
+    setValue,
     formState: { isSubmitting },
-  } = useForm<FormInput>();
+  } = useForm<FormInput>({
+    defaultValues: {
+      delete_issue_ids: [],
+    },
+  });
 
   const filteredIssues: IIssue[] =
     query === ""
       ? issues?.results ?? []
-      : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
+      : issues?.results.filter(
-        [];
+          (issue) =>
+            issue.name.toLowerCase().includes(query.toLowerCase()) ||
+            `${issue.project_detail.identifier}-${issue.sequence_id}`
+              .toLowerCase()
+              .includes(query.toLowerCase())
+        ) ?? [];
 
   const handleClose = () => {
     setIsOpen(false);
@@ -80,7 +89,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   };
 
   const handleDelete: SubmitHandler<FormInput> = async (data) => {
-    if (!data.issue_ids || data.issue_ids.length === 0) {
+    if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
       setToastAlert({
         title: "Error",
         type: "error",
@@ -89,30 +98,34 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
       return;
     }
 
-    if (!Array.isArray(data.issue_ids)) data.issue_ids = [data.issue_ids];
+    if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
 
     if (workspaceSlug && projectId) {
       await issuesServices
-        .bulkDeleteIssues(workspaceSlug as string, projectId as string, data)
+        .bulkDeleteIssues(workspaceSlug as string, projectId as string, {
+          issue_ids: data.delete_issue_ids,
+        })
         .then((res) => {
           setToastAlert({
             title: "Success",
             type: "success",
             message: res.message,
           });
+
           mutate<IssueResponse>(
             PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
             (prevData) => ({
               ...(prevData as IssueResponse),
               count: (prevData?.results ?? []).filter(
-                (p) => !data.issue_ids.some((id) => p.id === id)
+                (p) => !data.delete_issue_ids.some((id) => p.id === id)
               ).length,
               results: (prevData?.results ?? []).filter(
-                (p) => !data.issue_ids.some((id) => p.id === id)
+                (p) => !data.delete_issue_ids.some((id) => p.id === id)
               ),
             }),
             false
           );
+          handleClose();
         })
         .catch((e) => {
           console.log(e);
@@ -123,18 +136,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
-        </Transition.Child>
-
         <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
           <Transition.Child
             as={React.Fragment}
@@ -145,15 +146,31 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
               <form>
-                <Combobox>
+                <Combobox
+                  onChange={(val: string) => {
+                    const selectedIssues = watch("delete_issue_ids");
+                    if (selectedIssues.includes(val))
+                      setValue(
+                        "delete_issue_ids",
+                        selectedIssues.filter((i) => i !== val)
+                      );
+                    else {
+                      const newToDelete = selectedIssues;
+                      newToDelete.push(val);
+
+                      setValue("delete_issue_ids", newToDelete);
+                    }
+                  }}
+                >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
                       aria-hidden="true"
                     />
-                    <Combobox.Input
+                    <input
+                      type="text"
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
                       placeholder="Search..."
                       onChange={(event) => setQuery(event.target.value)}
@@ -175,12 +192,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           {filteredIssues.map((issue) => (
                             <Combobox.Option
                               key={issue.id}
-                              as="label"
+                              as="div"
-                              htmlFor={`issue-${issue.id}`}
+                              value={issue.id}
-                              value={{
-                                name: issue.name,
-                                url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
-                              }}
                               className={({ active }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
                                   active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
@@ -190,9 +203,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div className="flex items-center gap-2">
                                 <input
                                   type="checkbox"
-                                  {...register("issue_ids")}
+                                  checked={watch("delete_issue_ids").includes(issue.id)}
-                                  id={`issue-${issue.id}`}
+                                  readOnly
-                                  value={issue.id}
                                 />
                                 <span
                                   className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -219,18 +231,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       </div>
                     )}
                   </Combobox.Options>
-
-                  {query !== "" && filteredIssues.length === 0 && (
-                    <div className="py-14 px-6 text-center sm:px-14">
-                      <FolderIcon
-                        className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
-                        aria-hidden="true"
-                      />
-                      <p className="mt-4 text-sm text-gray-900">
-                        We couldn{"'"}t find any issue with that term. Please try again.
-                      </p>
-                    </div>
-                  )}
                 </Combobox>
 
                 {filteredIssues.length > 0 && (

apps/app/components/cycles/select.tsx

@@ -7,7 +7,8 @@ import useSWR from "swr";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { PlusIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
 // services
 import cycleServices from "services/cycles.service";
 // components
@@ -65,7 +66,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
             <Listbox.Button
               className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <ArrowPathIcon className="h-3 w-3 text-gray-500" />
+              <CyclesIcon className="h-3 w-3 text-gray-500" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>

apps/app/components/issues/form.tsx

@@ -99,11 +99,6 @@ export const IssueForm: FC<IssueFormProps> = ({
     setMostSimilarIssue(similarIssue);
   };
 
-  const handleDiscard = () => {
-    reset({ ...defaultValues, project: projectId });
-    handleClose();
-  };
-
   const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
     await handleFormSubmit(formData);
 
@@ -367,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </button>
           </div>
           <div className="flex items-center gap-2">
-            <Button theme="secondary" onClick={handleDiscard}>
+            <Button theme="secondary" onClick={handleClose}>
               Discard
             </Button>
             <Button type="submit" disabled={isSubmitting}>

apps/app/components/project/cycles/stats-view/single-stat.tsx

@@ -1,19 +1,19 @@
-// react
 import React from "react";
-// next
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 // swr
 import useSWR from "swr";
 // services
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { ArrowPathIcon, UserIcon } from "@heroicons/react/24/outline";
 import cyclesService from "services/cycles.service";
-// hooks
 // ui
 import { Button, CustomMenu } from "components/ui";
 // icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import { UserIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 import { groupBy } from "helpers/array.helper";
@@ -120,7 +120,7 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
                   router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
                 }
               >
-                <ArrowPathIcon className="h-3 w-3" />
+                <CyclesIcon className="h-3 w-3" />
                 Open Cycle
               </Button>
             </div>

apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx

@@ -11,7 +11,7 @@ import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/out
 // services
 import issuesServices from "services/issues.service";
 // types
-import { IIssue } from "types";
+import { IIssue, IssueResponse } from "types";
 // constants
 import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
 
@@ -54,6 +54,22 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
       .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
       .then((res) => {
         mutate(SUB_ISSUES(parent?.id ?? ""));
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((p) => {
+              if (p.id === res.id)
+                return {
+                  ...p,
+                  ...res,
+                };
+
+              return p;
+            }),
+          }),
+          false
+        );
       })
       .catch((e) => {
         console.log(e);

apps/app/components/project/issues/issue-detail/comment/issue-comment-card.tsx

@@ -1,6 +1,5 @@
-// react
 import React, { useEffect, useState } from "react";
-// next
+
 import Image from "next/image";
 import dynamic from "next/dynamic";
 
@@ -8,14 +7,14 @@ import dynamic from "next/dynamic";
 import { useForm } from "react-hook-form";
 // icons
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// types
-import type { IIssueComment } from "types";
 // hooks
 import useUser from "hooks/use-user";
 // ui
 import { CustomMenu } from "components/ui";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
+// types
+import type { IIssueComment } from "types";
 
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
 
@@ -76,7 +75,7 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
             </span>
             <span>{timeAgo(comment.created_at)}</span>
           </p>
-          <div>
+          <div className="issue-comments-section">
             {isEditing ? (
               <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
                 <RemirrorRichTextEditor

apps/app/components/project/issues/issue-detail/comment/issue-comment-section.tsx

@@ -5,15 +5,15 @@ import dynamic from "next/dynamic";
 
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// types
-import type { IIssueActivity, IIssueComment } from "types";
-import type { KeyedMutator } from "swr";
 // services
 import issuesServices from "services/issues.service";
 // ui
 import { Loader } from "components/ui";
 // helpers
 import { debounce } from "helpers/functions.helper";
+// types
+import type { IIssueActivity, IIssueComment } from "types";
+import type { KeyedMutator } from "swr";
 
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
   ssr: false,
@@ -83,7 +83,7 @@ const AddIssueComment: React.FC<{
   return (
     <div className="space-y-5">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="issue-comments-section rounded-md p-2 pt-3">
+        <div className="issue-comments-section">
           <Controller
             name="comment_html"
             control={control}

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx

@@ -1,21 +1,21 @@
-// react
 import React from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// react-hook-form
 import { UseFormWatch } from "react-hook-form";
-// constants
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // services
 import issuesService from "services/issues.service";
 import cyclesService from "services/cycles.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
+import { CyclesIcon } from "components/icons";
 // types
 import { ICycle, IIssue } from "types";
+// fetch-keys
 import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
@@ -55,7 +55,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <ArrowPathIcon className="h-4 w-4 flex-shrink-0" />
+        <CyclesIcon className="h-4 w-4 flex-shrink-0" />
         <p>Cycle</p>
       </div>
       <div className="space-y-1 sm:basis-1/2">

apps/app/components/rich-text-editor/toolbar/index.tsx

@@ -32,11 +32,8 @@ export const RichTextToolbar: React.FC = () => (
       <OrderedListButton />
       <UnorderedListButton />
     </div>
-    {/* <div className="px-2">
+    {/* <div className="flex items-center gap-x-1 px-2">
-        <TableControls />
-      </div> */}
-    <div className="flex items-center gap-x-1 px-2">
       <LinkButton />
-    </div>
+    </div> */}
   </div>
 );

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -155,7 +155,8 @@ export const WorkspaceSidebarDropdown = () => {
                               <div className="text-left">
                                 <h5 className="text-sm">{workspace.name}</h5>
                                 <div className="text-xs text-gray-500">
-                                  {workspace.total_members} members
+                                  {workspace.total_members}{" "}
+                                  {workspace.total_members > 1 ? "members" : "member"}
                                 </div>
                               </div>
                             </button>

apps/app/layouts/app-layout/app-header.tsx

@@ -10,28 +10,24 @@ type Props = {
   setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => {
+const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  return (
+  <div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
-    <>
+    <div className="flex items-center gap-2">
-      <div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
+      <div className="block md:hidden">
-        <div className="flex items-center gap-2">
+        <Button
-          <div className="block md:hidden">
+          type="button"
-            <Button
+          theme="secondary"
-              type="button"
+          className="h-8 w-8"
-              theme="secondary"
+          onClick={() => setToggleSidebar((prevData) => !prevData)}
-              className="h-8 w-8"
+        >
-              onClick={() => setToggleSidebar((prevData) => !prevData)}
+          <Bars3Icon className="h-5 w-5" />
-            >
+        </Button>
-              <Bars3Icon className="h-5 w-5" />
-            </Button>
-          </div>
-          {breadcrumbs}
-          {left}
-        </div>
-        {right}
       </div>
-    </>
+      {breadcrumbs}
-  );
+      {left}
-};
+    </div>
+    {right}
+  </div>
+);
 
 export default Header;

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction } from "react";
-
 // hooks
 import useTheme from "hooks/use-theme";
 // components

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -10,13 +10,6 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
 import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
-// icons
-import {
-  ArrowLeftIcon,
-  ArrowPathIcon,
-  ListBulletIcon,
-  PlusIcon,
-} from "@heroicons/react/24/outline";
 // components
 import CyclesListView from "components/project/cycles/list-view";
 import CyclesBoardView from "components/project/cycles/board-view";
@@ -33,6 +26,8 @@ import projectService from "services/project.service";
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
+import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
 // types
 import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
 import { NextPageContext } from "next";
@@ -203,7 +198,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           <CustomMenu
             label={
               <>
-                <ArrowPathIcon className="h-3 w-3" />
+                <CyclesIcon className="h-3 w-3" />
                 {cycles?.find((c) => c.id === cycleId)?.name}
               </>
             }
@@ -268,7 +263,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
               <EmptySpace
                 title="You don't have any issue yet."
                 description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
-                Icon={ArrowPathIcon}
+                Icon={CyclesIcon}
               >
                 <EmptySpaceItem
                   title="Create a new issue"

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -25,7 +25,7 @@ import { Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, IssueResponse } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
@@ -154,6 +154,23 @@ const IssueDetailsPage: NextPage = () => {
       .then((res) => {
         mutate(SUB_ISSUES(issueDetails?.id ?? ""));
         mutateIssueActivities();
+
+        mutate<IssueResponse>(
+          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+          (prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((p) => {
+              if (p.id === res.id)
+                return {
+                  ...p,
+                  ...res,
+                };
+
+              return p;
+            }),
+          }),
+          false
+        );
       })
       .catch((e) => {
         console.error(e);

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
+
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // react-dropzone

apps/app/styles/editor.css

@@ -354,6 +354,10 @@ img.ProseMirror-separator {
   margin-bottom: 1em;
 }
 
+.remirror-editor-wrapper .remirror-editor {
+  min-height: 150px;
+}
+
 .issue-comments-section .remirror-editor-wrapper .remirror-editor {
   min-height: 50px;
 }