@devtron-labs/devtron-fe-common-lib 0.0.61-beta-10 → 0.0.62-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 (96) hide show
  1. package/dist/Common/Constants.d.ts +14 -1
  2. package/dist/Common/DraggableWrapper/types.d.ts +4 -1
  3. package/dist/Common/Hooks/index.d.ts +1 -0
  4. package/dist/Common/Hooks/useUrlFilters/constants.d.ts +8 -0
  5. package/dist/Common/Hooks/useUrlFilters/index.d.ts +2 -0
  6. package/dist/Common/Hooks/useUrlFilters/types.d.ts +19 -0
  7. package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts +20 -0
  8. package/dist/Common/SortableTableHeaderCell/SortableTableHeaderCell.d.ts +18 -0
  9. package/dist/Common/SortableTableHeaderCell/index.d.ts +2 -0
  10. package/dist/Common/SortableTableHeaderCell/types.d.ts +25 -0
  11. package/dist/Common/Types.d.ts +13 -1
  12. package/dist/Common/index.d.ts +1 -0
  13. package/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts +15 -0
  14. package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts +1 -0
  15. package/dist/Pages/GlobalConfigurations/index.d.ts +1 -1
  16. package/dist/Shared/Components/BulkSelection/constants.d.ts +0 -1
  17. package/dist/Shared/Components/BulkSelection/types.d.ts +2 -0
  18. package/dist/Shared/Components/index.d.ts +0 -2
  19. package/dist/Shared/index.d.ts +0 -2
  20. package/dist/index.js +371 -1161
  21. package/package.json +1 -1
  22. package/src/Assets/Icon/ic-arrow-up-down.svg +3 -0
  23. package/src/Assets/Icon/ic-sort-arrow-down.svg +3 -0
  24. package/src/Common/BreadCrumb/Types.ts +1 -0
  25. package/src/Common/Checkbox.tsx +0 -1
  26. package/src/Common/Constants.ts +18 -3
  27. package/src/Common/CustomInput/CustomInput.tsx +1 -2
  28. package/src/Common/DraggableWrapper/DraggableWrapper.tsx +1 -3
  29. package/src/Common/DraggableWrapper/types.ts +4 -1
  30. package/src/Common/Helper.tsx +8 -1
  31. package/src/Common/Hooks/index.ts +1 -0
  32. package/src/Common/Hooks/useUrlFilters/constants.ts +9 -0
  33. package/src/Common/Hooks/useUrlFilters/index.ts +2 -0
  34. package/src/Common/Hooks/useUrlFilters/types.ts +21 -0
  35. package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +121 -0
  36. package/src/Common/RJSF/utils.ts +0 -2
  37. package/src/Common/SearchBar/searchBar.scss +1 -1
  38. package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +44 -0
  39. package/src/Common/SortableTableHeaderCell/index.ts +2 -0
  40. package/src/Common/SortableTableHeaderCell/types.ts +26 -0
  41. package/src/Common/Types.ts +13 -1
  42. package/src/Common/index.ts +1 -0
  43. package/src/Pages/GlobalConfigurations/Authorization/constants.ts +16 -0
  44. package/src/Pages/GlobalConfigurations/Authorization/index.ts +1 -0
  45. package/src/Pages/GlobalConfigurations/index.ts +1 -1
  46. package/src/Shared/Components/BulkSelection/BulkSelection.tsx +2 -2
  47. package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx +1 -3
  48. package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx +17 -17
  49. package/src/Shared/Components/BulkSelection/constants.tsx +0 -1
  50. package/src/Shared/Components/BulkSelection/types.tsx +2 -0
  51. package/src/Shared/Components/index.ts +0 -2
  52. package/src/Shared/index.ts +0 -2
  53. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts +0 -4
  54. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts +0 -4
  55. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.d.ts +0 -7
  56. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.d.ts +0 -4
  57. package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.d.ts +0 -4
  58. package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts +0 -4
  59. package/dist/Pages/GlobalConfigurations/BuildInfra/Footer.d.ts +0 -4
  60. package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts +0 -50
  61. package/dist/Pages/GlobalConfigurations/BuildInfra/index.d.ts +0 -7
  62. package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts +0 -6
  63. package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +0 -286
  64. package/dist/Pages/GlobalConfigurations/BuildInfra/utils.d.ts +0 -12
  65. package/dist/Shared/Components/APIResponseHandler/APIResponseHandler.d.ts +0 -4
  66. package/dist/Shared/Components/APIResponseHandler/constants.d.ts +0 -4
  67. package/dist/Shared/Components/APIResponseHandler/index.d.ts +0 -2
  68. package/dist/Shared/Components/APIResponseHandler/types.d.ts +0 -37
  69. package/dist/Shared/Components/ReactSelect/index.d.ts +0 -1
  70. package/dist/Shared/Components/ReactSelect/utils.d.ts +0 -12
  71. package/dist/Shared/Helpers.d.ts +0 -16
  72. package/dist/Shared/validations.d.ts +0 -8
  73. package/src/Assets/Icon/ic-cpu.svg +0 -4
  74. package/src/Assets/Icon/ic-memory.svg +0 -3
  75. package/src/Assets/Icon/ic-timer.svg +0 -3
  76. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx +0 -128
  77. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx +0 -44
  78. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx +0 -106
  79. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx +0 -55
  80. package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx +0 -32
  81. package/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +0 -45
  82. package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx +0 -56
  83. package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md +0 -4
  84. package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +0 -139
  85. package/src/Pages/GlobalConfigurations/BuildInfra/index.ts +0 -7
  86. package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx +0 -167
  87. package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +0 -339
  88. package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx +0 -507
  89. package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx +0 -41
  90. package/src/Shared/Components/APIResponseHandler/constants.tsx +0 -5
  91. package/src/Shared/Components/APIResponseHandler/index.ts +0 -2
  92. package/src/Shared/Components/APIResponseHandler/types.tsx +0 -39
  93. package/src/Shared/Components/ReactSelect/index.ts +0 -1
  94. package/src/Shared/Components/ReactSelect/utils.tsx +0 -97
  95. package/src/Shared/Helpers.tsx +0 -29
  96. package/src/Shared/validations.tsx +0 -130
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devtron-labs/devtron-fe-common-lib",
3
- "version": "0.0.61-beta-10",
3
+ "version": "0.0.62-beta-1",
4
4
  "description": "Supporting common component library",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
