searchable dropdown added to oas modal (#1044)

* searchable dropdown added to oas modal

* remove unnecessary attribute from autocomplete

* move css to sass file

ui-common/src/components/OasModal/OasModal.module.sass

@@ -32,6 +32,9 @@
     overflow-y: scroll
 
 .borderLine
-  border-top: 1px solid #dee6fe
-  margin-bottom: 1%
+    border-top: 1px solid #dee6fe
+    margin-bottom: 1%
+
+.root
+    width: 100%
 

ui-common/src/components/OasModal/OasModal.tsx

@@ -1,5 +1,5 @@
 import { Box, Fade, FormControl, MenuItem, Modal, Backdrop } from "@material-ui/core";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
 import closeIcon from "assets/closeIcon.svg";
 import { toast } from 'react-toastify';
@@ -7,8 +7,8 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { Select } from "../UI/Select";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import SearchableDropdown from "../UI/SearchableDropdown/SearchableDropdown";
 
 
 const modalStyle = {
@@ -30,6 +30,8 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
   const [oasServices, setOasServices] = useState([] as string[])
   const [selectedServiceName, setSelectedServiceName] = useState("");
   const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
+  
+  const classes = {root: style.root}
 
   const onSelectedOASService = async (selectedService) => {
     if (oasServices.length === 0) {
@@ -88,19 +90,12 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
             </div>
           </div>
           <div className={style.selectContainer} >
-            <FormControl>
-              <Select
-                labelId="service-select-label"
-                id="service-select"
-                value={selectedServiceName}
-                onChangeCb={onSelectedOASService}
-              >
-                {oasServices.map((service) => (
-                  <MenuItem key={service} value={service}>
-                    {service}
-                  </MenuItem>
-                ))}
-              </Select>
+            <FormControl classes={classes}>
+              <SearchableDropdown 
+                options={oasServices}
+                selectedValues={selectedServiceName}
+                onChange={onSelectedOASService}
+              />
             </FormControl>
           </div>
           <div className={style.borderLine}></div>

ui-common/src/components/UI/SearchableDropdown/DefaultIconDown.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 13.6568L9.99997 13.6569L5.75732 9.41421L7.17154 8L10.0001 10.8285L12.8285 8.00009L14.2428 9.41431L10.0001 13.6569L9.99999 13.6568Z" fill="#205CF5"/>
+</svg>

ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.module.sass

@@ -0,0 +1,30 @@
+.optionItem
+    font-size: 12px
+    display: flex
+    align-items: center
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif
+
+.title
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif
+
+.optionListItem
+    font-size: 12px
+    margin-right: -15px
+    background-color: #262a3e
+    border-radius: 20px 0px 0px 20px
+    padding: 0px 16px 4px 12px
+    display: flex
+    max-width: 100px
+    height: 18px
+
+.optionListItemTitle
+    overflow: hidden
+    max-width: 80px
+    text-overflow: ellipsis
+    white-space: nowrap

ui-common/src/components/UI/SearchableDropdown/SearchableDropdown.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Autocomplete } from "@material-ui/lab";
+import { Checkbox, TextField } from "@material-ui/core";
+import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import DefaultIconDown from "DefaultIconDown.svg";
+import styles from "./SearchableDropdown.module.sass";
+
+interface SearchableDropdownProps {
+    options: string[],
+    selectedValues?: any,
+    onChange: (string) => void,
+    isLoading?: boolean,
+    label?: string,
+    multiple?: boolean,
+    inputWidth?: string
+    freeSolo?: boolean
+}
+
+const useStyles = makeStyles(() => ({
+
+    inputRoot: {
+        padding: "8px 4px 8px 12px !important",
+        borderRadius: "9px !important"
+    },
+    input: {
+        padding: "0px 33px 0px 0px !important",
+        height: 18,
+        fontWeight: "normal",
+        fontFamily: "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+    },
+    root: {
+        "& .MuiFormLabel-root": {
+            fontFamily: "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+        }
+    }
+}));
+
+
+const SearchableDropdown: React.FC<SearchableDropdownProps> = ({ options, selectedValues, onChange, isLoading, label, multiple, inputWidth, freeSolo }) => {
+
+    const classes = useStyles();
+
+    return <Autocomplete
+        freeSolo={freeSolo}
+        multiple={multiple}
+        loading={isLoading}
+        classes={classes}
+        options={options ? options : []}
+        disableCloseOnSelect={multiple}
+        fullWidth={false}
+        disableClearable
+        value={selectedValues ? selectedValues : (multiple ? [] : null)}
+        getOptionLabel={(option) => option}
+        onChange={(event, val) => onChange(val)}
+        size={"small"}
+        popupIcon={<img style={{ padding: 7 }} alt="iconDown" src={DefaultIconDown} />}
+        renderOption={(option, { selected }) => (
+            <div id={`option-${option}`} className={styles.optionItem}>
+                {multiple && <Checkbox
+                    icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+                    checkedIcon={<CheckBoxIcon fontSize="small" />}
+                    style={{ marginRight: 8 }}
+                    checked={selected}
+                />}
+                <div title={option} className={styles.title}>{option}</div>
+            </div>
+        )}
+        renderTags={() => <div className={styles.optionListItem}>
+            <div title={selectedValues?.length > 0 ? `${selectedValues[0]} (+${selectedValues.length - 1})` : ""} className={styles.optionListItemTitle}>
+                {selectedValues?.length > 0 ? `${selectedValues[0]}` : ""}
+            </div>
+            {selectedValues?.length > 1 && <div style={{ marginLeft: 5 }}>{`(+${selectedValues.length - 1})`}</div>}
+        </div>}
+        renderInput={(params) => <TextField
+            onChange={(e) => freeSolo && onChange(e.target.value)}
+            variant="outlined" label={label}
+            className={`${classes.root} searchableDropdown`}
+            style={{ backgroundColor: "transparent" }}
+            {...params}
+        />
+        }
+    />
+};
+
+export default SearchableDropdown;