feat: [PROD-12487] add SearchBar component in inputs

src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js

@@ -13,7 +13,8 @@ import '@nosferatu500/react-sortable-tree/style.css';
 import { ScenarioUtils } from '@cosmotech/core';
 import useStyles from './style';
 import { FadingTooltip } from '../../misc';
-import { ScenarioSortableTree, SearchInput } from './components';
+import { ScenarioSortableTree } from './components';
+import { SearchBar } from '../../inputs';
 
 const initNodesDict = (scenarios, defaultExpanded) => {
   const nodesDict = {};
@@ -150,7 +151,12 @@ export const ScenarioManagerTreeList = (props) => {
   return (
     <div className={classes.root}>
       <div className={classes.searchContainer}>
-        <SearchInput label={labels.searchField} className={classes.searchField} onSearchChange={setSearchText} />
+        <SearchBar
+          label={labels.searchField}
+          className={classes.searchField}
+          onSearchChange={setSearchText}
+          id="scenario-manager-search-field"
+        />
         <div className={classes.toolbar}>
           <FadingTooltip title={labels?.toolbar?.collapseAll || 'Collapse all'}>
             <IconButton className={classes.toolbarPrimaryAction} onClick={collapseAll} size="large">
@@ -230,18 +236,18 @@ ScenarioManagerTreeList.propTypes = {
   buildDatasetInfo: PropTypes.func.isRequired,
   /**
    * DEPRECATED: this prop is deprecated, use 'canUserDeleteScenario' instead
-   * Boolean value to define whether or not scenario delete buttons must be shown in ScenarioNode elements:
+   * Boolean value to define whether scenario delete buttons must be shown in ScenarioNode elements:
    *  - false: delete buttons are always hidden
    *  - true: delete buttons are shown if the user id matches the scenario owner id
    */
   showDeleteIcon: PropTypes.bool,
   /**
-   * Function returning whether or not the current user can delete a given scenario. This function receives as parameter
+   * Function returning whether the current user can delete a given scenario. This function receives as parameter
    * the scenario data and must return a boolean.
    */
   canUserDeleteScenario: PropTypes.func,
   /**
-   * Function returning whether or not the current user can rename a given scenario. This function receives as parameter
+   * Function returning whether the current user can rename a given scenario. This function receives as parameter
    * the scenario data and must return a boolean.
    */
   canUserRenameScenario: PropTypes.func,
@@ -268,7 +274,7 @@ ScenarioManagerTreeList.propTypes = {
     searchField: 'string',
     toolbar : {
       expandAll: 'string',
-      expantTree: 'string'
+      expandTree: 'string'
       collapseAll: 'string',
     }
   }

src/charts/ScenarioManagerTreeList/components/index.js

@@ -1,2 +1 @@
-export { SearchInput } from './SearchInput';
 export { ScenarioSortableTree } from './ScenarioSortableTree';

src/index.js

@@ -22,6 +22,7 @@ export {
   TABLE_DATA_STATUS,
   RoleEditor,
   SelectWithAction,
+  SearchBar,
 } from './inputs';
 export { UserInfo, HelpMenu } from './menus';
 export {

src/charts/ScenarioManagerTreeList/components/SearchInput/SearchInput.js → src/inputs/SearchBar/SearchBar.js

@@ -1,11 +1,11 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 
-import React, { useState, useRef } from 'react';
-import { TextField } from '@mui/material';
+import React, { useRef, useState } from 'react';
+import { TextField, InputAdornment } from '@mui/material';
 import PropTypes from 'prop-types';
 
-export const SearchInput = ({ onSearchChange, className, label }) => {
+export const SearchBar = ({ onSearchChange, className, label, icon, id }) => {
   const [textValue, setTextValue] = useState('');
 
   const timeoutHandle = useRef();
@@ -37,20 +37,27 @@ export const SearchInput = ({ onSearchChange, className, label }) => {
 
   return (
     <TextField
-      data-cy="scenario-manager-search-field"
-      id="standard-search"
+      data-cy={id}
+      id={id}
       label={label}
       type="search"
       className={className}
       value={textValue}
       onChange={onTextChange}
       onKeyDown={onKeyDown}
       color="primary"
+      InputProps={{
+        endAdornment: <InputAdornment position="end">{icon}</InputAdornment>,
+      }}
     />
   );
 };
 
-SearchInput.propTypes = {
+SearchBar.propTypes = {
+  /**
+   * id of the input
+   */
+  id: PropTypes.string,
   /**
    * callback for change search value
    */
@@ -63,4 +70,8 @@ SearchInput.propTypes = {
    * label of TextField
    */
   label: PropTypes.string,
+  /**
+   * optional icon to be appended in the end of the TextField
+   */
+  icon: PropTypes.node,
 };

src/charts/ScenarioManagerTreeList/components/SearchInput/index.js → src/inputs/SearchBar/index.js

@@ -1,4 +1,4 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 
-export { SearchInput } from './SearchInput';
+export { SearchBar } from './SearchBar';

src/inputs/index.js

@@ -17,3 +17,4 @@ export {
 export { EditableLabel } from './EditableLabel';
 export { RoleEditor } from './RoleEditor';
 export { SelectWithAction } from './SelectWithAction';
+export { SearchBar } from './SearchBar';