@devtron-labs/devtron-fe-common-lib 0.0.60-beta-6 → 0.0.61-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/Common/Api.d.ts +9 -0
  2. package/dist/Common/Constants.d.ts +14 -0
  3. package/dist/Common/DraggableWrapper/types.d.ts +4 -1
  4. package/dist/Common/Helper.d.ts +1 -4
  5. package/dist/Common/Hooks/index.d.ts +1 -0
  6. package/dist/Common/Hooks/useUrlFilters/constants.d.ts +8 -0
  7. package/dist/Common/Hooks/useUrlFilters/index.d.ts +2 -0
  8. package/dist/Common/Hooks/useUrlFilters/types.d.ts +19 -0
  9. package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts +20 -0
  10. package/dist/Common/SearchBar/SearchBar.component.d.ts +1 -1
  11. package/dist/Common/SearchBar/types.d.ts +0 -4
  12. package/dist/Common/SortableTableHeaderCell/SortableTableHeaderCell.d.ts +18 -0
  13. package/dist/Common/SortableTableHeaderCell/index.d.ts +2 -0
  14. package/dist/Common/SortableTableHeaderCell/types.d.ts +25 -0
  15. package/dist/Common/Types.d.ts +16 -3
  16. package/dist/Common/index.d.ts +1 -0
  17. package/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts +15 -0
  18. package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts +1 -0
  19. package/dist/Pages/GlobalConfigurations/index.d.ts +1 -0
  20. package/dist/Pages/index.d.ts +1 -0
  21. package/dist/Shared/Components/BulkSelection/BulkSelection.d.ts +4 -0
  22. package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts +4 -0
  23. package/dist/Shared/Components/BulkSelection/BulkSelectionProvider.d.ts +4 -0
  24. package/dist/Shared/Components/BulkSelection/constants.d.ts +9 -0
  25. package/dist/Shared/Components/BulkSelection/index.d.ts +4 -0
  26. package/dist/Shared/Components/BulkSelection/types.d.ts +54 -0
  27. package/dist/Shared/Components/index.d.ts +1 -0
  28. package/dist/Shared/index.d.ts +1 -0
  29. package/dist/index.d.ts +3 -1
  30. package/dist/index.js +654 -175
  31. package/package.json +1 -1
  32. package/src/Assets/Icon/ic-arrow-up-down.svg +3 -0
  33. package/src/Assets/Icon/ic-check-all.svg +5 -0
  34. package/src/Assets/Icon/ic-check-square.svg +4 -0
  35. package/src/Assets/Icon/ic-close.svg +9 -0
  36. package/src/Assets/Icon/ic-sort-arrow-down.svg +3 -0
  37. package/src/Common/Api.ts +21 -0
  38. package/src/Common/Constants.ts +17 -1
  39. package/src/Common/DraggableWrapper/types.ts +4 -1
  40. package/src/Common/Helper.tsx +16 -30
  41. package/src/Common/Hooks/index.ts +1 -0
  42. package/src/Common/Hooks/useUrlFilters/constants.ts +9 -0
  43. package/src/Common/Hooks/useUrlFilters/index.ts +2 -0
  44. package/src/Common/Hooks/useUrlFilters/types.ts +21 -0
  45. package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +121 -0
  46. package/src/Common/SearchBar/SearchBar.component.tsx +0 -2
  47. package/src/Common/SearchBar/types.ts +0 -4
  48. package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +44 -0
  49. package/src/Common/SortableTableHeaderCell/index.ts +2 -0
  50. package/src/Common/SortableTableHeaderCell/types.ts +26 -0
  51. package/src/Common/Types.ts +16 -2
  52. package/src/Common/index.ts +1 -0
  53. package/src/Pages/GlobalConfigurations/Authorization/constants.ts +16 -0
  54. package/src/Pages/GlobalConfigurations/Authorization/index.ts +1 -0
  55. package/src/Pages/GlobalConfigurations/index.ts +1 -0
  56. package/src/Pages/index.ts +1 -0
  57. package/src/Shared/Components/BulkSelection/BulkSelection.tsx +77 -0
  58. package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx +31 -0
  59. package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx +163 -0
  60. package/src/Shared/Components/BulkSelection/constants.tsx +13 -0
  61. package/src/Shared/Components/BulkSelection/index.ts +4 -0
  62. package/src/Shared/Components/BulkSelection/types.tsx +65 -0
  63. package/src/Shared/Components/index.ts +1 -0
  64. package/src/Shared/index.ts +1 -0
  65. package/src/index.ts +3 -1
@@ -1,5 +1,14 @@
1
1
  import { ResponseType, APIOptions } from './Types';
2
+ import { MutableRefObject } from 'react';
2
3
  export declare const post: (url: string, data: object, options?: APIOptions, isMultipartRequest?: boolean) => Promise<ResponseType>;
