Merge branch 'main' into feat/create-plugin

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -16,7 +16,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import Tippy from '@tippyjs/react'
-import { copyToClipboard, noop } from '../Helper'
+import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -42,10 +42,16 @@ export default function ClipboardButton({
     const [copied, setCopied] = useState<boolean>(false)
     const [enableTippy, setEnableTippy] = useState<boolean>(false)
 
-    const handleTextCopied = () => setCopied(true)
+    const handleTextCopied = () => {setCopied(true)}
     const handleEnableTippy = () => setEnableTippy(true)
     const handleDisableTippy = () => setEnableTippy(false)
-    const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
+    const handleCopyContent = useCallback(
+        (e?) => {
+           if(e) stopPropagation(e)
+            copyToClipboard(content, handleTextCopied)
+        },
+        [content],
+    )
 
     useEffect(() => {
         if (!copied) return

src/Assets/Icon/ic-caret-down.svg

@@ -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/Assets/Icon/ic-circle.svg

@@ -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
 }