- {headerName && (
-
- {headerName}
-
+ {(headerImage || headerName || onClose) && (
+
+ {!!onClose && (
+
}
+ variant={ButtonVariantType.secondary}
+ style={ButtonStyleType.negativeGrey}
+ size={ComponentSizeType.xs}
+ onClick={onClose}
+ showAriaLabelInTippy={false}
+ />
+ )}
+ {(headerImage || headerName) && (
+
+ {headerImage && (
+
+ )}
+ {headerName && (
+
+ {headerName}
+
+ )}
+
+ )}
+
)}
{additionalHeaderInfo && additionalHeaderInfo()}
{isBreadcrumbs && breadCrumbs()}
diff --git a/src/Shared/Components/Header/types.ts b/src/Shared/Components/Header/types.ts
index 5a6563a10..d142a3950 100644
--- a/src/Shared/Components/Header/types.ts
+++ b/src/Shared/Components/Header/types.ts
@@ -22,6 +22,7 @@ import { DOCUMENTATION } from '../DocLink'
export interface PageHeaderType {
headerName?: string
+ headerImage?: string
showTabs?: boolean
additionalHeaderInfo?: () => JSX.Element
renderHeaderTabs?: () => JSX.Element
@@ -35,6 +36,7 @@ export interface PageHeaderType {
tippyMessage?: string
onClickTippyButton?: () => void
}
+ onClose?: () => void
}
export interface ServerInfo {
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 9b0e8a49e..410648573 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -18,6 +18,7 @@ import { ReactComponent as ICAther } from '@IconsV2/ic-ather.svg'
import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg'
import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg'
+import { ReactComponent as ICBgEnvironment } from '@IconsV2/ic-bg-environment.svg'
import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg'
import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg'
@@ -133,6 +134,7 @@ import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
import { ReactComponent as ICLego } from '@IconsV2/ic-lego.svg'
import { ReactComponent as ICLightning } from '@IconsV2/ic-lightning.svg'
import { ReactComponent as ICLightningFill } from '@IconsV2/ic-lightning-fill.svg'
+import { ReactComponent as ICLink } from '@IconsV2/ic-link.svg'
import { ReactComponent as ICLinkedBuildColor } from '@IconsV2/ic-linked-build-color.svg'
import { ReactComponent as ICListBullets } from '@IconsV2/ic-list-bullets.svg'
import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg'
@@ -168,6 +170,7 @@ 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'
import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.svg'
+import { ReactComponent as ICResizeHandle } from '@IconsV2/ic-resize-handle.svg'
import { ReactComponent as ICRocketGear } from '@IconsV2/ic-rocket-gear.svg'
import { ReactComponent as ICRocketLaunch } from '@IconsV2/ic-rocket-launch.svg'
import { ReactComponent as ICSelected } from '@IconsV2/ic-selected.svg'
@@ -241,6 +244,7 @@ export const iconMap = {
'ic-azure-aks': ICAzureAks,
'ic-azure': ICAzure,
'ic-bg-cluster': ICBgCluster,
+ 'ic-bg-environment': ICBgEnvironment,
'ic-bharatpe': ICBharatpe,
'ic-bitbucket': ICBitbucket,
'ic-book-open': ICBookOpen,
@@ -356,6 +360,7 @@ export const iconMap = {
'ic-lego': ICLego,
'ic-lightning-fill': ICLightningFill,
'ic-lightning': ICLightning,
+ 'ic-link': ICLink,
'ic-linked-build-color': ICLinkedBuildColor,
'ic-list-bullets': ICListBullets,
'ic-livspace': ICLivspace,
@@ -391,6 +396,7 @@ export const iconMap = {
'ic-play-outline': ICPlayOutline,
'ic-quay': ICQuay,
'ic-quote': ICQuote,
+ 'ic-resize-handle': ICResizeHandle,
'ic-rocket-gear': ICRocketGear,
'ic-rocket-launch': ICRocketLaunch,
'ic-selected': ICSelected,
diff --git a/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx b/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx
index eb8315a25..032f2f69b 100644
--- a/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx
+++ b/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx
@@ -27,7 +27,7 @@ const ModalSidebarPanel = ({
{(icon || heading) && (
-
+
{icon && icon}
{heading &&
{heading}
}
diff --git a/src/Shared/Components/Popover/Popover.component.tsx b/src/Shared/Components/Popover/Popover.component.tsx
index f7e027e13..2d890eb18 100644
--- a/src/Shared/Components/Popover/Popover.component.tsx
+++ b/src/Shared/Components/Popover/Popover.component.tsx
@@ -25,7 +25,11 @@ export const Popover = ({
{open && (
-
+
{children}
diff --git a/src/Shared/Components/Popover/types.ts b/src/Shared/Components/Popover/types.ts
index b46f54c38..d9510e9ca 100644
--- a/src/Shared/Components/Popover/types.ts
+++ b/src/Shared/Components/Popover/types.ts
@@ -58,6 +58,10 @@ export interface UsePopoverProps {
* @default 'menu'
*/
variant?: 'menu' | 'overlay'
+ /**
+ * Disable popover close
+ */
+ disableClose?: boolean
}
/**
diff --git a/src/Shared/Components/Popover/usePopover.hook.ts b/src/Shared/Components/Popover/usePopover.hook.ts
index 04db85cf5..225d5d597 100644
--- a/src/Shared/Components/Popover/usePopover.hook.ts
+++ b/src/Shared/Components/Popover/usePopover.hook.ts
@@ -1,5 +1,7 @@
import { useLayoutEffect, useRef, useState } from 'react'
+import { stopPropagation } from '@Common/Helper'
+
import { UsePopoverProps, UsePopoverReturnType } from './types'
import {
getPopoverActualPositionAlignment,
@@ -17,6 +19,7 @@ export const usePopover = ({
onOpen,
onPopoverKeyDown,
onTriggerKeyDown,
+ disableClose = false,
}: UsePopoverProps): UsePopoverReturnType => {
// STATES
const [open, setOpen] = useState(false)
@@ -44,6 +47,9 @@ export const usePopover = ({
}
const closePopover = () => {
+ if (disableClose) {
+ return
+ }
updateOpenState(false)
const triggerButton = triggerRef.current?.querySelector('button')
triggerButton?.blur()
@@ -143,8 +149,8 @@ export const usePopover = ({
id,
ref: popover,
role: 'listbox',
- 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' : ''}`,
+ onClick: stopPropagation,
onKeyDown: handlePopoverKeyDown,
style: {
width: !isAutoWidth ? `${width}px` : undefined,
diff --git a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
index 76cd881fa..449925a27 100644
--- a/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
+++ b/src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx
@@ -20,7 +20,7 @@ export const GroupedFilterSelectPicker = ({
// REFS
const shouldFocusActionMenuRef = useRef(false)
- const triggerButtonRef = useRef()
+ const triggerButtonRef = useRef(null)
// HOOKS
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
@@ -61,7 +61,7 @@ export const GroupedFilterSelectPicker = ({
}
return selectedActionMenuItem ? (
-
+
({
type="button"
ref={triggerButtonRef}
data-testid={id}
- className="grouped-filter-select-picker__button dc__transparent px-7 py-5 border__primary br-4 flex dc__gap-6 bg__hover bg__secondary"
+ className="grouped-filter-select-picker__button dc__transparent px-7 py-5 border__primary br-4 flex left dc__gap-6 bg__hover bg__secondary w-100"
>
Filter
diff --git a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
index 42874ca2c..72e2b2ef1 100644
--- a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
+++ b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
@@ -40,8 +40,7 @@ import {
SelectPickerGroupHeading,
SelectPickerInput,
SelectPickerMenuList,
- SelectPickerMultiValueLabel,
- SelectPickerMultiValueRemove,
+ SelectPickerMultiValue,
SelectPickerOption,
SelectPickerValueContainer,
} from './common'
@@ -186,6 +185,7 @@ import { getCommonSelectStyle, getSelectPickerOptionByValue } from './utils'
const SelectPicker = ({
error,
icon,
+ keyboardShortcut,
helperText,
placeholder = 'Select an option',
label,
@@ -212,7 +212,7 @@ const SelectPicker = ({
menuListFooterConfig,
isCreatable = false,
onCreateOption,
- closeMenuOnSelect = false,
+ closeMenuOnSelect: _closeMenuOnSelect,
shouldShowNoOptionsMessage = true,
shouldRenderTextArea = false,
onKeyDown,
@@ -226,6 +226,7 @@ const SelectPicker = ({
labelTooltipConfig,
hideFormFieldInfo,
autoFocus,
+ showCheckboxForMultiSelect = true,
...props
}: SelectPickerProps) => {
const innerRef = useRef['selectRef']['current']>(null)
@@ -249,26 +250,25 @@ const SelectPicker = ({
getIsOptionValid = () => true,
customDisplayText = null,
} = multiSelectProps
- const controlShouldRenderValue = _controlShouldRenderValue && !customDisplayText
- // Only large variant is supported for multi select picker
- const selectSize = isMulti && controlShouldRenderValue ? ComponentSizeType.large : size
+ const controlShouldRenderValue = _controlShouldRenderValue && !customDisplayText
const shouldShowSelectedOptionIcon = !isMulti && showSelectedOptionIcon
const isSelectSearchable = !shouldRenderCustomOptions && isSearchable
+ const closeMenuOnSelect = _closeMenuOnSelect ?? !isMulti
// Option disabled, group null state, checkbox hover, create option visibility (scroll reset on search)
const selectStyles = useMemo(
() =>
getCommonSelectStyle({
error,
- size: selectSize,
+ size,
menuSize,
variant,
getIsOptionValid,
isGroupHeadingSelectable,
shouldMenuAlignRight,
}),
- [error, selectSize, menuSize, variant, isGroupHeadingSelectable, shouldMenuAlignRight],
+ [error, size, menuSize, variant, isGroupHeadingSelectable, shouldMenuAlignRight],
)
// Used to show the create new option for creatable select and the option(s) doesn't have the input value
@@ -307,9 +307,9 @@ const SelectPicker = ({
[disableDescriptionEllipsis],
)
- const renderMultiValueLabel = (
- multiValueLabelProps: MultiValueProps, true>,
- ) =>
+ const renderMultiValue = (multiValueProps: MultiValueProps, true>) => (
+
+ )
const renderGroupHeading = useCallback(
(groupHeadingProps: GroupHeadingProps>) => (
@@ -463,7 +463,6 @@ const SelectPicker = ({
shouldRenderCustomOptions={shouldRenderCustomOptions || false}
isMulti={isMulti}
ref={selectRef}
- autoFocus={autoFocus}
components={{
IndicatorSeparator: null,
LoadingIndicator: null,
@@ -473,8 +472,7 @@ const SelectPicker = ({
MenuList: SelectPickerMenuList,
ClearIndicator: SelectPickerClearIndicator,
ValueContainer: renderValueContainer,
- MultiValueLabel: renderMultiValueLabel,
- MultiValueRemove: SelectPickerMultiValueRemove,
+ MultiValue: renderMultiValue,
GroupHeading: renderGroupHeading,
NoOptionsMessage: renderNoOptionsMessage,
LoadingMessage: renderLoadingMessage,
@@ -484,7 +482,7 @@ const SelectPicker = ({
DropdownIndicator: () => null,
}),
}}
- closeMenuOnSelect={!isMulti || closeMenuOnSelect}
+ closeMenuOnSelect={closeMenuOnSelect}
allowCreateWhileLoading={false}
isValidNewOption={isValidNewOption}
createOptionPosition="first"
@@ -493,6 +491,8 @@ const SelectPicker = ({
inputValue={props.inputValue ?? inputValue}
onInputChange={handleInputChange}
icon={icon}
+ keyboardShortcut={keyboardShortcut}
+ showCheckboxForMultiSelect={showCheckboxForMultiSelect}
showSelectedOptionIcon={shouldShowSelectedOptionIcon}
onKeyDown={handleKeyDown}
shouldRenderTextArea={shouldRenderTextArea}
diff --git a/src/Shared/Components/SelectPicker/common.tsx b/src/Shared/Components/SelectPicker/common.tsx
index af8245887..38d0d32af 100644
--- a/src/Shared/Components/SelectPicker/common.tsx
+++ b/src/Shared/Components/SelectPicker/common.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { ChangeEvent, Children } from 'react'
+import { ChangeEvent, Children, MouseEventHandler } from 'react'
import {
ClearIndicatorProps,
components,
@@ -24,14 +24,12 @@ import {
MenuListProps,
MultiValue,
MultiValueProps,
- MultiValueRemoveProps,
OptionProps,
ValueContainerProps,
} from 'react-select'
import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
import { Checkbox } from '@Common/Checkbox'
import { ReactSelectInputAction } from '@Common/Constants'
import { noop } from '@Common/Helper'
@@ -42,6 +40,7 @@ import { ComponentSizeType } from '@Shared/constants'
import { isNullOrUndefined } from '@Shared/Helpers'
import { Button, ButtonProps, ButtonVariantType } from '../Button'
+import { Chip } from '../Chip'
import { Icon } from '../Icon'
import { SelectPickerGroupHeadingProps, SelectPickerOptionType, SelectPickerProps } from './type'
import { getGroupCheckboxValue } from './utils'
@@ -71,9 +70,13 @@ export const SelectPickerDropdownIndicator = (
) => {
const {
isDisabled,
- selectProps: { isLoading },
+ selectProps: { isLoading, keyboardShortcut },
} = props
+ if (keyboardShortcut) {
+ return null
+ }
+
return (
{isLoading ? (
@@ -97,7 +100,7 @@ export const SelectPickerControl = (props: ControlProps(props: ControlProps{iconToDisplay}
)}
{children}
+ {keyboardShortcut && (
+
+ {keyboardShortcut}
+
+ )}
)
}
@@ -189,7 +197,7 @@ export const SelectPickerOption =
({
const {
label,
data,
- selectProps: { isMulti },
+ selectProps: { isMulti, showCheckboxForMultiSelect },
selectOption,
isDisabled,
isSelected,
@@ -211,7 +219,7 @@ export const SelectPickerOption = ({
- {isMulti && !isCreatableOption && (
+ {isMulti && showCheckboxForMultiSelect && !isCreatableOption && (
(props: MenuListProps({
+export const SelectPickerMultiValue = ({
getIsOptionValid,
...props
}: MultiValueProps, true> &
Pick['multiSelectProps'], 'getIsOptionValid'>) => {
- const { data, selectProps } = props
- const isOptionValid = getIsOptionValid(data)
- const iconToDisplay = isOptionValid ? ((data.startIcon || data.endIcon) ?? null) :
+ const {
+ data,
+ isMulti,
+ removeProps: { onClick },
+ } = props
+ const isOptionValid = getIsOptionValid?.(data) ?? true
+ const { startIcon, endIcon } = data
+ const iconToDisplay = (startIcon || endIcon) ?? null
+
+ const renderStartIcon = () =>
+ iconToDisplay && (
+
+ {iconToDisplay}
+
+ )
return (
-
- {iconToDisplay && (
-
- {iconToDisplay}
-
- )}
-
-
+ }
+ variant={ButtonVariantType.borderLess}
+ style={ButtonStyleType.neutral}
+ size={ComponentSizeType.xs}
+ component={ButtonComponentType.anchor}
+ anchorProps={{
+ href: url,
+ }}
+ />
+
+)
+
+export const TempAppWindow = () => {
+ // HOOKS
+ const { pathname, search } = useLocation()
+ const { tempAppWindowConfig, setTempAppWindowConfig } = useMainContext()
+
+ // REFS
+ const currentPathName = useRef(getCurrentPathName({ pathname, search }))
+
+ // HANDLERS
+ const handleClose = () => {
+ setTempAppWindowConfig({ open: false, title: null, url: null, component: null, image: null })
+ }
+
+ useEffect(() => {
+ if (getCurrentPathName({ pathname, search }) !== currentPathName.current) {
+ handleClose()
+ }
+ }, [pathname])
+
+ if (!tempAppWindowConfig.open) {
+ return null
+ }
+
+ const { title, url, image, showOpenInNewTab = false, component } = tempAppWindowConfig
+
+ return (
+
+
+ {!!url && (
+
+ )}
+ {component}
+
}
+ // do not use icon component as class is required
+ icon={}
onClick={closeToast}
dataTestId="close-toast"
ariaLabel="Close toast"
diff --git a/src/Shared/constants.tsx b/src/Shared/constants.tsx
index d8c8e4d3d..c5bfd815e 100644
--- a/src/Shared/constants.tsx
+++ b/src/Shared/constants.tsx
@@ -602,3 +602,6 @@ export const STRATEGY_TYPE_TO_TITLE_MAP: Record
>
-export interface PreventOutsideFocusProps {
- identifier: string
- preventFocus: boolean
-}
-
export interface PolicyBlockInfo {
isBlocked: boolean
blockedBy: TriggerBlockType
diff --git a/src/index.ts b/src/index.ts
index 43a66d78d..294afab0a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,6 +16,8 @@
import { OverrideMergeStrategyType } from '@Pages/Applications'
+import '@tanstack/react-query'
+
export interface customEnv {
SENTRY_ENV?: string
SENTRY_ERROR_ENABLED?: boolean
@@ -132,12 +134,6 @@ export interface customEnv {
* @default false
*/
FEATURE_SWAP_TRAFFIC_ENABLE?: boolean
- /**
- * Enable cluster map
- *
- * @default true
- */
- FEATURE_CLUSTER_MAP_ENABLE?: boolean
/**
* @default true
*/
@@ -198,6 +194,23 @@ declare global {
}
}
+declare module '@tanstack/react-query' {
+ export interface QueryMeta {
+ /**
+ * Optional flag indicating whether to display a toast notification for errors.
+ * @default true
+ */
+ showToastError?: boolean
+ }
+ export interface MutationMeta {
+ /**
+ * Optional flag indicating whether to display a toast notification for errors.
+ * @default true
+ */
+ showToastError?: boolean
+ }
+}
+
export * from './Common'
export * from './Pages'
export * from './Shared'