@devtron-labs/devtron-fe-common-lib 0.0.59-beta-11 → 0.0.59-beta-13

package/package.json

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

package/src/Common/Api.ts

@@ -1,7 +1,6 @@
 import { ServerErrors } from './ServerError'
 import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
-import { MutableRefObject } from 'react'
 
 const responseMessages = {
     100: 'Continue',
@@ -229,23 +228,3 @@ export const get = (url: string, options?: APIOptions): Promise<ResponseType> =>
 export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
     return fetchInTime(url, 'DELETE', data, options)
 }
-
-/**
- * Aborts the previous request before triggering next request
- */
-export const abortPreviousRequests = <T,>(
-    callback: () => Promise<T>,
-    abortControllerRef: MutableRefObject<AbortController>,
-): Promise<T> => {
-    abortControllerRef.current.abort()
-    // eslint-disable-next-line no-param-reassign
-    abortControllerRef.current = new AbortController()
-    return callback()
-}
-
-/**
- * Returns true if the error is due to a aborted request
- */
-export const getIsRequestAborted = (error) =>
-    // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message === 'The user aborted a request.'

package/src/Common/Constants.ts

@@ -251,20 +251,4 @@ export const MAX_Z_INDEX = 2147483647
 export const SELECTED_APPROVAL_TAB_STATE = {
     APPROVAL: 'approval',
     PENDING: 'pending',
-}
-
-export enum SortingOrder {
-    /**
-     * Ascending order
-     */
-    ASC = 'ASC',
-    /**
-     * Descending order
-     */
-    DESC = 'DESC',
-}
-
-/**
- * Base page size for pagination
- */
-export const DEFAULT_BASE_PAGE_SIZE = 20
+}

package/src/Common/Helper.tsx

