diff --git a/package-lock.json b/package-lock.json index 2d65c8705..b19818605 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-5", + "version": "1.16.0-pre-6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-5", + "version": "1.16.0-pre-6", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index a5e801fd4..fd5a54e22 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-5", + "version": "1.16.0-pre-6", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Assets/IconV2/ic-bug.svg b/src/Assets/IconV2/ic-bug.svg new file mode 100644 index 000000000..6b7544817 --- /dev/null +++ b/src/Assets/IconV2/ic-bug.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-check-all.svg b/src/Assets/IconV2/ic-check-all.svg new file mode 100644 index 000000000..aa0ae781a --- /dev/null +++ b/src/Assets/IconV2/ic-check-all.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-check-square.svg b/src/Assets/IconV2/ic-check-square.svg new file mode 100644 index 000000000..f871ba7ba --- /dev/null +++ b/src/Assets/IconV2/ic-check-square.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-clean-brush.svg b/src/Assets/IconV2/ic-clean-brush.svg new file mode 100644 index 000000000..198d53f81 --- /dev/null +++ b/src/Assets/IconV2/ic-clean-brush.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-container-registry.svg b/src/Assets/IconV2/ic-container-registry.svg new file mode 100644 index 000000000..95c9543a8 --- /dev/null +++ b/src/Assets/IconV2/ic-container-registry.svg @@ -0,0 +1,19 @@ + + + + + diff --git a/src/Assets/IconV2/ic-container.svg b/src/Assets/IconV2/ic-container.svg index 95c9543a8..1dc10d7df 100644 --- a/src/Assets/IconV2/ic-container.svg +++ b/src/Assets/IconV2/ic-container.svg @@ -1,19 +1,3 @@ - - - - + + diff --git a/src/Assets/IconV2/ic-download.svg b/src/Assets/IconV2/ic-download.svg new file mode 100644 index 000000000..d3c67c66e --- /dev/null +++ b/src/Assets/IconV2/ic-download.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-file-code.svg b/src/Assets/IconV2/ic-file-code.svg new file mode 100644 index 000000000..a6869d798 --- /dev/null +++ b/src/Assets/IconV2/ic-file-code.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-gavel.svg b/src/Assets/IconV2/ic-gavel.svg new file mode 100644 index 000000000..e2f32f692 --- /dev/null +++ b/src/Assets/IconV2/ic-gavel.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-info-filled-color.svg b/src/Assets/IconV2/ic-info-filled-color.svg new file mode 100644 index 000000000..a4d6bf344 --- /dev/null +++ b/src/Assets/IconV2/ic-info-filled-color.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/Assets/IconV2/ic-logs.svg b/src/Assets/IconV2/ic-logs.svg new file mode 100644 index 000000000..53cac8f34 --- /dev/null +++ b/src/Assets/IconV2/ic-logs.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-minus.svg b/src/Assets/IconV2/ic-minus.svg index c3e3d3831..3f0a5f895 100644 --- a/src/Assets/IconV2/ic-minus.svg +++ b/src/Assets/IconV2/ic-minus.svg @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/src/Assets/IconV2/ic-pause-circle.svg b/src/Assets/IconV2/ic-pause-circle.svg new file mode 100644 index 000000000..44995c308 --- /dev/null +++ b/src/Assets/IconV2/ic-pause-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-speedometer.svg b/src/Assets/IconV2/ic-speedometer.svg new file mode 100644 index 000000000..b93c8c1f5 --- /dev/null +++ b/src/Assets/IconV2/ic-speedometer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-two-cubes.svg b/src/Assets/IconV2/ic-two-cubes.svg new file mode 100644 index 000000000..15ca41392 --- /dev/null +++ b/src/Assets/IconV2/ic-two-cubes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Common/Checkbox/Checkbox.tsx b/src/Common/Checkbox/Checkbox.tsx index d95747cf4..d7a65dfaf 100644 --- a/src/Common/Checkbox/Checkbox.tsx +++ b/src/Common/Checkbox/Checkbox.tsx @@ -14,6 +14,10 @@ * limitations under the License. */ +import { forwardRef } from 'react' + +import { stopPropagation } from '@Common/Helper' + import { CheckboxProps } from '../Types' import './Checkbox.scss' @@ -28,38 +32,32 @@ Valid States of Checkbox: 6. disabled: false, checked: true, value: CHECKED */ // TODO: Associate label with input element -export const Checkbox = ({ - rootClassName, - onClick, - name, - disabled, - value, - onChange, - tabIndex, - isChecked, - id, - dataTestId, - children, -}: CheckboxProps) => { - const rootClass = `${rootClassName || ''}` +export const Checkbox = forwardRef( + ( + { rootClassName, onClick, name, disabled, value, onChange, tabIndex, isChecked, id, dataTestId, children }, + forwardedRef, + ) => { + const rootClass = `${rootClassName || ''}` - return ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ) -} + return ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ) + }, +) diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index a5a013b75..c74a92f82 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -86,6 +86,7 @@ export const URLS = { // NOTE: using appId since we are re-using AppConfig component GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`, LICENSE_AUTH: '/license-auth', + GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId', } as const export const ROUTES = { @@ -381,6 +382,7 @@ export const API_STATUS_CODES = { NOT_FOUND: 404, REQUEST_TIMEOUT: 408, CONFLICT: 409, + PRE_CONDITION_FAILED: 412, EXPECTATION_FAILED: 417, UNPROCESSABLE_ENTITY: 422, LOCKED: 423, diff --git a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx index ff53f1ce7..e93934753 100644 --- a/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx +++ b/src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx @@ -14,9 +14,11 @@ * limitations under the License. */ -import { useCallback, useEffect, useMemo, useRef } from 'react' +import { KeyboardEvent, useCallback, useEffect, useMemo, useRef } from 'react' import { deepEquals } from '@rjsf/utils' +import { noop } from '@Common/Helper' + import { ShortcutType, UseRegisterShortcutContextType, UseRegisterShortcutProviderType } from './types' import { UseRegisterShortcutContext } from './UseRegisterShortcutContext' import { preprocessKeys, verifyCallbackStack } from './utils' @@ -25,6 +27,7 @@ const IGNORE_TAGS_FALLBACK = ['input', 'textarea', 'select'] const DEFAULT_TIMEOUT = 300 const UseRegisterShortcutProvider = ({ + shouldHookOntoWindow = true, ignoreTags, preventDefault = false, shortcutTimeout, @@ -116,11 +119,7 @@ const UseRegisterShortcutProvider = ({ } }, []) - const handleKeydownEvent = useCallback((event: KeyboardEvent) => { - if (preventDefault) { - event.preventDefault() - } - + const handleKeydownEvent = useCallback((event: KeyboardEvent) => { if ( // NOTE: in case of custom events generated by password managers autofill, the event.key is not set !event.key || @@ -132,6 +131,10 @@ const UseRegisterShortcutProvider = ({ return } + if (preventDefault) { + event.preventDefault() + } + keysDownRef.current.add(event.key.toUpperCase() as Uppercase) if (event.ctrlKey) { @@ -159,12 +162,19 @@ const UseRegisterShortcutProvider = ({ }, []) useEffect(() => { - window.addEventListener('keydown', handleKeydownEvent) + if (!shouldHookOntoWindow) { + return noop + } + + window.addEventListener('keydown', handleKeydownEvent as unknown as (event: globalThis.KeyboardEvent) => void) window.addEventListener('keyup', handleKeyupEvent) window.addEventListener('blur', handleBlur) return () => { - window.removeEventListener('keydown', handleKeydownEvent) + window.removeEventListener( + 'keydown', + handleKeydownEvent as unknown as (event: globalThis.KeyboardEvent) => void, + ) window.removeEventListener('keyup', handleKeyupEvent) window.removeEventListener('blur', handleBlur) @@ -172,7 +182,7 @@ const UseRegisterShortcutProvider = ({ clearTimeout(keyDownTimeoutRef.current) } } - }, [handleKeyupEvent, handleKeydownEvent, handleBlur]) + }, [handleKeyupEvent, handleKeydownEvent, handleBlur, shouldHookOntoWindow]) const providerValue: UseRegisterShortcutContextType = useMemo( () => ({ @@ -180,8 +190,20 @@ const UseRegisterShortcutProvider = ({ unregisterShortcut, setDisableShortcuts, triggerShortcut, + ...(!shouldHookOntoWindow + ? { targetProps: { onKeyDown: handleKeydownEvent, onKeyUp: handleKeyupEvent, onBlur: handleBlur } } + : {}), }), - [registerShortcut, unregisterShortcut, setDisableShortcuts, triggerShortcut], + [ + registerShortcut, + unregisterShortcut, + setDisableShortcuts, + triggerShortcut, + shouldHookOntoWindow, + handleKeydownEvent, + handleKeyupEvent, + handleBlur, + ], ) return {children} diff --git a/src/Common/Hooks/UseRegisterShortcut/types.ts b/src/Common/Hooks/UseRegisterShortcut/types.ts index 4888e4056..f6831c59d 100644 --- a/src/Common/Hooks/UseRegisterShortcut/types.ts +++ b/src/Common/Hooks/UseRegisterShortcut/types.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +import { FocusEvent, KeyboardEvent } from 'react' + import { IS_PLATFORM_MAC_OS } from '@Common/Constants' // NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/ @@ -28,6 +30,7 @@ export const KEYBOARD_KEYS_MAP = { K: 'K', X: 'X', A: 'A', + N: 'N', Escape: 'Esc', Enter: '↩', ArrowLeft: '←', @@ -77,9 +80,26 @@ export interface UseRegisterShortcutContextType { * Programmatically trigger a shortcut if already registered */ triggerShortcut: (keys: ShortcutType['keys']) => void + /** + * If shouldHookOntoWindow is false, these props need to be hooked onto + * the component that needs to listen to the shortcuts + */ + targetProps?: { + onKeyDown: (event: KeyboardEvent) => void + onKeyUp: (event: KeyboardEvent) => void + onBlur: (event: FocusEvent) => void + } } export interface UseRegisterShortcutProviderType { + /** + * If false, the shortcuts will not be registered to the window object + * instead onKeyDown, onKeyUp and onBlur will be exposed as context methods + * which need to be hooked onto the component that needs to listen to the shortcuts + * + * defaults to true + */ + shouldHookOntoWindow?: boolean children: React.ReactNode /** * Defines how long after holding the keys down do we trigger the callback in milliseconds diff --git a/src/Common/Hooks/useStateFilters/types.ts b/src/Common/Hooks/useStateFilters/types.ts index 3720c70c1..782df3344 100644 --- a/src/Common/Hooks/useStateFilters/types.ts +++ b/src/Common/Hooks/useStateFilters/types.ts @@ -16,7 +16,8 @@ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters' -export interface UseStateFiltersProps extends Pick, 'initialSortKey'> {} +export interface UseStateFiltersProps + extends Pick, 'initialSortKey' | 'defaultPageSize'> {} export interface UseStateFiltersReturnType extends Pick< @@ -31,7 +32,7 @@ export interface UseStateFiltersReturnType | 'pageSize' | 'searchKey' | 'handleSearch' - | 'isFilterApplied' + | 'areFiltersApplied' > {} export interface PaginationType extends Pick, 'pageSize'> { diff --git a/src/Common/Hooks/useStateFilters/useStateFilters.tsx b/src/Common/Hooks/useStateFilters/useStateFilters.tsx index 864e1b3af..485e3c7ac 100644 --- a/src/Common/Hooks/useStateFilters/useStateFilters.tsx +++ b/src/Common/Hooks/useStateFilters/useStateFilters.tsx @@ -35,6 +35,7 @@ import { PaginationType, UseStateFiltersProps, UseStateFiltersReturnType } from */ const useStateFilters = ({ initialSortKey, + defaultPageSize = DEFAULT_BASE_PAGE_SIZE, }: UseStateFiltersProps = {}): UseStateFiltersReturnType => { const [sortingConfig, setSortingConfig] = useState({ sortOrder: SortingOrder.ASC, @@ -45,7 +46,7 @@ const useStateFilters = ({ const { sortBy, sortOrder } = sortingConfig const [pagination, setPagination] = useState>({ - pageSize: DEFAULT_BASE_PAGE_SIZE, + pageSize: defaultPageSize, pageNumber: DEFAULT_PAGE_NUMBER, }) const offset = pagination.pageSize * (pagination.pageNumber - 1) @@ -117,7 +118,7 @@ const useStateFilters = ({ changePage, changePageSize, offset, - isFilterApplied: !!searchKey, + areFiltersApplied: !!searchKey, } } diff --git a/src/Common/Hooks/useUrlFilters/index.ts b/src/Common/Hooks/useUrlFilters/index.ts index 8e77c1d17..7b63d2d78 100644 --- a/src/Common/Hooks/useUrlFilters/index.ts +++ b/src/Common/Hooks/useUrlFilters/index.ts @@ -14,5 +14,6 @@ * limitations under the License. */ +export { URL_FILTER_KEYS } from './constants' export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types' export { default as useUrlFilters } from './useUrlFilters' diff --git a/src/Common/Hooks/useUrlFilters/types.ts b/src/Common/Hooks/useUrlFilters/types.ts index 46beb8a00..57c6ea50c 100644 --- a/src/Common/Hooks/useUrlFilters/types.ts +++ b/src/Common/Hooks/useUrlFilters/types.ts @@ -35,6 +35,7 @@ export interface UseUrlFiltersProps { * @default 'replace' */ redirectionMethod?: 'replace' | 'push' + defaultPageSize?: number } export type UpdateSearchParamsOptionsType = Partial, 'redirectionMethod'>> @@ -86,5 +87,5 @@ export type UseUrlFiltersReturnType = K & { * Update the search params with the passed object */ updateSearchParams: (paramsToSerialize: Partial, options?: UpdateSearchParamsOptionsType) => void - isFilterApplied: boolean + areFiltersApplied: boolean } diff --git a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts index 85e9acb75..b502e4833 100644 --- a/src/Common/Hooks/useUrlFilters/useUrlFilters.ts +++ b/src/Common/Hooks/useUrlFilters/useUrlFilters.ts @@ -49,6 +49,7 @@ const useUrlFilters = ({ parseSearchParams, localStorageKey, redirectionMethod = 'replace', + defaultPageSize = DEFAULT_BASE_PAGE_SIZE, }: UseUrlFiltersProps = {}): UseUrlFiltersReturnType => { const location = useLocation() const history = useHistory() @@ -108,7 +109,7 @@ const useUrlFilters = ({ const _parsedParams = getParsedSearchParams(searchParams) return { - pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE, + pageSize: Number(_pageSize) || defaultPageSize, pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER, searchKey: _searchKey || '', sortBy: sortByKey, @@ -223,7 +224,7 @@ const useUrlFilters = ({ clearFilters, ...parsedParams, updateSearchParams, - isFilterApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams), + areFiltersApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams), } } diff --git a/src/Common/Modals/VisibleModal.tsx b/src/Common/Modals/VisibleModal.tsx index a57e72ab6..84dbad2ae 100644 --- a/src/Common/Modals/VisibleModal.tsx +++ b/src/Common/Modals/VisibleModal.tsx @@ -27,6 +27,7 @@ export class VisibleModal extends React.Component<{ onEscape?: (e) => void }> { modalRef = document.getElementById('visible-modal') + previousActiveElement: HTMLElement | null = null constructor(props) { super(props) @@ -50,6 +51,8 @@ export class VisibleModal extends React.Component<{ this.modalRef.classList.add(this.props.noBackground ? 'show' : 'show-with-bg') preventBodyScroll(true) + this.previousActiveElement = document.activeElement as HTMLElement + if (this.props.parentClassName) { this.modalRef.classList.add(this.props.parentClassName) } @@ -61,6 +64,8 @@ export class VisibleModal extends React.Component<{ this.modalRef.classList.remove('show-with-bg') preventBodyScroll(false) + this.previousActiveElement?.focus({ preventScroll: true }) + if (this.props.parentClassName) { this.modalRef.classList.remove(this.props.parentClassName) } diff --git a/src/Common/Modals/VisibleModal2.tsx b/src/Common/Modals/VisibleModal2.tsx index d0806666d..c8ee73232 100644 --- a/src/Common/Modals/VisibleModal2.tsx +++ b/src/Common/Modals/VisibleModal2.tsx @@ -21,6 +21,7 @@ import { stopPropagation } from '../Helper' export class VisibleModal2 extends React.Component<{ className?: string; close?: (e) => void }> { modalRef = document.getElementById('visible-modal-2') + previousActiveElement: HTMLElement | null = null constructor(props) { super(props) @@ -38,12 +39,14 @@ export class VisibleModal2 extends React.Component<{ className?: string; close?: document.addEventListener('keydown', this.escFunction) this.modalRef.classList.add('show-with-bg') preventBodyScroll(true) + this.previousActiveElement = document.activeElement as HTMLElement } componentWillUnmount() { document.removeEventListener('keydown', this.escFunction) this.modalRef.classList.remove('show-with-bg') preventBodyScroll(false) + this.previousActiveElement?.focus({ preventScroll: true }) } handleBodyClick = (e: SyntheticEvent) => { diff --git a/src/Common/Pagination/PageSizeSelector.tsx b/src/Common/Pagination/PageSizeSelector.tsx index 4b9108e54..bf7c0093f 100644 --- a/src/Common/Pagination/PageSizeSelector.tsx +++ b/src/Common/Pagination/PageSizeSelector.tsx @@ -82,7 +82,7 @@ const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSiz )} - - ) -} - -export default BulkSelectionDropdownItems diff --git a/src/Shared/Components/BulkSelection/types.tsx b/src/Shared/Components/BulkSelection/types.tsx index 7350a500a..7883e1a06 100644 --- a/src/Shared/Components/BulkSelection/types.tsx +++ b/src/Shared/Components/BulkSelection/types.tsx @@ -54,20 +54,12 @@ export interface BulkSelectionProps { */ showChevronDownIcon?: boolean disabled?: boolean + /** + * Will act as checkbox instead of opening up popup if list is not paginated + */ + selectAllIfNotPaginated?: boolean } -export interface BulkSelectionDropdownItemsType { - locator: BulkSelectionEvents - label: string - isSelected: boolean - icon: React.FunctionComponent> - iconClass?: string -} - -export interface BulkSelectionDropdownItemsProps - extends BulkSelectionDropdownItemsType, - Pick, 'handleBulkSelection'> {} - export enum SelectAllDialogStatus { OPEN = 'OPEN', CLOSED = 'CLOSED', diff --git a/src/Shared/Components/Button/types.ts b/src/Shared/Components/Button/types.ts index c00d1b14a..a896ce213 100644 --- a/src/Shared/Components/Button/types.ts +++ b/src/Shared/Components/Button/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react' +import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, Ref } from 'react' import { LinkProps } from 'react-router-dom' import { TooltipProps } from '@Common/Tooltip' @@ -48,6 +48,7 @@ export enum ButtonComponentType { export type ButtonProps = (ComponentType extends ButtonComponentType.link ? { + ref?: Ref component: ButtonComponentType.link /** * Props for the link component @@ -59,6 +60,7 @@ export type ButtonProps component: ButtonComponentType.anchor linkProps?: never buttonProps?: never @@ -74,6 +76,7 @@ export type ButtonProps['onClick'] } : { + ref?: Ref /** * Component to be rendered from the available options * diff --git a/src/Shared/Components/CICDHistory/utils.tsx b/src/Shared/Components/CICDHistory/utils.tsx index c039d5e26..eb7511aa7 100644 --- a/src/Shared/Components/CICDHistory/utils.tsx +++ b/src/Shared/Components/CICDHistory/utils.tsx @@ -19,10 +19,11 @@ import moment from 'moment' import { ReactComponent as ICCheck } from '@Icons/ic-check.svg' import { ReactComponent as Close } from '@Icons/ic-close.svg' import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg' -import { DATE_TIME_FORMATS } from '@Common/Constants' +import { DATE_TIME_FORMATS, URLS } from '@Common/Constants' import { DeploymentAppTypes } from '@Common/Types' import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants' import { isTimeStringAvailable } from '@Shared/Helpers' +import { DUMMY_RESOURCE_GVK_VERSION, K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser' import { DeploymentStatusBreakdownItemType, Node, ResourceKindType, WorkflowStatusEnum } from '../../types' import { Icon } from '../Icon' @@ -233,7 +234,7 @@ export const getHistoryItemStatusIconFromWorkflowStages = ( } export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = DEFAULT_NAMESPACE) => - `/resource-browser/${clusterId}/${podNamespace}/pod/k8sEmptyGroup` + `${URLS.RESOURCE_BROWSER}/${clusterId}/${podNamespace}/pod/${K8S_EMPTY_GROUP}/${DUMMY_RESOURCE_GVK_VERSION}` export const getWorkflowNodeStatusTitle = (status: string) => { if (!status) { diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index eaa2a5589..1d29db585 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -22,6 +22,7 @@ import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg' import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg' import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg' import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg' +import { ReactComponent as ICBug } from '@IconsV2/ic-bug.svg' import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg' import { ReactComponent as ICCalendar } from '@IconsV2/ic-calendar.svg' import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg' @@ -33,9 +34,12 @@ import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg' import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg' import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg' import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg' +import { ReactComponent as ICCheckAll } from '@IconsV2/ic-check-all.svg' +import { ReactComponent as ICCheckSquare } from '@IconsV2/ic-check-square.svg' import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg' import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg' import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg' +import { ReactComponent as ICCleanBrush } from '@IconsV2/ic-clean-brush.svg' import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg' import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg' import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg' @@ -44,6 +48,7 @@ import { ReactComponent as ICCluster } from '@IconsV2/ic-cluster.svg' import { ReactComponent as ICClusterIsolated } from '@IconsV2/ic-cluster-isolated.svg' import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg' import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg' +import { ReactComponent as ICContainerRegistry } from '@IconsV2/ic-container-registry.svg' import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg' import { ReactComponent as ICCopy } from '@IconsV2/ic-copy.svg' import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg' @@ -63,6 +68,7 @@ import { ReactComponent as ICDevtronJob } from '@IconsV2/ic-devtron-job.svg' import { ReactComponent as ICDisconnect } from '@IconsV2/ic-disconnect.svg' import { ReactComponent as ICDiscordFill } from '@IconsV2/ic-discord-fill.svg' import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg' +import { ReactComponent as ICDownload } from '@IconsV2/ic-download.svg' import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg' import { ReactComponent as ICEdit } from '@IconsV2/ic-edit.svg' import { ReactComponent as ICEmail } from '@IconsV2/ic-email.svg' @@ -77,6 +83,7 @@ import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg' import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg' import { ReactComponent as ICFastForward } from '@IconsV2/ic-fast-forward.svg' import { ReactComponent as ICFile } from '@IconsV2/ic-file.svg' +import { ReactComponent as ICFileCode } from '@IconsV2/ic-file-code.svg' import { ReactComponent as ICFileEdit } from '@IconsV2/ic-file-edit.svg' import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg' import { ReactComponent as ICFiles } from '@IconsV2/ic-files.svg' @@ -85,6 +92,7 @@ import { ReactComponent as ICFilterApplied } from '@IconsV2/ic-filter-applied.sv import { ReactComponent as ICFlask } from '@IconsV2/ic-flask.svg' import { ReactComponent as ICFolderColor } from '@IconsV2/ic-folder-color.svg' import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg' +import { ReactComponent as ICGavel } from '@IconsV2/ic-gavel.svg' import { ReactComponent as ICGear } from '@IconsV2/ic-gear.svg' import { ReactComponent as ICGift } from '@IconsV2/ic-gift.svg' import { ReactComponent as ICGiftGradient } from '@IconsV2/ic-gift-gradient.svg' @@ -108,6 +116,7 @@ import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg' import { ReactComponent as ICHibernateCircle } from '@IconsV2/ic-hibernate-circle.svg' import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg' import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg' +import { ReactComponent as ICInfoFilledColor } from '@IconsV2/ic-info-filled-color.svg' import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg' import { ReactComponent as ICInstall } from '@IconsV2/ic-install.svg' import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg' @@ -124,6 +133,7 @@ import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.sv import { ReactComponent as ICLinkedBuildColor } from '@IconsV2/ic-linked-build-color.svg' import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg' import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg' +import { ReactComponent as ICLogs } from '@IconsV2/ic-logs.svg' import { ReactComponent as ICMagnifyingGlass } from '@IconsV2/ic-magnifying-glass.svg' import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg' import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg' @@ -148,6 +158,7 @@ import { ReactComponent as ICOutOfSync } from '@IconsV2/ic-out-of-sync.svg' import { ReactComponent as ICPaperPlane } from '@IconsV2/ic-paper-plane.svg' import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-color.svg' import { ReactComponent as ICPath } from '@IconsV2/ic-path.svg' +import { ReactComponent as ICPauseCircle } from '@IconsV2/ic-pause-circle.svg' import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg' import { ReactComponent as ICPlayOutline } from '@IconsV2/ic-play-outline.svg' import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg' @@ -163,6 +174,7 @@ import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending. import { ReactComponent as ICSortable } from '@IconsV2/ic-sortable.svg' import { ReactComponent as ICSparkleAiColor } from '@IconsV2/ic-sparkle-ai-color.svg' import { ReactComponent as ICSparkleColor } from '@IconsV2/ic-sparkle-color.svg' +import { ReactComponent as ICSpeedometer } from '@IconsV2/ic-speedometer.svg' import { ReactComponent as ICSpinny } from '@IconsV2/ic-spinny.svg' import { ReactComponent as ICSprayCan } from '@IconsV2/ic-spray-can.svg' import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg' @@ -189,6 +201,7 @@ import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg' import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg' import { ReactComponent as ICTrafficSignal } from '@IconsV2/ic-traffic-signal.svg' import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg' +import { ReactComponent as ICTwoCubes } from '@IconsV2/ic-two-cubes.svg' import { ReactComponent as ICUbuntu } from '@IconsV2/ic-ubuntu.svg' import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg' import { ReactComponent as ICUserCircle } from '@IconsV2/ic-user-circle.svg' @@ -227,6 +240,7 @@ export const iconMap = { 'ic-book-open': ICBookOpen, 'ic-brain': ICBrain, 'ic-browser': ICBrowser, + 'ic-bug': ICBug, 'ic-build-color': ICBuildColor, 'ic-calendar': ICCalendar, 'ic-cancelled': ICCancelled, @@ -237,10 +251,13 @@ export const iconMap = { 'ic-cd': ICCd, 'ic-chat-circle-dots': ICChatCircleDots, 'ic-chat-circle-online': ICChatCircleOnline, + 'ic-check-all': ICCheckAll, + 'ic-check-square': ICCheckSquare, 'ic-check': ICCheck, 'ic-checks': ICChecks, 'ic-ci-linked': ICCiLinked, 'ic-circle-loader': ICCircleLoader, + 'ic-clean-brush': ICCleanBrush, 'ic-clock': ICClock, 'ic-close-large': ICCloseLarge, 'ic-close-small': ICCloseSmall, @@ -248,6 +265,7 @@ export const iconMap = { 'ic-cluster-isolated': ICClusterIsolated, 'ic-cluster': ICCluster, 'ic-code': ICCode, + 'ic-container-registry': ICContainerRegistry, 'ic-container': ICContainer, 'ic-cookr': ICCookr, 'ic-copy': ICCopy, @@ -268,6 +286,7 @@ export const iconMap = { 'ic-disconnect': ICDisconnect, 'ic-discord-fill': ICDiscordFill, 'ic-dockerhub': ICDockerhub, + 'ic-download': ICDownload, 'ic-ecr': ICEcr, 'ic-edit': ICEdit, 'ic-email': ICEmail, @@ -281,6 +300,7 @@ export const iconMap = { 'ic-expand-sm': ICExpandSm, 'ic-failure': ICFailure, 'ic-fast-forward': ICFastForward, + 'ic-file-code': ICFileCode, 'ic-file-edit': ICFileEdit, 'ic-file-key': ICFileKey, 'ic-file': ICFile, @@ -290,6 +310,7 @@ export const iconMap = { 'ic-flask': ICFlask, 'ic-folder-color': ICFolderColor, 'ic-folder-user': ICFolderUser, + 'ic-gavel': ICGavel, 'ic-gear': ICGear, 'ic-gift-gradient': ICGiftGradient, 'ic-gift': ICGift, @@ -312,6 +333,7 @@ export const iconMap = { 'ic-hibernate-circle': ICHibernateCircle, 'ic-hibernate': ICHibernate, 'ic-in-progress': ICInProgress, + 'ic-info-filled-color': ICInfoFilledColor, 'ic-info-filled': ICInfoFilled, 'ic-info-outline': ICInfoOutline, 'ic-install': ICInstall, @@ -329,6 +351,7 @@ export const iconMap = { 'ic-linked-build-color': ICLinkedBuildColor, 'ic-livspace': ICLivspace, 'ic-logout': ICLogout, + 'ic-logs': ICLogs, 'ic-magnifying-glass': ICMagnifyingGlass, 'ic-medium-delete': ICMediumDelete, 'ic-medium-paintbucket': ICMediumPaintbucket, @@ -353,6 +376,7 @@ export const iconMap = { 'ic-paper-plane-color': ICPaperPlaneColor, 'ic-paper-plane': ICPaperPlane, 'ic-path': ICPath, + 'ic-pause-circle': ICPauseCircle, 'ic-pencil': ICPencil, 'ic-play-outline': ICPlayOutline, 'ic-quay': ICQuay, @@ -368,6 +392,7 @@ export const iconMap = { 'ic-sortable': ICSortable, 'ic-sparkle-ai-color': ICSparkleAiColor, 'ic-sparkle-color': ICSparkleColor, + 'ic-speedometer': ICSpeedometer, 'ic-spinny': ICSpinny, 'ic-spray-can': ICSprayCan, 'ic-stack': ICStack, @@ -394,6 +419,7 @@ export const iconMap = { 'ic-timer': ICTimer, 'ic-traffic-signal': ICTrafficSignal, 'ic-travclan': ICTravclan, + 'ic-two-cubes': ICTwoCubes, 'ic-ubuntu': ICUbuntu, 'ic-unknown': ICUnknown, 'ic-user-circle': ICUserCircle, diff --git a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx index 0f5309242..194cd67a1 100644 --- a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx +++ b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx @@ -19,8 +19,9 @@ import { deriveBorderRadiusAndBorderClassFromConfig } from '@Shared/Helpers' import { Button } from '../Button' import { - CONTAINER_SIZE_TO_BUTTON_SIZE, CONTAINER_SIZE_TO_CLASS_MAP, + CONTAINER_SIZE_TO_ICON_BUTTON_SIZE, + CONTAINER_SIZE_TO_TEXT_BUTTON_SIZE, SIZE_TO_ICON_CLASS_MAP, VARIANT_TO_ICON_MAP, } from './constants' @@ -40,6 +41,9 @@ const InfoBlock = ({ const baseContainerClass = `${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${VARIANT_TO_BORDER_MAP[variant]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 py-8 br-4 bw-1` const iconClass = `dc__no-shrink flex dc__fill-available-space ${SIZE_TO_ICON_CLASS_MAP[size]}` const icon = customIcon ?? VARIANT_TO_ICON_MAP[variant] + const buttonSize = buttonProps?.icon + ? CONTAINER_SIZE_TO_ICON_BUTTON_SIZE[size] + : CONTAINER_SIZE_TO_TEXT_BUTTON_SIZE[size] const renderIcon = () => {icon} @@ -99,7 +103,7 @@ const InfoBlock = ({ {renderContent()} - {buttonProps &&