3
4
  export declare const put: (url: string, data: object, options?: APIOptions) => Promise<ResponseType>;
4
5
  export declare const get: (url: string, options?: APIOptions) => Promise<ResponseType>;
5
6
  export declare const trash: (url: string, data?: object, options?: APIOptions) => Promise<ResponseType>;
7
+ /**
8
+ * Aborts the previous request before triggering next request
9
+ */
10
+ export declare const abortPreviousRequests: <T>(callback: () => Promise<T>, abortControllerRef: MutableRefObject<AbortController>) => Promise<T>;
11
+ /**
12
+ * Returns true if the error is due to a aborted request
13
+ */
14
+ export declare const getIsRequestAborted: (error: any) => boolean;
@@ -73,3 +73,17 @@ export declare const SELECTED_APPROVAL_TAB_STATE: {
73
73
  APPROVAL: string;
74
74
  PENDING: string;
75
75
  };
76
+ export declare enum SortingOrder {
77
+ /**
78
+ * Ascending order
79
+ */
80
+ ASC = "ASC",
81
+ /**
82
+ * Descending order
83
+ */
84
+ DESC = "DESC"
85
+ }
86
+ /**
87
+ * Base page size for pagination
88
+ */
89
+ export declare const DEFAULT_BASE_PAGE_SIZE = 20;
@@ -5,7 +5,10 @@ export declare enum DraggablePositionVariant {
5
5
  }
6
6
  export interface DraggableWrapperProps {
7
7
  children: ReactNode;
8
- zIndex?: number;
8
+ /**
9
+ * Support for passing the direct value or calc functions as well
10
+ */
11
+ zIndex?: number | string;
9
12
  positionVariant?: DraggablePositionVariant;
10
13
  /**
11
14
  * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
@@ -55,10 +55,7 @@ export declare const customStyles: {
55
55
  dropdownIndicator: (base: any, state: any) => any;
56
56
  };
57
57
  export declare const getFilteredChartVersions: (charts: any, selectedChartType: any) => any;
58
- export declare function getUnlockedJSON(json: any, jsonPathArray: any, removeParentKeysAndEmptyArrays?: boolean): {
59
- newDocument: any;
60
- removedPatches: any[];
61
- };
58
+ export declare function getUnlockedJSON(json: any, jsonPathArray: any): any;
62
59
  export declare function getLockedJSON(json: any, jsonPathArray: string[]): any;
63
60
  /**
64
61
  * Returns a debounced variant of the function
@@ -1,3 +1,4 @@
1
1
  export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin';
2
2
  export { useClickOutside } from './UseClickOutside/UseClickOutside';
3
3
  export { useWindowSize } from './UseWindowSize/UseWindowSize';
4
+ export * from './useUrlFilters';
@@ -0,0 +1,8 @@
1
+ export declare const DEFAULT_PAGE_NUMBER = 1;
2
+ export declare const URL_FILTER_KEYS: {
3
+ readonly PAGE_SIZE: "pageSize";
4
+ readonly PAGE_NUMBER: "pageNumber";
5
+ readonly SEARCH_KEY: "searchKey";
6
+ readonly SORT_BY: "sortBy";
7
+ readonly SORT_ORDER: "sortOrder";
8
+ };
@@ -0,0 +1,2 @@
1
+ export { default as useUrlFilters } from './useUrlFilters';
2
+ export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
@@ -0,0 +1,19 @@
1
+ import { SortingOrder } from '../../Constants';
2
+ export interface UseUrlFiltersProps<T> {
3
+ /**
4
+ * The key on which the sorting should be applied
5
+ */
6
+ initialSortKey?: T;
7
+ }
8
+ export interface UseUrlFiltersReturnType<T> {
9
+ pageSize: number;
10
+ changePage: (pageNumber: number) => void;
11
+ changePageSize: (pageSize: number) => void;
12
+ searchKey: string;
13
+ handleSearch: (searchKey: string) => void;
14
+ offset: number;
15
+ sortBy: T;
16
+ sortOrder: SortingOrder;
17
+ handleSorting: (sortBy: T) => void;
18
+ clearFilters: () => void;
19
+ }
@@ -0,0 +1,20 @@
1
+ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types';
2
+ /**
3
+ * Generic hook for implementing URL based filters.
4
+ * eg: pagination, search, sort.
5
+ *
6
+ * The exposed handlers can be consumed directly without the need for explicit state management
7
+ *
8
+ * @example Default Usage:
9
+ * ```tsx
10
+ * const { pageSize, changePage, ...rest } = useUrlFilters()
11
+ * ```
12
+ *
13
+ * @example Usage with custom type for sort keys and initial sort key:
14
+ * ```tsx
15
+ * const { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
16
+ * ```
17
+ *
18
+ */
19
+ declare const useUrlFilters: <T = string>({ initialSortKey }?: UseUrlFiltersProps<T>) => UseUrlFiltersReturnType<T>;
20
+ export default useUrlFilters;
@@ -35,5 +35,5 @@ import './searchBar.scss';
35
35
  * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
