@devtron-labs/devtron-fe-common-lib 0.0.60-beta-3 → 0.0.60-beta-6

package/dist/Common/SearchBar/SearchBar.component.d.ts

@@ -35,5 +35,5 @@ import './searchBar.scss';
  * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
  * ```
  */
-declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, handleOnBlur, }: SearchBarProps) => JSX.Element;
 export default SearchBar;

package/dist/Common/SearchBar/types.d.ts

@@ -32,4 +32,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number;
+    /**
+     * handleOnBlur for the search input
+     */
+    handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }

package/dist/Common/Types.d.ts

@@ -340,7 +340,6 @@ export interface CommonNodeAttr {
     };
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
-    isGitOpsRepoNotConfigured?: boolean;
     deploymentAppCreated?: boolean;
     isLast?: boolean;
     downstreamEnvironments?: DownstreamNodesEnvironmentsType[];

package/dist/index.js

@@ -24685,13 +24685,28 @@ styleInject(css_248z$5);
  * ```
  */
 var SearchBar = function (_a) {
-    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? function () { } : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? function () { } : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, containerClassName = _a.containerClassName, _f = _a.shouldDebounce, shouldDebounce = _f === void 0 ? false : _f, _g = _a.debounceTimeout, debounceTimeout = _g === void 0 ? 300 : _g;
+    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? function () { } : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? function () { } : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, containerClassName = _a.containerClassName, _f = _a.shouldDebounce, shouldDebounce = _f === void 0 ? false : _f, _g = _a.debounceTimeout, debounceTimeout = _g === void 0 ? 300 : _g, handleOnBlur = _a.handleOnBlur;
     var _h = __read(React.useState(!!initialSearchText), 2), showClearButton = _h[0], setShowClearButton = _h[1];
     var inputRef = React.useRef();
     var debouncedSearchChange = React.useCallback(debounce$2(handleSearchChange, debounceTimeout), [
         handleSearchChange,
         debounceTimeout,
     ]);
+    // assuming initialSearchText will change if we are changing history otherwise will be constant and will not change
+    // since on changing history we expect to make api call using useAsync so not applying handleEnter
+    React.useEffect(function () {
+        inputRef.current.value = initialSearchText;
+        setShowClearButton(!!initialSearchText);
+    }, [initialSearchText]);
+    var _applySearch = function (value) {
+        handleSearchChange(value);
+        handleEnter(value);
+    };
+    var clearSearch = function () {
+        inputRef.current.value = '';
+        _applySearch('');
+        setShowClearButton(false);
+    };
     var handleChange = function (e) {
         var value = e.target.value;
         setShowClearButton(!!value);
@@ -24702,23 +24717,16 @@ var SearchBar = function (_a) {
             handleSearchChange(value);
         }
     };
-    var _applySearch = function (value) {
-        handleSearchChange(value);
-        handleEnter(value);
-    };
     var handleKeyDown = function (e) {
         var key = e.key;
         if (key === 'Enter') {
+            e.preventDefault();
             var inputTarget = e.target;
             var value = inputTarget.value.trim();
             _applySearch(value);
         }
     };
-    var clearSearch = function () {
-        inputRef.current.value = '';
-        _applySearch('');
-    };
-    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-16 icon-n4 dc__vertical-align-middle" }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef, onBlur: handleOnBlur })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-16 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
 var css_248z$4 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";

package/package.json

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

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -47,6 +47,7 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
+    handleOnBlur,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -55,9 +56,28 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
+    // assuming initialSearchText will change if we are changing history otherwise will be constant and will not change
+    // since on changing history we expect to make api call using useAsync so not applying handleEnter
+    useEffect(() => {
+        inputRef.current.value = initialSearchText
+        setShowClearButton(!!initialSearchText)
+    }, [initialSearchText])
+
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
+    const clearSearch = () => {
+        inputRef.current.value = ''
+        _applySearch('')
+        setShowClearButton(false)
+    }
+
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
         setShowClearButton(!!value)
+
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -65,25 +85,17 @@ const SearchBar = ({
         }
     }
 
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
         if (key === 'Enter') {
+            e.preventDefault()
             const inputTarget = e.target as HTMLInputElement
             const value = inputTarget.value.trim()
             _applySearch(value)
         }
     }
 
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-    }
     return (
         <div className={containerClassName}>
             <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
@@ -94,13 +106,15 @@ const SearchBar = ({
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
+                    onBlur={handleOnBlur}
                 />
+                {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (
                     <button
                         className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"

package/src/Common/SearchBar/types.ts

@@ -31,4 +31,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
+    /**
+     * handleOnBlur for the search input
+     */
+    handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
 }

package/src/Common/Types.ts

@@ -373,7 +373,6 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
-    isGitOpsRepoNotConfigured?: boolean
     deploymentAppCreated?: boolean
     isLast?: boolean
     downstreamEnvironments?: DownstreamNodesEnvironmentsType[]