@@ -499,18 +499,27 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
+
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    // It recursively removes empty object keys and empty array keys
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0) continue
-            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key] // Delete the key if the array is empty
+            if (obj[key].length !== 0) {
+                obj[key].forEach((element, index) => {
+                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
+                        obj[key].splice(index, 1)
+                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
+                })
+            }
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key]
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+            if (
+                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0
+            ) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -520,20 +529,25 @@ function removeEmptyObjectKeysAndNullValues(obj) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray) {
+export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
+    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
+    
     const jsonCopy = JSON.parse(JSON.stringify(json))
+    const originaljsonCopy = JSON.parse(JSON.stringify(json))
+    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse()
+        return pathsToRemove.map((result) => {
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
+            return { op: 'remove', path: result.pointer }
+        })
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
+    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
+    return { newDocument, removedPatches: removedPatches.reverse() }
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {

package/src/Common/Hooks/index.ts

@@ -1,4 +1,3 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useWindowSize } from './UseWindowSize/UseWindowSize'
-export * from './useUrlFilters'

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } 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'
@@ -55,28 +55,9 @@ 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 {
@@ -84,17 +65,25 @@ 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">
@@ -105,14 +94,13 @@ const SearchBar = ({
                     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 ${
+                    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 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
                 />
-                {/* 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/Types.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
+import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -51,13 +51,11 @@ export interface Teams {
 export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
-    BULK_CHECKED = 'BULK_CHECKED',
 }
 export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
-    // FIXME: Need to replace this CHECKBOX_VALUE enum, and replace string instances in dashboard
-    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
+    value: 'CHECKED' | 'INTERMEDIATE'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string
@@ -764,15 +762,3 @@ export interface EdgeNodeType {
 export interface EdgeEndNodeType extends EdgeNodeType {
     userApprovalConfig?: UserApprovalConfigType
 }
-
-/**
- * Search params for sorting configuration
- * 
- * Note: Either both sortOrder and sortBy are required or none
- */
-export type SortingParams<T = string> =
-    | {
-          sortOrder: SortingOrder
-          sortBy: T
-      }
-    | { sortOrder?: never; sortBy?: never }

package/src/Common/index.ts

@@ -27,7 +27,6 @@ export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export * from './SearchBar'
-export * from './SortableTableHeaderCell'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'

package/src/index.ts

@@ -1,3 +1 @@
-export * from './Common'
-export * from './Pages'
-export * from './Shared'
+export * from "./Common"

package/dist/Common/Hooks/useUrlFilters/constants.d.ts

@@ -1,8 +0,0 @@
-export declare const DEFAULT_PAGE_NUMBER = 1;
-export declare const URL_FILTER_KEYS: {
-    readonly PAGE_SIZE: "pageSize";
-    readonly PAGE_NUMBER: "pageNumber";
-    readonly SEARCH_KEY: "searchKey";
-    readonly SORT_BY: "sortBy";
-    readonly SORT_ORDER: "sortOrder";
-};

package/dist/Common/Hooks/useUrlFilters/index.d.ts

@@ -1,2 +0,0 @@
-export { default as useUrlFilters } from './useUrlFilters';
-export type { UseUrlFiltersProps } from './types';

package/dist/Common/Hooks/useUrlFilters/types.d.ts

@@ -1,6 +0,0 @@
-export interface UseUrlFiltersProps<T> {
-    /**
-     * The key on which the sorting should be applied
-     */
-    initialSortKey?: T;
-}

package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts

@@ -1,32 +0,0 @@
-import { SortingOrder } from '../../Constants';
-import { UseUrlFiltersProps } from './types';
-/**
- * Generic hook for implementing URL based filters.
- * eg: pagination, search, sort.
- *
- * The exposed handlers can be consumed directly without the need for explicit state management
- *
- * @example Default Usage:
- * ```tsx
- * const { pageSize, changePage, ...rest } = useUrlFilters()
- * ```
- *
- * @example Usage with custom type for sort keys and initial sort key:
- * ```tsx
- * const  { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
- * ```
- *
- */
-declare const useUrlFilters: <T = string>({ initialSortKey }?: UseUrlFiltersProps<T>) => {
-    pageSize: number;
-    changePage: (page: number) => void;
-    changePageSize: (_pageSize: number) => void;
-    searchKey: string;
-    handleSearch: (searchTerm: string) => void;
-    offset: number;
-    sortBy: T;
-    sortOrder: SortingOrder;
-    handleSorting: (_sortBy: T) => void;
-    clearFilters: () => void;
-};
-export default useUrlFilters;

package/dist/Common/SortableTableHeaderCell/SortableTableHeaderCell.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { SortableTableHeaderCellProps } from './types';
-/**
- * Reusable component for the table header cell with support for sorting icons
- *
- * @example Usage
- * ```tsx
- * <SortableTableHeaderCell
- *   isSorted={currentSortedCell === 'cell'}
- *   triggerSorting={() => {}}
- *   sortOrder={SortingOrder.ASC}
- *   title="Header Cell"
- *   disabled={isDisabled}
- * />
- * ```
- */
-declare const SortableTableHeaderCell: ({ isSorted, triggerSorting, sortOrder, title, disabled, }: SortableTableHeaderCellProps) => JSX.Element;
-export default SortableTableHeaderCell;

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

@@ -1,2 +0,0 @@
-export { default as SortableTableHeaderCell } from './SortableTableHeaderCell';
-export type { SortableTableHeaderCellProps } from './types';

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

@@ -1,25 +0,0 @@
-import { SortingOrder } from '../Constants';
-export interface SortableTableHeaderCellProps {
-    /**
-     * If true, the cell is sorted
-     */
-    isSorted: boolean;
-    /**
-     * Callback for handling the sorting of the cell
-     */
-    triggerSorting: () => void;
-    /**
-     * Current sort order
-     *
-     * Note: On click, the sort order should be updated as required
-     */
-    sortOrder: SortingOrder;
-    /**
-     * Label for the cell
-     */
-    title: string;
-    /**
-     * If true, the cell is disabled
-     */
-    disabled: boolean;
-}

package/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts

@@ -1,15 +0,0 @@
-/**
- * User Status received from the API
- */
-export declare enum UserStatusDto {
-    active = "active",
-    inactive = "inactive"
-}
-/**
- * User status for the frontend
- */
-export declare enum UserStatus {
-    active = "active",
-    inactive = "inactive",
-    temporary = "temporary"
-}

package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts

@@ -1 +0,0 @@
-export * from './constants';

package/dist/Pages/GlobalConfigurations/index.d.ts

@@ -1 +0,0 @@
-export * from './Authorization';

package/dist/Pages/index.d.ts

@@ -1 +0,0 @@
-export * from './GlobalConfigurations';

package/dist/Shared/Components/BulkSelection/BulkSelection.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BulkSelectionProps } from './types';
-declare const BulkSelection: <T>({ checkboxValue, isChecked, selectedIdentifiers, handleBulkSelection, showPagination, }: BulkSelectionProps<T>) => JSX.Element;
-export default BulkSelection;

package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { BulkSelectionDropdownItemsProps } from './types';
-declare const BulkSelectionDropdownItems: <T>({ locator, label, isSelected, handleBulkSelection, icon: Icon, }: BulkSelectionDropdownItemsProps<T>) => JSX.Element;
-export default BulkSelectionDropdownItems;

package/dist/Shared/Components/BulkSelection/UseBulkSelection.d.ts

@@ -1,3 +0,0 @@
-import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
-declare const useBulkSelection: <T>({ identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => UseBulkSelectionReturnType<T>;
-export default useBulkSelection;

package/dist/Shared/Components/BulkSelection/constants.d.ts

@@ -1,8 +0,0 @@
-export declare const BULK_DROPDOWN_TEST_ID: "bulk-selection-pop-up-menu";
-export declare const BulkSelectionOptionsLabels: {
-    readonly SELECT_ALL_ON_PAGE: "All on this page";
-    readonly SELECT_ALL_ACROSS_PAGES: "All across pages";
-    readonly CLEAR_ALL_SELECTIONS: "Clear selection";
-};
-export declare const SELECT_ALL_ACROSS_PAGES_LOCATOR: "*";
-export declare const getInvalidActionMessage: (action: string) => string;

package/dist/Shared/Components/BulkSelection/index.d.ts

@@ -1,4 +0,0 @@
-export { default as BulkSelection } from './BulkSelection';
-export { default as useBulkSelection } from './UseBulkSelection';
-export * from './types';
-export * from './constants';

package/dist/Shared/Components/BulkSelection/types.d.ts

@@ -1,51 +0,0 @@
-/// <reference types="react" />
-import { CHECKBOX_VALUE } from '../../../Common';
-export declare enum BulkSelectionEvents {
-    CLEAR_ALL_SELECTIONS = "CLEAR_ALL_SELECTIONS",
-    CLEAR_IDENTIFIERS = "CLEAR_IDENTIFIERS",
-    SELECT_ALL_ACROSS_PAGES = "SELECT_ALL_ACROSS_PAGES",
-    SELECT_ALL_ON_PAGE = "SELECT_ALL_ON_PAGE",
-    SELECT_IDENTIFIER = "SELECT_IDENTIFIER",
-    CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION = "CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION",
-    CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES = "CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES"
-}
-export interface HandleBulkSelectionType<T> {
-    action: BulkSelectionEvents;
-    data?: {
-        identifierIds?: (number | string)[];
-        identifierObject?: T;
-    };
-}
-export interface UseBulkSelectionReturnType<T> {
-    selectedIdentifiers: T;
-    handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
-}
-export interface BulkSelectionProps<T> extends UseBulkSelectionReturnType<T> {
-    checkboxValue: CHECKBOX_VALUE;
-    isChecked: boolean;
-    showPagination: boolean;
-}
-export interface BulkSelectionDropdownItemsType {
-    locator: BulkSelectionEvents;
-    label: string;
-    isSelected: boolean;
-    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-}
-export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<BulkSelectionProps<T>, 'handleBulkSelection'> {
-}
-export declare enum SelectAllDialogStatus {
-    OPEN = "OPEN",
-    CLOSED = "CLOSED"
-}
-export type BulkSelectionIdentifiersType<T> = Record<string | number, T>;
-export interface UseBulkSelectionProps<T> {
-    /**
-     * Response from API, assuming structure to be array of objects with key and values
-     * This will the given ids on current page
-     */
-    identifiers: T;
-    /**
-     * Act as buffer between select all across pages and select all on page state
-     */
-    getSelectAllDialogStatus: () => SelectAllDialogStatus;
-}

package/dist/Shared/Components/index.d.ts

@@ -1 +0,0 @@
-export * from './BulkSelection';

package/dist/Shared/index.d.ts

@@ -1 +0,0 @@
-export * from './Components';

package/src/Assets/Icon/ic-arrow-up-down.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-  <path d="M4.125 8.5L6 10.75L7.875 8.5M4.125 3.5L6 1.25L7.875 3.5" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Assets/Icon/ic-check-all.svg

@@ -1,5 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Assets/Icon/ic-check-square.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

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

@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.33335 1.66699L1.66669 8.33366M8.33335 8.33366L1.66669 1.66699" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Assets/Icon/ic-sort-arrow-down.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.5 7.50009L6.00004 10.0001M6.00004 10.0001L8.5 7.50054M6.00004 10.0001V2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Common/Hooks/useUrlFilters/constants.ts

@@ -1,9 +0,0 @@
-export const DEFAULT_PAGE_NUMBER = 1
-
-export const URL_FILTER_KEYS = {
-    PAGE_SIZE: 'pageSize',
-    PAGE_NUMBER: 'pageNumber',
-    SEARCH_KEY: 'searchKey',
-    SORT_BY: 'sortBy',
-    SORT_ORDER: 'sortOrder',
-} as const

package/src/Common/Hooks/useUrlFilters/index.ts

@@ -1,2 +0,0 @@
-export { default as useUrlFilters } from './useUrlFilters'
-export type { UseUrlFiltersProps } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

@@ -1,6 +0,0 @@
-export interface UseUrlFiltersProps<T> {
-    /**
-     * The key on which the sorting should be applied
-     */
-    initialSortKey?: T
-}