@devtron-labs/devtron-fe-common-lib 0.0.53-beta-3 → 0.0.53-beta-5

package/dist/Common/Common.service.d.ts

@@ -12,9 +12,9 @@ export declare const SourceTypeMap: {
     BranchRegex: string;
 };
 export declare function getUserRole(appName?: string): Promise<UserRole>;
-export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
+export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType<any>>;
 export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
-export declare function fetchChartTemplateVersions(): Promise<ResponseType>;
+export declare function fetchChartTemplateVersions(): Promise<ResponseType<any>>;
 export {};

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

@@ -1,8 +1,39 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { SearchBarProps } from './types';
 import './searchBar.scss';
 /**
  * Generic search input component with support for enter based and debounced search
+ * Note: The component is uncontrolled
+ *
+ * @example Usage with default debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
+ * ```
+ *
+ * @example Initial search text
+ * ```tsx
+ * <SearchBar initialSearchText="Keyword" />
+ * ```
+ *
+ * @example Custom width
+ * ```tsx
+ * <SearchBar containerClassName="w-300" />
+ * ```
+ *
+ * @example Trigger search on enter key press
+ * ```tsx
+ * <SearchBar handleEnter={triggerSearchApi} />
+ * ```
+ *
+ * @example Custom timeout for debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
+ * ```
+ *
+ * @example Placeholder for the search
+ * ```tsx
+ * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
+ * ```
  */
