@devtron-labs/devtron-fe-common-lib 0.0.61-beta-10 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.61-beta-10",
+    "version": "0.0.62",
     "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,121 @@
+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)
+        _resetPageNumber()
+    }
+
+    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

@@ -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.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,26 @@
+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/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, TaskErrorObj } from '.'
+import { DockerConfigOverrideType, SortingOrder, 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,3 +762,15 @@ 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,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/Pages/GlobalConfigurations/Authorization/constants.ts

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

package/src/Pages/GlobalConfigurations/Authorization/index.ts

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

package/src/Pages/GlobalConfigurations/index.ts

@@ -1 +1 @@
-export * from './BuildInfra'
+export * from './Authorization'

package/src/index.ts

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

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,50 +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: "any";
-    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: "Enter a name eg. java/node/small/medium/large";
-    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 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>>;