Assignee Filter radio issue fixed (#1855)

* Assignee Filter issue fixed * data testid added * radio data testid updated
AOT-Technologies · Jan 23, 2024 · a7d5b24 · a7d5b24
1 parent 2d5f404
commit a7d5b24
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git a/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss b/forms-flow-web/src/components/ServiceFlow/details/TaskDetail.scss
@@ -38,3 +38,7 @@ word-break: break-all;
       padding: 2px 4px !important;
     }
 }
+.searchtype-dropdown{
+  width: 26vh;
+}
+
diff --git a/forms-flow-web/src/components/ServiceFlow/details/UserSelectionDebounce.js b/forms-flow-web/src/components/ServiceFlow/details/UserSelectionDebounce.js
@@ -1,4 +1,4 @@
-import React, { useState,useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import AsyncSelect from "react-select/async";
 import { useDispatch } from "react-redux";
 import { Row, Col } from "react-bootstrap";
@@ -10,9 +10,7 @@ import {
   SearchByLastName,
   UserSearchFilterTypes,
 } from "../constants/userSearchFilterTypes";
-import DropdownButton from "react-bootstrap/DropdownButton";
 import Dropdown from "react-bootstrap/Dropdown";
-import Form from "react-bootstrap/Form";
 
 const UserSelectionDebounce = React.memo((props) => {
   const { onClose, currentUser, onChangeClaim } = props;
@@ -31,7 +29,7 @@ const UserSelectionDebounce = React.memo((props) => {
     // outside click
     onClose();
   };
-  
+
   useEffect(() => {
     // add when mounted
     document.addEventListener("mousedown", handleClick);
@@ -110,7 +108,7 @@ const UserSelectionDebounce = React.memo((props) => {
 
   return (
     <>
-      <Row ref={userSelectionRef}>
+      <Row ref={userSelectionRef} data-testid="task-user-selection-row">
         <Col sm={10} className="no-padding-left pe-1">
           <AsyncSelect
             cacheOptions
@@ -124,37 +122,46 @@ const UserSelectionDebounce = React.memo((props) => {
             formatOptionLabel={formatOptionLabel}
             onMenuClose={onClose}
             value={selectedValue}
+            data-testid="task-async-user-select"
           />
         </Col>
         <Col sm={2} className="p-0 no-padding-left">
-          <DropdownButton
-            id="dropdown-basic-button"
-            title={<i className="fa fa-filter" />}
-            size="sm"
-            variant="secondary"
-          >
-            {UserSearchFilterTypes.map((UserSearchFilterType, idx) => {
-              return (
-                <Dropdown.Item
+          <Dropdown>
+            <Dropdown.Toggle
+              variant="secondary"
+              id="dropdown-basic"
+              data-testid="assignee-search-filter-dropdown-toggle"
+            >
+              <i className="fa fa-filter" />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="searchtype-dropdown">
+              {UserSearchFilterTypes.map((UserSearchFilterType, idx) => (
+                <div
                   key={idx}
-                  className="click-element"
-                  onClick={() => setSearchTypeOption(UserSearchFilterType)}
+                  className="mb-2 mx-2"
+                  data-testid={`assignee-search-filter-option-${idx}`}
                 >
-                  <Form.Check
-                    type="radio"
-                    id={UserSearchFilterType.searchType}
-                    key={UserSearchFilterType.searchType}
-                    label={UserSearchFilterType.title}
-                    value={UserSearchFilterType.searchType}
-                    checked={
-                      searchTypeOption.searchType ===
-                      UserSearchFilterType.searchType
-                    }
-                  />
-                </Dropdown.Item>
-              );
-            })}
-          </DropdownButton>
+                  <label className="form-check-label">
+                    <input
+                      className="form-check-input me-2"
+                      type="radio"
+                      id={UserSearchFilterType.searchType}
+                      name="searchType"
+                      value={UserSearchFilterType.searchType}
+                      onChange={() => setSearchTypeOption(UserSearchFilterType)}
+                      checked={
+                        searchTypeOption.searchType ===
+                        UserSearchFilterType.searchType
+                      }
+                      data-testid={`assignee-filter-option-${UserSearchFilterType.searchType}`}
+                    />
+                    {UserSearchFilterType.title}
+                  </label>
+                  <br />
+                </div>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
         </Col>
       </Row>
     </>