@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.
- package/dist/Common/Constants.d.ts +14 -1
- package/dist/Common/DraggableWrapper/types.d.ts +4 -1
- package/dist/Common/Hooks/index.d.ts +1 -0
- package/dist/Common/Hooks/useUrlFilters/constants.d.ts +8 -0
- package/dist/Common/Hooks/useUrlFilters/index.d.ts +2 -0
- package/dist/Common/Hooks/useUrlFilters/types.d.ts +19 -0
- package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts +20 -0
- package/dist/Common/SortableTableHeaderCell/SortableTableHeaderCell.d.ts +18 -0
- package/dist/Common/SortableTableHeaderCell/index.d.ts +2 -0
- package/dist/Common/SortableTableHeaderCell/types.d.ts +25 -0
- package/dist/Common/Types.d.ts +13 -1
- package/dist/Common/index.d.ts +1 -0
- package/dist/Pages/GlobalConfigurations/Authorization/constants.d.ts +15 -0
- package/dist/Pages/GlobalConfigurations/Authorization/index.d.ts +1 -0
- package/dist/Pages/GlobalConfigurations/index.d.ts +1 -1
- package/dist/Shared/Components/BulkSelection/constants.d.ts +0 -1
- package/dist/Shared/Components/BulkSelection/types.d.ts +2 -0
- package/dist/Shared/Components/index.d.ts +0 -2
- package/dist/Shared/index.d.ts +0 -2
- package/dist/index.js +371 -1161
- package/package.json +1 -1
- package/src/Assets/Icon/ic-arrow-up-down.svg +3 -0
- package/src/Assets/Icon/ic-sort-arrow-down.svg +3 -0
- package/src/Common/BreadCrumb/Types.ts +1 -0
- package/src/Common/Checkbox.tsx +0 -1
- package/src/Common/Constants.ts +18 -3
- package/src/Common/CustomInput/CustomInput.tsx +1 -2
- package/src/Common/DraggableWrapper/DraggableWrapper.tsx +1 -3
- package/src/Common/DraggableWrapper/types.ts +4 -1
- package/src/Common/Helper.tsx +8 -1
- package/src/Common/Hooks/index.ts +1 -0
- package/src/Common/Hooks/useUrlFilters/constants.ts +9 -0
- package/src/Common/Hooks/useUrlFilters/index.ts +2 -0
- package/src/Common/Hooks/useUrlFilters/types.ts +21 -0
- package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +121 -0
- package/src/Common/RJSF/utils.ts +0 -2
- package/src/Common/SearchBar/searchBar.scss +1 -1
- package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx +44 -0
- package/src/Common/SortableTableHeaderCell/index.ts +2 -0
- package/src/Common/SortableTableHeaderCell/types.ts +26 -0
- package/src/Common/Types.ts +13 -1
- package/src/Common/index.ts +1 -0
- package/src/Pages/GlobalConfigurations/Authorization/constants.ts +16 -0
- package/src/Pages/GlobalConfigurations/Authorization/index.ts +1 -0
- package/src/Pages/GlobalConfigurations/index.ts +1 -1
- package/src/Shared/Components/BulkSelection/BulkSelection.tsx +2 -2
- package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx +1 -3
- package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx +17 -17
- package/src/Shared/Components/BulkSelection/constants.tsx +0 -1
- package/src/Shared/Components/BulkSelection/types.tsx +2 -0
- package/src/Shared/Components/index.ts +0 -2
- package/src/Shared/index.ts +0 -2
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.d.ts +0 -7
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/Descriptor.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/Footer.d.ts +0 -4
- package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts +0 -50
- package/dist/Pages/GlobalConfigurations/BuildInfra/index.d.ts +0 -7
- package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts +0 -6
- package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +0 -286
- package/dist/Pages/GlobalConfigurations/BuildInfra/utils.d.ts +0 -12
- package/dist/Shared/Components/APIResponseHandler/APIResponseHandler.d.ts +0 -4
- package/dist/Shared/Components/APIResponseHandler/constants.d.ts +0 -4
- package/dist/Shared/Components/APIResponseHandler/index.d.ts +0 -2
- package/dist/Shared/Components/APIResponseHandler/types.d.ts +0 -37
- package/dist/Shared/Components/ReactSelect/index.d.ts +0 -1
- package/dist/Shared/Components/ReactSelect/utils.d.ts +0 -12
- package/dist/Shared/Helpers.d.ts +0 -16
- package/dist/Shared/validations.d.ts +0 -8
- package/src/Assets/Icon/ic-cpu.svg +0 -4
- package/src/Assets/Icon/ic-memory.svg +0 -3
- package/src/Assets/Icon/ic-timer.svg +0 -3
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx +0 -128
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx +0 -44
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx +0 -106
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx +0 -55
- package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx +0 -32
- package/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +0 -45
- package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx +0 -56
- package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md +0 -4
- package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +0 -139
- package/src/Pages/GlobalConfigurations/BuildInfra/index.ts +0 -7
- package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx +0 -167
- package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +0 -339
- package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx +0 -507
- package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx +0 -41
- package/src/Shared/Components/APIResponseHandler/constants.tsx +0 -5
- package/src/Shared/Components/APIResponseHandler/index.ts +0 -2
- package/src/Shared/Components/APIResponseHandler/types.tsx +0 -39
- package/src/Shared/Components/ReactSelect/index.ts +0 -1
- package/src/Shared/Components/ReactSelect/utils.tsx +0 -97
- package/src/Shared/Helpers.tsx +0 -29
- package/src/Shared/validations.tsx +0 -130
package/package.json
CHANGED
|
@@ -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>
|
package/src/Common/Checkbox.tsx
CHANGED
|
@@ -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 : ''}`
|
package/src/Common/Constants.ts
CHANGED
|
@@ -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 =
|
|
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
|
|
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
|
-
|
|
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
|
package/src/Common/Helper.tsx
CHANGED
|
@@ -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
|
-
|
|
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()
|
|
@@ -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
|
package/src/Common/RJSF/utils.ts
CHANGED
|
@@ -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,
|
|
@@ -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,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
|
+
}
|
package/src/Common/Types.ts
CHANGED
|
@@ -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 }
|
package/src/Common/index.ts
CHANGED
|
@@ -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 './
|
|
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,
|
|
13
|
-
const areOptionsSelected =
|
|
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 {
|
|
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 (
|
|
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 (
|
|
83
|
+
if (isBulkSelectionApplied) {
|
|
85
84
|
return
|
|
86
85
|
}
|
|
87
|
-
const selectedIdentifiersLength =
|
|
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 (
|
|
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 {
|
package/src/Shared/index.ts
CHANGED
|
@@ -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;
|