-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ 
}
+
+ )
}
return (
+
+ {img &&
+ {title}
+ {subtitle &&
+ }
+ onClick={handleWriteDescription}
+ text="Write"
+ variant={ButtonVariantType.secondary}
+ size={ComponentSizeType.medium}
+ />
+ {subtitle}
}
+
- {isEditDescriptionView ? (
+ {editorView === 'previewSaved' ? (
)
diff --git a/src/Common/SegmentedControl/segmentedControl.scss b/src/Common/SegmentedControl/segmentedControl.scss
index a2cc2ea19..8d170b8ae 100644
--- a/src/Common/SegmentedControl/segmentedControl.scss
+++ b/src/Common/SegmentedControl/segmentedControl.scss
@@ -37,10 +37,11 @@
border: 0.5px solid var(--border-primary);
box-shadow: 0px 1px 2px 0px var(--black-20);
}
+ }
- > *:not(.active-mask) {
- z-index: 1;
- }
+ > span {
+ position: relative;
+ z-index: 1;
}
&:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {
diff --git a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
index 4c120268f..ebfd7c2ef 100644
--- a/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
+++ b/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx
@@ -95,7 +95,9 @@ const SortableTableHeaderCell = ({
return (
// Added w-100, h-100 when isResizable is true to ensure the cell takes full dimensions in wrapper flex layout (if any)
- (null)
- const parentRef = useRef(null)
- const activeRowRef = useRef(null)
-
- const { BulkActionsComponent } = bulkSelectionConfig ?? {}
-
- const { showSeparatorBetweenRows = true } = stylesConfig ?? {}
-
const {
sortBy,
sortOrder,
searchKey = '',
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
handleSorting,
pageSize,
offset,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
changePage,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
changePageSize,
clearFilters,
- isFilterApplied,
+ areFiltersApplied,
// Destructuring specific filters, grouping the rest with the rest operator
// eslint-disable-next-line @typescript-eslint/no-unused-vars
handleSearch,
...otherFilters
} = filterData ?? {}
- const isBulkSelectionConfigured = !!bulkSelectionConfig
+ const wrapperDivRef = useRef(null)
- const {
- selectedIdentifiers: bulkSelectionState = {},
- isBulkSelectionApplied = false,
- setIdentifiers,
- getSelectedIdentifiersCount,
- } = bulkSelectionReturnValue ?? {}
-
- const {
- handleResize,
- gridTemplateColumns = visibleColumns
- .map((column) => (typeof column.size?.fixed === 'number' ? `${column.size.fixed}px` : '1fr'))
- .join(' '),
- } = resizableConfig ?? {}
+ const { setIdentifiers } = bulkSelectionReturnValue ?? {}
const searchSortTimeoutRef = useRef(-1)
- useEffect(
- () => () => {
- clearTimeout(searchSortTimeoutRef.current)
- },
- [],
- )
+ useEffect(() => {
+ const handleFocusOutEvent = (e: FocusEvent) => {
+ setTimeout(() => {
+ const container = e.currentTarget as HTMLElement
+ const related = e.relatedTarget as HTMLElement | null
+
+ // NOTE: we want to focus the table if the focus is lost from any element inside the table
+ // and the focus is not moving to another element inside the table. Ideally we don't want to steal focus
+ // inputs, buttons, etc. from the user, but when we blur any element by pressing Escape, we want to focus the table
+ // Keep in mind that if we tab focus onto a div/span with tabIndex then the relatedTarget will be that null
+ if (
+ !container.contains(document.activeElement) &&
+ (!related || related.tagName === 'BODY' || document.activeElement === document.body)
+ ) {
+ const tableElement = wrapperDivRef.current.getElementsByClassName(
+ 'generic-table',
+ )[0] as HTMLDivElement
+ tableElement?.focus()
+ }
+ }, 0)
+ }
- const sortByToColumnIndexMap: Record = useMemo(
- () =>
- visibleColumns.reduce((acc, column, index) => {
- acc[column.field] = index
+ wrapperDivRef.current?.addEventListener('focusout', handleFocusOutEvent)
- return acc
- }, {}),
- [visibleColumns],
- )
+ return () => {
+ clearTimeout(searchSortTimeoutRef.current)
+ wrapperDivRef.current?.removeEventListener('focusout', handleFocusOutEvent)
+ }
+ }, [])
+
+ useEffect(() => {
+ handleClearBulkSelection()
+ }, [rows])
- const [areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
+ const [_areFilteredRowsLoading, filteredRows, filteredRowsError, reloadFilteredRows] = useAsync(async () => {
if (!rows && !getRows) {
- throw new Error('Neither rows nor getRows function provided')
+ throw NO_ROWS_OR_GET_ROWS_ERROR
}
return getFilteringPromise({
searchSortTimeoutRef,
callback: rows
- ? () => {
- const sortByColumnIndex = sortByToColumnIndexMap[sortBy]
-
- return searchAndSortRows(rows, filter, filterData, visibleColumns[sortByColumnIndex]?.comparator)
- }
+ ? () =>
+ searchAndSortRows(
+ rows,
+ filter,
+ filterData,
+ visibleColumns.find(({ field }) => field === sortBy)?.comparator,
+ )
: () => getRows(filterData),
})
- }, [searchKey, sortBy, sortOrder, rows, sortByToColumnIndexMap, JSON.stringify(otherFilters)])
+ }, [searchKey, sortBy, sortOrder, rows, JSON.stringify(otherFilters), visibleColumns])
- const bulkSelectionCount = getSelectedIdentifiersCount?.() ?? 0
+ const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
const visibleRows = useMemo(() => {
const normalizedFilteredRows = filteredRows ?? []
@@ -133,15 +125,6 @@ const InternalTable = ({
return paginatedRows
}, [paginationVariant, offset, pageSize, filteredRows])
- const { activeRowIndex, setActiveRowIndex } = useTableWithKeyboardShortcuts(
- { bulkSelectionConfig, bulkSelectionReturnValue, handleToggleBulkSelectionOnRow },
- visibleRows,
- )
-
- useEffectAfterMount(() => {
- setActiveRowIndex(0)
- }, [offset, visibleRows])
-
useEffect(() => {
setIdentifiers?.(
visibleRows.reduce((acc, row) => {
@@ -153,239 +136,63 @@ const InternalTable = ({
const Wrapper = ViewWrapper ?? Fragment
- const getTriggerSortingHandler = (newSortBy: string) => () => {
- handleSorting(newSortBy)
- }
-
- useEffect(() => {
- // Focus the active row only when activeRowIndex changes. This ensures that focus is not stolen from other elements,
- // such as the search bar, when it is already focused. For example, when typing in the search bar, the rows may be replaced
- // with loading shimmers, causing activeRowRef to be null. During this time, activeRowIndex might reset to 0, but focus
- // will not shift. However, when navigating with arrow keys, activeRowIndex changes, and activeRowRef will point to the
- // correct row once it is mounted, allowing focus to update appropriately.
- activeRowRef.current?.focus()
- }, [activeRowIndex])
-
- const showPagination =
- paginationVariant === PaginationEnum.PAGINATED && filteredRows?.length > DEFAULT_BASE_PAGE_SIZE
-
- const renderRows = () => {
- if (loading && !visibleColumns.length) {
- return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
-
+
)
}
return (
-
- {renderContent()}
-
+ {renderContent()}
+ return (null)
+ const parentRef = useRef(null)
+ const bulkSelectionButtonRef = useRef(null)
+ const headerRef = useRef(null)
+
+ const [bulkActionState, setBulkActionState] = useState(null)
+ const [showBorderRightOnStickyElements, setShowBorderRightOnStickyElements] = useState(false)
+
+ const {
+ BulkActionsComponent,
+ bulkActionsData = null,
+ BulkOperationModal,
+ bulkOperationModalData = null,
+ } = bulkSelectionConfig ?? {}
+
+ const { showSeparatorBetweenRows = true } = stylesConfig ?? {}
+
+ const { sortBy, sortOrder, handleSorting, pageSize, offset, changePage, changePageSize } = filterData ?? {}
+
+ const isBulkSelectionConfigured = !!bulkSelectionConfig
+
+ const {
+ selectedIdentifiers: bulkSelectionState = {},
+ isBulkSelectionApplied = false,
+ setIdentifiers,
+ getSelectedIdentifiersCount,
+ } = bulkSelectionReturnValue ?? {}
+
+ const {
+ handleResize,
+ gridTemplateColumns = visibleColumns
+ .map((column) => (typeof column.size?.fixed === 'number' ? `${column.size.fixed}px` : '1fr'))
+ .join(' '),
+ } = resizableConfig ?? {}
+
+ useEffect(() => {
+ const scrollEventHandler = () => {
+ setShowBorderRightOnStickyElements(rowsContainerRef.current?.scrollLeft > 0)
+ }
+
+ const preventScrollByKeyboard = (event: KeyboardEvent) => {
+ if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+ event.preventDefault()
+ }
+ }
+
+ rowsContainerRef.current.addEventListener('scroll', scrollEventHandler)
+ rowsContainerRef.current.addEventListener('keydown', preventScrollByKeyboard)
+ }, [])
+
+ const bulkSelectionCount = isBulkSelectionApplied && rows ? rows.length : (getSelectedIdentifiersCount?.() ?? 0)
+
+ const visibleRows = useMemo(() => {
+ const normalizedFilteredRows = filteredRows ?? []
+
+ const paginatedRows =
+ paginationVariant !== PaginationEnum.PAGINATED
+ ? normalizedFilteredRows
+ : normalizedFilteredRows.slice(offset, offset + pageSize)
+
+ return paginatedRows
+ }, [paginationVariant, offset, pageSize, filteredRows])
+
+ const showPagination =
+ paginationVariant === PaginationEnum.PAGINATED &&
+ filteredRows?.length > (pageSizeOptions?.[0]?.value ?? DEFAULT_BASE_PAGE_SIZE)
+
+ const { activeRowIndex, setActiveRowIndex, shortcutContainerProps } = useTableWithKeyboardShortcuts(
+ { bulkSelectionConfig, bulkSelectionReturnValue, handleToggleBulkSelectionOnRow },
+ visibleRows,
+ showPagination,
+ bulkSelectionButtonRef,
+ )
+
+ useEffectAfterMount(() => {
+ setActiveRowIndex(0)
+ }, [offset, visibleRows])
+
+ useEffect(() => {
+ setIdentifiers?.(
+ visibleRows.reduce((acc, row) => {
+ acc[row.id] = row
+ return acc
+ }, {}),
+ )
+ }, [visibleRows])
+
+ const getTriggerSortingHandler = (newSortBy: string) => () => {
+ handleSorting(newSortBy)
+ }
+
+ const focusActiveRow = (node: HTMLDivElement) => {
+ if (
+ node &&
+ !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName.toUpperCase()) &&
+ node.dataset.active === 'true'
+ ) {
+ node.focus({ preventScroll: true })
+ scrollToShowActiveElementIfNeeded(node, rowsContainerRef.current, headerRef.current?.offsetHeight)
+ // eslint-disable-next-line no-param-reassign
+ node.dataset.active = 'false'
+ }
+ }
+
+ const onBulkOperationModalClose = () => {
+ setBulkActionState(null)
+ }
+
+ const getBulkSelections = () => {
+ if (isBulkSelectionApplied && rows) {
+ return filteredRows
+ }
+
+ return Object.values(bulkSelectionState)
+ }
+
+ const renderRows = () => {
+ if (loading) {
+ return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
+ , AdditionalProps {
+export enum FiltersTypeEnum {
+ STATE = 'state',
+ URL = 'url',
+ NONE = 'none',
+}
+
+export interface CellComponentProps extends Pick, AdditionalProps {
signals: SignalsType
value: unknown
row: RowType
- filterData: UseFiltersReturnType
+ filterData: T extends FiltersTypeEnum.NONE
+ ? null
+ : T extends FiltersTypeEnum.STATE
+ ? UseFiltersReturnType
+ : UseUrlFiltersReturnType
isRowActive: boolean
}
@@ -105,24 +121,33 @@ export type Column = Pick &
}
)
-type BulkSelectionConfigType = Pick, 'getSelectAllDialogStatus'> & {
- /** Make sure to wrap it in useCallback */
- onBulkSelectionChanged: (selectedRows: RowsType) => void
- BulkActionsComponent: FunctionComponent<{}>
+export interface BulkActionsComponentProps {
+ onActionClick: (event: MouseEvent) => void
+ bulkActionsData: unknown
}
+type BulkSelectionReturnValueType = ReturnType
+
+export interface BulkOperationModalProps
+ extends Pick {
+ action: T
+ onClose: () => void
+ selections: RowsType | null
+ bulkOperationModalData: unknown
+}
+
+type BulkSelectionConfigType = Pick, 'getSelectAllDialogStatus'> & {
+ BulkActionsComponent: FunctionComponent
+ BulkOperationModal: FunctionComponent
+} & Pick &
+ Pick
+
export enum PaginationEnum {
PAGINATED = 'paginated',
INFINITE = 'infinite',
NOT_PAGINATED = 'not-paginated',
}
-export enum FiltersTypeEnum {
- STATE = 'state',
- URL = 'url',
- NONE = 'none',
-}
-
export interface ConfigurableColumnsType {
allColumns: Column[]
visibleColumns: Column[]
@@ -135,16 +160,22 @@ interface GetRowsProps
type AdditionalFilterPropsType> = T extends FiltersTypeEnum.URL
? Pick<
UseUrlFiltersProps,
- 'parseSearchParams' | 'localStorageKey' | 'redirectionMethod' | 'initialSortKey'
+ 'parseSearchParams' | 'localStorageKey' | 'redirectionMethod' | 'initialSortKey' | 'defaultPageSize'
>
- : Pick, 'initialSortKey'>
-
-export type ViewWrapperProps = PropsWithChildren<
- Pick &
+ : Pick, 'initialSortKey' | 'defaultPageSize'>
+
+export type ViewWrapperProps = PropsWithChildren<
+ (T extends FiltersTypeEnum.NONE
+ ? {}
+ : Pick<
+ UseFiltersReturnType,
+ 'offset' | 'handleSearch' | 'searchKey' | 'sortBy' | 'sortOrder' | 'clearFilters'
+ >) &
AdditionalProps &
Partial & {
areRowsLoading: boolean
- }
+ filteredRows: RowsType | null
+ } & (T extends FiltersTypeEnum.URL ? Pick, 'updateSearchParams'> : {})
>
export type InternalTableProps = Required> & {
@@ -152,8 +183,6 @@ export type InternalTableProps = Required
- bulkSelectionReturnValue: ReturnType | null
+ bulkSelectionReturnValue: BulkSelectionReturnValueType | null
handleClearBulkSelection: () => void
@@ -236,16 +265,29 @@ export type InternalTableProps = Required boolean
+ clearFilters?: () => void
}
| {
filtersVariant: FiltersTypeEnum.STATE
additionalFilterProps?: AdditionalFilterPropsType
filter: (row: RowType, filterData: UseFiltersReturnType) => boolean
+ clearFilters?: never
}
| {
filtersVariant: FiltersTypeEnum.NONE
additionalFilterProps?: never
filter?: never
+ clearFilters?: never
+ }
+ ) &
+ (
+ | {
+ paginationVariant: PaginationEnum.PAGINATED
+ pageSizeOptions?: PageSizeOption[]
+ }
+ | {
+ paginationVariant: Omit
+ pageSizeOptions?: never
}
)
@@ -278,12 +320,19 @@ export type TableProps = Pick<
| 'RowActionsOnHoverComponent'
| 'loading'
| 'ViewWrapper'
+ | 'pageSizeOptions'
+ | 'clearFilters'
>
-export interface BulkSelectionActionWidgetProps extends Pick {
+export type BulkActionStateType = string | null
+
+export interface BulkSelectionActionWidgetProps
+ extends Pick {
count: number
handleClearBulkSelection: () => void
parentRef: React.RefObject
+ /** If it is null, we can say no bulk action has been selected yet */
+ setBulkActionState: Dispatch>
}
export type ConfigurableColumnsConfigType = Record
@@ -292,3 +341,25 @@ export interface GetFilteringPromiseProps {
searchSortTimeoutRef: React.MutableRefObject
callback: () => Promise | RowsType
}
+
+export interface TableContentProps
+ extends Pick<
+ InternalTableProps,
+ | 'filterData'
+ | 'rows'
+ | 'resizableConfig'
+ | 'additionalProps'
+ | 'visibleColumns'
+ | 'stylesConfig'
+ | 'loading'
+ | 'bulkSelectionConfig'
+ | 'bulkSelectionReturnValue'
+ | 'handleClearBulkSelection'
+ | 'handleToggleBulkSelectionOnRow'
+ | 'paginationVariant'
+ | 'RowActionsOnHoverComponent'
+ | 'pageSizeOptions'
+ > {
+ filteredRows: RowsType
+ areFilteredRowsLoading: boolean
+}
diff --git a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
index 8d5127f65..1b130962f 100644
--- a/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
+++ b/src/Shared/Components/Table/useTableWithKeyboardShortcuts.ts
@@ -14,12 +14,14 @@ const useTableWithKeyboardShortcuts = (
bulkSelectionReturnValue,
}: Pick,
visibleRows: RowsType,
+ showPagination: boolean,
+ bulkSelectionButtonRef: React.RefObject,
) => {
const isBulkSelectionConfigured = !!bulkSelectionConfig
- const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+ const { registerShortcut, unregisterShortcut, targetProps } = useRegisterShortcut()
- const { handleBulkSelection } = bulkSelectionReturnValue
+ const { handleBulkSelection } = bulkSelectionReturnValue ?? {}
const [activeRowIndex, setActiveRowIndex] = useState(0)
@@ -125,6 +127,13 @@ const useTableWithKeyboardShortcuts = (
return noop
}
+ registerShortcut({
+ keys: ['Escape'],
+ callback: () => {
+ handleBulkSelection({ action: BulkSelectionEvents.CLEAR_ALL_SELECTIONS })
+ },
+ })
+
registerShortcut({
keys: ['Shift', 'ArrowDown'],
callback: () => {
@@ -150,6 +159,21 @@ const useTableWithKeyboardShortcuts = (
},
})
+ registerShortcut({
+ keys: ['Control', 'A'],
+ callback: () => {
+ if (showPagination) {
+ bulkSelectionButtonRef.current?.click()
+ bulkSelectionButtonRef.current?.focus()
+ return
+ }
+
+ handleBulkSelection({
+ action: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+ })
+ },
+ })
+
registerShortcut({
keys: ['Shift', 'ArrowUp'],
callback: () => {
@@ -186,6 +210,8 @@ const useTableWithKeyboardShortcuts = (
unregisterShortcut(['Shift', 'ArrowUp'])
unregisterShortcut(['Shift', 'ArrowDown'])
unregisterShortcut(['X'])
+ unregisterShortcut(['Control', 'A'])
+ unregisterShortcut(['Escape'])
}
}, [
getMoveFocusToNextRowHandler,
@@ -193,11 +219,14 @@ const useTableWithKeyboardShortcuts = (
activeRowIndex,
visibleRows,
handleToggleBulkSelectionOnRow,
+ handleBulkSelection,
+ showPagination,
])
return {
activeRowIndex,
setActiveRowIndex,
+ shortcutContainerProps: targetProps,
}
}
diff --git a/src/Shared/Components/Table/utils.ts b/src/Shared/Components/Table/utils.ts
index b99a1dd02..89209a5da 100644
--- a/src/Shared/Components/Table/utils.ts
+++ b/src/Shared/Components/Table/utils.ts
@@ -23,9 +23,9 @@ export const searchAndSortRows = (
filterData: UseFiltersReturnType,
comparator?: Column['comparator'],
) => {
- const { searchKey, sortBy, sortOrder } = filterData ?? {}
+ const { sortBy, sortOrder } = filterData ?? {}
- const filteredRows = searchKey ? rows.filter((row) => filter(row, filterData)) : rows
+ const filteredRows = filter ? rows.filter((row) => filter(row, filterData)) : rows
return comparator && sortBy
? filteredRows.sort(
@@ -62,7 +62,9 @@ export const getVisibleColumnsFromLocalStorage = ({
throw new Error()
}
- return visibleColumns
+ const visibleColumnsFieldSet = new Set(visibleColumns.map((column) => column.field))
+
+ return allColumns.filter((column) => visibleColumnsFieldSet.has(column.field))
} catch {
// NOTE: show all headers by default
return allColumns
@@ -116,3 +118,49 @@ export const getFilteringPromise = ({ searchSortTimeoutRef, callback }: GetFilte
searchSortTimeoutRef.current = -1
}, SEARCH_SORT_CHANGE_DEBOUNCE_TIME)
})
+
+export const getStickyColumnConfig = (gridTemplateColumns: string, columnIndex: number) => ({
+ className: `dc__position-sticky dc__zi-1 generic-table__cell--sticky`,
+ // NOTE: container has a padding left of 20px and the gap between columns is 16px
+ // so we want each sticky column to stick to the left of the previous column
+ left: `${
+ Number(
+ gridTemplateColumns
+ .split(' ')
+ .slice(0, columnIndex)
+ .reduce((acc, num) => acc + Number(num.split('px')[0]), 0) ?? 1,
+ ) +
+ 20 +
+ 16 * columnIndex
+ }px`,
+})
+
+export const scrollToShowActiveElementIfNeeded = (
+ activeElement: HTMLDivElement,
+ parent: HTMLDivElement,
+ topMargin: number,
+) => {
+ if (!activeElement || !parent) {
+ return
+ }
+
+ // NOTE: we can't use scrollIntoView since that will also scroll it vertically
+ // therefore we need to conditionally scroll and that too in the horizontal direction only
+ const { bottom, top } = activeElement.getBoundingClientRect()
+ const { bottom: parentBottom, top: parentTop } = parent.getBoundingClientRect()
+ let { scrollTop } = parent
+
+ // NOTE: please look into https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+ // for more information what left and right pertain to
+ if (top < parentTop) {
+ // eslint-disable-next-line no-param-reassign
+ scrollTop += top - parentTop - topMargin
+ }
+
+ if (bottom > parentBottom) {
+ // eslint-disable-next-line no-param-reassign
+ scrollTop += bottom - parentBottom
+ }
+
+ parent.scrollTo({ top: scrollTop, behavior: 'smooth' })
+}
diff --git a/src/Shared/Components/TargetPlatforms/types.ts b/src/Shared/Components/TargetPlatforms/types.ts
index 5df88d691..dae68f82c 100644
--- a/src/Shared/Components/TargetPlatforms/types.ts
+++ b/src/Shared/Components/TargetPlatforms/types.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { TooltipProps } from '@Common/Tooltip/types'
+import { TooltipProps } from '@Common/Tooltip'
import { TargetPlatformsDTO } from '@Shared/types'
export interface TargetPlatformBadgeListProps extends Required> {}
diff --git a/src/Shared/Components/WorkflowOptionsModal/SourceTypeCard.tsx b/src/Shared/Components/WorkflowOptionsModal/SourceTypeCard.tsx
index 1d01c4370..5f812d43a 100644
--- a/src/Shared/Components/WorkflowOptionsModal/SourceTypeCard.tsx
+++ b/src/Shared/Components/WorkflowOptionsModal/SourceTypeCard.tsx
@@ -14,57 +14,66 @@
* limitations under the License.
*/
+import { Fragment, ReactNode } from 'react'
import Tippy from '@tippyjs/react'
import { ConditionalWrap } from '@Common/Helper'
+import { Icon } from '../Icon'
import { SourceTypeCardProps } from './types'
+const renderTippy =
+ ({ disableInfo }: Required>) =>
+ (children: ReactNode) => (
+
+ {/* Since in disabled state Tippy does'nt work */}
+ {children}
+
+ )
+
const SourceTypeCard = ({
title,
subtitle,
- image,
- alt,
dataTestId,
+ icons,
type,
- handleCardAction,
disableInfo,
- isDisabled = false,
-}: Readonly) => {
- const disableCard = !!disableInfo || isDisabled
- const renderTippy = (children) => (
-
- {/* Since in disabled state Tippy does'nt work */}
- {children}
-
- )
+ disabled = false,
+ onCardAction,
+}: SourceTypeCardProps) => {
+ // CONSTANTS
+ const isDisabled = !!disableInfo || disabled
return (
-
-
@@ -283,7 +157,7 @@ const GenericDescription = ({
editorCustomIcon(commandName)}
+ getIcon={(commandName: string) => getEditorCustomIcon(commandName)}
toolbarCommands={MARKDOWN_EDITOR_COMMANDS}
value={modifiedDescriptionText}
onChange={setModifiedDescriptionText}
minEditorHeight={minEditorHeight}
minPreviewHeight={150}
- selectedTab={selectedTab}
- onTabChange={setSelectedTab}
+ selectedTab={editorView}
+ onTabChange={handleTabChange}
generateMarkdownPreview={(markdown: string) =>
Promise.resolve(
title: string
tabIndex?: number
minEditorHeight?: number
+ emptyStateConfig?: {
+ img: string
+ subtitle: JSX.Element
+ }
}
export enum MDEditorSelectedTabType {
diff --git a/src/Common/GenericDescription/utils.ts b/src/Common/GenericDescription/utils.ts
deleted file mode 100644
index 0f0ccd4ee..000000000
--- a/src/Common/GenericDescription/utils.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import moment from 'moment'
-
-import { DATE_TIME_FORMATS, ZERO_TIME_STRING } from '@Common/Constants'
-
-export const getParsedUpdatedOnDate = (updatedOn: string) => {
- if (!updatedOn || updatedOn === ZERO_TIME_STRING) {
- return ''
- }
-
- const _moment = moment(updatedOn)
-
- return _moment.isValid() ? _moment.format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT) : updatedOn
-}
diff --git a/src/Common/GenericDescription/utils.tsx b/src/Common/GenericDescription/utils.tsx
new file mode 100644
index 000000000..b4e7f8c7e
--- /dev/null
+++ b/src/Common/GenericDescription/utils.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Tippy from '@tippyjs/react'
+import moment from 'moment'
+
+import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
+import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
+import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
+import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
+import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
+import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
+import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
+import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
+import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
+import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
+import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
+import { DATE_TIME_FORMATS, ZERO_TIME_STRING } from '@Common/Constants'
+import { logExceptionToSentry } from '@Common/Helper'
+import { MARKDOWN_EDITOR_COMMAND_ICON_TIPPY_CONTENT, MARKDOWN_EDITOR_COMMAND_TITLE } from '@Common/Markdown/constant'
+
+export const getParsedUpdatedOnDate = (updatedOn: string) => {
+ if (!updatedOn || updatedOn === ZERO_TIME_STRING) {
+ return ''
+ }
+
+ const _moment = moment(updatedOn)
+
+ return _moment.isValid() ? _moment.format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT) : updatedOn
+}
+
+export const getEditorCustomIcon = (commandName: string): JSX.Element => {
+ switch (commandName) {
+ case MARKDOWN_EDITOR_COMMAND_TITLE.HEADER:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.BOLD:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.ITALIC:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.STRIKETHROUGH:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.LINK:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.QUOTE:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.CODE:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.IMAGE:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.UNORDERED_LIST:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.ORDERED_LIST:
+ return (
+
+
+ )
+ case MARKDOWN_EDITOR_COMMAND_TITLE.CHECKED_LIST:
+ return (
+
+
+ )
+ default:
+ logExceptionToSentry('Invalid command for MDE')
+ return null
+ }
+}
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..2508933d4 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,9 @@ export const KEYBOARD_KEYS_MAP = {
K: 'K',
X: 'X',
A: 'A',
+ N: 'N',
+ S: 'S',
+ '/': '/',
Escape: 'Esc',
Enter: '↩',
ArrowLeft: '←',
@@ -77,9 +82,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
)}
-
-
)}
diff --git a/src/Common/GenericDescription/types.ts b/src/Common/GenericDescription/types.ts
index ead6ad9db..802b5c9f7 100644
--- a/src/Common/GenericDescription/types.ts
+++ b/src/Common/GenericDescription/types.ts
@@ -18,11 +18,14 @@ export interface GenericDescriptionProps {
text?: string
updatedBy?: string
updatedOn?: string
- isDescriptionPreview: boolean
updateDescription: (string) => Promise
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/Shared/Components/InfoBlock/constants.tsx b/src/Shared/Components/InfoBlock/constants.tsx
index 037ad7b23..26dace5b8 100644
--- a/src/Shared/Components/InfoBlock/constants.tsx
+++ b/src/Shared/Components/InfoBlock/constants.tsx
@@ -39,7 +39,12 @@ export const SIZE_TO_ICON_CLASS_MAP: Record = {
[ComponentSizeType.medium]: 'icon-dim-18',
}
-export const CONTAINER_SIZE_TO_BUTTON_SIZE: Record = {
+export const CONTAINER_SIZE_TO_TEXT_BUTTON_SIZE: Record = {
[ComponentSizeType.large]: ComponentSizeType.medium,
- [ComponentSizeType.medium]: ComponentSizeType.small,
+ [ComponentSizeType.medium]: ComponentSizeType.xs,
+}
+
+export const CONTAINER_SIZE_TO_ICON_BUTTON_SIZE: Record = {
+ [ComponentSizeType.large]: ComponentSizeType.xxs,
+ [ComponentSizeType.medium]: ComponentSizeType.xxs,
}
diff --git a/src/Shared/Components/InvalidYAMLTippy/types.ts b/src/Shared/Components/InvalidYAMLTippy/types.ts
index 9422c3a72..190bd89e7 100644
--- a/src/Shared/Components/InvalidYAMLTippy/types.ts
+++ b/src/Shared/Components/InvalidYAMLTippy/types.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { TooltipProps } from '@Common/Tooltip/types'
+import { TooltipProps } from '@Common/Tooltip'
export interface InvalidYAMLTippyWrapperProps {
parsingError: string
diff --git a/src/Shared/Components/Popover/Popover.component.tsx b/src/Shared/Components/Popover/Popover.component.tsx
index d332af886..f7e027e13 100644
--- a/src/Shared/Components/Popover/Popover.component.tsx
+++ b/src/Shared/Components/Popover/Popover.component.tsx
@@ -1,10 +1,9 @@
import { AnimatePresence, motion } from 'framer-motion'
+import { Backdrop } from '../Backdrop'
import { Button } from '../Button'
import { PopoverProps } from './types'
-import './popover.scss'
-
/**
* Popover Component \
* This component serves as a base for creating popovers. It is not intended to be used directly.
@@ -25,14 +24,14 @@ export const Popover = ({
{open && (
-
diff --git a/src/Shared/Components/Popover/popover.scss b/src/Shared/Components/Popover/popover.scss
deleted file mode 100644
index 26caeb6e0..000000000
--- a/src/Shared/Components/Popover/popover.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.popover-overlay {
- position: fixed;
- top:0;
- right:0;
- bottom:0;
- left:0;
- z-index: var(--modal-index);
-}
diff --git a/src/Shared/Components/Popover/types.ts b/src/Shared/Components/Popover/types.ts
index aff9c3406..b46f54c38 100644
--- a/src/Shared/Components/Popover/types.ts
+++ b/src/Shared/Components/Popover/types.ts
@@ -1,6 +1,7 @@
import { DetailedHTMLProps, KeyboardEvent, LegacyRef, MutableRefObject, ReactElement } from 'react'
import { HTMLMotionProps } from 'framer-motion'
+import { BackdropProps } from '../Backdrop'
import { ButtonProps } from '../Button'
export interface UsePopoverProps {
@@ -77,9 +78,9 @@ export interface UsePopoverReturnType {
}
/**
* Props to be spread onto the overlay element of the popover.
- * These props include standard HTML attributes for a `div` element.
+ * These props include backdrop properties.
*/
- overlayProps: DetailedHTMLProps, HTMLDivElement>
+ overlayProps: Omit
/**
* Props to be spread onto the popover element itself.
* Includes motion-related props for animations and a `ref` to the popover's `div` element.
diff --git a/src/Shared/Components/Popover/usePopover.hook.ts b/src/Shared/Components/Popover/usePopover.hook.ts
index e282d2d15..04db85cf5 100644
--- a/src/Shared/Components/Popover/usePopover.hook.ts
+++ b/src/Shared/Components/Popover/usePopover.hook.ts
@@ -1,4 +1,4 @@
-import { MouseEvent, useLayoutEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
import { UsePopoverProps, UsePopoverReturnType } from './types'
import {
@@ -23,6 +23,7 @@ export const usePopover = ({
const [actualPosition, setActualPosition] = useState(position)
const [actualAlignment, setActualAlignment] = useState(alignment)
const [triggerBounds, setTriggerBounds] = useState(null)
+ const [isBackdropMounted, setIsBackdropMounted] = useState(false)
// CONSTANTS
const isAutoWidth = width === 'auto'
@@ -38,9 +39,16 @@ export const usePopover = ({
onOpen?.(openState)
}
- const togglePopover = () => updateOpenState(!open)
+ const togglePopover = () => {
+ updateOpenState(!open)
+ }
- const closePopover = () => updateOpenState(false)
+ const closePopover = () => {
+ updateOpenState(false)
+ const triggerButton = triggerRef.current?.querySelector('button')
+ triggerButton?.blur()
+ triggerRef.current?.blur()
+ }
const handleTriggerKeyDown = (e: React.KeyboardEvent) => {
if (!open && (e.key === 'Enter' || e.key === ' ')) {
@@ -53,14 +61,12 @@ export const usePopover = ({
const handlePopoverKeyDown = (e: React.KeyboardEvent) => onPopoverKeyDown?.(e, open, closePopover)
- const handleOverlayClick = (e: MouseEvent) => {
- if (!popover.current?.contains(e.target as Node)) {
- closePopover()
- }
+ const handleOverlayClick = () => {
+ closePopover()
}
useLayoutEffect(() => {
- if (!open || !triggerRef.current || !popover.current || !scrollableRef.current) {
+ if (!open || !isBackdropMounted || !triggerRef.current || !popover.current || !scrollableRef.current) {
return
}
@@ -88,6 +94,9 @@ export const usePopover = ({
// update position on open
updatePopoverPosition()
+ // focus on popover when it is opened, so that keyboard navigation works as expected
+ popover.current.focus()
+
// prevent scroll propagation unless scrollable
const handleWheel = (e: WheelEvent) => {
e.stopPropagation()
@@ -110,30 +119,32 @@ export const usePopover = ({
scrollableRef.current.removeEventListener('wheel', handleWheel)
window.removeEventListener('resize', updatePopoverPosition)
}
- }, [open, position, alignment])
+ }, [open, position, alignment, isBackdropMounted])
return {
open,
triggerProps: {
- role: 'button',
ref: triggerRef,
onClick: togglePopover,
onKeyDown: handleTriggerKeyDown,
'aria-haspopup': 'listbox',
'aria-expanded': open,
+ className: 'flex',
tabIndex: 0,
bounds: triggerBounds ?? { left: 0, top: 0, height: 0, width: 0 },
},
overlayProps: {
- role: 'dialog',
+ hasClearBackground: true,
onClick: handleOverlayClick,
- className: 'popover-overlay',
+ onEscape: closePopover,
+ onBackdropMount: setIsBackdropMounted,
},
popoverProps: {
id,
ref: popover,
role: 'listbox',
- className: `dc__position-abs ${variant === 'menu' ? 'bg__menu--primary shadow__menu' : 'bg__overlay--primary shadow__overlay'} border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
+ tabIndex: 0,
+ className: `dc__position-abs dc__outline-none-imp ${variant === 'menu' ? 'bg__menu--primary shadow__menu' : 'bg__overlay--primary shadow__overlay'} border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
onKeyDown: handlePopoverKeyDown,
style: {
width: !isAutoWidth ? `${width}px` : undefined,
diff --git a/src/Shared/Components/Popover/utils.ts b/src/Shared/Components/Popover/utils.ts
index c1d6f3928..3e0bda481 100644
--- a/src/Shared/Components/Popover/utils.ts
+++ b/src/Shared/Components/Popover/utils.ts
@@ -47,7 +47,7 @@ const getPopoverAnimationProps = (axisKey: 'x' | 'y', axisInitialValue: number,
exit: { opacity: 0, [axisKey]: axisInitialValue },
transformTemplate: (isMiddleAlignment
? (params) =>
- axisKey === 'y' ? `translate(-50%, ${params[axisKey]})` : `translate(${params[axisKey]}, -50%,)`
+ axisKey === 'y' ? `translate(-50%, ${params[axisKey]})` : `translate(${params[axisKey]}, -50%)`
: undefined) as HTMLMotionProps<'div'>['transformTemplate'],
}) satisfies HTMLMotionProps<'div'>
diff --git a/src/Shared/Components/RegistryIcon/RegistryIcon.tsx b/src/Shared/Components/RegistryIcon/RegistryIcon.tsx
index bbc97b195..215ee1e79 100644
--- a/src/Shared/Components/RegistryIcon/RegistryIcon.tsx
+++ b/src/Shared/Components/RegistryIcon/RegistryIcon.tsx
@@ -31,9 +31,9 @@ const registryIconMap: Record = {
[RegistryType.ECR]: 'ic-ecr',
[RegistryType.ARTIFACT_REGISTRY]: 'ic-google-artifact-registry',
[RegistryType.GCR]: 'ic-google-container-registry',
- [RegistryType.OTHER]: 'ic-container',
+ [RegistryType.OTHER]: 'ic-container-registry',
}
export const RegistryIcon = ({ registryType, size = 20 }: RegistryIconProps) => (
- = {
},
startIcon: = {
+ size: ComponentSizeType.xxs,
+ label,
+ }
+ switch (severity) {
+ case SeveritiesDTO.CRITICAL:
+ return &
Partial<
Pick<
diff --git a/src/Shared/Components/StatusComponent/AppStatus.tsx b/src/Shared/Components/StatusComponent/AppStatus.tsx
index e20704efc..ee366dd84 100644
--- a/src/Shared/Components/StatusComponent/AppStatus.tsx
+++ b/src/Shared/Components/StatusComponent/AppStatus.tsx
@@ -45,7 +45,7 @@ export const AppStatus = ({
tooltipProps={{
alwaysShowTippyOnHover: true,
placement: 'top',
- content: 'To fetch app status for Helm based deployments open the app detail page',
+ content: 'To view app status open the app detail page',
}}
color="N600"
/>
diff --git a/src/Shared/Components/TabGroup/TabGroup.types.ts b/src/Shared/Components/TabGroup/TabGroup.types.ts
index 619b9a064..9919ba196 100644
--- a/src/Shared/Components/TabGroup/TabGroup.types.ts
+++ b/src/Shared/Components/TabGroup/TabGroup.types.ts
@@ -16,7 +16,7 @@
import { LinkProps, NavLinkProps } from 'react-router-dom'
-import { TooltipProps } from '@Common/Tooltip/types'
+import { TooltipProps } from '@Common/Tooltip'
import { ComponentSizeType } from '@Shared/constants'
import { DataAttributes } from '@Shared/types'
diff --git a/src/Shared/Components/Table/BulkSelectionActionWidget.tsx b/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
index 0e09b1f03..04b4e0b15 100644
--- a/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
+++ b/src/Shared/Components/Table/BulkSelectionActionWidget.tsx
@@ -2,11 +2,10 @@
* Copyright (c) 2024. Devtron Inc.
*/
-import { useEffect } from 'react'
+import { MouseEvent } from 'react'
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
import { DraggableButton, DraggablePositionVariant, DraggableWrapper } from '@Common/DraggableWrapper'
-import { useRegisterShortcut } from '@Common/Hooks'
import { ComponentSizeType } from '@Shared/constants'
import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
@@ -18,16 +17,15 @@ const BulkSelectionActionWidget = ({
handleClearBulkSelection,
parentRef,
BulkActionsComponent,
+ bulkActionsData,
+ setBulkActionState,
}: BulkSelectionActionWidgetProps) => {
- const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
-
- useEffect(() => {
- registerShortcut({ keys: ['Escape'], callback: handleClearBulkSelection })
-
- return () => {
- unregisterShortcut(['Escape'])
- }
- }, [])
+ const onActionClick = (event: MouseEvent) => {
+ const {
+ dataset: { key },
+ } = event.currentTarget
+ setBulkActionState(key)
+ }
return (
-
+
{children}
-
+
)}
- {isBulkSelectionConfigured ? : null}
- {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
-
- ))}
-
- ))
- }
-
- if (areFilteredRowsLoading) {
- return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
-
- {visibleColumns.map(({ horizontallySticky, label }) => (
-
- ))
+ const renderContent = () => {
+ if (filteredRowsError && !areFilteredRowsLoading && !loading) {
+ return
-
-
- ))}
-
- {visibleColumns.map(({ field, CellComponent }) => {
- if (field === BULK_ACTION_GUTTER_LABEL) {
- return (
-
- )
- })
- }
-
- const renderContent = () => {
- if (!areFilteredRowsLoading && !filteredRows?.length) {
- return filtersVariant !== FiltersTypeEnum.NONE && isFilterApplied ? (
-
-
- )}
-
-
+
-
-
- {showPagination && (
-
- {loading && !visibleColumns.length ? (
-
-
-
- {SHIMMER_DUMMY_ARRAY.map((label) => (
-
- ))}
-
- ) : (
-
- {visibleColumns.map(({ label, field, isSortable, size, showTippyOnTruncate }) => {
- const isResizable = !!size.range
-
- if (field === BULK_ACTION_GUTTER_LABEL) {
- return
- )}
-
- {renderRows()}
-
-
- {!!bulkSelectionConfig && !!bulkSelectionCount && (
-
+
+ {renderContent()}
+
+
)
}
diff --git a/src/Shared/Components/Table/Table.component.tsx b/src/Shared/Components/Table/Table.component.tsx
index 8da192b5f..501209513 100644
--- a/src/Shared/Components/Table/Table.component.tsx
+++ b/src/Shared/Components/Table/Table.component.tsx
@@ -1,12 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
- noop,
- UseRegisterShortcutProvider,
- useResizableTableConfig,
- useStateFilters,
- useUrlFilters,
-} from '@Common/index'
+import { noop, useResizableTableConfig, useStateFilters, useUrlFilters } from '@Common/index'
import { BulkSelectionEvents, BulkSelectionProvider, useBulkSelection } from '../BulkSelection'
import { BULK_ACTION_GUTTER_LABEL } from './constants'
@@ -61,7 +55,7 @@ const TableWithResizableConfigWrapper = (tableProps: UseResizableTableConfigWrap
const visibleColumns = useMemo(
() =>
bulkActionsConfig
- ? [{ size: { fixed: 40 }, field: BULK_ACTION_GUTTER_LABEL }, ...columnsWithoutBulkActionGutter]
+ ? [{ size: { fixed: 20 }, field: BULK_ACTION_GUTTER_LABEL }, ...columnsWithoutBulkActionGutter]
: columnsWithoutBulkActionGutter,
[!!bulkActionsConfig, columnsWithoutBulkActionGutter],
)
@@ -92,7 +86,7 @@ const TableWithUseBulkSelectionReturnValue = (tableProps: TableWithBulkSelection
(row: RowType) => {
const isRowSelected = selectedIdentifiers[row.id]
- if (!isRowSelected) {
+ if (!isRowSelected && !isBulkSelectionApplied) {
/**
* !FIXME: handleBulkSelection does not handle multiple updates in a single call
* can be done by using callbacks when setting setIdentifiers in BulkSelectionProvider
@@ -191,19 +185,15 @@ const UseUrlFilterWrapper = (props: FilterWrapperProps) => {
const TableWrapper = (tableProps: TableProps) => {
const { filtersVariant } = tableProps
- const renderContent = () => {
- if (filtersVariant === FiltersTypeEnum.STATE) {
- return
+ {isBulkSelectionConfigured ? : null}
+ {SHIMMER_DUMMY_ARRAY.map((shimmerCellLabel) => (
+
+ ))}
+
+ ))
+ }
+
+ if (areFilteredRowsLoading) {
+ return SHIMMER_DUMMY_ARRAY.map((shimmerRowLabel) => (
+
+ {visibleColumns.map(({ label }) => (
+
+ ))
+ }
+
+ return visibleRows.map((row, visibleRowIndex) => {
+ const isRowActive = activeRowIndex === visibleRowIndex
+ const isRowBulkSelected = !!bulkSelectionState[row.id] || isBulkSelectionApplied
+
+ const handleChangeActiveRowIndex = () => {
+ setActiveRowIndex(visibleRowIndex)
+ }
+
+ const handleToggleBulkSelectionForRow = () => {
+ handleToggleBulkSelectionOnRow(row)
+ }
+
+ return (
+
+
+
+ ))}
+
+ {visibleColumns.map(({ field, horizontallySticky: isStickyColumn, CellComponent }, index) => {
+ const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+ const horizontallySticky = isStickyColumn || isBulkActionGutter
+ const { className: stickyClassName = '', left: stickyLeftValue = '' } = horizontallySticky
+ ? getStickyColumnConfig(gridTemplateColumns, index)
+ : {}
+
+ if (isBulkActionGutter) {
+ return (
+
+ )
+ })
+ }
+
+ return (
+
+
+ )
+ }
+
+ return (
+
+ {CellComponent ? (
+
+ )
+ })}
+
+ {RowActionsOnHoverComponent && (
+
+
+ )}
+
+
+ )
+}
+
+export default TableContent
diff --git a/src/Shared/Components/Table/constants.ts b/src/Shared/Components/Table/constants.ts
index 69cd2cc7a..d6e3c516f 100644
--- a/src/Shared/Components/Table/constants.ts
+++ b/src/Shared/Components/Table/constants.ts
@@ -11,3 +11,5 @@ export const EVENT_TARGET = new EventTarget()
export const DRAG_SELECTOR_IDENTIFIER = 'table-drag-selector'
export const SHIMMER_DUMMY_ARRAY = [1, 2, 3]
+
+export const NO_ROWS_OR_GET_ROWS_ERROR = new Error('Neither rows nor getRows function provided')
diff --git a/src/Shared/Components/Table/index.ts b/src/Shared/Components/Table/index.ts
index c19e84928..a34f6bc86 100644
--- a/src/Shared/Components/Table/index.ts
+++ b/src/Shared/Components/Table/index.ts
@@ -1,5 +1,7 @@
export { default as Table } from './Table.component'
export type {
+ BulkActionsComponentProps as TableBulkActionsComponentProps,
+ BulkOperationModalProps as TableBulkOperationModalProps,
CellComponentProps as TableCellComponentProps,
Column as TableColumnType,
TableProps,
diff --git a/src/Shared/Components/Table/styles.scss b/src/Shared/Components/Table/styles.scss
index 171cf26fd..398f1f4bb 100644
--- a/src/Shared/Components/Table/styles.scss
+++ b/src/Shared/Components/Table/styles.scss
@@ -1,4 +1,49 @@
.generic-table {
+ --resize-btn-scale-multiplier: 2.25;
+
+ &__cell > * {
+ height: 100%;
+ width: 100%;
+ }
+
+ &__cell--sticky {
+ background-color: var(--bg-primary);
+ transition: box-shadow 0.1s ease-in-out;
+
+ &::before {
+ position: absolute;
+ content: '';
+ left: -16px;
+ width: 16px;
+ height: 100%;
+ background-color: inherit;
+ z-index: -1;
+ }
+
+ &:first-of-type::before {
+ left: -20px;
+ width: 20px;
+ }
+ }
+
+ &--scrolled {
+ .generic-table__header .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
+ .sortable-table-header__resize-btn {
+ > div {
+ transform: scaleY(var(--resize-btn-scale-multiplier));
+ }
+ }
+ }
+
+ .generic-table__row > .generic-table__cell--sticky:not(:has(+ .generic-table__cell--sticky)) {
+ // Show a right border on the last sticky cell when the table is scrolled
+ // Using box-shadow to avoid layout issues with borders, since borders can affect the width of the cell
+ box-shadow:
+ 0px 0px 0px 0px transparent,
+ 1px 0px 0px 0px var(--border-primary);
+ }
+ }
+
&__row {
&:focus {
outline: none;
@@ -23,4 +68,14 @@
background-color: var(--B100);
}
}
-}
\ No newline at end of file
+
+ .sortable-table-header__resize-btn:hover,
+ .sortable-table-header__resize-btn--dragging {
+ > div {
+ // NOTE: to reuse the same scale multiplier as the header cell
+ // fixing the height to 16px which is the default height
+ height: 16px !important;
+ transform: scaleY(var(--resize-btn-scale-multiplier));
+ }
+ }
+}
diff --git a/src/Shared/Components/Table/types.ts b/src/Shared/Components/Table/types.ts
index d32d09362..f142aeb66 100644
--- a/src/Shared/Components/Table/types.ts
+++ b/src/Shared/Components/Table/types.ts
@@ -1,8 +1,14 @@
-import { Dispatch, FunctionComponent, PropsWithChildren, SetStateAction } from 'react'
+import { Dispatch, FunctionComponent, MouseEvent, PropsWithChildren, SetStateAction } from 'react'
import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types'
-import { UseStateFiltersProps, UseStateFiltersReturnType, UseUrlFiltersProps } from '@Common/Hooks'
+import {
+ UseStateFiltersProps,
+ UseStateFiltersReturnType,
+ UseUrlFiltersProps,
+ UseUrlFiltersReturnType,
+} from '@Common/Hooks'
import { GenericEmptyStateType } from '@Common/index'
+import { PageSizeOption } from '@Common/Pagination/types'
import { SortableTableHeaderCellProps, useResizableTableConfig } from '@Common/SortableTableHeaderCell'
import { useBulkSelection, UseBulkSelectionProps } from '../BulkSelection'
@@ -78,11 +84,21 @@ export type RowType = {
export type RowsType = RowType[]
-export interface CellComponentProps extends Pick
+
+
+ {showPagination && (
+
+
+
+ {!!bulkSelectionConfig && !!bulkSelectionCount && (
+
+ {loading ? (
+
+ {renderRows()}
+
+ {isBulkSelectionConfigured ? : null}
+ {SHIMMER_DUMMY_ARRAY.map((label) => (
+
+ ))}
+
+ ) : (
+
+ {visibleColumns.map(
+ (
+ {
+ label,
+ field,
+ isSortable,
+ size,
+ showTippyOnTruncate,
+ horizontallySticky: isStickyColumn,
+ },
+ index,
+ ) => {
+ const isResizable = !!size?.range
+ const isBulkActionGutter = field === BULK_ACTION_GUTTER_LABEL
+ const horizontallySticky = isStickyColumn || isBulkActionGutter
+ const { className: stickyClassName = '', left: stickyLeftValue = '' } =
+ horizontallySticky ? getStickyColumnConfig(gridTemplateColumns, index) : {}
+
+ if (field === BULK_ACTION_GUTTER_LABEL) {
+ return (
+
+ )}
+
+
+ )
+ }
+
+ return (
+
+
+ )
+ },
+ )}
+
-
-
- 
-
-
-
- {/* TITLE */}
-
+
diff --git a/src/Shared/Components/WorkflowOptionsModal/WorkflowOptionsModal.tsx b/src/Shared/Components/WorkflowOptionsModal/WorkflowOptionsModal.tsx
index 1f7feaad2..b7519abeb 100644
--- a/src/Shared/Components/WorkflowOptionsModal/WorkflowOptionsModal.tsx
+++ b/src/Shared/Components/WorkflowOptionsModal/WorkflowOptionsModal.tsx
@@ -14,31 +14,33 @@
* limitations under the License.
*/
-import React, { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
-import changeCI from '@Images/change-source.png'
-import selectWorkflowSource from '@Images/select-image-source.png'
-import { showError, stopPropagation } from '@Common/Helper'
-import { VisibleModal } from '@Common/index'
+import { ReactComponent as ImgWorkflowOptionsModalHeader } from '@Images/workflow-options-modal-header.svg'
+import { noop, showError } from '@Common/Helper'
import { PipelineType, WorkflowNodeType } from '@Common/Types'
+import { ComponentSizeType } from '@Shared/constants'
import { saveCDPipeline, ToastManager, ToastVariantType } from '@Shared/Services'
import { CIPipelineNodeType } from '@Shared/types'
-import {
- CHANGE_SAME_CI,
- NO_ENV_FOUND,
- REQUEST_IN_PROGRESS,
- SOURCE_TYPE_CARD_VARIANTS,
- TOAST_MESSAGES,
- WORKFLOW_OPTIONS_MODAL,
- WORKFLOW_OPTIONS_MODAL_TYPES,
-} from './constants'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
+import { GenericModal } from '../GenericModal'
+import { Icon } from '../Icon'
+import { NO_ENV_FOUND, REQUEST_IN_PROGRESS, TOAST_MESSAGES } from './constants'
import SourceTypeCard from './SourceTypeCard'
-import { WorkflowOptionsModalProps } from './types'
-import { getSwitchToWebhookPayload } from './utils'
+import { SourceTypeCardProps, WorkflowOptionsModalProps } from './types'
+import {
+ getBuildWorkflowCardsConfig,
+ getCurrentPipelineType,
+ getJobWorkflowCardsConfig,
+ getReceiveWorkflowCardsConfig,
+ getSwitchToWebhookPayload,
+} from './utils'
+
+import './styles.scss'
const WorkflowOptionsModal = ({
- handleCloseWorkflowOptionsModal,
+ open,
addCIPipeline,
addWebhookCD,
addLinkedCD,
@@ -50,64 +52,42 @@ const WorkflowOptionsModal = ({
linkedCDSourceVariant,
isAppGroup = false,
isTemplateView,
+ onClose,
}: Readonly) => {
- const [currentCIPipelineType, setCurrentCIPipelineType] = useState(
- null,
- )
+ // STATES
const [loadingWebhook, setLoadingWebhook] = useState(false)
+ // CONSTANTS
+ const currentPipelineType = useMemo(
+ () => getCurrentPipelineType({ workflows, changeCIPayload }),
+ [workflows, changeCIPayload],
+ )
+
+ const buildWorkflowCards = useMemo(
+ () => getBuildWorkflowCardsConfig({ currentPipelineType, changeCIPayload, isAppGroup }),
+ [currentPipelineType, isAppGroup, changeCIPayload],
+ )
+
+ const receiveWorkflowCards = useMemo(
+ () => getReceiveWorkflowCardsConfig({ currentPipelineType, linkedCDSourceVariant, isAppGroup }),
+ [currentPipelineType, linkedCDSourceVariant, isAppGroup],
+ )
+
+ const jobWorkflowCards = useMemo(
+ () => getJobWorkflowCardsConfig({ currentPipelineType, isAppGroup }),
+ [currentPipelineType, isAppGroup],
+ )
+
+ // HANDLERS
/**
* Would be called in case user flow is completed like closing modal, changing CI to webhook with some cd pipelines
* In other cases this would be done via closePipeline method in workflowEditor
*/
const handleFlowCompletion = () => {
- handleCloseWorkflowOptionsModal()
+ onClose()
resetChangeCIPayload()
}
- useEffect(() => {
- if (changeCIPayload && workflows) {
- const currentWorkflow = workflows.find((workflow) => +workflow.id === changeCIPayload?.appWorkflowId)
- if (!currentWorkflow) {
- handleFlowCompletion()
- ToastManager.showToast({
- variant: ToastVariantType.error,
- description: TOAST_MESSAGES.WORKFLOW_NOT_AVAILABLE,
- })
- return
- }
-
- const currentCIPipeline = currentWorkflow.nodes.find((node) => node.type === WorkflowNodeType.CI)
- const isWebhook = currentWorkflow.nodes.some((node) => node.type === WorkflowNodeType.WEBHOOK)
-
- if (isWebhook) {
- setCurrentCIPipelineType(WorkflowNodeType.WEBHOOK)
- return
- }
-
- if (currentCIPipeline?.isJobCI) {
- setCurrentCIPipelineType(CIPipelineNodeType.JOB_CI)
- return
- }
-
- if (currentCIPipeline?.isLinkedCI) {
- setCurrentCIPipelineType(CIPipelineNodeType.LINKED_CI)
- return
- }
-
- if (currentCIPipeline?.isExternalCI) {
- setCurrentCIPipelineType(CIPipelineNodeType.EXTERNAL_CI)
- return
- }
-
- if (currentCIPipeline?.isLinkedCD) {
- setCurrentCIPipelineType(CIPipelineNodeType.LINKED_CD)
- return
- }
- setCurrentCIPipelineType(CIPipelineNodeType.CI)
- }
- }, [workflows, changeCIPayload])
-
const handleChangeToWebhook = () => {
if (changeCIPayload) {
const currentWorkflow = workflows.find((workflow) => +workflow.id === changeCIPayload.appWorkflowId)
@@ -137,10 +117,10 @@ const WorkflowOptionsModal = ({
}
}
addWebhookCD(changeCIPayload?.appWorkflowId || 0)
- handleCloseWorkflowOptionsModal()
+ onClose()
}
- const handleCardAction = (e: React.MouseEvent | React.KeyboardEvent) => {
+ const handleCardAction: SourceTypeCardProps['onCardAction'] = (e) => {
if (!(e.currentTarget instanceof HTMLDivElement)) {
return
}
@@ -159,23 +139,19 @@ const WorkflowOptionsModal = ({
if (linkedCDSourceVariant && pipelineType === linkedCDSourceVariant.type) {
addLinkedCD(changeCIPayload)
- handleCloseWorkflowOptionsModal()
+ onClose()
return
}
addCIPipeline(pipelineType as CIPipelineNodeType, changeCIPayload?.appWorkflowId ?? 0)
- handleCloseWorkflowOptionsModal()
+ onClose()
}
- const getDisabledInfo = (requiredCIPipelineType: typeof currentCIPipelineType) => {
+ const getDisabledInfo = (requiredCIPipelineType: typeof currentPipelineType) => {
if (!showLinkedCDSource && requiredCIPipelineType === CIPipelineNodeType.LINKED_CD) {
return NO_ENV_FOUND
}
- if (currentCIPipelineType === requiredCIPipelineType) {
- return CHANGE_SAME_CI
- }
-
if (loadingWebhook) {
return REQUEST_IN_PROGRESS
}
@@ -183,124 +159,92 @@ const WorkflowOptionsModal = ({
return null
}
- return (
-
-
{title}
- - {/* SUBTITLE */} -{subtitle}
+
+ {!!icons.length && (
+
+ {icons.map(({ name, color }, index) => (
+
+
+ ))}
+ )}
+
+
+ {index !== icons.length - 1 && (
+
+ )}
+
+
{title}
+{subtitle}
- {/* Sidebar */}
- >
+>
+
+export const NO_ENV_FOUND = 'No environment found. Please create a CD Pipeline first.'
+export const REQUEST_IN_PROGRESS = 'Request in progress'
+
+export const TOAST_MESSAGES = {
+ SUCCESS_CHANGE_TO_WEBHOOK: 'Successfully changed CI to webhook',
+ WORKFLOW_NOT_AVAILABLE: 'Selected workflow not available',
+}
diff --git a/src/Shared/Components/WorkflowOptionsModal/constants.tsx b/src/Shared/Components/WorkflowOptionsModal/constants.tsx
deleted file mode 100644
index 05d1be554..000000000
--- a/src/Shared/Components/WorkflowOptionsModal/constants.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import ci from '@Icons/ic-source-build.svg'
-import ciJobIcon from '@Icons/ic-source-job.svg'
-import linkedPipeline from '@Icons/ic-source-linked-build.svg'
-import webhook from '@Icons/ic-source-webhook.svg'
-import { PipelineType } from '@Common/Types'
-import { CIPipelineNodeType } from '@Shared/types'
-
-export const WORKFLOW_OPTIONS_MODAL = {
- ACTION_TEXT: 'Select an image source for new workflow',
- ACTION_NOTE: 'You can switch between image sources later',
- CHANGE_CI_TEXT: 'Change image source',
- CHANGE_CI_NOTE: 'Deploy to environments in the workflow from another image source',
-}
-
-export const WORKFLOW_OPTIONS_MODAL_TYPES = {
- DEFAULT: 'Build Container Image',
- RECIEVE: 'Receive Container Image',
- JOB: 'Create job pipeline',
-}
-
-export const SOURCE_TYPE_CARD_VARIANTS = {
- SOURCE_CODE: {
- title: 'Build and Deploy from Source Code',
- subtitle: 'Build container image from a Git repo and deploy to an environment.',
- image: ci,
- alt: 'CI',
- dataTestId: 'build-deploy-from-source-code-button',
- type: CIPipelineNodeType.CI,
- },
- LINKED_PIPELINE: {
- title: 'Linked Build Pipeline',
- subtitle: 'Use image built by another build pipeline within Devtron.',
- image: linkedPipeline,
- alt: 'Linked-CI',
- dataTestId: 'linked-build-pipeline-button',
- type: CIPipelineNodeType.LINKED_CI,
- },
- EXTERNAL_SERVICE: {
- title: 'Deploy Image from External Service',
- subtitle: 'Receive images from an external service (eg. jenkins) and deploy to an environment.',
- image: webhook,
- alt: 'External-CI',
- dataTestId: 'deploy-image-external-service-link',
- type: PipelineType.WEBHOOK,
- },
- JOB: {
- title: 'Create a Job',
- subtitle: 'Create and trigger a job. Such as trigger Jenkins build trigger',
- image: ciJobIcon,
- alt: 'Job-CI',
- dataTestId: 'job-ci-pipeline-button',
- type: CIPipelineNodeType.JOB_CI,
- },
-}
-
-export const NO_ENV_FOUND = 'No environment found. Please create a CD Pipeline first.'
-export const CHANGE_SAME_CI = 'Cannot change to same source type'
-export const REQUEST_IN_PROGRESS = 'Request in progress'
-
-export const TOAST_MESSAGES = {
- SUCCESS_CHANGE_TO_WEBHOOK: 'Successfully changed CI to webhook',
- WORKFLOW_NOT_AVAILABLE: 'Selected workflow not available',
-}
diff --git a/src/Shared/Components/WorkflowOptionsModal/index.tsx b/src/Shared/Components/WorkflowOptionsModal/index.ts
similarity index 92%
rename from src/Shared/Components/WorkflowOptionsModal/index.tsx
rename to src/Shared/Components/WorkflowOptionsModal/index.ts
index 468345e2a..23569fa26 100644
--- a/src/Shared/Components/WorkflowOptionsModal/index.tsx
+++ b/src/Shared/Components/WorkflowOptionsModal/index.ts
@@ -14,4 +14,5 @@
* limitations under the License.
*/
+export type { SourceTypeCardProps } from './types'
export { default as WorkflowOptionsModal } from './WorkflowOptionsModal'
diff --git a/src/Shared/Components/WorkflowOptionsModal/styles.scss b/src/Shared/Components/WorkflowOptionsModal/styles.scss
new file mode 100644
index 000000000..02ad82b9c
--- /dev/null
+++ b/src/Shared/Components/WorkflowOptionsModal/styles.scss
@@ -0,0 +1,30 @@
+.workflow-options-modal {
+ &__header {
+ background: linear-gradient(269deg, var(--B100, #{var(--B100)}) 0%, var(--bg-primary, #{var(--white)}) 99.9%);
+ }
+
+ &__img {
+ top: 13px;
+ }
+
+ &__cards-container {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+}
+
+.source-type-card {
+ &__icons {
+ transition:
+ margin 0.2s,
+ padding 0.2s;
+ }
+
+ &:hover {
+ box-shadow: var(--shadow-10);
+
+ .source-type-card__icons {
+ margin: 0;
+ padding: 20px 16px;
+ }
+ }
+}
diff --git a/src/Shared/Components/WorkflowOptionsModal/types.tsx b/src/Shared/Components/WorkflowOptionsModal/types.ts
similarity index 66%
rename from src/Shared/Components/WorkflowOptionsModal/types.tsx
rename to src/Shared/Components/WorkflowOptionsModal/types.ts
index eb5ec2bff..f2d3d20ae 100644
--- a/src/Shared/Components/WorkflowOptionsModal/types.tsx
+++ b/src/Shared/Components/WorkflowOptionsModal/types.ts
@@ -14,26 +14,27 @@
* limitations under the License.
*/
+import { WorkflowNodeType } from '@Common/Types'
import { ChangeCIPayloadType, CIPipelineNodeType, WorkflowType } from '@Shared/types'
import { AppConfigProps } from '@Pages/index'
-interface LinkedCDSourceVariant {
+import { GenericModalProps } from '../GenericModal'
+import { IconsProps } from '../Icon'
+
+export interface SourceTypeCardProps {
title: string
subtitle: string
- image: string
- alt: string
dataTestId: string
- type: string
-}
-
-export interface SourceTypeCardProps extends LinkedCDSourceVariant {
- handleCardAction: (e: React.MouseEvent | React.KeyboardEvent) => void
+ type: CIPipelineNodeType | WorkflowNodeType.WEBHOOK
+ disabled?: boolean
disableInfo: string
- isDisabled?: boolean
+ icons: Pick[]
+ onCardAction: (e: React.MouseEvent | React.KeyboardEvent) => void
}
-export interface WorkflowOptionsModalProps extends Required> {
- handleCloseWorkflowOptionsModal: () => void
+export interface WorkflowOptionsModalProps
+ extends Required>,
+ Pick {
addCIPipeline: (type: CIPipelineNodeType, workflowId?: number | string) => void
addWebhookCD: (workflowId?: number | string) => void
addLinkedCD: (changeCIPayload?: ChangeCIPayloadType) => void
@@ -43,6 +44,6 @@ export interface WorkflowOptionsModalProps extends Required void
- linkedCDSourceVariant?: LinkedCDSourceVariant
+ linkedCDSourceVariant?: Pick
isAppGroup?: boolean
}
diff --git a/src/Shared/Components/WorkflowOptionsModal/utils.ts b/src/Shared/Components/WorkflowOptionsModal/utils.ts
new file mode 100644
index 000000000..40403fb4c
--- /dev/null
+++ b/src/Shared/Components/WorkflowOptionsModal/utils.ts
@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PipelineType, WorkflowNodeType } from '@Common/Types'
+import { ChangeCIPayloadType, CIPipelineNodeType, TriggerType } from '@Shared/types'
+
+import { SOURCE_TYPE_CARD_VARIANTS } from './constants'
+import { SourceTypeCardProps, WorkflowOptionsModalProps } from './types'
+
+export const getSwitchToWebhookPayload = (changeCIPayload: ChangeCIPayloadType) => ({
+ appId: changeCIPayload.appId,
+ pipelines: [
+ {
+ // name and triggerType are useless to backend for this case
+ name: 'change-webhook-ci',
+ triggertype: TriggerType.Manual,
+ appWorkflowId: changeCIPayload.appWorkflowId,
+ environmentId: -1,
+ id: 0,
+ parentPipelineType: PipelineType.WEBHOOK,
+ switchFromCiPipelineId: changeCIPayload.switchFromCiPipelineId,
+ },
+ ],
+})
+
+export const getCurrentPipelineType = ({
+ workflows,
+ changeCIPayload,
+}: Required>): SourceTypeCardProps['type'] => {
+ if (!workflows || !changeCIPayload) {
+ return null
+ }
+
+ const currentWorkflow = workflows.find((workflow) => +workflow.id === changeCIPayload.appWorkflowId)
+ const currentCIPipeline = currentWorkflow.nodes.find((node) => node.type === WorkflowNodeType.CI)
+ const isWebhook = currentWorkflow.nodes.some((node) => node.type === WorkflowNodeType.WEBHOOK)
+
+ if (isWebhook) {
+ return WorkflowNodeType.WEBHOOK
+ }
+
+ if (currentCIPipeline) {
+ if (currentCIPipeline.isJobCI) {
+ return CIPipelineNodeType.JOB_CI
+ }
+
+ if (currentCIPipeline.isLinkedCI) {
+ return CIPipelineNodeType.LINKED_CI
+ }
+
+ if (currentCIPipeline.isExternalCI) {
+ return CIPipelineNodeType.EXTERNAL_CI
+ }
+
+ if (currentCIPipeline.isLinkedCD) {
+ return CIPipelineNodeType.LINKED_CD
+ }
+ }
+
+ return CIPipelineNodeType.CI
+}
+
+export const getBuildWorkflowCardsConfig = ({
+ currentPipelineType,
+ changeCIPayload,
+ isAppGroup,
+}: {
+ currentPipelineType: CIPipelineNodeType | WorkflowNodeType.WEBHOOK
+} & Required>) =>
+ Object.values(SOURCE_TYPE_CARD_VARIANTS.BUILD)
+ .map>(
+ ({ type, ...restKeys }) => {
+ const hideCard =
+ currentPipelineType === type ||
+ (type === CIPipelineNodeType.JOB_CI && !window._env_.ENABLE_CI_JOB) ||
+ (type === CIPipelineNodeType.CI_CD && (isAppGroup || !!changeCIPayload))
+
+ return !hideCard
+ ? {
+ ...restKeys,
+ type,
+ disabled: type === CIPipelineNodeType.JOB_CI && isAppGroup,
+ }
+ : null
+ },
+ )
+ .filter(Boolean)
+
+export const getReceiveWorkflowCardsConfig = ({
+ currentPipelineType,
+ linkedCDSourceVariant,
+ isAppGroup,
+}: {
+ currentPipelineType: CIPipelineNodeType | WorkflowNodeType.WEBHOOK
+} & Required>) => {
+ const config = Object.values(SOURCE_TYPE_CARD_VARIANTS.RECEIVE)
+ .map>(
+ ({ type, ...restKeys }) => {
+ const hideCard = currentPipelineType === type
+
+ return !hideCard
+ ? {
+ ...restKeys,
+ type,
+ disabled: isAppGroup,
+ }
+ : null
+ },
+ )
+ .filter(Boolean)
+
+ if (linkedCDSourceVariant && currentPipelineType !== CIPipelineNodeType.LINKED_CD) {
+ config.push(linkedCDSourceVariant)
+ }
+
+ return config
+}
+
+export const getJobWorkflowCardsConfig = ({
+ currentPipelineType,
+ isAppGroup,
+}: {
+ currentPipelineType: CIPipelineNodeType | WorkflowNodeType.WEBHOOK
+} & Required>) =>
+ Object.values(SOURCE_TYPE_CARD_VARIANTS.JOB)
+ .map>(
+ ({ type, ...restKeys }) => {
+ const hideCard =
+ currentPipelineType === type || (type === CIPipelineNodeType.JOB_CI && !window._env_.ENABLE_CI_JOB)
+
+ return !hideCard
+ ? {
+ ...restKeys,
+ type,
+ disabled: type === CIPipelineNodeType.JOB_CI && isAppGroup,
+ }
+ : null
+ },
+ )
+ .filter(Boolean)
diff --git a/src/Shared/Components/WorkflowOptionsModal/utils.tsx b/src/Shared/Components/WorkflowOptionsModal/utils.tsx
deleted file mode 100644
index cab35981c..000000000
--- a/src/Shared/Components/WorkflowOptionsModal/utils.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { PipelineType } from '@Common/Types'
-import { ChangeCIPayloadType, TriggerType } from '@Shared/types'
-
-export const getSwitchToWebhookPayload = (changeCIPayload: ChangeCIPayloadType) => ({
- appId: changeCIPayload.appId,
- pipelines: [
- {
- // name and triggerType are useless to backend for this case
- name: 'change-webhook-ci',
- triggertype: TriggerType.Manual,
- appWorkflowId: changeCIPayload.appWorkflowId,
- environmentId: -1,
- id: 0,
- parentPipelineType: PipelineType.WEBHOOK,
- switchFromCiPipelineId: changeCIPayload.switchFromCiPipelineId,
- },
- ],
-})
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
index 5900c486b..268c670b8 100644
--- a/src/Shared/Components/index.ts
+++ b/src/Shared/Components/index.ts
@@ -23,6 +23,7 @@ export * from './APIResponseHandler'
export * from './AppStatusModal'
export * from './ArtifactInfoModal'
export * from './Backdrop'
+export * from './Badge'
export * from './BulkOperations'
export * from './BulkSelection'
export * from './Button'
@@ -56,6 +57,7 @@ export * from './FlagImage'
export * from './FloatingVariablesSuggestions'
export * from './FramerComponents'
export * from './GenericInfoCard'
+export * from './GenericModal'
export * from './GenericSectionErrorState'
export * from './GitCommitInfoGeneric'
export * from './GitProviderIcon'
@@ -79,6 +81,7 @@ export * from './ModalSidebarPanel'
export * from './NumbersCount'
export * from './PhoneInput'
export * from './Plugin'
+export * from './Popover'
export * from './ProgressBar'
export { default as QRCode } from './QRCode'
export * from './ReactSelect'
diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx
index b11bccb57..bd157d487 100644
--- a/src/Shared/Helpers.tsx
+++ b/src/Shared/Helpers.tsx
@@ -61,6 +61,7 @@ import {
GitTriggers,
IntersectionChangeHandler,
IntersectionOptions,
+ Node,
Nodes,
PreventOutsideFocusProps,
TargetPlatformItemDTO,
@@ -714,3 +715,22 @@ export const smoothScrollToTop = (scrollContainer: HTMLElement, targetPosition:
return controls
}
+
+export const getGroupVersionFromApiVersion = (apiVersion: string): Pick => {
+ if (!apiVersion || apiVersion === '/') {
+ return { group: '', version: '' }
+ }
+
+ const parts = apiVersion.split('/')
+
+ if (parts.length === 1) {
+ return { group: '', version: parts[0] }
+ }
+
+ if (parts.length === 2) {
+ return { group: parts[0], version: parts[1] }
+ }
+
+ // If the apiVersion has more than two parts, we consider the first part as group and the rest as version
+ return { group: parts[0], version: parts.slice(1).join('/') }
+}
diff --git a/src/Shared/Providers/MainContextProvider.tsx b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
similarity index 96%
rename from src/Shared/Providers/MainContextProvider.tsx
rename to src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
index b8f1238ab..e0ac48904 100644
--- a/src/Shared/Providers/MainContextProvider.tsx
+++ b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
@@ -18,7 +18,6 @@ import { createContext, useContext } from 'react'
import { MainContext, MainContextProviderProps } from './types'
-// TODO: (Arun) - Move to separate folder
const mainContext = createContext(null)
export const useMainContext = () => {
diff --git a/src/Shared/Providers/MainContextProvider/index.ts b/src/Shared/Providers/MainContextProvider/index.ts
new file mode 100644
index 000000000..7bd1e1720
--- /dev/null
+++ b/src/Shared/Providers/MainContextProvider/index.ts
@@ -0,0 +1,3 @@
+export * from './MainContextProvider'
+export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types'
+export { SidePanelTab } from './types'
diff --git a/src/Shared/Providers/types.ts b/src/Shared/Providers/MainContextProvider/types.ts
similarity index 92%
rename from src/Shared/Providers/types.ts
rename to src/Shared/Providers/MainContextProvider/types.ts
index c1d1cd9c9..20687c703 100644
--- a/src/Shared/Providers/types.ts
+++ b/src/Shared/Providers/MainContextProvider/types.ts
@@ -16,9 +16,15 @@
import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react'
-import { SERVER_MODE } from '../../Common'
-import { ServerInfo } from '../Components/Header/types'
-import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType, ToastManager } from '..'
+import { SERVER_MODE } from '../../../Common'
+import {
+ DevtronLicenseInfo,
+ EnvironmentDataValuesDTO,
+ IntelligenceConfig,
+ LicenseInfoDialogType,
+ ToastManager,
+} from '../..'
+import { ServerInfo } from '../../Components/Header/types'
export interface ReloadVersionConfigTypes {
bgUpdated: boolean
@@ -48,6 +54,7 @@ type AIAgentContextType = {
context: Record
}
+// Please make sure to make it optional if not required in gatekeeper
type CommonMainContextProps = {
setServerMode: (serverMode: SERVER_MODE) => void
isHelpGettingStartedClicked: boolean
@@ -90,7 +97,7 @@ type CommonMainContextProps = {
setIntelligenceConfig: Dispatch>
setAIAgentContext: (aiAgentContext: AIAgentContextType) => void
setSidePanelConfig: Dispatch>
-}
+} & Pick
export type MainContext = CommonMainContextProps &
(
diff --git a/src/Shared/Providers/index.ts b/src/Shared/Providers/index.ts
index 8ad4a382f..17f612fb7 100644
--- a/src/Shared/Providers/index.ts
+++ b/src/Shared/Providers/index.ts
@@ -17,6 +17,4 @@
export * from './ImageSelectionUtility'
export * from './MainContextProvider'
export * from './ThemeProvider'
-export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types'
-export { SidePanelTab } from './types'
export * from './UserEmailProvider'
diff --git a/src/Shared/Services/types.ts b/src/Shared/Services/types.ts
index 2d98e6c76..54ca9fc7c 100644
--- a/src/Shared/Services/types.ts
+++ b/src/Shared/Services/types.ts
@@ -60,4 +60,5 @@ export interface EnvironmentDataValuesDTO extends Pick = {
+ [ComponentSizeType.xxxs]: 'py-1 fs-12 lh-20',
[ComponentSizeType.xxs_small_icon]: 'py-1 fs-12 lh-20',
[ComponentSizeType.xxs]: 'py-1 fs-12 lh-20',
[ComponentSizeType.xs]: 'py-1 fs-12 lh-20',
@@ -445,6 +447,7 @@ export const COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP: Record = {
+ [ComponentSizeType.xxxs]: 'px-5',
[ComponentSizeType.xxs_small_icon]: 'px-4',
[ComponentSizeType.xxs]: 'px-5',
[ComponentSizeType.xs]: 'px-5',
@@ -455,6 +458,7 @@ export const COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP: Record = {
+ [ComponentSizeType.xxxs]: 14,
[ComponentSizeType.xxs_small_icon]: 12,
[ComponentSizeType.xxs]: 14,
[ComponentSizeType.xs]: 14,
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
index 5c74fe3aa..bd8c4a156 100644
--- a/src/Shared/types.ts
+++ b/src/Shared/types.ts
@@ -139,6 +139,7 @@ export enum Nodes {
Overview = 'Overview',
MonitoringDashboard = 'MonitoringDashboard',
UpgradeCluster = 'UpgradeCluster',
+ ResourceRecommender = 'ResourceRecommender',
}
// FIXME: This should be `typeof Nodes[keyof typeof Nodes]` instead since the key and values are not the same. Same to be removed from duplications in dashboard
@@ -892,6 +893,15 @@ interface CommonTabArgsType {
* @default false
*/
shouldRemainMounted?: boolean
+ /**
+ * @default false
+ * If true, tab would contain alpha as badge next to the title
+ */
+ isAlpha?: boolean
+ /**
+ * On tab stop, i.e by pressing cross icon on alive tab [fixed tab expanding on click of tab and remains expanded on other tab click], tab will reset the tab to this default URL if provided
+ */
+ defaultUrl?: string | null
}
export type InitTabType = Omit &
@@ -1034,6 +1044,7 @@ export enum CIPipelineNodeType {
LINKED_CI = 'LINKED-CI',
JOB_CI = 'JOB-CI',
LINKED_CD = 'LINKED_CD',
+ CI_CD = 'CI_CD',
}
export interface ChangeCIPayloadType {
@@ -1250,6 +1261,7 @@ export interface DeploymentStatusDetailsType {
timelines: DeploymentStatusDetailsTimelineType[]
wfrStatus?: WorkflowRunnerStatusDTO
isDeploymentWithoutApproval: boolean
+ deploymentAppType: DeploymentAppTypes
}
export type DeploymentStatusTimelineType =
@@ -1312,6 +1324,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
deploymentErrorMessage: string
nextTimelineToProcess: DeploymentStatusTimelineType
} | null
+ deploymentAppType: DeploymentAppTypes
}
export interface IntelligenceConfig {
diff --git a/src/index.ts b/src/index.ts
index 4ad98de18..5939e8487 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -167,9 +167,14 @@ export interface customEnv {
*/
FEATURE_MANAGE_TRAFFIC_ENABLE?: boolean
FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE?: boolean
+ /**
+ * If true, will add flux option to deployment types in devtron apps and devtron charts
+ * @default false
+ */
+ FEATURE_FLUX_DEPLOYMENTS_ENABLE?: boolean
+ FEATURE_LINK_EXTERNAL_FLUX_ENABLE?: boolean
/**
* If true, online/offline connectivity banner is enabled
- *
* @default true
*/
FEATURE_INTERNET_CONNECTIVITY_ENABLE?: boolean
- {/* Info */}
- 
-
-
- {/* Content */}
-
-
-
- - {changeCIPayload - ? WORKFLOW_OPTIONS_MODAL.CHANGE_CI_TEXT - : WORKFLOW_OPTIONS_MODAL.ACTION_TEXT} -
- -- {changeCIPayload - ? WORKFLOW_OPTIONS_MODAL.CHANGE_CI_NOTE - : WORKFLOW_OPTIONS_MODAL.ACTION_NOTE} -
-
-
-
+ // USE-EFFECTS
+ useEffect(() => {
+ if (changeCIPayload && workflows) {
+ const currentWorkflow = workflows.find((workflow) => +workflow.id === changeCIPayload.appWorkflowId)
+ if (!currentWorkflow) {
+ handleFlowCompletion()
+ ToastManager.showToast({
+ variant: ToastVariantType.error,
+ description: TOAST_MESSAGES.WORKFLOW_NOT_AVAILABLE,
+ })
+ }
+ }
+ }, [workflows, changeCIPayload])
-
-
-
- {window._env_.ENABLE_CI_JOB && (
-
-
- {WORKFLOW_OPTIONS_MODAL_TYPES.JOB}
+ return (
+
-
+
+
)
}
diff --git a/src/Shared/Components/WorkflowOptionsModal/constants.ts b/src/Shared/Components/WorkflowOptionsModal/constants.ts
new file mode 100644
index 000000000..54d97d74c
--- /dev/null
+++ b/src/Shared/Components/WorkflowOptionsModal/constants.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WorkflowNodeType } from '@Common/Types'
+import { CIPipelineNodeType } from '@Shared/types'
+
+import { SourceTypeCardProps } from './types'
+
+export const SOURCE_TYPE_CARD_VARIANTS = {
+ BUILD: {
+ BUILD_AND_DEPLOY_FROM_SOURCE_CODE: {
+ title: 'Build & Deploy from Source Code',
+ subtitle: 'Build container image from a Git repo and deploy to an environment.',
+ dataTestId: 'build-and-deploy-from-source-code-button',
+ type: CIPipelineNodeType.CI_CD,
+ icons: [
+ { name: 'ic-git-branch', color: 'N700' },
+ { name: 'ic-build-color', color: null },
+ { name: 'ic-deploy-color', color: null },
+ ],
+ },
+ BUILD_FROM_SOURCE_CODE: {
+ title: 'Build from Source Code',
+ subtitle: 'Build container image from a Git repo',
+ dataTestId: 'build-from-source-code-button',
+ type: CIPipelineNodeType.CI,
+ icons: [
+ { name: 'ic-git-branch', color: 'N700' },
+ { name: 'ic-build-color', color: null },
+ ],
+ },
+ JOB: {
+ title: 'Create a Job',
+ subtitle: 'Create and trigger a job. Such as trigger Jenkins build trigger',
+ dataTestId: 'job-ci-pipeline-button',
+ type: CIPipelineNodeType.JOB_CI,
+ icons: [{ name: 'ic-job-color', color: null }],
+ },
+ },
+ RECEIVE: {
+ EXTERNAL_SERVICE: {
+ title: 'Deploy Image from External Service',
+ subtitle: 'Receive images from an external service (eg. jenkins) & deploy to an environment.',
+ dataTestId: 'deploy-image-external-service-link',
+ type: WorkflowNodeType.WEBHOOK as const,
+ icons: [
+ { name: 'ic-webhook', color: null },
+ { name: 'ic-deploy-color', color: null },
+ ],
+ },
+ LINKED_PIPELINE: {
+ title: 'Linked Build Pipeline',
+ subtitle: 'Use image built by another build pipeline within Devtron.',
+ dataTestId: 'linked-build-pipeline-button',
+ type: CIPipelineNodeType.LINKED_CI,
+ icons: [{ name: 'ic-linked-build-color', color: null }],
+ },
+ },
+ JOB: {
+ JOB: {
+ title: 'Create a Job',
+ subtitle: 'Create and trigger a job. Such as trigger Jenkins build trigger',
+ dataTestId: 'job-ci-pipeline-button',
+ type: CIPipelineNodeType.JOB_CI,
+ icons: [{ name: 'ic-job-color', color: null }],
+ },
+ },
+} satisfies Record<
+ string,
+ Record- {WORKFLOW_OPTIONS_MODAL_TYPES.DEFAULT} -
- -- {WORKFLOW_OPTIONS_MODAL_TYPES.RECIEVE} -
+ const resetStateToDefault = () => { + setLoadingWebhook(false) + } + useEffect(() => { + if (!open) { + resetStateToDefault() + } + }, [open]) + + // RENDERERS + const renderSourceTypeCards = (title: string, cardsConfig: typeof buildWorkflowCards) => + !!cardsConfig.length && ( +
+
+ )
- {!!linkedCDSourceVariant && (
- {title}
+
+ {cardsConfig.map((props) => (
+
- {WORKFLOW_OPTIONS_MODAL_TYPES.JOB}
+ return (
+
+
+
+ {/* HEADER */}
+
+
+ {changeCIPayload ? 'Change image source' : 'Workflow templates'}
+
+
+ {changeCIPayload
+ ? 'Deploy to environments in the workflow from another image source'
+ : 'Select a template to create a workflow'}
+
+ }
+ variant={ButtonVariantType.secondary}
+ style={ButtonStyleType.negativeGrey}
+ size={ComponentSizeType.medium}
+ onClick={onClose}
+ showAriaLabelInTippy={false}
+ />
+
-
+ {/* HEADER */}
+
-
+
-
+
+ }
+ variant={ButtonVariantType.secondary}
+ style={ButtonStyleType.negativeGrey}
+ size={ComponentSizeType.medium}
+ onClick={onClose}
+ showAriaLabelInTippy={false}
+ />
+ + {changeCIPayload ? 'Change image source' : 'Workflow templates'} +
++ {changeCIPayload + ? 'Deploy to environments in the workflow from another image source' + : 'Select a template to create a workflow'}
+
+ {renderSourceTypeCards('Build Container Image', buildWorkflowCards)}
+ {renderSourceTypeCards('Receive Container Image', receiveWorkflowCards)}
+ {renderSourceTypeCards('Create Job', jobWorkflowCards)}
+