From 9ccc35d181017faf0fdf1d85e0848bc00ccce719 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sat, 20 May 2023 16:00:41 +0530
Subject: [PATCH] fix: make custom search select handle undefined options
 (#1094)

* fix: make search select handle undefined options

* fix: kanban y-scroll
---
 .../analytics/custom-analytics/sidebar.tsx    | 11 ++++--
 .../core/board-view/single-board.tsx          |  2 +-
 .../integration/github/import-data.tsx        | 13 ++++---
 .../integration/github/single-user-select.tsx | 35 ++++++++---------
 .../integration/jira/import-users.tsx         | 35 ++++++++---------
 .../app/components/issues/select/assignee.tsx | 39 +++++++++----------
 .../issues/sidebar-select/assignee.tsx        | 39 +++++++++----------
 .../issues/view-select/assignee.tsx           | 39 +++++++++----------
 apps/app/components/modules/select/lead.tsx   | 33 ++++++++--------
 .../app/components/modules/select/members.tsx | 33 ++++++++--------
 .../modules/sidebar-select/select-lead.tsx    | 33 ++++++++--------
 .../modules/sidebar-select/select-members.tsx | 33 ++++++++--------
 .../components/ui/custom-search-select.tsx    | 12 +++---
 apps/app/helpers/string.helper.ts             |  2 +-
 14 files changed, 179 insertions(+), 180 deletions(-)

diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
index 26eb66d12..e9a9d5d7f 100644
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -152,7 +152,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
 
                     return (
                       <div key={project.id}>
-                        <h5 className="text-sm flex items-center gap-1">
+                        <div className="text-sm flex items-center gap-1">
                           {project.emoji ? (
                             <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
                               {String.fromCodePoint(parseInt(project.emoji))}
@@ -171,8 +171,13 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                               {project?.name.charAt(0)}
                             </span>
                           )}
-                          <span className="break-all">{project.name}</span>
-                        </h5>
+                          <h5 className="break-all">
+                            {project.name}
+                            <span className="text-brand-secondary text-xs ml-1">
+                              ({project.identifier})
+                            </span>
+                          </h5>
+                        </div>
                         <div className="mt-4 space-y-3 pl-2">
                           <div className="flex items-center justify-between gap-2 text-xs">
                             <div className="flex items-center gap-2">
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index b50b978ce..a4f869cb3 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -99,7 +99,7 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3">
+              <div className="pt-3 overflow-y-auto">
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}
diff --git a/apps/app/components/integration/github/import-data.tsx b/apps/app/components/integration/github/import-data.tsx
index a0bbfa6a5..6babaf2e7 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/apps/app/components/integration/github/import-data.tsx
@@ -23,12 +23,13 @@ type Props = {
 export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
   const { projects } = useProjects();
 
-  const options =
-    projects.map((project) => ({
-      value: project.id,
-      query: project.name,
-      content: <p>{truncateText(project.name, 25)}</p>,
-    })) ?? [];
+  const options = projects
+    ? projects.map((project) => ({
+        value: project.id,
+        query: project.name,
+        content: <p>{truncateText(project.name, 25)}</p>,
+      }))
+    : undefined;
 
   return (
     <div className="mt-6">
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/apps/app/components/integration/github/single-user-select.tsx
index 14f913bff..53fbce476 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/apps/app/components/integration/github/single-user-select.tsx
@@ -44,24 +44,23 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.email,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name + "(" + member.member.email + ")"
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.email,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name + "(" + member.member.email + ")"
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
index da14f7d15..80c0c4c9b 100644
--- a/apps/app/components/integration/jira/import-users.tsx
+++ b/apps/app/components/integration/jira/import-users.tsx
@@ -32,24 +32,23 @@ export const JiraImportUsers: FC = () => {
 
   const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.email,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name + " (" + member.member.email + ")"
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.email,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name + " (" + member.member.email + ")"
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="h-full w-full space-y-10 divide-y-2 divide-brand-base overflow-y-auto">
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 1fead864e..2e1844a69 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -29,26 +29,25 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 18934ea52..6fcd04eb8 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -33,26 +33,25 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAu
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 69726f9c5..48149c24f 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -43,26 +43,25 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
-          ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {`${
-            member.member.first_name && member.member.first_name !== ""
-              ? member.member.first_name
-              : member.member.email
-          } ${member.member.last_name ?? ""}`}
-        </div>
-      ),
-    })) ?? [];
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {`${
+          member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email
+        } ${member.member.last_name ?? ""}`}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
index aaa6980f6..be7052df0 100644
--- a/apps/app/components/modules/select/lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -30,24 +30,23 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   const selectedOption = members?.find((m) => m.member.id === value)?.member;
 
diff --git a/apps/app/components/modules/select/members.tsx b/apps/app/components/modules/select/members.tsx
index 8d407f36a..c95331202 100644
--- a/apps/app/components/modules/select/members.tsx
+++ b/apps/app/components/modules/select/members.tsx
@@ -28,24 +28,23 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <CustomSearchSelect
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index cea3627f1..937a0d6df 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -31,24 +31,23 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   const selectedOption = members?.find((m) => m.member.id === value)?.member;
 
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index 2f024913f..2481aaeed 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -29,24 +29,23 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
       : null
   );
 
-  const options =
-    members?.map((member) => ({
-      value: member.member.id,
-      query:
-        (member.member.first_name && member.member.first_name !== ""
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query:
+      (member.member.first_name && member.member.first_name !== ""
+        ? member.member.first_name
+        : member.member.email) +
+        " " +
+        member.member.last_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar user={member.member} />
+        {member.member.first_name && member.member.first_name !== ""
           ? member.member.first_name
-          : member.member.email) +
-          " " +
-          member.member.last_name ?? "",
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar user={member.member} />
-          {member.member.first_name && member.member.first_name !== ""
-            ? member.member.first_name
-            : member.member.email}
-        </div>
-      ),
-    })) ?? [];
+          : member.member.email}
+      </div>
+    ),
+  }));
 
   return (
     <div className="flex items-center justify-start gap-1">
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index ebe1dfb45..ef0943377 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -9,11 +9,13 @@ import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 type CustomSearchSelectProps = {
   value: any;
   onChange: any;
-  options: {
-    value: any;
-    query: string;
-    content: JSX.Element;
-  }[];
+  options:
+    | {
+        value: any;
+        query: string;
+        content: JSX.Element;
+      }[]
+    | undefined;
   label?: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
   height?: "sm" | "md" | "rg" | "lg";
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
index 1cdebf0bb..a13f149fc 100644
--- a/apps/app/helpers/string.helper.ts
+++ b/apps/app/helpers/string.helper.ts
@@ -89,7 +89,7 @@ export const cosineSimilarity = (a: string, b: string) => {
 };
 
 export const generateRandomColor = (string: string): string => {
-  if (!string) return "var(--color-accent)";
+  if (!string) return "rgb(var(--color-accent))";
 
   string = `${string}`;