feat: add size variant for search bar

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -15,11 +15,13 @@
  */
 
 import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
+import { ComponentSizeType } from '@Shared/constants'
 import { ReactComponent as Search } from '@Icons/ic-search.svg'
 import { ReactComponent as Clear } from '@Icons/ic-error-cross.svg'
 import { SearchBarProps } from './types'
 import './searchBar.scss'
 import { debounce } from '../Helper'
+import { getSearchBarHeightFromSize } from './utils'
 
 /**
  * Generic search input component with support for enter based and debounced search
@@ -65,6 +67,7 @@ const SearchBar = ({
     debounceTimeout = 300,
     dataTestId = 'search-bar',
     noBackgroundAndBorder = false,
+    size = ComponentSizeType.medium,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -116,7 +119,7 @@ const SearchBar = ({
     return (
         <div className={containerClassName}>
             <div
-                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-32`}
+                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
             >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input

src/Common/SearchBar/SearchBar.component.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { ComponentSizeType } from '@Shared/constants'
+
 export interface SearchBarProps {
     /**
      * Initial search text
@@ -55,4 +57,10 @@ export interface SearchBarProps {
      * Hide the background and border of the search
      */
     noBackgroundAndBorder?: boolean
+    /**
+     * Height of the searchbar
+     *
+     * @default 'ComponentSizeType.medium'
+     */
+    size?: ComponentSizeType.medium | ComponentSizeType.large
 }

src/Common/SearchBar/types.ts

@@ -0,0 +1,11 @@
+import { ComponentSizeType } from '@Shared/constants'
+import { SearchBarProps } from './types'
+
+export const getSearchBarHeightFromSize = (size: SearchBarProps['size']): string => {
+    switch (size) {
+        case ComponentSizeType.large:
+            return 'h-36'
+        default:
+            return 'h-32'
+    }
+}

src/Common/SearchBar/utils.ts

@@ -33,7 +33,7 @@ const LogStageAccordion = ({
             <button
                 className={`flexbox dc__transparent dc__content-space py-6 px-8 br-4 dc__align-items-center dc__select-text logs-renderer__stage-accordion ${
                     isOpen ? 'logs-renderer__stage-accordion--open-stage' : ''
-                } dc__position-sticky dc__zi-1 dc__top-40`}
+                } dc__position-sticky dc__zi-1 dc__top-44`}
                 type="button"
                 role="tab"
                 onClick={handleAccordionToggle}

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -18,7 +18,7 @@ import { useParams } from 'react-router'
 import { useEffect, useRef, useState } from 'react'
 import AnsiUp from 'ansi_up'
 import DOMPurify from 'dompurify'
-import { ANSI_UP_REGEX } from '@Shared/constants'
+import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
 import {
     Progressing,
     Host,
@@ -200,7 +200,7 @@ export const LogsRenderer = ({
                         acc.push(
                             part.replace(
                                 new RegExp(targetSearchKey, 'g'),
-                                `\x1B[48;2;197;141;54m${targetSearchKey}\x1B[0m${index > 0 ? availableEscapeCodes[index - 1] : ''}`,
+                                `\x1B[0m\x1B[48;2;197;141;54m${targetSearchKey}\x1B[0m${index > 0 ? availableEscapeCodes[index - 1] : ''}`,
                             ),
                         )
                         if (part.includes(targetSearchKey)) {
@@ -414,6 +414,7 @@ export const LogsRenderer = ({
                                 }}
                                 handleEnter={handleSearchEnter}
                                 initialSearchText={searchKey}
+                                size={ComponentSizeType.large}
                             />
                         </div>
                     </div>