style: peek overview and issue details properties (#3447)

* style: peek overview and issue details properties

* fix: cycle and module remove function

* style: update placeholder text color

* fix: relation constant

* chore: added todos to fix later

web/components/issues/issue-detail/module-select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // hooks
-import { useModule, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
+// components
+import { ModuleDropdown } from "components/dropdowns";
 // ui
-import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import type { TIssueOperations } from "./root";
 
 type TIssueModuleSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -17,58 +21,42 @@ type TIssueModuleSelect = {
 };
 
 export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
-  // hooks
-  const { getModuleById, projectModuleIds, fetchModules } = useModule();
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // state
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => {
-    if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId);
-  });
-
+  // derived values
   const issue = getIssueById(issueId);
-  const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined;
   const disableSelect = disabled || isUpdating;
 
-  const handleIssueModuleChange = async (moduleId: string) => {
-    if (!moduleId) return;
+  const handleIssueModuleChange = async (moduleId: string | null) => {
+    if (!issue || issue.module_id === moduleId) return;
     setIsUpdating(true);
-    if (issue && issue.module_id === moduleId)
-      await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
-    else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
+    if (moduleId) await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
+    else await issueOperations.removeIssueFromModule(workspaceSlug, projectId, issue.module_id ?? "", issueId);
     setIsUpdating(false);
   };
 
-  type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
-  const options: TDropdownOptions | undefined = projectModuleIds
-    ? (projectModuleIds
-        .map((moduleId) => {
-          const _module = getModuleById(moduleId);
-          if (!_module) return undefined;
-
-          return {
-            value: _module.id,
-            query: _module.name,
-            content: (
-              <div className="flex items-center gap-1.5 truncate">
-                <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                  <DiceIcon />
-                </span>
-                <span className="flex-grow truncate">{_module.name}</span>
-              </div>
-            ) as ReactNode,
-          };
-        })
-        .filter((_module) => _module !== undefined) as TDropdownOptions)
-    : undefined;
-
   return (
-    <div className="flex items-center gap-1">
-      <CustomSearchSelect
+    <div className={cn("flex items-center gap-1 h-full", className)}>
+      <ModuleDropdown
+        value={issue?.module_id ?? null}
+        onChange={handleIssueModuleChange}
+        buttonVariant="transparent-with-text"
+        projectId={projectId}
+        disabled={disableSelect}
+        className="w-full group"
+        buttonContainerClassName="w-full text-left"
+        buttonClassName={`text-sm ${issue?.module_id ? "" : "text-custom-text-400"}`}
+        placeholder="No module"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+      />
+      {/* <CustomSearchSelect
         value={issue?.module_id}
         onChange={(value: any) => handleIssueModuleChange(value)}
         options={options}
@@ -95,7 +83,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         }
         noChevron
         disabled={disableSelect}
-      />
+      /> */}
       {isUpdating && <Spinner className="h-4 w-4" />}
     </div>
   );