@devtron-labs/devtron-fe-common-lib 0.0.58-beta-8 → 0.0.58-beta-9
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/Api.d.ts +9 -0
- package/dist/Common/Constants.d.ts +14 -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 +6 -0
- package/dist/Common/Hooks/useUrlFilters/useUrlFilters.d.ts +32 -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 +15 -4
- package/dist/Common/index.d.ts +1 -0
- package/dist/index.d.ts +1 -3
- package/dist/index.js +357 -1121
- 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/Api.ts +21 -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/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 +6 -0
- package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +120 -0
- package/src/Common/RJSF/utils.ts +0 -3
- package/src/Common/SearchBar/SearchBar.component.tsx +13 -26
- 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 +14 -3
- package/src/Common/index.ts +1 -0
- package/src/index.ts +1 -3
- 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 -47
- package/dist/Pages/GlobalConfigurations/BuildInfra/index.d.ts +0 -7
- package/dist/Pages/GlobalConfigurations/BuildInfra/services.d.ts +0 -13
- package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts +0 -281
- package/dist/Pages/GlobalConfigurations/BuildInfra/utils.d.ts +0 -12
- package/dist/Pages/GlobalConfigurations/index.d.ts +0 -1
- package/dist/Pages/index.d.ts +0 -1
- package/dist/Shared/Components/APIResponseHandler/APIResponseHandler.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/Components/index.d.ts +0 -2
- package/dist/Shared/index.d.ts +0 -2
- package/dist/Shared/validations.d.ts +0 -7
- 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 -121
- 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 -38
- package/src/Pages/GlobalConfigurations/BuildInfra/Footer.tsx +0 -45
- package/src/Pages/GlobalConfigurations/BuildInfra/Readme.md +0 -4
- package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +0 -136
- package/src/Pages/GlobalConfigurations/BuildInfra/index.ts +0 -7
- package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx +0 -183
- package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +0 -334
- package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx +0 -494
- package/src/Pages/GlobalConfigurations/index.ts +0 -1
- package/src/Pages/index.ts +0 -1
- package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx +0 -39
- 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/Components/index.ts +0 -2
- package/src/Shared/index.ts +0 -2
- package/src/Shared/validations.tsx +0 -72
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/Api.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ServerErrors } from './ServerError'
|
|
2
2
|
import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
|
|
3
3
|
import { ResponseType, APIOptions } from './Types'
|
|
4
|
+
import { MutableRefObject } from 'react'
|
|
4
5
|
|
|
5
6
|
const responseMessages = {
|
|
6
7
|
100: 'Continue',
|
|
@@ -228,3 +229,23 @@ export const get = (url: string, options?: APIOptions): Promise<ResponseType> =>
|
|
|
228
229
|
export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
|
|
229
230
|
return fetchInTime(url, 'DELETE', data, options)
|
|
230
231
|
}
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Aborts the previous request before triggering next request
|
|
235
|
+
*/
|
|
236
|
+
export const abortPreviousRequests = <T,>(
|
|
237
|
+
callback: () => Promise<T>,
|
|
238
|
+
abortControllerRef: MutableRefObject<AbortController>,
|
|
239
|
+
): Promise<T> => {
|
|
240
|
+
abortControllerRef.current.abort()
|
|
241
|
+
// eslint-disable-next-line no-param-reassign
|
|
242
|
+
abortControllerRef.current = new AbortController()
|
|
243
|
+
return callback()
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/**
|
|
247
|
+
* Returns true if the error is due to a aborted request
|
|
248
|
+
*/
|
|
249
|
+
export const getIsRequestAborted = (error) =>
|
|
250
|
+
// The 0 code is common for aborted and blocked requests
|
|
251
|
+
error && error.code === 0 && error.message === 'The user aborted a request.'
|
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}
|
|
@@ -0,0 +1,120 @@
|
|
|
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 } 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> = {}) => {
|
|
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
|
+
}
|
|
83
|
+
|
|
84
|
+
const handleSorting = (_sortBy: T) => {
|
|
85
|
+
let order: SortingOrder
|
|
86
|
+
if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
|
|
87
|
+
order = SortingOrder.DESC
|
|
88
|
+
} else {
|
|
89
|
+
order = SortingOrder.ASC
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
_updateSearchParam(SORT_BY, _sortBy)
|
|
93
|
+
_updateSearchParam(SORT_ORDER, order)
|
|
94
|
+
|
|
95
|
+
// Reset page number on sorting change
|
|
96
|
+
_resetPageNumber()
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const clearFilters = () => {
|
|
100
|
+
Object.values(URL_FILTER_KEYS).forEach((key) => {
|
|
101
|
+
searchParams.delete(key)
|
|
102
|
+
})
|
|
103
|
+
history.replace({ search: searchParams.toString() })
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return {
|
|
107
|
+
pageSize,
|
|
108
|
+
changePage,
|
|
109
|
+
changePageSize,
|
|
110
|
+
searchKey,
|
|
111
|
+
handleSearch,
|
|
112
|
+
offset,
|
|
113
|
+
sortBy,
|
|
114
|
+
sortOrder,
|
|
115
|
+
handleSorting,
|
|
116
|
+
clearFilters,
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export default useUrlFilters
|
package/src/Common/RJSF/utils.ts
CHANGED
|
@@ -13,14 +13,12 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
// NOTE: If you are changing this please make sure BuildInfra selects are also working fine
|
|
17
16
|
export const getCommonSelectStyle = (styleOverrides = {}) => {
|
|
18
17
|
return {
|
|
19
18
|
menuList: (base) => ({
|
|
20
19
|
...base,
|
|
21
20
|
paddingTop: 0,
|
|
22
21
|
paddingBottom: 0,
|
|
23
|
-
cursor: 'pointer',
|
|
24
22
|
}),
|
|
25
23
|
control: (base, state) => ({
|
|
26
24
|
...base,
|
|
@@ -35,7 +33,6 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
|
|
|
35
33
|
color: 'var(--N900)',
|
|
36
34
|
backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
|
|
37
35
|
padding: '10px 12px',
|
|
38
|
-
cursor: 'pointer',
|
|
39
36
|
}),
|
|
40
37
|
dropdownIndicator: (base, state) => ({
|
|
41
38
|
...base,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent
|
|
1
|
+
import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
|
|
2
2
|
import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
|
|
3
3
|
import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
|
|
4
4
|
import { SearchBarProps } from './types'
|
|
@@ -55,31 +55,9 @@ const SearchBar = ({
|
|
|
55
55
|
debounceTimeout,
|
|
56
56
|
])
|
|
57
57
|
|
|
58
|
-
// In most case would reset the state by doing history.push('/')
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
inputRef.current.value = initialSearchText
|
|
61
|
-
}, [initialSearchText])
|
|
62
|
-
|
|
63
|
-
const _applySearch = (value: string) => {
|
|
64
|
-
handleSearchChange(value)
|
|
65
|
-
handleEnter(value)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const clearSearch = () => {
|
|
69
|
-
inputRef.current.value = ''
|
|
70
|
-
_applySearch('')
|
|
71
|
-
setShowClearButton(false)
|
|
72
|
-
}
|
|
73
|
-
|
|
74
58
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
75
59
|
const { value } = e.target
|
|
76
60
|
setShowClearButton(!!value)
|
|
77
|
-
|
|
78
|
-
if (!value) {
|
|
79
|
-
clearSearch()
|
|
80
|
-
return
|
|
81
|
-
}
|
|
82
|
-
|
|
83
61
|
if (shouldDebounce) {
|
|
84
62
|
debouncedSearchChange(value)
|
|
85
63
|
} else {
|
|
@@ -87,6 +65,11 @@ const SearchBar = ({
|
|
|
87
65
|
}
|
|
88
66
|
}
|
|
89
67
|
|
|
68
|
+
const _applySearch = (value: string) => {
|
|
69
|
+
handleSearchChange(value)
|
|
70
|
+
handleEnter(value)
|
|
71
|
+
}
|
|
72
|
+
|
|
90
73
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
91
74
|
const { key } = e
|
|
92
75
|
|
|
@@ -97,9 +80,14 @@ const SearchBar = ({
|
|
|
97
80
|
}
|
|
98
81
|
}
|
|
99
82
|
|
|
83
|
+
const clearSearch = () => {
|
|
84
|
+
inputRef.current.value = ''
|
|
85
|
+
_applySearch('')
|
|
86
|
+
}
|
|
87
|
+
|
|
100
88
|
return (
|
|
101
89
|
<div className={containerClassName}>
|
|
102
|
-
<div className="search-bar
|
|
90
|
+
<div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
|
|
103
91
|
<Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
|
|
104
92
|
<input
|
|
105
93
|
placeholder="Search"
|
|
@@ -107,14 +95,13 @@ const SearchBar = ({
|
|
|
107
95
|
type="text"
|
|
108
96
|
{...inputProps}
|
|
109
97
|
defaultValue={initialSearchText}
|
|
110
|
-
className={`search-bar__input
|
|
98
|
+
className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
|
|
111
99
|
showClearButton ? 'pr-30' : 'pr-10'
|
|
112
100
|
}`}
|
|
113
101
|
onChange={handleChange}
|
|
114
102
|
onKeyDown={handleKeyDown}
|
|
115
103
|
ref={inputRef}
|
|
116
104
|
/>
|
|
117
|
-
{/* TODO: Sync with product since it should have ic-enter in case of not applied */}
|
|
118
105
|
{showClearButton && (
|
|
119
106
|
<button
|
|
120
107
|
className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
|
|
@@ -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
|
|
@@ -51,12 +51,11 @@ export interface Teams {
|
|
|
51
51
|
export enum CHECKBOX_VALUE {
|
|
52
52
|
CHECKED = 'CHECKED',
|
|
53
53
|
INTERMEDIATE = 'INTERMEDIATE',
|
|
54
|
-
BULK_CHECKED = 'BULK_CHECKED',
|
|
55
54
|
}
|
|
56
55
|
export interface CheckboxProps {
|
|
57
56
|
onChange: (event) => void
|
|
58
57
|
isChecked: boolean
|
|
59
|
-
value: 'CHECKED' | 'INTERMEDIATE'
|
|
58
|
+
value: 'CHECKED' | 'INTERMEDIATE'
|
|
60
59
|
disabled?: boolean
|
|
61
60
|
tabIndex?: number
|
|
62
61
|
rootClassName?: string
|
|
@@ -763,3 +762,15 @@ export interface EdgeNodeType {
|
|
|
763
762
|
export interface EdgeEndNodeType extends EdgeNodeType {
|
|
764
763
|
userApprovalConfig?: UserApprovalConfigType
|
|
765
764
|
}
|
|
765
|
+
|
|
766
|
+
/**
|
|
767
|
+
* Search params for sorting configuration
|
|
768
|
+
*
|
|
769
|
+
* Note: Either both sortOrder and sortBy are required or none
|
|
770
|
+
*/
|
|
771
|
+
export type SortingParams<T = string> =
|
|
772
|
+
| {
|
|
773
|
+
sortOrder: SortingOrder
|
|
774
|
+
sortBy: T
|
|
775
|
+
}
|
|
776
|
+
| { 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'
|
package/src/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;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { UseBreadcrumbProps } from '../../../Common/BreadCrumb/Types';
|
|
2
|
-
import { BuildInfraFormFieldType, ProfileInputErrorType, BuildInfraProfileBase, HandleProfileInputChangeType } from './types';
|
|
3
|
-
export declare const BUILD_INFRA_TEXT: {
|
|
4
|
-
HEADING: string;
|
|
5
|
-
EDIT_SUBMIT: string;
|
|
6
|
-
SAVE_SUBMIT: string;
|
|
7
|
-
EDIT_CANCEL: string;
|
|
8
|
-
EDIT_DEFAULT_TOOLTIP: string;
|
|
9
|
-
DESCRIPTION_LABEL: string;
|
|
10
|
-
DESCRIPTION_PLACEHOLDER: string;
|
|
11
|
-
PROFILE_LABEL: string;
|
|
12
|
-
PROFILE_PLACEHOLDER: string;
|
|
13
|
-
INHERITING_HEADING_DESCRIPTION: string;
|
|
14
|
-
SUBMIT_BUTTON_TIPPY: {
|
|
15
|
-
INVALID_INPUT: string;
|
|
16
|
-
REQUEST_IN_PROGRESS: string;
|
|
17
|
-
};
|
|
18
|
-
VALIDATE_REQUEST_LIMIT: {
|
|
19
|
-
NEGATIVE_REQUEST: string;
|
|
20
|
-
NEGATIVE_LIMIT: string;
|
|
21
|
-
REQUEST_LESS_THAN_LIMIT: string;
|
|
22
|
-
CAN_NOT_COMPUTE: string;
|
|
23
|
-
REQUEST_DECIMAL_PLACES: string;
|
|
24
|
-
LIMIT_DECIMAL_PLACES: string;
|
|
25
|
-
};
|
|
26
|
-
getInvalidActionMessage: (action: HandleProfileInputChangeType['action']) => string;
|
|
27
|
-
getSubmitSuccessMessage: (profileName: string, isEdited: boolean) => string;
|
|
28
|
-
PROFILE_NOT_FOUND: {
|
|
29
|
-
title: string;
|
|
30
|
-
subTitle: string;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
export declare const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps;
|
|
34
|
-
export declare const BUILD_INFRA_FORM_FIELDS: BuildInfraFormFieldType[];
|
|
35
|
-
export declare const PROFILE_INPUT_ERROR_FIELDS: ProfileInputErrorType;
|
|
36
|
-
export declare const REQUIRED_INPUT_FIELDS: string[];
|
|
37
|
-
export declare const DEFAULT_PROFILE_NAME = "default";
|
|
38
|
-
export declare const CREATE_PROFILE_BASE_VALUE: BuildInfraProfileBase;
|
|
39
|
-
export declare const CREATE_VIEW_CHECKED_CONFIGS: {
|
|
40
|
-
cpu_request: boolean;
|
|
41
|
-
cpu_limit: boolean;
|
|
42
|
-
};
|
|
43
|
-
export declare const BUILD_INFRA_INPUT_CONSTRAINTS: {
|
|
44
|
-
STEP: number;
|
|
45
|
-
MIN: number;
|
|
46
|
-
DECIMAL_PLACES: number;
|
|
47
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { default as BuildInfraDescriptor } from './Descriptor';
|
|
2
|
-
export { default as BuildInfraFooter } from './Footer';
|
|
3
|
-
export { default as BuildInfraConfigForm } from './BuildInfraConfigForm';
|
|
4
|
-
export * from './services';
|
|
5
|
-
export * from './utils';
|
|
6
|
-
export * from './types';
|
|
7
|
-
export * from './constants';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ResponseType } from '../../../Common';
|
|
2
|
-
import { BuildInfraProfileResponseType, BuildInfraProfileTransformerType, CreateBuildInfraProfileType, GetBuildInfraProfileType, UpdateBuildInfraProfileType } from './types';
|
|
3
|
-
export declare const getTransformedBuildInfraProfileResponse: ({ configurationUnits, defaultConfigurations, profile, fromCreateView, }: BuildInfraProfileTransformerType) => BuildInfraProfileResponseType;
|
|
4
|
-
export declare const getBuildInfraProfileByName: ({ name, fromCreateView, }: GetBuildInfraProfileType) => Promise<BuildInfraProfileResponseType>;
|
|
5
|
-
export declare const updateBuildInfraProfile: ({ name, profileInput }: UpdateBuildInfraProfileType) => Promise<ResponseType<any>>;
|
|
6
|
-
export declare const createBuildInfraProfile: ({ profileInput }: CreateBuildInfraProfileType) => Promise<{
|
|
7
|
-
code: number;
|
|
8
|
-
result: import("./types").BuildInfraProfileData;
|
|
9
|
-
}>;
|
|
10
|
-
export declare const deleteBuildInfraProfileByName: (name: string) => Promise<{
|
|
11
|
-
code: number;
|
|
12
|
-
result: any;
|
|
13
|
-
}>;
|