fix: replace dropdown for new incident with react-select

Doing this for consistency.

chore: replace select dropdown with react select

chore: improve select component

src/components/AttachEvidenceDialog/index.tsx

@@ -1,8 +1,11 @@
+import { yupResolver } from "@hookform/resolvers/yup";
 import { useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
 
+import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import { createIncidentQueryKey } from "../../api/query-hooks";
 import { createEvidence } from "../../api/services/evidence";
 import {
   createHypothesis,
@@ -13,24 +16,21 @@ import {
 } from "../../api/services/hypothesis";
 import {
   createIncident,
-  searchIncident,
   IncidentSeverity,
-  IncidentStatus
+  IncidentStatus,
+  searchIncident
 } from "../../api/services/incident";
 import { useUser } from "../../context";
-import { TextInput } from "../TextInput";
-import { Modal } from "../Modal";
+import { Events, sendAnalyticEvent } from "../../services/analytics";
+import { IItem } from "../../types/IItem";
 import { DropdownWithActions } from "../Dropdown/DropdownWithActions";
-import { IncidentStatusTag } from "../IncidentStatusTag";
+import SelectDropdown from "../Dropdown/SelectDropdown";
+import { severityItems, typeItems } from "../Incidents/data";
 import { IncidentSeverityTag } from "../IncidentSeverityTag";
-import { IItem } from "../../types/IItem";
+import { IncidentStatusTag } from "../IncidentStatusTag";
+import { Modal } from "../Modal";
+import { TextInput } from "../TextInput";
 import { toastSuccess } from "../Toast/toast";
-import { Link } from "react-router-dom";
-import { severityItems, typeItems } from "../Incidents/data";
-import { ReactSelectDropdown } from "../ReactSelectDropdown";
-import { useQueryClient } from "@tanstack/react-query";
-import { createIncidentQueryKey } from "../../api/query-hooks";
-import { Events, sendAnalyticEvent } from "../../services/analytics";
 
 interface Props {
   title?: string;
@@ -141,6 +141,22 @@ const validationSchema = yup
   })
   .required();
 
+const severityOptions = Object.entries(severityItems).map(
+  ([_, { value, description, icon }]) => ({
+    value,
+    label: description,
+    icon
+  })
+);
+
+const typeOptions = Object.entries(typeItems).map(
+  ([_, { value, description, icon }]) => ({
+    value,
+    label: description,
+    icon
+  })
+);
+
 export function AttachEvidenceDialog({
   title = "Link to Incident",
   config_id,
@@ -394,13 +410,15 @@ export function AttachEvidenceDialog({
                     <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
                       Type
                     </span>
-                    <ReactSelectDropdown
+                    <SelectDropdown
                       name="type"
-                      label=""
                       className="w-full"
-                      control={control}
-                      items={typeItems}
+                      options={typeOptions}
                       value={watchType}
+                      onChange={(e) => {
+                        if (!e) return;
+                        setValue("type", e);
+                      }}
                     />
                     <p className="text-red-600 text-sm">
                       {errors.type?.message}
@@ -414,13 +432,15 @@ export function AttachEvidenceDialog({
                     <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
                       Severity
                     </span>
-                    <ReactSelectDropdown
+                    <SelectDropdown
                       name="severity"
-                      label=""
                       className="w-full"
-                      control={control}
-                      items={severityItems}
+                      options={severityOptions}
                       value={watchSeverity}
+                      onChange={(e) => {
+                        if (!e) return;
+                        setValue("severity", e);
+                      }}
                     />
                     <p className="text-red-600 text-sm">
                       {errors.severity?.message}

src/components/Dropdown/SelectDropdown.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import Select, { components } from "react-select";
+
+type SelectDropdownProps = {
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+  }[];
+  value: string;
+  onChange: (value: string) => void;
+} & Omit<ComponentProps<Select>, "onChange" | "value" | "options">;
+
+export default function SelectDropdown({
+  options,
+  value,
+  onChange = () => {},
+  ...props
+}: SelectDropdownProps) {
+  return (
+    <Select
+      {...props}
+      options={options}
+      value={options.find((e) => e.value === value)}
+      onChange={(e) => {
+        return onChange((e as SelectDropdownProps["options"][number]).value);
+      }}
+      openMenuOnClick
+      openMenuOnFocus
+      components={{
+        SingleValue: ({ className, ...props }: any) => {
+          return (
+            <components.SingleValue
+              className={clsx(className, "text-sm")}
+              {...props}
+            >
+              <div
+                className="flex flex-row gap-2 items-center cursor-pointer"
+                role="button"
+              >
+                <span>{props.data.icon}</span> <span>{props.data.label}</span>
+              </div>
+            </components.SingleValue>
+          );
+        },
+        Option: ({ className, ...props }: any) => {
+          return (
+            <components.Option {...props}>
+              <div
+                className="flex flex-row gap-2 items-center cursor-pointer"
+                role="button"
+              >
+                <span>{props.data.icon}</span> <span>{props.data.label}</span>
+              </div>
+            </components.Option>
+          );
+        }
+      }}
+    />
+  );
+}