) => {
+ if (window._env_.GA_ENABLED && ReactGA?.event)
+ ReactGA.event({
+ category,
+ action,
+ })
+}
diff --git a/src/Shared/Components/AppStatusModal/AppStatusBody.tsx b/src/Shared/Components/AppStatusModal/AppStatusBody.tsx
index b50a568b4..2acd08a47 100644
--- a/src/Shared/Components/AppStatusModal/AppStatusBody.tsx
+++ b/src/Shared/Components/AppStatusModal/AppStatusBody.tsx
@@ -169,7 +169,7 @@ export const AppStatusBody = ({
{/* Info card */}
-
+
{infoCardItems.map((item, index) => (
{
preventBodyScroll(true)
// Setting main as inert to that focus is trapped inside the new portal
preventOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, preventFocus: true })
+ preventOutsideFocus({ identifier: 'visible-modal', preventFocus: true })
+ preventOutsideFocus({ identifier: 'visible-modal-2', preventFocus: true })
return () => {
preventBodyScroll(false)
preventOutsideFocus({ identifier: DEVTRON_BASE_MAIN_ID, preventFocus: false })
+ preventOutsideFocus({ identifier: 'visible-modal', preventFocus: false })
+ preventOutsideFocus({ identifier: 'visible-modal-2', preventFocus: false })
}
}, [])
diff --git a/src/Shared/Components/Button/Button.component.tsx b/src/Shared/Components/Button/Button.component.tsx
index d8eb3a367..23e7d9e33 100644
--- a/src/Shared/Components/Button/Button.component.tsx
+++ b/src/Shared/Components/Button/Button.component.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { forwardRef, MutableRefObject, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import { Progressing } from '@Common/Progressing'
@@ -26,78 +26,96 @@ import { getButtonDerivedClass, getButtonIconClassName, getButtonLoaderSize } fr
import './button.scss'
-const ButtonElement = ({
- component = ButtonComponentType.button,
- anchorProps,
- linkProps,
- buttonProps,
- onClick,
- elementRef,
- ...props
-}: PropsWithChildren<
- Omit<
- ButtonProps,
- | 'text'
- | 'variant'
- | 'size'
- | 'style'
- | 'startIcon'
- | 'endIcon'
- | 'showTooltip'
- | 'tooltipProps'
- | 'dataTestId'
- | 'isLoading'
- | 'ariaLabel'
- | 'showAriaLabelInTippy'
- > & {
- className: string
- 'data-testid': ButtonProps['dataTestId']
- 'aria-label': ButtonProps['ariaLabel']
- elementRef: MutableRefObject
- }
->) => {
- // Added the specific class to ensure that the link override is applied
- const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
+const ButtonElement = forwardRef<
+ HTMLButtonElement | HTMLAnchorElement,
+ PropsWithChildren<
+ Omit<
+ ButtonProps,
+ | 'text'
+ | 'variant'
+ | 'size'
+ | 'style'
+ | 'startIcon'
+ | 'endIcon'
+ | 'showTooltip'
+ | 'tooltipProps'
+ | 'dataTestId'
+ | 'isLoading'
+ | 'ariaLabel'
+ | 'showAriaLabelInTippy'
+ > & {
+ className: string
+ 'data-testid': ButtonProps['dataTestId']
+ 'aria-label': ButtonProps['ariaLabel']
+ elementRef: MutableRefObject
+ }
+ >
+>(
+ (
+ { component = ButtonComponentType.button, anchorProps, linkProps, buttonProps, onClick, elementRef, ...props },
+ forwardedRef,
+ ) => {
+ // Added the specific class to ensure that the link override is applied
+ const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
- if (component === ButtonComponentType.link) {
- return (
- ['onClick']}
- ref={elementRef as MutableRefObject}
- />
- )
- }
+ // NOTE: If the ref callback is re-created every render (i.e., not wrapped in useCallback),
+ // it will be invoked on every render: first with null, then with the new node.
+ const refCallback = useCallback((el: HTMLButtonElement | HTMLAnchorElement) => {
+ if (!el) {
+ return
+ }
+
+ // eslint-disable-next-line no-param-reassign
+ elementRef.current = el
+
+ if (forwardedRef && typeof forwardedRef === 'object' && Object.hasOwn(forwardedRef, 'current')) {
+ // eslint-disable-next-line no-param-reassign
+ forwardedRef.current = el
+ } else if (typeof forwardedRef === 'function') {
+ forwardedRef(el)
+ }
+ }, [])
+
+ if (component === ButtonComponentType.link) {
+ return (
+ ['onClick']}
+ ref={refCallback}
+ />
+ )
+ }
+
+ if (component === ButtonComponentType.anchor) {
+ return (
+ ['onClick']}
+ ref={refCallback}
+ >
+ {props.children}
+
+ )
+ }
- if (component === ButtonComponentType.anchor) {
return (
- ['onClick']}
- ref={elementRef as MutableRefObject}
- >
- {props.children}
-
+ ref={refCallback}
+ />
)
- }
-
- return (
-
{hasPreviousDeploymentConfigNotFoundError && (
-
)}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
index edfc4bbe8..f1bcdd2c8 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx
@@ -16,16 +16,16 @@
import { useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
-import Tippy from '@tippyjs/react'
import { CodeEditor } from '@Shared/Components/CodeEditor'
+import { ToggleResolveScopedVariables } from '@Shared/Components/ToggleResolveScopedVariables'
import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
-import { ReactComponent as ViewVariablesIcon } from '../../../../Assets/Icon/ic-view-variable-toggle.svg'
-import { MODES, Toggle, YAMLStringify } from '../../../../Common'
+import { MODES, YAMLStringify } from '../../../../Common'
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
-import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
+import { DeploymentTemplateHistoryType } from '../types'
import { DeploymentHistoryParamsType } from './types'
+import { renderDetailedValue } from './utils'
const DeploymentHistoryDiffView = ({
currentConfiguration,
@@ -85,21 +85,6 @@ const DeploymentHistoryDiffView = ({
setConvertVariables(!convertVariables)
}
- const tippyMsg = convertVariables ? 'Hide variables values' : 'Show variables values'
-
- const renderDetailedValue = (
- parentClassName: string,
- singleValue: DeploymentHistorySingleValue,
- dataTestId: string,
- ) => (
-
-
- {singleValue.displayName}
-
-
{singleValue.value}
-
- )
-
return (
{!previousConfigAvailable && (
@@ -164,18 +149,11 @@ const DeploymentHistoryDiffView = ({
>
{baseTemplateConfiguration?.codeEditorValue?.displayName}
{isVariablesAvailable && (
-
-
-
-
-
-
-
+
)}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.tsx
index 69ceea14c..63338f875 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.tsx
@@ -17,11 +17,12 @@
import moment from 'moment'
import { DATE_TIME_FORMATS, ERROR_STATUS_CODE } from '@Common/Constants'
+import { Icon } from '@Shared/Components/Icon'
import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
import { DeploymentStatus } from '@Shared/Components/StatusComponent'
import { DeploymentStageType } from '@Shared/constants'
-import { History } from '../types'
+import { DeploymentHistorySingleValue, History } from '../types'
import { renderPipelineDeploymentOptionDescription } from './helpers'
import { DeploymentHistoryConfigDiffProps } from './types'
@@ -88,3 +89,28 @@ export const isDeploymentHistoryConfigDiffNotFoundError =
(re
export const getDeploymentHistoryConfigDiffError = (res: PromiseSettledResult) =>
res.status === 'rejected' && res.reason?.code !== ERROR_STATUS_CODE.NOT_FOUND ? res.reason : null
+
+export const renderDetailedValue = (
+ parentClassName: string,
+ singleValue: DeploymentHistorySingleValue,
+ dataTestId: string,
+) => (
+
+
+
+ {singleValue.displayName}
+
+
{singleValue.value}
+
+ {singleValue.tooltipContent && (
+
+ )}
+
+ ),
+ }
+ : {}),
}
}
return pipelineConfigData
}
-export const prepareConfigMapAndSecretData = (
+const prepareConfigMapAndSecretData = (
rawData,
type: string,
historyData: DeploymentHistoryDetail,
@@ -277,24 +270,6 @@ export const prepareHistoryData = (
return historyData
}
-export const getDeploymentDiffSelector = (
- pipelineId: string,
- historyComponent,
- baseConfigurationId,
- historyComponentName,
-): Promise
=> {
- const url = getUrlWithSearchParams(
- `${ROUTES.RESOURCE_HISTORY_DEPLOYMENT}/${ROUTES.CONFIG_CD_PIPELINE}/${ResourceVersionType.v1}`,
- {
- baseConfigurationId,
- historyComponent: historyComponent.replace('-', '_').toUpperCase(),
- filterCriteria: `cd-pipeline|id|${pipelineId}`,
- historyComponentName,
- },
- )
- return get(url)
-}
-
export const getTriggerHistory = async ({
appId,
envId,
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index 8fe87ce26..82d789232 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -27,6 +27,7 @@ import {
PromotionApprovalMetadataType,
ReleaseTag,
ResponseType,
+ TooltipProps,
UserApprovalMetadataType,
useScrollable,
} from '../../../Common'
@@ -529,15 +530,12 @@ export interface DeploymentStatusDetailRowType extends Pick>
diff --git a/src/Shared/Components/CMCS/helpers.tsx b/src/Shared/Components/CMCS/helpers.tsx
index 5ae49ac39..1341e5a70 100644
--- a/src/Shared/Components/CMCS/helpers.tsx
+++ b/src/Shared/Components/CMCS/helpers.tsx
@@ -14,13 +14,11 @@
* limitations under the License.
*/
-import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
-import { InfoColourBar } from '@Common/index'
+import { InfoBlock } from '../InfoBlock'
export const renderHashiOrAwsDeprecatedInfo = () => (
-
Kubernetes External Secret (KES) has been deprecated and will be removed in the next Devtron
@@ -37,7 +35,6 @@ export const renderHashiOrAwsDeprecatedInfo = () => (
}
- Icon={ICWarningY5}
- iconSize={20}
+ variant="warning"
/>
)
diff --git a/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx b/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
index 583de9898..3b0e52ba4 100644
--- a/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
@@ -58,8 +58,7 @@ const ConfirmationModalBody = ({
const hideIcon = variant === ConfirmationModalVariantType.custom && !ButtonIcon
const disablePrimaryButton: boolean =
- ('disabled' in primaryButtonConfig && primaryButtonConfig.disabled) ||
- (confirmationKeyword && confirmationText.trim() !== confirmationKeyword)
+ !!primaryButtonConfig?.disabled || (confirmationKeyword && confirmationText.trim() !== confirmationKeyword)
const handleTriggerPrimaryActionButton = () => {
if (primaryButtonConfig && !disablePrimaryButton) {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
index 80c2912e5..b8a9d0f95 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
@@ -51,3 +51,26 @@
}
}
}
+
+.config-strategy-radio {
+ .form__radio-item {
+ border: none !important;
+ }
+
+ .form__radio-item-content {
+ padding-block: 6px;
+ padding-inline: 0px;
+
+ .radio__button {
+ margin-right: 8px;
+ margin-top: 2px;
+ }
+
+ .radio__title {
+ font-size: 13px;
+ line-height: 20px;
+ font-weight: 400;
+ color: var(--N900) !important;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index 13a834b72..6b44d7db4 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -15,6 +15,7 @@
*/
import { SortingOrder } from '@Common/Constants'
+import { RadioGroupItemProps, RadioGroupProps } from '@Common/Types'
import {
AppEnvDeploymentConfigDTO,
ConfigMapSecretDataConfigDatumDTO,
@@ -27,7 +28,7 @@ import { ManifestTemplateDTO } from '@Pages/Applications'
import { DeploymentHistoryDetail } from '../CICDHistory'
import { CollapseProps } from '../Collapse'
import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
-import { SelectPickerProps } from '../SelectPicker'
+import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
export enum DeploymentConfigDiffState {
NO_DIFF = 'noDiff',
@@ -53,6 +54,18 @@ export interface DeploymentConfigListItem {
groupHeader?: string
}
+interface DeploymentConfigDiffRadioConfig extends Pick {
+ title: string
+ options: (Pick &
+ Pick, 'label' | 'value' | 'description' | 'tooltipProps'>)[]
+ groupValue: string
+}
+
+export interface DeploymentConfigDiffRadioSelectConfig {
+ triggerElementTitle: string
+ radioGroupConfig: DeploymentConfigDiffRadioConfig[]
+}
+
export type DeploymentConfigDiffSelectPickerProps =
| {
type: 'string'
@@ -66,6 +79,13 @@ export type DeploymentConfigDiffSelectPickerProps =
text?: never
selectPickerProps: SelectPickerProps
}
+ | {
+ type: 'radio-group'
+ id: string
+ text?: never
+ radioSelectConfig: DeploymentConfigDiffRadioSelectConfig
+ selectPickerProps?: never
+ }
export interface DeploymentConfigDiffNavigationItem
extends Pick, 'href' | 'title' | 'onClick'> {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index 46c27b858..5085529e5 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -667,6 +667,23 @@ const getConfigDataWithResolvedDeploymentTemplate = (
}
}
+const removeTooltipContent = (
+ valuesObj: Record,
+): Record => {
+ if (!valuesObj) return valuesObj
+ return Object.fromEntries(
+ Object.entries(valuesObj).map(([key, val]) => {
+ if (val && typeof val === 'object' && 'tooltipContent' in val) {
+ // Remove tooltipContent so that diff is not checked in this property
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { tooltipContent, ...rest } = val
+ return [key, rest]
+ }
+ return [key, val]
+ }),
+ )
+}
+
/**
* Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
*
@@ -738,6 +755,17 @@ export const getAppEnvDeploymentConfigList =
+ )
+ }
+
const { selectPickerProps } = configItem
return (
@@ -162,9 +172,9 @@ export const DeploymentConfigDiffMain = ({
return (
)
}
@@ -260,7 +270,7 @@ export const DeploymentConfigDiffMain = ({
{renderHeaderSelectors(selectorsConfig.secondaryConfig)}
+
{renderSortButton()}
{renderScopeVariablesButton()}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffRadioSelect.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffRadioSelect.tsx
new file mode 100644
index 000000000..c2c03762e
--- /dev/null
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffRadioSelect.tsx
@@ -0,0 +1,86 @@
+import RadioGroup from '@Common/RadioGroup'
+import RadioGroupItem from '@Common/RadioGroupItem'
+import { ComponentSizeType } from '@Shared/constants'
+
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
+import { Icon } from '../Icon'
+import { Popover, usePopover, UsePopoverProps } from '../Popover'
+import { DeploymentConfigDiffRadioSelectConfig } from './DeploymentConfigDiff.types'
+
+import './DeploymentConfigDiff.scss'
+
+const DeploymentConfigDiffRadioSelect = ({
+ radioSelectConfig,
+ position = 'bottom',
+}: {
+ radioSelectConfig: DeploymentConfigDiffRadioSelectConfig
+ position?: UsePopoverProps['position']
+}) => {
+ const { open, closePopover, overlayProps, popoverProps, triggerProps, scrollableRef } = usePopover({
+ id: 'deployment-config',
+ width: 300,
+ position,
+ variant: 'overlay',
+ })
+
+ const { triggerElementTitle, radioGroupConfig } = radioSelectConfig
+
+ const renderTriggerElement = () => (
+
+ {triggerElementTitle}
+
+
+ )
+
+ return (
+
+ {/* TODO: Remove any after syncing with develop */}
+
+
+ Deployment with Configuration
+ }
+ showAriaLabelInTippy={false}
+ ariaLabel="close button"
+ style={ButtonStyleType.negativeGrey}
+ variant={ButtonVariantType.borderLess}
+ size={ComponentSizeType.xxs}
+ onClick={closePopover}
+ />
+
+
+ {radioGroupConfig.map(({ name, title, options, groupValue, onChange }) => (
+
+
{title}
+
+ {options.map(({ label, value, description }) => (
+
+
+ {label}
+ {description}
+
+
+ ))}
+
+
+ ))}
+
+
+ )
+}
+
+export default DeploymentConfigDiffRadioSelect
diff --git a/src/Shared/Components/DeploymentConfigDiff/index.ts b/src/Shared/Components/DeploymentConfigDiff/index.ts
index fb054bb0e..7b88f8df9 100644
--- a/src/Shared/Components/DeploymentConfigDiff/index.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/index.ts
@@ -18,3 +18,4 @@ export * from './DeploymentConfigDiff.component'
export * from './DeploymentConfigDiff.constants'
export * from './DeploymentConfigDiff.types'
export * from './DeploymentConfigDiff.utils'
+export { default as DeploymentConfigDiffRadioSelect } from './DeploymentConfigDiffRadioSelect'
diff --git a/src/Shared/Components/DocLink/DocLink.tsx b/src/Shared/Components/DocLink/DocLink.tsx
index bbb698abd..5867dc29a 100644
--- a/src/Shared/Components/DocLink/DocLink.tsx
+++ b/src/Shared/Components/DocLink/DocLink.tsx
@@ -3,7 +3,7 @@ import { MouseEvent } from 'react'
import { DOCUMENTATION_HOME_PAGE } from '@Common/Constants'
import { Button, ButtonComponentType, ButtonVariantType, Icon } from '@Shared/Components'
import { ComponentSizeType } from '@Shared/constants'
-import { useMainContext } from '@Shared/Providers'
+import { SidePanelTab, useMainContext } from '@Shared/Providers'
import { DocLinkProps } from './types'
import { getDocumentationUrl } from './utils'
@@ -23,20 +23,32 @@ export const DocLink =
({
fullWidth = false,
}: DocLinkProps) => {
// HOOKS
- const { isEnterprise, setSidePanelConfig } = useMainContext()
+ const { isEnterprise, setSidePanelConfig, isLicenseDashboard } = useMainContext()
// CONSTANTS
const documentationLink = getDocumentationUrl({
docLinkKey,
isEnterprise,
isExternalLink,
+ isLicenseDashboard,
})
// HANDLERS
const handleClick = (e: MouseEvent) => {
- if (!isExternalLink && !openInNewTab && !e.metaKey && documentationLink.startsWith(DOCUMENTATION_HOME_PAGE)) {
+ if (
+ !isExternalLink &&
+ !openInNewTab &&
+ !e.metaKey &&
+ !isLicenseDashboard &&
+ documentationLink.startsWith(DOCUMENTATION_HOME_PAGE)
+ ) {
e.preventDefault()
- setSidePanelConfig((prev) => ({ ...prev, open: true, docLink: documentationLink, reinitialize: true }))
+ setSidePanelConfig((prev) => ({
+ ...prev,
+ state: SidePanelTab.DOCUMENTATION,
+ docLink: documentationLink,
+ reinitialize: true,
+ }))
}
onClick?.(e)
}
diff --git a/src/Shared/Components/DocLink/constants.ts b/src/Shared/Components/DocLink/constants.ts
index f1a32de92..f868c2606 100644
--- a/src/Shared/Components/DocLink/constants.ts
+++ b/src/Shared/Components/DocLink/constants.ts
@@ -13,6 +13,7 @@ export const DOCUMENTATION = {
APP_CREATE_WORKFLOW: 'usage/applications/creating-application/workflow',
APP_DEPLOYMENT_TEMPLATE: 'usage/applications/creating-application/deployment-template',
APP_EPHEMERAL_CONTAINER: 'usage/applications/app-details/ephemeral-containers',
+ APP_GROUP: 'usage/application-groups',
APP_METRICS: 'usage/applications/app-details/app-metrics',
APP_OVERVIEW_TAGS: 'usage/applications/overview#manage-tags',
APP_ROLLOUT_DEPLOYMENT_TEMPLATE: 'usage/applications/creating-application/deployment-template/rollout-deployment',
@@ -22,6 +23,7 @@ export const DOCUMENTATION = {
BULK_UPDATE: 'usage/bulk-update',
CHART_GROUP: 'usage/deploy-chart/chart-group',
CHART_LIST: 'usage/deploy-chart/overview-of-charts',
+ CHART_STORE: 'usage/deploy-chart',
CHART_STORE_METRICS_SERVER: 'dashboard//chart-store/discover?appStoreName=metrics-server',
CUSTOM_VALUES: 'usage/deploy-chart/overview-of-charts#custom-values',
DEPLOYMENT: 'usage/applications/creating-application/deployment-template/deployment',
@@ -38,6 +40,7 @@ export const DOCUMENTATION = {
KUBE_CONFIG: 'usage/resource-browser#running-kubectl-commands-locally',
JOBS: 'usage/jobs',
TAINT: 'usage/resource-browser#taint-a-node',
+ RESOURCE_BROWSER: 'usage/resource-browser',
// Global Configurations
GLOBAL_CONFIG_API_TOKEN: 'getting-started/global-configurations/authorization/api-tokens',
diff --git a/src/Shared/Components/DocLink/types.ts b/src/Shared/Components/DocLink/types.ts
index 4dfec7b99..5ced59b00 100644
--- a/src/Shared/Components/DocLink/types.ts
+++ b/src/Shared/Components/DocLink/types.ts
@@ -7,6 +7,7 @@ import { DOCUMENTATION } from './constants'
export type BaseDocLink = {
isExternalLink?: T
isEnterprise?: boolean
+ isLicenseDashboard?: boolean
docLinkKey: T extends true ? string : keyof typeof DOCUMENTATION
}
diff --git a/src/Shared/Components/DocLink/utils.tsx b/src/Shared/Components/DocLink/utils.tsx
index c98bd5b35..84a1c48a9 100644
--- a/src/Shared/Components/DocLink/utils.tsx
+++ b/src/Shared/Components/DocLink/utils.tsx
@@ -7,6 +7,7 @@ export const getDocumentationUrl = ({
docLinkKey,
isEnterprise = false,
isExternalLink,
+ isLicenseDashboard = false,
}: BaseDocLink) => {
if (isExternalLink) {
return docLinkKey
@@ -18,5 +19,7 @@ export const getDocumentationUrl = ({
return docPath
}
- return `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/${docPath || ''}?utm-source=product_${isEnterprise ? 'ent' : 'oss'}`
+ const utmPath = !isLicenseDashboard ? `?utm-source=product_${isEnterprise ? 'ent' : 'oss'}` : ''
+
+ return `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/${docPath || ''}${utmPath}`
}
diff --git a/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx b/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx
index dadaf8cc0..862e6e94e 100644
--- a/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx
+++ b/src/Shared/Components/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx
@@ -19,10 +19,10 @@ import Draggable from 'react-draggable'
import Tippy from '@tippyjs/react'
import { ReactComponent as ICDrag } from '@Icons/ic-drag.svg'
-import { ReactComponent as ICViewVariable } from '@Icons/ic-view-variable-toggle.svg'
import { useAsync } from '@Common/Helper'
import { useWindowSize } from '@Common/Hooks'
+import { Icon } from '../Icon'
import { SUGGESTIONS_SIZE } from './constants'
import { getScopedVariables } from './service'
import Suggestions from './Suggestions'
@@ -196,8 +196,9 @@ const FloatingVariablesSuggestions = ({
type="button"
onClick={handleActivation}
data-testid="activate-suggestions"
+ aria-label="Activate suggestions"
>
-
+
Use variable to set dynamic value
diff --git a/src/Shared/Components/FramerComponents/index.ts b/src/Shared/Components/FramerComponents/index.ts
index fe454ac71..611b99a4f 100644
--- a/src/Shared/Components/FramerComponents/index.ts
+++ b/src/Shared/Components/FramerComponents/index.ts
@@ -1,3 +1,10 @@
-import { animate, AnimatePresence, motion, useMotionTemplate, useMotionValue } from 'framer-motion'
+import {
+ animate,
+ AnimatePresence,
+ motion,
+ useAnimationControls,
+ useMotionTemplate,
+ useMotionValue,
+} from 'framer-motion'
-export { animate, AnimatePresence, motion, useMotionTemplate, useMotionValue }
+export { animate, AnimatePresence, motion, useAnimationControls, useMotionTemplate, useMotionValue }
diff --git a/src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx b/src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx
index ea373c5c1..9ab61923a 100644
--- a/src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx
+++ b/src/Shared/Components/GenericInfoCard/GenericInfoCard.component.tsx
@@ -17,9 +17,9 @@
import { cloneElement } from 'react'
import { Link } from 'react-router-dom'
-import { ReactComponent as ICCaretSmall } from '@Icons/ic-caret-left-small.svg'
import { Tooltip } from '@Common/Tooltip'
+import { Icon as IconComponent } from '../Icon'
import { GenericInfoCardProps } from './types'
import { getClassNameForBorderVariant } from './utils'
@@ -76,7 +76,7 @@ const GenericInfoCard = ({
-
+
diff --git a/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx b/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
index 0b503f3d2..cdb738421 100644
--- a/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
+++ b/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
@@ -29,7 +29,7 @@ import PageHeader from '../PageHeader'
import { HeaderWithCreateButtonProps } from './types'
import { getCreateActionMenuOptions } from './utils'
-export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonProps) => {
+export const HeaderWithCreateButton = ({ headerName, additionalHeaderInfo }: HeaderWithCreateButtonProps) => {
// HOOKS
const { serverMode } = useMainContext()
const params = useParams<{ appType: string }>()
@@ -64,7 +64,11 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
return (
)
}
diff --git a/src/Shared/Components/Header/HeaderWithCreateButton/types.ts b/src/Shared/Components/Header/HeaderWithCreateButton/types.ts
index 60a67ae7e..5eb48a423 100644
--- a/src/Shared/Components/Header/HeaderWithCreateButton/types.ts
+++ b/src/Shared/Components/Header/HeaderWithCreateButton/types.ts
@@ -1,7 +1,10 @@
import { ActionMenuProps } from '@Shared/Components/ActionMenu'
+import { PageHeaderType } from '../types'
+
export interface HeaderWithCreateButtonProps {
headerName: string
+ additionalHeaderInfo: PageHeaderType['additionalHeaderInfo']
}
export enum CreateActionMenuItems {
diff --git a/src/Shared/Components/Header/HelpButton.tsx b/src/Shared/Components/Header/HelpButton.tsx
index 2815642b6..24b5113bd 100644
--- a/src/Shared/Components/Header/HelpButton.tsx
+++ b/src/Shared/Components/Header/HelpButton.tsx
@@ -4,7 +4,7 @@ import { SliderButton } from '@typeform/embed-react'
import { DOCUMENTATION_HOME_PAGE, URLS } from '@Common/Constants'
import { ComponentSizeType } from '@Shared/constants'
-import { useMainContext } from '@Shared/Providers'
+import { SidePanelTab, useMainContext } from '@Shared/Providers'
import { InstallationType } from '@Shared/types'
import { ActionMenu } from '../ActionMenu'
@@ -81,7 +81,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
e.preventDefault()
setSidePanelConfig((prev) => ({
...prev,
- open: true,
+ state: SidePanelTab.DOCUMENTATION,
docLink: DOCUMENTATION_HOME_PAGE,
reinitialize: true,
}))
@@ -104,6 +104,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
case HelpMenuItems.VIEW_ALL_TICKETS:
case HelpMenuItems.CHAT_WITH_SUPPORT:
case HelpMenuItems.RAISE_ISSUE_REQUEST:
+ case HelpMenuItems.DEVTRON_GPT:
handleAnalytics(item, e)
break
case HelpMenuItems.VIEW_DOCUMENTATION:
diff --git a/src/Shared/Components/Header/IframePromoButton.tsx b/src/Shared/Components/Header/IframePromoButton.tsx
index 85545d044..41bb72805 100644
--- a/src/Shared/Components/Header/IframePromoButton.tsx
+++ b/src/Shared/Components/Header/IframePromoButton.tsx
@@ -88,7 +88,7 @@ export const IframePromoButton = () => {
)
return (
-
+ <>
{FEATURE_PROMO_EMBEDDED_BUTTON_TEXT && (
+
)
}
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
index 28ef087ce..4b53f751f 100644
--- a/src/Shared/Components/Header/PageHeader.tsx
+++ b/src/Shared/Components/Header/PageHeader.tsx
@@ -22,10 +22,11 @@ import { ReactComponent as Close } from '@Icons/ic-close.svg'
import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
import { InstallationType } from '@Shared/types'
-import { TippyCustomized, TippyTheme } from '../../../Common'
+import { TippyCustomized, TippyTheme, Tooltip } from '../../../Common'
import { MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
-import { useMainContext, useTheme, useUserEmail } from '../../Providers'
+import { SidePanelTab, useMainContext, useTheme, useUserEmail } from '../../Providers'
import GettingStartedCard from '../GettingStartedCard/GettingStarted'
+import { Icon } from '../Icon'
import { InfoIconTippy } from '../InfoIconTippy'
import { HelpButton } from './HelpButton'
import { IframePromoButton } from './IframePromoButton'
@@ -49,7 +50,14 @@ const PageHeader = ({
markAsBeta,
tippyProps,
}: PageHeaderType) => {
- const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard } = useMainContext()
+ const {
+ loginCount,
+ setLoginCount,
+ showGettingStartedCard,
+ setShowGettingStartedCard,
+ setSidePanelConfig,
+ sidePanelConfig,
+ } = useMainContext()
const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } =
@@ -124,8 +132,28 @@ const PageHeader = ({
)
+ const onAskButtonClick = () => {
+ ReactGA.event({
+ category: 'AI',
+ action: `HELP_ASK_DEVTRON_AI`,
+ })
+ setSidePanelConfig((prev) => ({ ...prev, state: SidePanelTab.ASK_DEVTRON }))
+ }
+
const renderLogoutHelpSection = () => (
<>
+ {window._env_?.FEATURE_ASK_DEVTRON_EXPERT && sidePanelConfig.state === 'closed' && (
+
+
+
+ )}
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 302c24049..56cd6901e 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
import { ReactComponent as ICArrowSquareOut } from '@IconsV2/ic-arrow-square-out.svg'
import { ReactComponent as ICArrowsClockwise } from '@IconsV2/ic-arrows-clockwise.svg'
import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg'
+import { ReactComponent as ICAsterisk } from '@IconsV2/ic-asterisk.svg'
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'
@@ -19,6 +20,7 @@ import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.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'
+import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg'
import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg'
import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
import { ReactComponent as ICCalendar } from '@IconsV2/ic-calendar.svg'
@@ -40,6 +42,7 @@ import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg'
import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
import { ReactComponent as ICCloudVms } from '@IconsV2/ic-cloud-vms.svg'
import { ReactComponent as ICCluster } from '@IconsV2/ic-cluster.svg'
+import { ReactComponent as ICClusterIsolated } from '@IconsV2/ic-cluster-isolated.svg'
import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg'
import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg'
@@ -52,6 +55,7 @@ import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg'
import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightning.svg'
import { ReactComponent as ICDelhivery } from '@IconsV2/ic-delhivery.svg'
import { ReactComponent as ICDevtron } from '@IconsV2/ic-devtron.svg'
+import { ReactComponent as ICDevtronAi } from '@IconsV2/ic-devtron-ai.svg'
import { ReactComponent as ICDevtronApp } from '@IconsV2/ic-devtron-app.svg'
import { ReactComponent as ICDevtronHeaderLogo } from '@IconsV2/ic-devtron-header-logo.svg'
import { ReactComponent as ICDevtronJob } from '@IconsV2/ic-devtron-job.svg'
@@ -64,6 +68,8 @@ import { ReactComponent as ICEmail } from '@IconsV2/ic-email.svg'
import { ReactComponent as ICEnterpriseFeat } from '@IconsV2/ic-enterprise-feat.svg'
import { ReactComponent as ICEnterpriseTag } from '@IconsV2/ic-enterprise-tag.svg'
import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
+import { ReactComponent as ICEnvironment } from '@IconsV2/ic-environment.svg'
+import { ReactComponent as ICEnvironmentIsolated } from '@IconsV2/ic-environment-isolated.svg'
import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.svg'
import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg'
@@ -76,6 +82,7 @@ import { ReactComponent as ICFiles } from '@IconsV2/ic-files.svg'
import { ReactComponent as ICFilter } from '@IconsV2/ic-filter.svg'
import { ReactComponent as ICFilterApplied } from '@IconsV2/ic-filter-applied.svg'
import { ReactComponent as ICFlask } from '@IconsV2/ic-flask.svg'
+import { ReactComponent as ICFolderColor } from '@IconsV2/ic-folder-color.svg'
import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg'
import { ReactComponent as ICGear } from '@IconsV2/ic-gear.svg'
import { ReactComponent as ICGift } from '@IconsV2/ic-gift.svg'
@@ -122,6 +129,7 @@ import { ReactComponent as ICMegaphoneRight } from '@IconsV2/ic-megaphone-right.
import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg'
import { ReactComponent as ICMinikube } from '@IconsV2/ic-minikube.svg'
+import { ReactComponent as ICMinus } from '@IconsV2/ic-minus.svg'
import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
import { ReactComponent as ICMobile } from '@IconsV2/ic-mobile.svg'
import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
@@ -131,8 +139,10 @@ import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg'
import { ReactComponent as ICOidc } from '@IconsV2/ic-oidc.svg'
import { ReactComponent as ICOpenBox } from '@IconsV2/ic-open-box.svg'
import { ReactComponent as ICOpenInNew } from '@IconsV2/ic-open-in-new.svg'
+import { ReactComponent as ICOpenai } from '@IconsV2/ic-openai.svg'
import { ReactComponent as ICOpenshift } from '@IconsV2/ic-openshift.svg'
import { ReactComponent as ICOutOfSync } from '@IconsV2/ic-out-of-sync.svg'
+import { ReactComponent as ICPaperPlane } from '@IconsV2/ic-paper-plane.svg'
import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-color.svg'
import { ReactComponent as ICPath } from '@IconsV2/ic-path.svg'
import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
@@ -142,16 +152,19 @@ import { ReactComponent as ICQuote } from '@IconsV2/ic-quote.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'
+import { ReactComponent as ICShapes } from '@IconsV2/ic-shapes.svg'
import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
import { ReactComponent as ICSlidersVertical } from '@IconsV2/ic-sliders-vertical.svg'
import { ReactComponent as ICSortAscending } from '@IconsV2/ic-sort-ascending.svg'
import { ReactComponent as ICSortDescending } from '@IconsV2/ic-sort-descending.svg'
import { ReactComponent as ICSortable } from '@IconsV2/ic-sortable.svg'
+import { ReactComponent as ICSparkleAiColor } from '@IconsV2/ic-sparkle-ai-color.svg'
import { ReactComponent as ICSparkleColor } from '@IconsV2/ic-sparkle-color.svg'
import { ReactComponent as ICSpinny } from '@IconsV2/ic-spinny.svg'
import { ReactComponent as ICSprayCan } from '@IconsV2/ic-spray-can.svg'
import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg'
import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
+import { ReactComponent as ICStopFill } from '@IconsV2/ic-stop-fill.svg'
import { ReactComponent as ICStrategyBlueGreen } from '@IconsV2/ic-strategy-blue-green.svg'
import { ReactComponent as ICStrategyBlueGreenColor } from '@IconsV2/ic-strategy-blue-green-color.svg'
import { ReactComponent as ICStrategyCanary } from '@IconsV2/ic-strategy-canary.svg'
@@ -178,8 +191,10 @@ import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg'
import { ReactComponent as ICUserCircle } from '@IconsV2/ic-user-circle.svg'
import { ReactComponent as ICUserKey } from '@IconsV2/ic-user-key.svg'
import { ReactComponent as ICUsers } from '@IconsV2/ic-users.svg'
+import { ReactComponent as ICViewVariableToggle } from '@IconsV2/ic-view-variable-toggle.svg'
import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg'
+import { ReactComponent as ICWorldGlobe } from '@IconsV2/ic-world-globe.svg'
// eslint-disable-next-line no-restricted-imports
import { IconBase } from './IconBase'
@@ -198,6 +213,7 @@ export const iconMap = {
'ic-arrow-square-out': ICArrowSquareOut,
'ic-arrows-clockwise': ICArrowsClockwise,
'ic-arrows-left-right': ICArrowsLeftRight,
+ 'ic-asterisk': ICAsterisk,
'ic-ather': ICAther,
'ic-azure-aks': ICAzureAks,
'ic-azure': ICAzure,
@@ -205,6 +221,7 @@ export const iconMap = {
'ic-bharatpe': ICBharatpe,
'ic-bitbucket': ICBitbucket,
'ic-book-open': ICBookOpen,
+ 'ic-brain': ICBrain,
'ic-browser': ICBrowser,
'ic-build-color': ICBuildColor,
'ic-calendar': ICCalendar,
@@ -225,6 +242,7 @@ export const iconMap = {
'ic-close-large': ICCloseLarge,
'ic-close-small': ICCloseSmall,
'ic-cloud-vms': ICCloudVms,
+ 'ic-cluster-isolated': ICClusterIsolated,
'ic-cluster': ICCluster,
'ic-code': ICCode,
'ic-container': ICContainer,
@@ -237,6 +255,7 @@ export const iconMap = {
'ic-delete-lightning': ICDeleteLightning,
'ic-delete': ICDelete,
'ic-delhivery': ICDelhivery,
+ 'ic-devtron-ai': ICDevtronAi,
'ic-devtron-app': ICDevtronApp,
'ic-devtron-header-logo': ICDevtronHeaderLogo,
'ic-devtron-job': ICDevtronJob,
@@ -250,6 +269,8 @@ export const iconMap = {
'ic-enterprise-feat': ICEnterpriseFeat,
'ic-enterprise-tag': ICEnterpriseTag,
'ic-env': ICEnv,
+ 'ic-environment-isolated': ICEnvironmentIsolated,
+ 'ic-environment': ICEnvironment,
'ic-error': ICError,
'ic-expand-right-sm': ICExpandRightSm,
'ic-expand-sm': ICExpandSm,
@@ -262,6 +283,7 @@ export const iconMap = {
'ic-filter-applied': ICFilterApplied,
'ic-filter': ICFilter,
'ic-flask': ICFlask,
+ 'ic-folder-color': ICFolderColor,
'ic-folder-user': ICFolderUser,
'ic-gear': ICGear,
'ic-gift-gradient': ICGiftGradient,
@@ -308,6 +330,7 @@ export const iconMap = {
'ic-memory': ICMemory,
'ic-microsoft': ICMicrosoft,
'ic-minikube': ICMinikube,
+ 'ic-minus': ICMinus,
'ic-missing': ICMissing,
'ic-mobile': ICMobile,
'ic-monitoring': ICMonitoring,
@@ -317,9 +340,11 @@ export const iconMap = {
'ic-oidc': ICOidc,
'ic-open-box': ICOpenBox,
'ic-open-in-new': ICOpenInNew,
+ 'ic-openai': ICOpenai,
'ic-openshift': ICOpenshift,
'ic-out-of-sync': ICOutOfSync,
'ic-paper-plane-color': ICPaperPlaneColor,
+ 'ic-paper-plane': ICPaperPlane,
'ic-path': ICPath,
'ic-pencil': ICPencil,
'ic-play-outline': ICPlayOutline,
@@ -328,16 +353,19 @@ export const iconMap = {
'ic-rocket-gear': ICRocketGear,
'ic-rocket-launch': ICRocketLaunch,
'ic-selected': ICSelected,
+ 'ic-shapes': ICShapes,
'ic-shield-check': ICShieldCheck,
'ic-sliders-vertical': ICSlidersVertical,
'ic-sort-ascending': ICSortAscending,
'ic-sort-descending': ICSortDescending,
'ic-sortable': ICSortable,
+ 'ic-sparkle-ai-color': ICSparkleAiColor,
'ic-sparkle-color': ICSparkleColor,
'ic-spinny': ICSpinny,
'ic-spray-can': ICSprayCan,
'ic-stack': ICStack,
'ic-stamp': ICStamp,
+ 'ic-stop-fill': ICStopFill,
'ic-strategy-blue-green-color': ICStrategyBlueGreenColor,
'ic-strategy-blue-green': ICStrategyBlueGreen,
'ic-strategy-canary-color': ICStrategyCanaryColor,
@@ -364,8 +392,10 @@ export const iconMap = {
'ic-user-circle': ICUserCircle,
'ic-user-key': ICUserKey,
'ic-users': ICUsers,
+ 'ic-view-variable-toggle': ICViewVariableToggle,
'ic-warning': ICWarning,
'ic-wifi-slash': ICWifiSlash,
+ 'ic-world-globe': ICWorldGlobe,
}
export type IconName = keyof typeof iconMap
diff --git a/src/Shared/Components/LoadingCard.tsx b/src/Shared/Components/LoadingCard.tsx
index bd0b61480..701253722 100644
--- a/src/Shared/Components/LoadingCard.tsx
+++ b/src/Shared/Components/LoadingCard.tsx
@@ -5,7 +5,7 @@ interface LoadingCardType {
const LoadingCard = ({ wider }: LoadingCardType) => (
diff --git a/src/Shared/Components/LoginBanner/LoginBanner.tsx b/src/Shared/Components/LoginBanner/LoginBanner.tsx
index c2981b6af..f0d9c0ab4 100644
--- a/src/Shared/Components/LoginBanner/LoginBanner.tsx
+++ b/src/Shared/Components/LoginBanner/LoginBanner.tsx
@@ -146,6 +146,7 @@ const LoginBanner = () => {
style={{
maxHeight: '90%',
}}
+ loading="lazy"
/>
diff --git a/src/Shared/Components/Popover/types.ts b/src/Shared/Components/Popover/types.ts
index 40ea7c343..aff9c3406 100644
--- a/src/Shared/Components/Popover/types.ts
+++ b/src/Shared/Components/Popover/types.ts
@@ -52,6 +52,11 @@ export interface UsePopoverProps {
* @param closePopover - A function to close the popover.
*/
onPopoverKeyDown?: (e: KeyboardEvent, openState: boolean, closePopover: () => void) => void
+ /**
+ * Variant of the popover (bg, shadow and styles changes based on variant)
+ * @default 'menu'
+ */
+ variant?: 'menu' | 'overlay'
}
/**
diff --git a/src/Shared/Components/Popover/usePopover.hook.ts b/src/Shared/Components/Popover/usePopover.hook.ts
index 26a0b7a0e..e282d2d15 100644
--- a/src/Shared/Components/Popover/usePopover.hook.ts
+++ b/src/Shared/Components/Popover/usePopover.hook.ts
@@ -13,6 +13,7 @@ export const usePopover = ({
position = 'bottom',
alignment = 'start',
width = 'auto',
+ variant = 'menu',
onOpen,
onPopoverKeyDown,
onTriggerKeyDown,
@@ -132,7 +133,7 @@ export const usePopover = ({
id,
ref: popover,
role: 'listbox',
- className: `dc__position-abs bg__menu--primary shadow__menu border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
+ 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' : ''}`,
onKeyDown: handlePopoverKeyDown,
style: {
width: !isAutoWidth ? `${width}px` : undefined,
diff --git a/src/Shared/Components/ProgressBar/ProgressBar.component.tsx b/src/Shared/Components/ProgressBar/ProgressBar.component.tsx
new file mode 100644
index 000000000..f6f6b4ee3
--- /dev/null
+++ b/src/Shared/Components/ProgressBar/ProgressBar.component.tsx
@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { AnimatePresence, motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
+
+import { ProgressBarProps } from './types'
+
+export const ProgressBar = ({ isLoading, intervalTime = 50 }: ProgressBarProps) => {
+ const progress = useMotionValue
(0)
+ const smoothProgress = useSpring(progress, { stiffness: 50, damping: 20 })
+
+ const width = useTransform(smoothProgress, (v) => `${v}%`)
+
+ useEffect(() => {
+ let interval = null
+
+ if (isLoading) {
+ interval = setInterval(() => {
+ const next = progress.get() + Math.random() * 5
+ progress.set(next < 95 ? next : 95)
+ }, intervalTime)
+ }
+
+ return () => clearInterval(interval)
+ }, [isLoading])
+
+ return (
+
+ {isLoading && (
+
+
+
+ )}
+
+ )
+}
diff --git a/src/Shared/Components/ProgressBar/index.tsx b/src/Shared/Components/ProgressBar/index.tsx
new file mode 100644
index 000000000..6bd39f8f1
--- /dev/null
+++ b/src/Shared/Components/ProgressBar/index.tsx
@@ -0,0 +1 @@
+export * from './ProgressBar.component'
diff --git a/src/Shared/Components/ProgressBar/types.ts b/src/Shared/Components/ProgressBar/types.ts
new file mode 100644
index 000000000..aaa225413
--- /dev/null
+++ b/src/Shared/Components/ProgressBar/types.ts
@@ -0,0 +1,9 @@
+export interface ProgressBarProps {
+ isLoading: boolean
+ /**
+ * Interval in milliseconds for the progress bar simulation.
+ *
+ * @default 50
+ */
+ intervalTime?: number
+}
diff --git a/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx b/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx
index e9bb025e4..dec2ffd7a 100644
--- a/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx
+++ b/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx
@@ -68,7 +68,7 @@ const Vulnerabilities = ({
)
}
- if (!isScanEnabled || !scanResultResponse.result?.isImageScanEnabled) {
+ if (!isScanEnabled || !scanResultResponse?.result?.isImageScanEnabled) {
return (
Scan is Disabled
diff --git a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
index 930559493..482dd211a 100644
--- a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
+++ b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
@@ -187,7 +187,7 @@ const SelectPicker =
({
error,
icon,
helperText,
- placeholder = 'Select a option',
+ placeholder = 'Select an option',
label,
showSelectedOptionIcon = true,
size = ComponentSizeType.medium,
diff --git a/src/Shared/Components/Switch/Switch.component.tsx b/src/Shared/Components/Switch/Switch.component.tsx
index 9e32a0feb..779993778 100644
--- a/src/Shared/Components/Switch/Switch.component.tsx
+++ b/src/Shared/Components/Switch/Switch.component.tsx
@@ -1,12 +1,12 @@
import { AriaAttributes, useRef } from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
+import { motion } from 'framer-motion'
import { Tooltip } from '@Common/Tooltip'
import { ComponentSizeType } from '@Shared/constants'
import { getUniqueId } from '@Shared/Helpers'
import { Icon } from '../Icon'
-import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP } from './constants'
+import { LOADING_COLOR_MAP } from './constants'
import { DTSwitchProps } from './types'
import {
getSwitchContainerClass,
@@ -33,7 +33,9 @@ const Switch = ({
indeterminate = false,
size = ComponentSizeType.medium,
name,
+ dataTestId = name,
onChange,
+ autoFocus = false,
}: DTSwitchProps) => {
const inputId = useRef(getUniqueId())
@@ -49,59 +51,46 @@ const Switch = ({
const showIndeterminateIcon = ariaCheckedValue === 'mixed'
+ const thumbPosition = getThumbPosition({ isChecked, shape, size, indeterminate, isLoading })
+
const renderContent = () => (
-
{isLoading ? (
) : (
-
- {showIndeterminateIcon ? (
-
+
- ) : (
- iconName && (
-
-
-
- )
- )}
-
+
+ )}
)}
-
+
)
return (
@@ -123,10 +112,12 @@ const Switch = ({