@devtron-labs/devtron-fe-common-lib 0.0.58-beta-22 → 0.0.58-beta-25

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.58-beta-22",
+    "version": "0.0.58-beta-25",
     "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/BreadCrumb/Types.ts

@@ -1,3 +1,4 @@
+
 export interface Breadcrumb {
   to: string
   name: string

package/src/Common/Checkbox.tsx

@@ -10,7 +10,6 @@ Valid States of Checkbox:
 5. disabled: false, checked: true,  value: INTERMIDIATE
 6. disabled: false, checked: true,  value: CHECKED
 */
-// TODO: Associate label with input element
 export class Checkbox extends Component<CheckboxProps> {
     render() {
         let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`

package/src/Common/Constants.ts

@@ -25,8 +25,7 @@ export const ROUTES = {
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
     CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
-    INFRA_CONFIG_PROFILE: 'infra-config/profile',
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
 }
 
 export enum KEY_VALUE {

package/src/Common/CustomInput/CustomInput.tsx

@@ -2,7 +2,6 @@ import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
 
-// TODO: label association with input
 export function CustomInput({
     name,
     value,
@@ -14,7 +13,7 @@ export function CustomInput({
     disabled = false,
     labelClassName = '',
     placeholder = '',
-    tabIndex = 0,
+    tabIndex = 1,
     dataTestid = '',
     isRequiredField = false,
     autoFocus = false,

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -94,9 +94,8 @@ export default function DraggableWrapper({
     }
 
     return (
-        // Since we are using position fixed so we need to disable click on the div so that it does not interfere with the click of other elements
         <div
-            className="dc__position-fixed dc__disable-click"
+            className="dc__position-fixed"
             style={{
                 zIndex,
             }}
@@ -107,7 +106,6 @@ export default function DraggableWrapper({
                     {...childDivProps}
                     style={{
                         zIndex,
-                        pointerEvents: 'auto',
                     }}
                 >
                     {children}

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/RJSF/utils.ts

@@ -19,7 +19,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             ...base,
             paddingTop: 0,
             paddingBottom: 0,
-            cursor: 'pointer',
         }),
         control: (base, state) => ({
             ...base,
@@ -34,7 +33,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             color: 'var(--N900)',
             backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
             padding: '10px 12px',
-            cursor: 'pointer',
         }),
         dropdownIndicator: (base, state) => ({
             ...base,

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,20 +65,29 @@ 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">
+            <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"
@@ -105,14 +95,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 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}
                 />
-                {/* 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/searchBar.scss

@@ -3,7 +3,7 @@
     &:focus,
     &:focus-within {
         outline: none;
-        border: solid 1px var(--B500) !important;
+        border: solid 1px var(--B500);
     }
 
     &__input {

package/src/Common/Types.ts

@@ -51,12 +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
-    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
+    value: 'CHECKED' | 'INTERMEDIATE'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string

package/src/index.ts

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

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraConfigFormProps } from './types';
-declare const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps>;
-export default BuildInfraConfigForm;

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraInputFieldComponentProps } from './types';
-declare const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps>;
-export default BuildInfraProfileDescriptionField;

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.d.ts

@@ -1,7 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraFormActionProps } from './types';
-/**
- * In case need arise for variants break this CustomInput and Select as a separate component
- */
-declare const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps>;
-export default BuildInfraFormAction;

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraFormItemProps } from './types';
-declare const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps>;
-export default BuildInfraFormItem;

package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BuildInfraInputFieldComponentProps } from './types';
-declare const BuildInfraProfileNameField: FunctionComponent<BuildInfraInputFieldComponentProps>;
-export default BuildInfraProfileNameField;

package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { DescriptorProps } from './types';
-declare const Descriptor: ({ additionalContainerClasses, breadCrumbs, children, tippyInfoText, tippyAdditionalContent, }: DescriptorProps) => JSX.Element;
-export default Descriptor;

package/dist/Pages/GlobalConfigurations/BuildInfra/Footer.d.ts

@@ -1,4 +0,0 @@
-import { FunctionComponent } from 'react';
-import { FooterProps } from './types';
-declare const Footer: FunctionComponent<FooterProps>;
-export default Footer;

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

@@ -1,52 +0,0 @@
-import { UseBreadcrumbProps } from '../../../Common/BreadCrumb/Types';
-import { BuildInfraFormFieldType, BuildInfraMetaConfigTypes, ProfileInputErrorType, BuildInfraProfileBase, HandleProfileInputChangeType } from './types';
-export declare const BUILD_INFRA_INPUT_CONSTRAINTS: {
-    readonly STEP: 0.01;
-    readonly MIN: 0;
-    readonly DECIMAL_PLACES: 2;
-};
-export declare const BUILD_INFRA_TEXT: {
-    readonly HEADING: "Build Infra Configuration";
-    readonly EDIT_SUBMIT: "Save changes";
-    readonly SAVE_SUBMIT: "Save";
-    readonly EDIT_CANCEL: "Cancel";
-    readonly EDIT_DEFAULT_TOOLTIP: "Efficiently control infrastructure settings such as CPU, Memory, and Build timeout for your build pipelines. Streamline resource management to optimise build time and cost effortlessly.";
-    readonly DESCRIPTION_LABEL: "Description";
-    readonly DESCRIPTION_PLACEHOLDER: "Enter a description here";
-    readonly PROFILE_LABEL: "Profile name";
-    readonly PROFILE_PLACEHOLDER: "Eg. java or node";
-    readonly INHERITING_HEADING_DESCRIPTION: "Inheriting from default";
-    readonly SUBMIT_BUTTON_TIPPY: {
-        readonly INVALID_INPUT: "Valid input is required for all mandatory fields.";
-        readonly REQUEST_IN_PROGRESS: "Request in progress.";
-    };
-    readonly VALIDATE_REQUEST_LIMIT: {
-        readonly NEGATIVE_REQUEST: "Request should be a positive number.";
-        readonly NEGATIVE_LIMIT: "Limit should be a positive number.";
-        readonly REQUEST_LESS_THAN_LIMIT: "Request should be less than or equal to limit.";
-        readonly CAN_NOT_COMPUTE: "Request and limit value diff are too high to validate.";
-        readonly REQUEST_DECIMAL_PLACES: "Request should be upto 2 decimal places.";
-        readonly LIMIT_DECIMAL_PLACES: "Limit should be upto 2 decimal places.";
-    };
-    readonly getInvalidActionMessage: (action: HandleProfileInputChangeType['action']) => string;
-    readonly getSubmitSuccessMessage: (profileName: string, isEdited: boolean) => string;
-    readonly PROFILE_NOT_FOUND: {
-        readonly title: "Profile not found";
-        readonly subTitle: "The profile you are looking for does not exist.";
-    };
-    readonly INVALID_FORM_MESSAGE: "Valid input is required for all mandatory fields.";
-};
-export declare const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps;
-export declare const BUILD_INFRA_FORM_FIELDS: BuildInfraFormFieldType[];
-export declare const PROFILE_INPUT_ERROR_FIELDS: ProfileInputErrorType;
-export declare const CREATE_MODE_REQUIRED_INPUT_FIELDS: BuildInfraMetaConfigTypes[];
-export declare const DEFAULT_PROFILE_NAME: "default";
-export declare const CREATE_PROFILE_BASE_VALUE: BuildInfraProfileBase;
-export declare const CREATE_VIEW_CHECKED_CONFIGS: {
-    readonly cpu_request: true;
-    readonly cpu_limit: true;
-};
-export declare const BUILD_INFRA_TEST_IDS: {
-    readonly SUBMIT_BUTTON: "build-infra-submit-button";
-    readonly CANCEL_BUTTON: "build-infra-cancel-button";
-};

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

@@ -1,7 +0,0 @@
-export { default as BuildInfraDescriptor } from './Descriptor';
-export { default as BuildInfraFooter } from './Footer';
-export { default as BuildInfraConfigForm } from './BuildInfraConfigForm';
-export * from './services';
-export * from './utils';
-export * from './types';
-export * from './constants';

package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts

@@ -1,6 +0,0 @@
-import { ResponseType } from '../../../Common';
-import { BuildInfraProfileResponseType, BuildInfraProfileTransformerType, CreateBuildInfraProfileType, GetBuildInfraProfileType, UpdateBuildInfraProfileType } from './types';
-export declare const getTransformedBuildInfraProfileResponse: ({ configurationUnits, defaultConfigurations, profile, fromCreateView, }: BuildInfraProfileTransformerType) => BuildInfraProfileResponseType;
-export declare const getBuildInfraProfileByName: ({ name, fromCreateView, }: GetBuildInfraProfileType) => Promise<BuildInfraProfileResponseType>;
-export declare const updateBuildInfraProfile: ({ name, profileInput }: UpdateBuildInfraProfileType) => Promise<ResponseType<any>>;
-export declare const createBuildInfraProfile: ({ profileInput }: CreateBuildInfraProfileType) => Promise<ResponseType<any>>;