fix: module sidebar link section relocation (#569)

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

@@ -13,12 +13,11 @@ import projectService from "services/project.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
-import { LinksList, SingleProgressStats } from "components/core";
+import { SingleProgressStats } from "components/core";
 // ui
 import { Avatar } from "components/ui";
 // icons
 import User from "public/user.png";
-import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IIssueLabels, IModule, UserAuth } from "types";
 // fetch-keys
@@ -28,8 +27,6 @@ type Props = {
   groupedIssues: any;
   issues: IIssue[];
   module?: IModule;
-  setModuleLinkModal?: any;
-  handleDeleteLink?: any;
   userAuth?: UserAuth;
 };
 
@@ -47,8 +44,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
   groupedIssues,
   issues,
   module,
-  setModuleLinkModal,
-  handleDeleteLink,
   userAuth,
 }) => {
   const router = useRouter();
@@ -72,14 +67,12 @@ export const SidebarProgressStats: React.FC<Props> = ({
 
   const currentValue = (tab: string | null) => {
     switch (tab) {
-      case "Links":
-        return 0;
       case "Assignees":
-        return 1;
+        return 0;
       case "Labels":
-        return 2;
+        return 1;
       case "States":
-        return 3;
+        return 2;
 
       default:
         return 3;
@@ -91,12 +84,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
       onChange={(i) => {
         switch (i) {
           case 0:
-            return setTab("Links");
-          case 1:
             return setTab("Assignees");
-          case 2:
+          case 1:
             return setTab("Labels");
-          case 3:
+          case 2:
             return setTab("States");
 
           default:
@@ -109,20 +100,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
         className={`flex w-full items-center justify-between rounded-md bg-gray-100 px-1 py-1.5 
         ${module ? "text-xs" : "text-sm"} `}
       >
-        {module ? (
-          <Tab
-            className={({ selected }) =>
-              `w-full rounded px-3 py-1 text-gray-900  ${
-                selected ? " bg-theme text-white" : "  hover:bg-hover-gray"
-              }`
-            }
-          >
-            Links
-          </Tab>
-        ) : (
-          ""
-        )}
-
         <Tab
           className={({ selected }) =>
             `w-full rounded px-3 py-1 text-gray-900  ${
@@ -152,29 +129,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
       </Tab.List>
       <Tab.Panels className="flex w-full items-center justify-between p-1">
-        {module ? (
-          <Tab.Panel as="div" className="flex w-full flex-col text-xs ">
-            <button
-              type="button"
-              className="flex w-full items-center justify-start gap-2 rounded px-4 py-2  hover:bg-theme/5"
-              onClick={() => setModuleLinkModal(true)}
-            >
-              <PlusIcon className="h-4 w-4" /> <span>Add Link</span>
-            </button>
-            <div className="mt-2 space-y-2 hover:bg-theme/5">
-              {userAuth && module.link_module && module.link_module.length > 0 ? (
-                <LinksList
-                  links={module.link_module}
-                  handleDeleteLink={handleDeleteLink}
-                  userAuth={userAuth}
-                />
-              ) : null}
-            </div>
-          </Tab.Panel>
-        ) : (
-          ""
-        )}
-
         <Tab.Panel as="div" className="flex w-full flex-col text-xs ">
           {members?.map((member, index) => {
             const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));

apps/app/components/modules/sidebar.tsx

@@ -14,6 +14,7 @@ import {
   ChevronDownIcon,
   DocumentDuplicateIcon,
   DocumentIcon,
+  PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
 
@@ -24,7 +25,7 @@ import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { LinkModal, SidebarProgressStats } from "components/core";
+import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
@@ -414,7 +415,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                       </div>
 
                       {isStartValid && isEndValid ? (
-                        <Disclosure.Button>
+                        <Disclosure.Button className="p-1">
                           <ChevronDownIcon
                             className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
                             aria-hidden="true"
@@ -485,7 +486,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                       </div>
 
                       {issues.length > 0 ? (
-                        <Disclosure.Button>
+                        <Disclosure.Button className="p-1">
                           <ChevronDownIcon
                             className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
                             aria-hidden="true"
@@ -508,8 +509,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                               <SidebarProgressStats
                                 issues={issues}
                                 groupedIssues={groupedIssues}
-                                setModuleLinkModal={setModuleLinkModal}
-                                handleDeleteLink={handleDeleteLink}
                                 userAuth={userAuth}
                                 module={module}
                               />
@@ -524,6 +523,27 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                 )}
               </Disclosure>
             </div>
+
+            <div className="flex w-full flex-col text-xs border-t border-gray-300 px-6 py-6">
+              <div className="flex justify-between items-center w-full">
+                <h4 className="font-medium text-sm text-gray-500">Links</h4>
+                <button
+                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100"
+                  onClick={() => setModuleLinkModal(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                </button>
+              </div>
+              <div className="mt-2 space-y-2 hover:bg-gray-100">
+                {userAuth && module.link_module && module.link_module.length > 0 ? (
+                  <LinksList
+                    links={module.link_module}
+                    handleDeleteLink={handleDeleteLink}
+                    userAuth={userAuth}
+                  />
+                ) : null}
+              </div>
+            </div>
           </>
         ) : (
           <Loader className="px-5">