data test id props in search bar

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.83-beta-2",
+    "version": "0.0.83-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -47,6 +47,7 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
+    dataTestId = 'search-bar',
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -101,7 +102,7 @@ const SearchBar = ({
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input
                     placeholder="Search"
-                    data-testid="search-bar"
+                    data-testid={dataTestId}
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}

src/Common/SearchBar/SearchBar.component.tsx

@@ -31,4 +31,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
+    /**
+     * Data test id for the search input
+     */
+    dataTestId?: string
 }

src/Common/SearchBar/types.ts

@@ -0,0 +1,94 @@
+export const CommonGroupedDropdownStyles = {
+    container: (base, state) => ({
+        ...base,
+        ...(state.isDisabled && {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+        }),
+        minHeight: '36px',
+        width: '100%',
+    }),
+    control: (base, state) => ({
+        ...base,
+        boxShadow: 'none',
+        minHeight: '36px',
+        backgroundColor: 'var(--N50)',
+        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        opacity: state.isDisabled ? 0.5 : 1,
+        maxHeight: '200px',
+        overflow: 'scroll',
+        alignItems: 'flex-start',
+    }),
+    singleValue: (base) => ({
+        ...base,
+        fontWeight: 400,
+        color: 'var(--N900)',
+        fontSize: '13px',
+    }),
+    option: (base, state) => ({
+        ...base,
+        padding: '6px 8px 6px 0',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        color: 'var(--N900)',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontSize: '13px',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '4px 0px 4px 8px',
+        display: 'flex',
+        minHeight: '36px',
+        gap: '6px',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        ...(state.isDisabled ? { opacity: state.isDisabled ? 0.7 : 1 } : {}),
+    }),
+    group: (base) => ({
+        ...base,
+        paddingTop: '4px',
+        paddingBottom: 0,
+    }),
+    groupHeading: (base) => ({
+        ...base,
+        fontWeight: 600,
+        fontSize: '12px',
+        color: 'var(--N900)',
+        backgroundColor: 'var(--N100)',
+        marginBottom: 0,
+        padding: '4px 8px',
+        textTransform: 'none',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    }),
+    menuList: (base) => ({
+        ...base,
+        padding: 0,
+        marginBottom: '4px',
+    }),
+    multiValue: (base) => ({
+        ...base,
+        border: `1px solid var(--N200)`,
+        borderRadius: `4px`,
+        background: 'white',
+        height: '28px',
+        margin: '0px',
+        padding: '2px',
+        fontSize: '13px',
+    }),
+    multiValueLabel: (base) => ({
+        ...base,
+        padding: '0px',
+        fontSize: '13px',
+    }),
+    placeholder: (base) => ({
+        ...base,
+        position: 'absolute',
+    }),
+}

src/Shared/Components/ReactSelect/constants.ts

@@ -1 +1,2 @@
 export * from './utils'
+export * from './constants'