-declare const SearchBar: FunctionComponent<SearchBarProps>;
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
 export default SearchBar;

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

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component';
+export type { SearchBarProps } from './types';

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, SyntheticEvent } from 'react';
+import { InputHTMLAttributes } from 'react';
 export interface SearchBarProps {
     /**
      * Initial search text
@@ -13,7 +13,7 @@ export interface SearchBarProps {
     /**
      * Enter event handler for the search input
      */
-    handleEnter?: (event: SyntheticEvent) => void;
+    handleEnter?: (searchText: string) => void;
     /**
      * Input props for the search input
      */

package/dist/Common/Types.d.ts

@@ -2,10 +2,23 @@ import React, { ReactNode, CSSProperties } from 'react';
 import { Placement } from 'tippy.js';
 import { ImageComment, ReleaseTag } from './ImageTags.Types';
 import { DockerConfigOverrideType, TaskErrorObj } from '.';
-export interface ResponseType {
+/**
+ * Generic response type object with support for overriding the result type
+ *
+ * @example Default usage:
+ * ```ts
+ * interface UserResponse extends ResponseType {}
+ * ```
+ *
+ * @example Override the response type:
+ * ```ts
+ * interface UserResponse extends ResponseType<Record<string, string>> {}
+ * ```
+ */
+export interface ResponseType<T = any> {
     code: number;
     status: string;
-    result?: any;
+    result?: T;
     errors?: any;
 }
 export interface APIOptions {

package/dist/Common/index.d.ts

@@ -26,7 +26,7 @@ export * from './Common.service';
 export * from './Checkbox';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
-export { default as SearchBar } from './SearchBar/SearchBar.component';
+export * from './SearchBar';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';

package/dist/index.js

@@ -24618,9 +24618,40 @@ styleInject(css_248z$4);
 
 /**
  * Generic search input component with support for enter based and debounced search
+ * Note: The component is uncontrolled
+ *
+ * @example Usage with default debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
+ * ```
+ *
+ * @example Initial search text
+ * ```tsx
+ * <SearchBar initialSearchText="Keyword" />
+ * ```
+ *
+ * @example Custom width
+ * ```tsx
+ * <SearchBar containerClassName="w-300" />
+ * ```
+ *
+ * @example Trigger search on enter key press
+ * ```tsx
+ * <SearchBar handleEnter={triggerSearchApi} />
+ * ```
+ *
+ * @example Custom timeout for debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
+ * ```
+ *
+ * @example Placeholder for the search
+ * ```tsx
+ * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
+ * ```
  */
 var SearchBar = function (_a) {
-    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? noop$1 : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? noop$1 : _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;
     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), [
@@ -24637,18 +24668,21 @@ 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') {
             var inputTarget = e.target;
-            var event_1 = __assign(__assign({}, e), { target: __assign(__assign({}, inputTarget), { value: inputTarget.value.trim() }) });
-            handleSearchChange(event_1.target.value);
-            handleEnter(event_1);
+            var value = inputTarget.value.trim();
+            _applySearch(value);
         }
     };
     var clearSearch = function () {
         inputRef.current.value = '';
-        handleSearchChange('');
+        _applySearch('');
     };
     return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bcn-0 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-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bcn-0 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-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };

package/package.json

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

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

@@ -1,22 +1,53 @@
-import { ChangeEvent, FunctionComponent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } 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'
 import './searchBar.scss'
-import { debounce, noop } from '../Helper'
+import { debounce } from '../Helper'
 
 /**
  * Generic search input component with support for enter based and debounced search
+ * Note: The component is uncontrolled
+ *
+ * @example Usage with default debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
+ * ```
+ *
+ * @example Initial search text
+ * ```tsx
+ * <SearchBar initialSearchText="Keyword" />
+ * ```
+ *
+ * @example Custom width
+ * ```tsx
+ * <SearchBar containerClassName="w-300" />
+ * ```
+ *
+ * @example Trigger search on enter key press
+ * ```tsx
+ * <SearchBar handleEnter={triggerSearchApi} />
+ * ```
+ *
+ * @example Custom timeout for debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
+ * ```
+ *
+ * @example Placeholder for the search
+ * ```tsx
+ * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
+ * ```
  */
-const SearchBar: FunctionComponent<SearchBarProps> = ({
+const SearchBar = ({
     initialSearchText = '',
-    handleSearchChange = noop,
-    handleEnter = noop,
+    handleSearchChange = () => {},
+    handleEnter = () => {},
     inputProps = {},
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
-}) => {
+}: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
     const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
@@ -34,20 +65,24 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
         }
     }
 
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
         if (key === 'Enter') {
             const inputTarget = e.target as HTMLInputElement
-            const event = { ...e, target: { ...inputTarget, value: inputTarget.value.trim() } }
-            handleSearchChange(event.target.value)
-            handleEnter(event)
+            const value = inputTarget.value.trim()
+            _applySearch(value)
         }
     }
 
     const clearSearch = () => {
         inputRef.current.value = ''
-        handleSearchChange('')
+        _applySearch('')
     }
 
     return (

package/src/Common/SearchBar/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component'
+export type { SearchBarProps } from './types'

package/src/Common/SearchBar/types.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, SyntheticEvent } from 'react'
+import { InputHTMLAttributes } from 'react'
 
 export interface SearchBarProps {
     /**
@@ -14,7 +14,7 @@ export interface SearchBarProps {
     /**
      * Enter event handler for the search input
      */
-    handleEnter?: (event: SyntheticEvent) => void
+    handleEnter?: (searchText: string) => void
     /**
      * Input props for the search input
      */

package/src/Common/Types.ts

@@ -3,10 +3,23 @@ import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
-export interface ResponseType {
+/**
+ * Generic response type object with support for overriding the result type
+ *
+ * @example Default usage:
+ * ```ts
+ * interface UserResponse extends ResponseType {}
+ * ```
+ *
+ * @example Override the response type:
+ * ```ts
+ * interface UserResponse extends ResponseType<Record<string, string>> {}
+ * ```
+ */
+export interface ResponseType<T = any> {
     code: number
     status: string
-    result?: any
+    result?: T
     errors?: any
 }
 

package/src/Common/index.ts

@@ -26,7 +26,7 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-export { default as SearchBar } from './SearchBar/SearchBar.component'
+export * from './SearchBar'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'