fix: make custom search select handle undefined options (#1094)

* fix: make search select handle undefined options

* fix: kanban y-scroll

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">

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}

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">

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">

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">

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

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;
 

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

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;
 

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

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;
 

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">

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";

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}`;