36
36
  * ```
37
37
  */
38
- declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, handleOnBlur, }: SearchBarProps) => JSX.Element;
38
+ declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
39
39
  export default SearchBar;
@@ -32,8 +32,4 @@ export interface SearchBarProps {
32
32
  * Timeout for the debounce handler to be triggered
33
33
  */
34
34
  debounceTimeout?: number;
35
- /**
36
- * handleOnBlur for the search input
37
- */
38
- handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
39
35
  }
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import { SortableTableHeaderCellProps } from './types';
3
+ /**
4
+ * Reusable component for the table header cell with support for sorting icons
5
+ *
6
+ * @example Usage
7
+ * ```tsx
8
+ * <SortableTableHeaderCell
9
+ * isSorted={currentSortedCell === 'cell'}
10
+ * triggerSorting={() => {}}
11
+ * sortOrder={SortingOrder.ASC}
12
+ * title="Header Cell"
13
+ * disabled={isDisabled}
14
+ * />
15
+ * ```
16
+ */
17
+ declare const SortableTableHeaderCell: ({ isSorted, triggerSorting, sortOrder, title, disabled, }: SortableTableHeaderCellProps) => JSX.Element;
18
+ export default SortableTableHeaderCell;
@@ -0,0 +1,2 @@
1
+ export { default as SortableTableHeaderCell } from './SortableTableHeaderCell';
2
+ export type { SortableTableHeaderCellProps } from './types';
@@ -0,0 +1,25 @@
1
+ import { SortingOrder } from '../Constants';
2
+ export interface SortableTableHeaderCellProps {
3
+ /**
4
+ * If true, the cell is sorted
5
+ */
6
+ isSorted: boolean;
7
+ /**
8
+ * Callback for handling the sorting of the cell
9
+ */
10
+ triggerSorting: () => void;
11
+ /**
12
+ * Current sort order
13
+ *
14
+ * Note: On click, the sort order should be updated as required
15
+ */
16
+ sortOrder: SortingOrder;
17
+ /**
18
+ * Label for the cell
19
+ */
20
+ title: string;
21
+ /**
22
+ * If true, the cell is disabled
23
+ */
24
+ disabled: boolean;
25
+ }
@@ -1,7 +1,7 @@
1
1
  import React, { ReactNode, CSSProperties } from 'react';
2
2
  import { Placement } from 'tippy.js';
3
3
  import { ImageComment, ReleaseTag } from './ImageTags.Types';
4
- import { DockerConfigOverrideType, TaskErrorObj } from '.';
4
+ import { DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.';
5
5
  /**
6
6
  * Generic response type object with support for overriding the result type
7
7
  *
@@ -44,12 +44,13 @@ export interface Teams {
44
44
  }
45
45
  export declare enum CHECKBOX_VALUE {
46
46
  CHECKED = "CHECKED",
47
- INTERMEDIATE = "INTERMEDIATE"
47
+ INTERMEDIATE = "INTERMEDIATE",
48
+ BULK_CHECKED = "BULK_CHECKED"
48
49
  }
49
50
  export interface CheckboxProps {
50
51
  onChange: (event: any) => void;
51
52
  isChecked: boolean;
52
- value: 'CHECKED' | 'INTERMEDIATE';
53
+ value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED';
53
54
  disabled?: boolean;
54
55
  tabIndex?: number;
55
56
  rootClassName?: string;
@@ -688,4 +689,16 @@ export interface EdgeNodeType {
688
689
  export interface EdgeEndNodeType extends EdgeNodeType {
689
690
  userApprovalConfig?: UserApprovalConfigType;
690
691
  }
692
+ /**
693
+ * Search params for sorting configuration
694
+ *
695
+ * Note: Either both sortOrder and sortBy are required or none
696
+ */
697
+ export type SortingParams<T = string> = {
698
+ sortOrder: SortingOrder;
699
+ sortBy: T;
700
+ } | {
701
+ sortOrder?: never;
702
+ sortBy?: never;
703
+ };
691
704
  export {};
@@ -27,6 +27,7 @@ export * from './Checkbox';
27
27
  export { default as EmptyState } from './EmptyState/EmptyState';
28
28
  export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
29
29
  export * from './SearchBar';
30
+ export * from './SortableTableHeaderCell';
30
31
  export { default as Toggle } from './Toggle/Toggle';
31
32
  export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
32
33
  export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';
@@ -0,0 +1,15 @@
1
+ /**
2
+ * User Status received from the API
3
+ */
4
+ export declare enum UserStatusDto {
5
+ active = "active",
6
+ inactive = "inactive"
7
+ }
8
+ /**
9
+ * User status for the frontend
10
+ */
11
+ export declare enum UserStatus {
12
+ active = "active",
13
+ inactive = "inactive",
14
+ temporary = "temporary"
15
+ }
@@ -0,0 +1 @@
1
+ export * from './constants';
@@ -0,0 +1 @@
1
+ export * from './Authorization';
@@ -0,0 +1 @@
1
+ export * from './GlobalConfigurations';
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BulkSelectionProps } from './types';
3
+ declare const BulkSelection: <T>({ showPagination }: BulkSelectionProps) => JSX.Element;
4
+ export default BulkSelection;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BulkSelectionDropdownItemsProps } from './types';
3
+ declare const BulkSelectionDropdownItems: <T>({ locator, label, isSelected, handleBulkSelection, icon: Icon, }: BulkSelectionDropdownItemsProps<T>) => JSX.Element;
4
+ export default BulkSelectionDropdownItems;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
3
+ export declare const useBulkSelection: <T>() => UseBulkSelectionReturnType<T>;
4
+ export declare const BulkSelectionProvider: <T>({ children, identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => JSX.Element;
@@ -0,0 +1,9 @@
1
+ export declare const BULK_DROPDOWN_TEST_ID: "bulk-selection-pop-up-menu";
2
+ export declare const BulkSelectionOptionsLabels: {
3
+ readonly SELECT_ALL_ON_PAGE: "All on this page";
4
+ readonly SELECT_ALL_ACROSS_PAGES: "All across pages";
5
+ readonly CLEAR_ALL_SELECTIONS: "Clear selection";
6
+ };
7
+ export declare const SELECT_ALL_ACROSS_PAGES_LOCATOR: "*";
8
+ export declare const getInvalidActionMessage: (action: string) => string;
9
+ export declare const BULK_SELECTION_CONTEXT_ERROR = "useBulkSelection must be used within BulkSelectionContext";
@@ -0,0 +1,4 @@
1
+ export { default as BulkSelection } from './BulkSelection';
2
+ export * from './BulkSelectionProvider';
3
+ export * from './types';
4
+ export * from './constants';
@@ -0,0 +1,54 @@
1
+ /// <reference types="react" />
2
+ import { CHECKBOX_VALUE } from '../../../Common';
3
+ export declare enum BulkSelectionEvents {
4
+ CLEAR_ALL_SELECTIONS = "CLEAR_ALL_SELECTIONS",
5
+ CLEAR_IDENTIFIERS = "CLEAR_IDENTIFIERS",
6
+ SELECT_ALL_ACROSS_PAGES = "SELECT_ALL_ACROSS_PAGES",
7
+ SELECT_ALL_ON_PAGE = "SELECT_ALL_ON_PAGE",
8
+ SELECT_IDENTIFIER = "SELECT_IDENTIFIER",
9
+ CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION = "CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION",
10
+ CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES = "CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES"
11
+ }
12
+ export interface HandleBulkSelectionType<T> {
13
+ action: BulkSelectionEvents;
14
+ data?: {
15
+ identifierIds?: (number | string)[];
16
+ identifierObject?: T;
17
+ };
18
+ }
19
+ export interface GetBulkSelectionCheckboxValuesType {
20
+ isChecked: boolean;
21
+ checkboxValue: CHECKBOX_VALUE;
22
+ }
23
+ export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
24
+ selectedIdentifiers: T;
25
+ handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
26
+ }
27
+ export interface BulkSelectionProps {
28
+ showPagination: boolean;
29
+ }
30
+ export interface BulkSelectionDropdownItemsType {
31
+ locator: BulkSelectionEvents;
32
+ label: string;
33
+ isSelected: boolean;
34
+ icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
35
+ }
36
+ export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {
37
+ }
38
+ export declare enum SelectAllDialogStatus {
39
+ OPEN = "OPEN",
40
+ CLOSED = "CLOSED"
41
+ }
42
+ export type BulkSelectionIdentifiersType<T> = Record<string | number, T>;
43
+ export interface UseBulkSelectionProps<T> {
44
+ /**
45
+ * Response from API, assuming structure to be array of objects with key and values
46
+ * This will the given ids on current page
47
+ */
48
+ identifiers: T;
49
+ /**
50
+ * Act as buffer between select all across pages and select all on page state
51
+ */
52
+ getSelectAllDialogStatus: () => SelectAllDialogStatus;
53
+ children?: React.ReactNode;
54
+ }
@@ -0,0 +1 @@
1
+ export * from './BulkSelection';
@@ -0,0 +1 @@
1
+ export * from './Components';
package/dist/index.d.ts CHANGED
@@ -1 +1,3 @@
1
- export * from "./Common";
1
+ export * from './Common';
2
+ export * from './Pages';
3
+ export * from './Shared';