@devtron-labs/devtron-fe-common-lib 0.0.58-beta-4 → 0.0.58-beta-6

package/package.json

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

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

@@ -0,0 +1,3 @@
+<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-sort-arrow-down.svg

@@ -0,0 +1,3 @@
+<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/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 {
@@ -252,4 +251,20 @@ 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/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/Hooks/index.ts

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

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

@@ -0,0 +1,9 @@
+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

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

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

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

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

@@ -0,0 +1,120 @@
+import { useMemo } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
+import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
+import { UseUrlFiltersProps } from './types'
+
+const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
+
+/**
+ * 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' })
+ * ```
+ *
+ */
+const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}) => {
+    const location = useLocation()
+    const history = useHistory()
+    const searchParams = new URLSearchParams(location.search)
+
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
+        const _pageSize = searchParams.get(PAGE_SIZE)
+        const _pageNumber = searchParams.get(PAGE_NUMBER)
+        const _searchKey = searchParams.get(SEARCH_KEY)
+        const _sortOrder = searchParams.get(SORT_ORDER) as SortingOrder
+        const _sortBy = searchParams.get(SORT_BY)
+
+        const sortByKey = (_sortBy || initialSortKey || '') as T
+        // Fallback to ascending order
+        const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
+
+        return {
+            pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
+            pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
+            searchKey: _searchKey || '',
+            sortBy: sortByKey,
+            // sort order should only be applied if the key is available
+            sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
+        }
+    }, [searchParams])
+
+    /**
+     * Used for getting the required result from the API
+     */
+    const offset = pageSize * (pageNumber - 1)
+
+    /**
+     * Update and replace the search params in the URL.
+     *
+     * Note: Currently only primitive data types are supported
+     */
+    const _updateSearchParam = (key: string, value) => {
+        searchParams.set(key, String(value))
+        history.replace({ search: searchParams.toString() })
+    }
+
+    const _resetPageNumber = () => {
+        _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER)
+    }
+
+    const changePage = (page: number) => {
+        _updateSearchParam(PAGE_NUMBER, page)
+    }
+
+    const changePageSize = (_pageSize: number) => {
+        _updateSearchParam(PAGE_SIZE, _pageSize)
+        _resetPageNumber()
+    }
+
+    const handleSearch = (searchTerm: string) => {
+        _updateSearchParam(SEARCH_KEY, searchTerm)
+    }
+
+    const handleSorting = (_sortBy: T) => {
+        let order: SortingOrder
+        if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
+            order = SortingOrder.DESC
+        } else {
+            order = SortingOrder.ASC
+        }
+
+        _updateSearchParam(SORT_BY, _sortBy)
+        _updateSearchParam(SORT_ORDER, order)
+
+        // Reset page number on sorting change
+        _resetPageNumber()
+    }
+
+    const clearFilters = () => {
+        Object.values(URL_FILTER_KEYS).forEach((key) => {
+            searchParams.delete(key)
+        })
+        history.replace({ search: searchParams.toString() })
+    }
+
+    return {
+        pageSize,
+        changePage,
+        changePageSize,
+        searchKey,
+        handleSearch,
+        offset,
+        sortBy,
+        sortOrder,
+        handleSorting,
+        clearFilters,
+    }
+}
+
+export default useUrlFilters

package/src/Common/RJSF/utils.ts

@@ -13,14 +13,12 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
     }
 }
 
