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

package/package.json

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

package/src/Common/Common.service.ts

@@ -133,6 +133,8 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             isVirtualEnvironment: material.isVirtualEnvironment,
             imageComment: material.imageComment,
             imageReleaseTags: material.imageReleaseTags,
+            hasDuplicateImages: material.hasDuplicateImages,
+            isSuperseded: material.isSuperseded,
             // It is going to be null but required in type so can't remove
             lastExecution: material.lastExecution,
             materialInfo: material.material_info

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -4,8 +4,6 @@ import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
 import { DebouncedSearchProps } from './Types'
 
 /**
- * @deprecated Use `SearchBar` component instead.
- *
  * @param onSearch - Callback function to be called on search
  * @param Icon - (Optional) Icon to be shown before the input
  * @param iconClass - (Optional) Class for the icon

package/src/Common/Helper.tsx

@@ -559,18 +559,3 @@ export function getLockedJSON(json, jsonPathArray: string[]) {
     return resultJson['$']
 }
 
-/**
- * Returns a debounced variant of the function
- */
-export const debounce = (func, timeout = 500) => {
-    let timer
-
-    return function (this, ...args) {
-        const context = this
-        if (timer) clearTimeout(timer)
-        timer = setTimeout(() => {
-            timer = null
-            func.apply(context, args)
-        }, timeout)
-    }
-}

package/src/Common/Types.ts

@@ -3,23 +3,10 @@ import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
-/**
- * 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> {
+export interface ResponseType {
     code: number
     status: string
-    result?: T
+    result?: any
     errors?: any
 }
 
@@ -274,6 +261,8 @@ export interface CDMaterialType {
     registryType?: string;
     imagePath?: string
     registryName?: string
+    hasDuplicateImages?: boolean
+    isSuperseded?: boolean
     // Not even coming from API but required in CDMaterials for Security which makes its own api call but stores data in CDMaterials
     scanToolId?: number
     appliedFiltersTimestamp?: string

package/src/Common/index.ts

@@ -26,7 +26,6 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-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/Common/SearchBar/SearchBar.component.d.ts

@@ -1,39 +0,0 @@
-/// <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: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
-export default SearchBar;

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

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

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

@@ -1,35 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export interface SearchBarProps {
-    /**
-     * Initial search text
-     *
-     * @default ''
-     */
-    initialSearchText?: string;
-    /**
-     * Search handler for the search input
-     */
-    handleSearchChange?: (searchText: string) => void;
-    /**
-     * Enter event handler for the search input
-     */
-    handleEnter?: (searchText: string) => void;
-    /**
-     * Input props for the search input
-     */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /**
-     * Class name for the container; can be used for handling width
-     */
-    containerClassName?: string;
-    /**
-     * If true, the change handler would be triggered with debounce
-     *
-     * @default false
-     */
-    shouldDebounce?: boolean;
-    /**
-     * Timeout for the debounce handler to be triggered
-     */
-    debounceTimeout?: number;
-}

package/src/Assets/Icon/ic-search.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#959BA1" d="M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/>
-    </g>
-</svg>

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

@@ -1,120 +0,0 @@
-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 } 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 = ({
-    initialSearchText = '',
-    handleSearchChange = () => {},
-    handleEnter = () => {},
-    inputProps = {},
-    containerClassName,
-    shouldDebounce = false,
-    debounceTimeout = 300,
-}: SearchBarProps) => {
-    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
-    const inputRef = useRef<HTMLInputElement>()
-    const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
-        handleSearchChange,
-        debounceTimeout,
-    ])
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target
-        setShowClearButton(!!value)
-        if (shouldDebounce) {
-            debouncedSearchChange(value)
-        } else {
-            handleSearchChange(value)
-        }
-    }
-
-    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 value = inputTarget.value.trim()
-            _applySearch(value)
-        }
-    }
-
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-    }
-
-    return (
-        <div className={containerClassName}>
-            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
-                <input
-                    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 ${
-                        showClearButton ? 'pr-30' : 'pr-10'
-                    }`}
-                    onChange={handleChange}
-                    onKeyDown={handleKeyDown}
-                    ref={inputRef}
-                />
-                {showClearButton && (
-                    <button
-                        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"
-                    >
-                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
-                    </button>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default SearchBar

package/src/Common/SearchBar/index.ts

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

package/src/Common/SearchBar/searchBar.scss

@@ -1,31 +0,0 @@
-.search-bar {
-
-    &:focus,
-    &:focus-within {
-        outline: none;
-        border: solid 1px var(--B500);
-    }
-
-    &__input {
-
-        &:focus,
-        &:focus-visible {
-            border: none;
-            outline: none;
-        }
-    }
-
-    &__icon {
-        z-index: 1;
-        top: 50%;
-        left: 8px;
-        transform: translateY(-50%);
-    }
-
-    &__clear-button {
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-}

package/src/Common/SearchBar/types.ts

@@ -1,36 +0,0 @@
-import { InputHTMLAttributes } from 'react'
-
-export interface SearchBarProps {
-    /**
-     * Initial search text
-     *
-     * @default ''
-     */
-    initialSearchText?: string
-    /**
-     * Search handler for the search input
-     */
-    handleSearchChange?: (searchText: string) => void
-    /**
-     * Enter event handler for the search input
-     */
-    handleEnter?: (searchText: string) => void
-    /**
-     * Input props for the search input
-     */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>
-    /**
-     * Class name for the container; can be used for handling width
-     */
-    containerClassName?: string
-    /**
-     * If true, the change handler would be triggered with debounce
-     *
-     * @default false
-     */
-    shouldDebounce?: boolean
-    /**
-     * Timeout for the debounce handler to be triggered
-     */
-    debounceTimeout?: number
-}