@devtron-labs/devtron-fe-common-lib 0.0.56 → 0.0.58-beta-3

package/package.json

@@ -1,12 +1,16 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.56",
+    "version": "0.0.58-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
+        "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
+        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
+        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
         "build-lib": "rollup -c --bundleConfigAsCjs",
-        "build-watch": "rollup -c --bundleConfigAsCjs -w"
+        "build-watch": "rollup -c --bundleConfigAsCjs -w",
+        "lint-staged": "lint-staged"
     },
     "repository": {
         "type": "git",
@@ -30,7 +34,20 @@
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
+        "@typescript-eslint/eslint-plugin": "^6.17.0",
+        "@typescript-eslint/parser": "^6.17.0",
+        "eslint": "^8.56.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-prettier": "^5.1.2",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "husky": "^7.0.4",
+        "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
+        "prettier": "^3.1.1",
         "react-select": "5.2.2",
         "react-toastify": "^8.2.0",
         "rollup": "^3.10.0",

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

@@ -0,0 +1,6 @@
+<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/Constants.ts

@@ -242,13 +242,4 @@ export const RepositoryAction = {
     CHART_PUSH: "CHART_PUSH"
 }
 
-export enum APPROVAL_MODAL_TYPE {
-    CONFIG = 'CONFIG',
-    DEPLOYMENT = 'DEPLOYMENT',
-}
 export const MAX_Z_INDEX = 2147483647
-
-export const SELECTED_APPROVAL_TAB_STATE = {
-    APPROVAL: 'approval',
-    PENDING: 'pending',
-}

package/src/Common/CustomInput/CustomInput.tsx

@@ -28,8 +28,7 @@ export function CustomInput({
     defaultValue,
     onKeyDown,
     required,
-    additionalErrorInfo,
-    inputWrapClassName = '',
+    additionalErrorInfo
 }: CustomInputProps) {
 
     function handleError(error: any): any[] {
@@ -93,7 +92,7 @@ export function CustomInput({
     }
 
     return (
-        <div className={`flex column left top ${inputWrapClassName}`}>
+        <div className="flex column left top">
            {renderInputLabel()}
             <input
                 data-testid={dataTestid}

package/src/Common/CustomInput/Types.ts

@@ -27,5 +27,4 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
-    inputWrapClassName?: string
 }

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -4,6 +4,8 @@ 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/EmptyState/GenericEmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -19,56 +19,24 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = '',
-    imageStyles = {},
+    contentClassName = ''
 }: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row'
-
-    const getImageSize = () => {
-        switch (imageType) {
-            case ImageType.Large:
-                return { width: '250px', height: '200px' }
-            default:
-                return { width: '200px', height: '160px' }
-        }
-    }
-
+    const isRowLayout = layout === 'row';
+    
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
-                classname ? classname : ''
-            }`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >
-            {!SvgImage ? (
-                !noImage && (
-                    <img
-                        className={imageClassName ? imageClassName : ''}
-                        src={image || AppNotDeployed}
-                        style={{
-                            ...imageStyles,
-                            width: `${getImageSize().width}`,
-                            height: `${getImageSize().height}`,
-                        }}
-                        alt="empty-state"
-                    />
-                )
-            ) : (
-                <SvgImage
-                    style={{
-                        ...imageStyles,
-                        width: `${getImageSize().width}`,
-                        height: `${getImageSize().height}`,
-                    }}
-                />
-            )}
-            <div
-                className={`flex column dc__gap-10 dc__mxw-300 ${
-                    isRowLayout ? 'dc__align-start' : ''
-                } ${contentClassName}`}
-            >
+        >   
+            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
+                src={image || AppNotDeployed}
+                width={imageType === ImageType.Medium ? '200' : '250'}
+                height={imageType === ImageType.Medium ? '160' : '200'}
+                alt="empty-state"
+            /> : <SvgImage />}
+            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

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[]) {
@@ -559,3 +573,18 @@ 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/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react'
+import { PageSizeItemsProps, PageSizeOption, PageSizeSelectorProps } from './types'
+import { useClickOutside } from '../Hooks'
+import { getDefaultPageValueOptions } from './utils'
+
+const PageSizeItems = ({
+    optionValue,
+    options,
+    setOptions,
+    handleCloseDropdown,
+    changePageSize,
+}: PageSizeItemsProps) => {
+    const handlePageSizeSelect = () => {
+        const newOptions = options.map((_option) => ({
+            value: _option.value,
+            selected: _option.value === optionValue,
+        }))
+        setOptions([...newOptions])
+        handleCloseDropdown()
+        changePageSize(optionValue)
+    }
+
+    return (
+        <div key={optionValue} className="select__item" onClick={handlePageSizeSelect}>
+            {optionValue}
+        </div>
+    )
+}
+
+const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => {
+    const defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map((option) => ({
+        value: option.value,
+        selected: option.value === pageSize,
+    }))
+
+    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
+    const [options, setOptions] = useState<PageSizeOption[]>(defaultOptions)
+
+    const handleCloseDropdown = () => {
+        setIsDropdownOpen(false)
+    }
+
+    const handleDropdownToggle = () => {
+        setIsDropdownOpen(!isDropdownOpen)
+    }
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    useClickOutside(dropdownRef, handleCloseDropdown)
+
+    const selectedOption = options.find((option) => option.selected)
+    const font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'
+    return (
+        <div ref={dropdownRef}>
+            {isDropdownOpen && (
+                <div className="pagination__select-menu">
+                    {options.map((_option) => (
+                        <PageSizeItems
+                            optionValue={_option.value}
+                            options={options}
+                            setOptions={setOptions}
+                            handleCloseDropdown={handleCloseDropdown}
+                            changePageSize={changePageSize}
+                        />
+                    ))}
+                </div>
+            )}
+
+            <button type="button" className="select__button" onClick={handleDropdownToggle}>
+                <span>{selectedOption ? selectedOption.value : ''}</span>
+                <span className="select__icon">
+                    <i className={font} />
+                </span>
+            </button>
+        </div>
+    )
+}
+
+export default PageSizeSelector

package/src/Common/Pagination/Pagination.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import PageSizeSelector from './PageSizeSelector'
+import { Page, PageValueItemProps, PaginationProps } from './types'
+import { createPageArr } from './utils'
+import './pagination.scss'
+
+const PageValueItem = ({ value, isSelected, selectPage }: PageValueItemProps) => {
+    const classes = isSelected ? 'page__button page__button--selected' : 'page__button'
+    const handlePageSelection = () => {
+        selectPage(value)
+    }
+
+    return (
+        <li className="page">
+            <button className={classes} onClick={handlePageSelection} type="button">
+                {value}
+            </button>
+        </li>
+    )
+}
+
+// NOTE: This component will heavily benefit from data normalization
+const Pagination = ({
+    size,
+    pageSize,
+    offset,
+    changePage,
+    changePageSize,
+    isPageSizeFix,
+    pageSizeOptions,
+    rootClassName,
+}: PaginationProps) => {
+    const [pages, setPages] = useState<Page[]>([])
+
+    useEffect(() => {
+        const _pages = createPageArr({ size, pageSize, selectedPageNo: 1 })
+        setPages(_pages)
+    }, [size, pageSize])
+
+    useEffect(() => {
+        const selectedPageNo = 1 + Math.floor(offset / pageSize)
+        const _pages = createPageArr({ size, pageSize, selectedPageNo })
+        setPages(_pages)
+    }, [offset])
+
+    const selectPage = (selectedPageNo: number): void => {
+        const _pages = createPageArr({ size, pageSize, selectedPageNo })
+        setPages(_pages)
+        changePage(selectedPageNo)
+    }
+
+    const selectPreviousPage = (): void => {
+        const currPage = pages.find((page) => page.selected)
+        const selectedPageNo = currPage.value - 1
+        selectPage(selectedPageNo)
+    }
+
+    const selectNextPage = (): void => {
+        const currPage = pages.find((page) => page.selected)
+        const selectedPageNo = currPage.value + 1
+        selectPage(selectedPageNo)
+    }
+
+    const lastPageNo = offset + pageSize < size ? offset + pageSize : size
+    const pageNoIndex = pages.findIndex((page) => page.selected)
+    const visiblePages = pages.filter((page) => page.isVisible)
+    return (
+        // TODO: Remove pagination-wrapper from dashboard
+        <div className={rootClassName || ''}>
+            <div className="page-number">
+                {offset + 1} - {lastPageNo} of {size}
+            </div>
+
+            <ul className="pagination">
+                <li className="page">
+                    <button
+                        className="page__button page__button--icon"
+                        disabled={!pageNoIndex}
+                        onClick={selectPreviousPage}
+                        type="button"
+                        aria-label="Previous page"
+                    >
+                        <span className="left-icon">
+                            <i className="fa fa-chevron-left" />
+                        </span>
+                    </button>
+                </li>
+
+                {visiblePages.map((page) => (
+                    <PageValueItem
+                        value={page.value}
+                        isSelected={page.selected}
+                        key={page.value}
+                        selectPage={selectPage}
+                    />
+                ))}
+
+                <li className="page">
+                    <button
+                        className="page__button page__button--icon"
+                        disabled={pageNoIndex === pages.length - 1}
+                        onClick={selectNextPage}
+                        type="button"
+                        aria-label="Next page"
+                    >
+                        <span className="left-icon">
+                            <i className="fa fa-chevron-right" />
+                        </span>
+                    </button>
+                </li>
+            </ul>
+
+            {!isPageSizeFix && (
+                <div className="select">
+                    <span className="select__placeholder">Rows per page</span>
+                    <PageSizeSelector
+                        pageSizeOptions={pageSizeOptions}
+                        pageSize={pageSize}
+                        changePageSize={changePageSize}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default Pagination

package/src/Common/Pagination/constants.ts

@@ -0,0 +1,6 @@
+export const VISIBLE_PAGES_LIMIT = 5
+export const FALLBACK_PAGE_SIZE_OPTIONS = [
+    { value: 20, selected: true },
+    { value: 40, selected: false },
+    { value: 50, selected: false },
+]

package/src/Common/Pagination/index.tsx

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+// Disabling since might need to export types as well
+export { default as Pagination } from './Pagination'

package/src/Common/Pagination/pagination.scss

@@ -0,0 +1,123 @@
+.pagination-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0px 24px;
+    justify-content: space-between;
+    margin: 0px;
+    background-color: var(--white);
+}
+
+.pagination {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 0px;
+}
+
+.select {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.select__placeholder {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+    margin-right: 8px;
+}
+
+.pagination__select-menu {
+    padding: 0px;
+    list-style: none;
+    overflow: hidden;
+    border: solid 1px var(--N200);
+    border-radius: 4px;
+    width: 64px;
+    position: absolute;
+    bottom: 31px;
+    background-color: var(--white);;
+}
+
+.select__button {
+    width: 64px;
+    background-color: transparent;
+    border-radius: 4px;
+    border: solid 1px var(--N200);
+    padding: 5px 10px;
+    text-align: left;
+}
+
+.select__item {
+    padding: 5px 10px;
+    cursor: pointer;
+}
+
+.select__icon {
+    margin-left: 18px;
+}
+
+.page {
+    margin: 0px 8px;
+    display: inline-block;
+}
+
+.page-number {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+}
+
+.page__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    color: var(--B500);
+    background-color: var(--white);
+    padding: 0px;
+    user-select: none;
+}
+
+.page__button--icon {
+    background-color: var(--white);
+    color: var(--B500);
+}
+
+/* MODIFIERS */
+
+.page__button--selected {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+/* States and Selectorys */
+
+.page__button:disabled {
+    opacity: 0.5;
+}
+
+.select__item:hover {
+    background-color: var(--N50);
+}
+
+.page__button:hover ~ :disabled {
+    background-color: var(--B100);
+}
+
+.page__button--selected:hover {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+@media (min-width: 1024px) {
+    .pagination {
+        margin: 16px auto;
+    }
+}

package/src/Common/Pagination/types.ts

@@ -0,0 +1,55 @@
+export interface PageSizeOption {
+    value: number
+    selected: boolean
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number
+    /**
+     * pageSize
+     */
+    pageSize: number
+    offset: number
+    changePage: (pageNo: number) => void
+    changePageSize?: (pageSize: number) => void
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[]
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string
+}
+
+export interface Page {
+    value: number
+    selected: boolean
+    isVisible: boolean
+}
+
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number
+}
+
+export interface PageSizeSelectorProps
+    extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {}
+
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value']
+    options: PageSizeOption[]
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>
+    handleCloseDropdown: () => void
+}
+
+export interface PageValueItemProps {
+    value: PageSizeOption['value']
+    isSelected: PageSizeOption['selected']
+    selectPage: (selectedPageNo: number) => void
+}