2
+ <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"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
@@ -1,3 +1,4 @@
1
+
1
2
  export interface Breadcrumb {
2
3
  to: string
3
4
  name: string
@@ -10,7 +10,6 @@ Valid States of Checkbox:
10
10
  5. disabled: false, checked: true, value: INTERMIDIATE
11
11
  6. disabled: false, checked: true, value: CHECKED
12
12
  */
13
- // TODO: Associate label with input element
14
13
  export class Checkbox extends Component<CheckboxProps> {
15
14
  render() {
16
15
  let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`
@@ -25,8 +25,7 @@ export const ROUTES = {
25
25
  USER_CHECK_ROLE: 'user/check/roles',
26
26
  IMAGE_TAGGING:'app/image-tagging',
27
27
  CD_MATERIAL_GET: 'app/cd-pipeline',
28
- DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
29
- INFRA_CONFIG_PROFILE: 'infra-config/profile',
28
+ DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
30
29
  }
31
30
 
32
31
  export enum KEY_VALUE {
@@ -252,4 +251,20 @@ export const MAX_Z_INDEX = 2147483647
252
251
  export const SELECTED_APPROVAL_TAB_STATE = {
253
252
  APPROVAL: 'approval',
254
253
  PENDING: 'pending',
255
- }
254
+ }
255
+
256
+ export enum SortingOrder {
257
+ /**
258
+ * Ascending order
259
+ */
260
+ ASC = 'ASC',
261
+ /**
262
+ * Descending order
263
+ */
264
+ DESC = 'DESC',
265
+ }
266
+
267
+ /**
268
+ * Base page size for pagination
269
+ */
270
+ export const DEFAULT_BASE_PAGE_SIZE = 20
@@ -2,7 +2,6 @@ import { CustomInputProps } from './Types'
2
2
  import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
3
3
  import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
4
4
 
5
- // TODO: label association with input
6
5
  export function CustomInput({
7
6
  name,
8
7
  value,
@@ -14,7 +13,7 @@ export function CustomInput({
14
13
  disabled = false,
15
14
  labelClassName = '',
16
15
  placeholder = '',
17
- tabIndex = 0,
16
+ tabIndex = 1,
18
17
  dataTestid = '',
19
18
  isRequiredField = false,
20
19
  autoFocus = false,
@@ -94,9 +94,8 @@ export default function DraggableWrapper({
94
94
  }
95
95
 
96
96
  return (
97
- // 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
98
97
  <div
99
- className="dc__position-fixed dc__disable-click"
98
+ className="dc__position-fixed"
100
99
  style={{
101
100
  zIndex,
102
101
  }}
@@ -107,7 +106,6 @@ export default function DraggableWrapper({
107
106
  {...childDivProps}
108
107
  style={{
109
108
  zIndex,
110
- pointerEvents: 'auto',
111
109
  }}
112
110
  >
113
111
  {children}
@@ -8,7 +8,10 @@ export enum DraggablePositionVariant {
8
8
 
9
9
  export interface DraggableWrapperProps {
10
10
  children: ReactNode
11
- zIndex?: number
11
+ /**
12
+ * Support for passing the direct value or calc functions as well
13
+ */
14
+ zIndex?: number | string
12
15
  positionVariant?: DraggablePositionVariant
13
16
  /**
14
17
  * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
@@ -447,9 +447,16 @@ export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
447
447
  */
448
448
  export const getUrlWithSearchParams = (url: string, params: Record<string | number, any>) => {
449
449
  const searchParams = new URLSearchParams()
450
+ // TODO: Common out
450
451
  Object.keys(params).forEach((key) => {
451
452
  if (params[key]) {
452
- searchParams.append(key, params[key])
453
+ if (Array.isArray(params[key])) {
454
+ params[key].forEach((val) => {
455
+ searchParams.append(key, val)
456
+ })
457
+ } else {
458
+ searchParams.set(key, params[key])
459
+ }
453
460
  }
454
461
  })
455
462
  const queryString = searchParams.toString()
@@ -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,9 @@
1
+ export const DEFAULT_PAGE_NUMBER = 1
2
+
3
+ export const URL_FILTER_KEYS = {
4
+ PAGE_SIZE: 'pageSize',
5
+ PAGE_NUMBER: 'pageNumber',
6
+ SEARCH_KEY: 'searchKey',
7
+ SORT_BY: 'sortBy',
8
+ SORT_ORDER: 'sortOrder',
9
+ } as const
@@ -0,0 +1,2 @@
1
+ export { default as useUrlFilters } from './useUrlFilters'
2
+ export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
@@ -0,0 +1,21 @@
1
+ import { SortingOrder } from '../../Constants'
2
+
3
+ export interface UseUrlFiltersProps<T> {
4
+ /**
5
+ * The key on which the sorting should be applied
6
+ */
7
+ initialSortKey?: T
8
+ }
9
+
10
+ export interface UseUrlFiltersReturnType<T> {
11
+ pageSize: number
12
+ changePage: (pageNumber: number) => void
13
+ changePageSize: (pageSize: number) => void
14
+ searchKey: string
15
+ handleSearch: (searchKey: string) => void
16
+ offset: number
17
+ sortBy: T
18
+ sortOrder: SortingOrder
19
+ handleSorting: (sortBy: T) => void
20
+ clearFilters: () => void
21
+ }
@@ -0,0 +1,121 @@
1
+ import { useMemo } from 'react'
2
+ import { useHistory, useLocation } from 'react-router-dom'
3
+ import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
4
+ import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
5
+ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
6
+
7
+ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
8
+
9
+ /**
10
+ * Generic hook for implementing URL based filters.
11
+ * eg: pagination, search, sort.
12
+ *
13
+ * The exposed handlers can be consumed directly without the need for explicit state management
14
+ *
15
+ * @example Default Usage:
16
+ * ```tsx
17
+ * const { pageSize, changePage, ...rest } = useUrlFilters()
18
+ * ```
19
+ *
20
+ * @example Usage with custom type for sort keys and initial sort key:
21
+ * ```tsx
22
+ * const { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
23
+ * ```
24
+ *
25
+ */
26
+ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}): UseUrlFiltersReturnType<T> => {
27
+ const location = useLocation()
28
+ const history = useHistory()
29
+ const searchParams = new URLSearchParams(location.search)
30
+
31
+ const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
32
+ const _pageSize = searchParams.get(PAGE_SIZE)
33
+ const _pageNumber = searchParams.get(PAGE_NUMBER)
34
+ const _searchKey = searchParams.get(SEARCH_KEY)
35
+ const _sortOrder = searchParams.get(SORT_ORDER) as SortingOrder
36
+ const _sortBy = searchParams.get(SORT_BY)
37
+
38
+ const sortByKey = (_sortBy || initialSortKey || '') as T
39
+ // Fallback to ascending order
40
+ const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
41
+
42
+ return {
43
+ pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
44
+ pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
45
+ searchKey: _searchKey || '',
46
+ sortBy: sortByKey,
47
+ // sort order should only be applied if the key is available
48
+ sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
49
+ }
50
+ }, [searchParams])
51
+
52
+ /**
53
+ * Used for getting the required result from the API
54
+ */
55
+ const offset = pageSize * (pageNumber - 1)
56
+
57
+ /**
58
+ * Update and replace the search params in the URL.
59
+ *
60
+ * Note: Currently only primitive data types are supported
61
+ */
62
+ const _updateSearchParam = (key: string, value) => {
63
+ searchParams.set(key, String(value))
64
+ history.replace({ search: searchParams.toString() })
65
+ }
66
+
67
+ const _resetPageNumber = () => {
68
+ _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER)
69
+ }
70
+
71
+ const changePage = (page: number) => {
72
+ _updateSearchParam(PAGE_NUMBER, page)
73
+ }
74
+
75
+ const changePageSize = (_pageSize: number) => {
76
+ _updateSearchParam(PAGE_SIZE, _pageSize)
77
+ _resetPageNumber()
78
+ }
79
+
80
+ const handleSearch = (searchTerm: string) => {
81
+ _updateSearchParam(SEARCH_KEY, searchTerm)
82
+ _resetPageNumber()
83
+ }
84
+
85
+ const handleSorting = (_sortBy: T) => {
86
+ let order: SortingOrder
87
+ if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
88
+ order = SortingOrder.DESC
89
+ } else {
90
+ order = SortingOrder.ASC
91
+ }
92
+
93
+ _updateSearchParam(SORT_BY, _sortBy)
94
+ _updateSearchParam(SORT_ORDER, order)
95
+
96
+ // Reset page number on sorting change
97
+ _resetPageNumber()
98
+ }
99
+
100
+ const clearFilters = () => {
101
+ Object.values(URL_FILTER_KEYS).forEach((key) => {
102
+ searchParams.delete(key)
103
+ })
104
+ history.replace({ search: searchParams.toString() })
105
+ }
106
+
107
+ return {
108
+ pageSize,
109
+ changePage,
110
+ changePageSize,
111
+ searchKey,
112
+ handleSearch,
113
+ offset,
114
+ sortBy,
115
+ sortOrder,
116
+ handleSorting,
117
+ clearFilters,
118
+ }
119
+ }
120
+
121
+ export default useUrlFilters
@@ -19,7 +19,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
19
19
  ...base,
20
20
  paddingTop: 0,
21
21
  paddingBottom: 0,
22
- cursor: 'pointer',
23
22
  }),
24
23
  control: (base, state) => ({
25
24
  ...base,
@@ -34,7 +33,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
34
33
  color: 'var(--N900)',
35
34
  backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
36
35
  padding: '10px 12px',
37
- cursor: 'pointer',
38
36
  }),
39
37
  dropdownIndicator: (base, state) => ({
40
38
  ...base,
@@ -3,7 +3,7 @@
3
3
  &:focus,
4
4
  &:focus-within {
5
5
  outline: none;
6
- border: solid 1px var(--B500) !important;
6
+ border: solid 1px var(--B500);
7
7
  }
8
8
 
9
9
  &__input {
@@ -0,0 +1,44 @@
1
+ import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
2
+ import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
3
+ import { SortingOrder } from '../Constants'
4
+ import { SortableTableHeaderCellProps } from './types'
5
+
6
+ /**
7
+ * Reusable component for the table header cell with support for sorting icons
8
+ *
9
+ * @example Usage
10
+ * ```tsx
11
+ * <SortableTableHeaderCell
12
+ * isSorted={currentSortedCell === 'cell'}
13
+ * triggerSorting={() => {}}
14
+ * sortOrder={SortingOrder.ASC}
15
+ * title="Header Cell"
16
+ * disabled={isDisabled}
17
+ * />
18
+ * ```
19
+ */
20
+ const SortableTableHeaderCell = ({
21
+ isSorted,
22
+ triggerSorting,
23
+ sortOrder,
24
+ title,
25
+ disabled,
26
+ }: SortableTableHeaderCellProps) => (
27
+ <button
28
+ type="button"
29
+ className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
30
+ onClick={triggerSorting}
31
+ disabled={disabled}
32
+ >
33
+ <span className="dc__uppercase dc__ellipsis-right">{title}</span>
34
+ {isSorted ? (
35
+ <SortArrowDown
36
+ className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
37
+ />
38
+ ) : (
39
+ <SortIcon className="icon-dim-12 mw-12 scn-7" />
40
+ )}
41
+ </button>
42
+ )
43
+
44
+ export default SortableTableHeaderCell
@@ -0,0 +1,2 @@
1
+ export { default as SortableTableHeaderCell } from './SortableTableHeaderCell'
2
+ export type { SortableTableHeaderCellProps } from './types'
@@ -0,0 +1,26 @@
1
+ import { SortingOrder } from '../Constants'
2
+
3
+ export interface SortableTableHeaderCellProps {
4
+ /**
5
+ * If true, the cell is sorted
6
+ */
7
+ isSorted: boolean
8
+ /**
9
+ * Callback for handling the sorting of the cell
10
+ */
11
+ triggerSorting: () => void
12
+ /**
13
+ * Current sort order
14
+ *
15
+ * Note: On click, the sort order should be updated as required
16
+ */
17
+ sortOrder: SortingOrder
18
+ /**
19
+ * Label for the cell
20
+ */
21
+ title: string
22
+ /**
23
+ * If true, the cell is disabled
24
+ */
25
+ disabled: boolean
26
+ }
@@ -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
  /**
7
7
  * Generic response type object with support for overriding the result type
@@ -764,3 +764,15 @@ export interface EdgeNodeType {
764
764
  export interface EdgeEndNodeType extends EdgeNodeType {
765
765
  userApprovalConfig?: UserApprovalConfigType
766
766
  }
767
+
768
+ /**
769
+ * Search params for sorting configuration
770
+ *
771
+ * Note: Either both sortOrder and sortBy are required or none
772
+ */
773
+ export type SortingParams<T = string> =
774
+ | {
775
+ sortOrder: SortingOrder
776
+ sortBy: T
777
+ }
778
+ | { sortOrder?: never; sortBy?: never }
@@ -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,16 @@
1
+ /**
2
+ * User Status received from the API
3
+ */
4
+ export enum UserStatusDto {
5
+ active = 'active',
6
+ inactive = 'inactive',
7
+ }
8
+
9
+ /**
10
+ * User status for the frontend
11
+ */
12
+ export enum UserStatus {
13
+ active = 'active',
14
+ inactive = 'inactive',
15
+ temporary = 'temporaryAccess',
16
+ }
@@ -0,0 +1 @@
1
+ export * from './constants'
@@ -1 +1 @@
1
- export * from './BuildInfra'
1
+ export * from './Authorization'
@@ -9,8 +9,8 @@ import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.
9
9
  import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
10
10
 
11
11
  const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
12
- const { handleBulkSelection, selectedIdentifiers, isChecked, checkboxValue } = useBulkSelection<T>()
13
- const areOptionsSelected = Object.keys(selectedIdentifiers).length > 0
12
+ const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
13
+ const areOptionsSelected = getSelectedIdentifiersCount() > 0
14
14
  const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
15
15
  {
16
16
  locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
@@ -18,9 +18,7 @@ const BulkSelectionDropdownItems = <T,>({
18
18
  data-testid={`bulk-action-${locator}`}
19
19
  onClick={handleSelect}
20
20
  className={`dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ${
21
- isSelected
22
- ? 'cb-5 bcb-1 icon-stroke-b5 fs-13 fw-6 lh-20'
23
- : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
21
+ isSelected ? 'cb-5 bcb-2 fs-13 fw-6 lh-20' : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
24
22
  }`}
25
23
  type="button"
26
24
  >
@@ -1,11 +1,5 @@
1
1
  import { createContext, useContext, useMemo, useState } from 'react'
2
- import { toast } from 'react-toastify'
3
- import {
4
- BULK_SELECTION_CONTEXT_ERROR,
5
- CLEAR_SELECTIONS_WARNING,
6
- SELECT_ALL_ACROSS_PAGES_LOCATOR,
7
- getInvalidActionMessage,
8
- } from './constants'
2
+ import { BULK_SELECTION_CONTEXT_ERROR, SELECT_ALL_ACROSS_PAGES_LOCATOR, getInvalidActionMessage } from './constants'
9
3
  import {
10
4
  BulkSelectionEvents,
11
5
  GetBulkSelectionCheckboxValuesType,
@@ -22,6 +16,8 @@ const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
22
16
  handleBulkSelection: noop,
23
17
  isChecked: false,
24
18
  checkboxValue: CHECKBOX_VALUE.CHECKED,
19
+ isBulkSelectionApplied: false,
20
+ getSelectedIdentifiersCount: noop,
25
21
  })
26
22
 
27
23
  export const useBulkSelection = <T,>() => {
@@ -39,6 +35,10 @@ export const BulkSelectionProvider = <T,>({
39
35
  }: UseBulkSelectionProps<T>) => {
40
36
  const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
41
37
 
38
+ const isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
39
+
40
+ const getSelectedIdentifiersCount = () => Object.keys(selectedIdentifiers).length
41
+
42
42
  const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
43
43
  const _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers))
44
44
  selectedIds.forEach((id) => {
@@ -50,7 +50,7 @@ export const BulkSelectionProvider = <T,>({
50
50
  const setIdentifiersAfterPageSelection = (baseObject: T) => {
51
51
  const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
52
52
  // removing bulk selection across pages if present
53
- if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
53
+ if (isBulkSelectionApplied) {
54
54
  delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
55
55
  }
56
56
 
@@ -70,7 +70,6 @@ export const BulkSelectionProvider = <T,>({
70
70
  break
71
71
 
72
72
  case BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
73
- toast.info(CLEAR_SELECTIONS_WARNING)
74
73
  setIdentifiersAfterClear(identifiers, selectedIds)
75
74
  break
76
75
  }
@@ -81,10 +80,13 @@ export const BulkSelectionProvider = <T,>({
81
80
  }
82
81
 
83
82
  case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
84
- if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
83
+ if (isBulkSelectionApplied) {
85
84
  return
86
85
  }
87
- const selectedIdentifiersLength = Object.keys(selectedIdentifiers).length
86
+ const selectedIdentifiersLength = getSelectedIdentifiersCount()
87
+ // This is for showing a modal dialog if applicable to confirm if bulk selection is to be applied
88
+ // Do note that the 'getSelectAllDialogStatus' should be called after the length check explicitly
89
+ // otherwise the modal will open each time
88
90
  if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === SelectAllDialogStatus.OPEN) {
89
91
  return
90
92
  }
@@ -102,10 +104,6 @@ export const BulkSelectionProvider = <T,>({
102
104
  break
103
105
 
104
106
  case BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
105
- if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
106
- toast.info(CLEAR_SELECTIONS_WARNING)
107
- }
108
-
109
107
  setIdentifiersAfterPageSelection(identifiers)
110
108
  break
111
109
  }
@@ -130,7 +128,7 @@ export const BulkSelectionProvider = <T,>({
130
128
  }
131
129
 
132
130
  // if selectedIdentifiers contains select all across pages locator then it means all are selected
133
- if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
131
+ if (isBulkSelectionApplied) {
134
132
  return {
135
133
  isChecked: true,
136
134
  checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
@@ -163,8 +161,10 @@ export const BulkSelectionProvider = <T,>({
163
161
  handleBulkSelection,
164
162
  isChecked,
165
163
  checkboxValue,
164
+ isBulkSelectionApplied,
165
+ getSelectedIdentifiersCount,
166
166
  }),
167
- [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
167
+ [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
168
168
  )
169
169
 
170
170
  return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>
@@ -11,4 +11,3 @@ export const BulkSelectionOptionsLabels = {
11
11
  export const SELECT_ALL_ACROSS_PAGES_LOCATOR = '*' as const
12
12
  export const getInvalidActionMessage = (action: string) => `Invalid action ${action} passed to useBulkSelection`
13
13
  export const BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext'
14
- export const CLEAR_SELECTIONS_WARNING = 'Selections on other pages are cleared'
@@ -26,6 +26,8 @@ export interface GetBulkSelectionCheckboxValuesType {
26
26
  export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
27
27
  selectedIdentifiers: T
28
28
  handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
29
+ isBulkSelectionApplied: boolean
30
+ getSelectedIdentifiersCount: () => number
29
31
  }
30
32
 
31
33
  export interface BulkSelectionProps {
@@ -1,3 +1 @@
1
- export * from './APIResponseHandler'
2
- export * from './ReactSelect'
3
1
  export * from './BulkSelection'
@@ -1,3 +1 @@
1
1
  export * from './Components'
2
- export * from './validations'
3
- export * from './Helpers'
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { BuildInfraConfigFormProps } from './types';
3
- declare const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps>;
4
- export default BuildInfraConfigForm;
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { BuildInfraInputFieldComponentProps } from './types';
3
- declare const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps>;
4
- export default BuildInfraProfileDescriptionField;
@@ -1,7 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { BuildInfraFormActionProps } from './types';
3
- /**
4
- * In case need arise for variants break this CustomInput and Select as a separate component
5
- */
6
- declare const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps>;
7
- export default BuildInfraFormAction;
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { BuildInfraFormItemProps } from './types';
3
- declare const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps>;
4
- export default BuildInfraFormItem;
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { BuildInfraInputFieldComponentProps } from './types';
3
- declare const BuildInfraProfileNameField: FunctionComponent<BuildInfraInputFieldComponentProps>;
4
- export default BuildInfraProfileNameField;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { DescriptorProps } from './types';
3
- declare const Descriptor: ({ additionalContainerClasses, breadCrumbs, children, tippyInfoText, tippyAdditionalContent, }: DescriptorProps) => JSX.Element;
4
- export default Descriptor;
@@ -1,4 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { FooterProps } from './types';
3
- declare const Footer: FunctionComponent<FooterProps>;
4
- export default Footer;