-// NOTE: If you are changing this please make sure BuildInfra selects are also working fine
 export const getCommonSelectStyle = (styleOverrides = {}) => {
     return {
         menuList: (base) => ({
             ...base,
             paddingTop: 0,
             paddingBottom: 0,
-            cursor: 'pointer',
         }),
         control: (base, state) => ({
             ...base,
@@ -35,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,31 +55,9 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
-    // In most case would reset the state by doing history.push('/')
-    useEffect(() => {
-        inputRef.current.value = 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 (!value) {
-            clearSearch()
-            return
-        }
-
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -87,6 +65,11 @@ const SearchBar = ({
         }
     }
 
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
@@ -97,9 +80,14 @@ const SearchBar = ({
         }
     }
 
+    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"
@@ -107,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/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -0,0 +1,44 @@
+import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
+import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
+import { SortingOrder } from '../Constants'
+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}
+ * />
+ * ```
+ */
+const SortableTableHeaderCell = ({
+    isSorted,
+    triggerSorting,
+    sortOrder,
+    title,
+    disabled,
+}: SortableTableHeaderCellProps) => (
+    <button
+        type="button"
+        className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
+        onClick={triggerSorting}
+        disabled={disabled}
+    >
+        <span className="dc__uppercase dc__ellipsis-right">{title}</span>
+        {isSorted ? (
+            <SortArrowDown
+                className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
+            />
+        ) : (
+            <SortIcon className="icon-dim-12 mw-12 scn-7" />
+        )}
+    </button>
+)
+
+export default SortableTableHeaderCell

package/src/Common/SortableTableHeaderCell/index.ts

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

package/src/Common/SortableTableHeaderCell/types.ts

@@ -0,0 +1,9 @@
+import { SortingOrder } from '../Constants'
+
+export interface SortableTableHeaderCellProps {
+    isSorted: boolean
+    triggerSorting: () => void
+    sortOrder: SortingOrder
+    title: string
+    disabled: boolean
+}

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/Common/index.ts

@@ -27,6 +27,7 @@ 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/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 }: 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,48 +0,0 @@
-import { UseBreadcrumbProps } from '../../../Common/BreadCrumb/Types';
-import { BuildInfraFormFieldType, ProfileInputErrorType, BuildInfraProfileBase, HandleProfileInputChangeType } from './types';
-export declare const BUILD_INFRA_TEXT: {
-    HEADING: string;
-    EDIT_SUBMIT: string;
-    SAVE_SUBMIT: string;
-    EDIT_CANCEL: string;
-    EDIT_DEFAULT_TOOLTIP: string;
-    DESCRIPTION_LABEL: string;
-    DESCRIPTION_PLACEHOLDER: string;
-    PROFILE_LABEL: string;
-    PROFILE_PLACEHOLDER: string;
-    INHERITING_HEADING_DESCRIPTION: string;
-    SUBMIT_BUTTON_TIPPY: {
-        INVALID_INPUT: string;
-        REQUEST_IN_PROGRESS: string;
-    };
-    VALIDATE_REQUEST_LIMIT: {
-        NEGATIVE_REQUEST: string;
-        NEGATIVE_LIMIT: string;
-        REQUEST_LESS_THAN_LIMIT: string;
-        REQUEST_TOO_BIG: string;
-        LIMIT_TOO_BIG: string;
-        REQUEST_DECIMAL_PLACES: string;
-        LIMIT_DECIMAL_PLACES: string;
-    };
-    getInvalidActionMessage: (action: HandleProfileInputChangeType['action']) => string;
-    getSubmitSuccessMessage: (profileName: string, isEdited: boolean) => string;
-    PROFILE_NOT_FOUND: {
-        title: string;
-        subTitle: string;
-    };
-};
-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 REQUIRED_INPUT_FIELDS: string[];
-export declare const DEFAULT_PROFILE_NAME = "default";
-export declare const CREATE_PROFILE_BASE_VALUE: BuildInfraProfileBase;
-export declare const CREATE_VIEW_CHECKED_CONFIGS: {
-    cpu_request: boolean;
-    cpu_limit: boolean;
-};
-export declare const BUILD_INFRA_INPUT_CONSTRAINTS: {
-    STEP: number;
-    MIN: number;
-    DECIMAL_PLACES: number;
-};

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,13 +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<{
-    code: number;
-    result: import("./types").BuildInfraProfileData;
-}>;
-export declare const deleteBuildInfraProfileByName: (name: string) => Promise<{
-    code: number;
-    result: any;
-}>;