diff --git a/package-lock.json b/package-lock.json index 4cd2e7fc5..c6c7542af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-2", + "version": "1.20.6-pre-3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-2", + "version": "1.20.6-pre-3", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index b834be385..9eac8c1cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-2", + "version": "1.20.6-pre-3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Assets/IconV2/ic-bg-cpu.svg b/src/Assets/IconV2/ic-bg-cpu.svg new file mode 100644 index 000000000..473271152 --- /dev/null +++ b/src/Assets/IconV2/ic-bg-cpu.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/Assets/IconV2/ic-bg-memory.svg b/src/Assets/IconV2/ic-bg-memory.svg new file mode 100644 index 000000000..602a61406 --- /dev/null +++ b/src/Assets/IconV2/ic-bg-memory.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/Assets/IconV2/ic-check-circle.svg b/src/Assets/IconV2/ic-check-circle.svg new file mode 100644 index 000000000..d5c3f07dd --- /dev/null +++ b/src/Assets/IconV2/ic-check-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/IconV2/ic-gift-animated.svg b/src/Assets/IconV2/ic-gift-animated.svg index 18ac348e2..922c9997d 100644 --- a/src/Assets/IconV2/ic-gift-animated.svg +++ b/src/Assets/IconV2/ic-gift-animated.svg @@ -1 +1,38 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-party.svg b/src/Assets/IconV2/ic-party.svg new file mode 100644 index 000000000..3658a9bf2 --- /dev/null +++ b/src/Assets/IconV2/ic-party.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/IconV2/ic-warning-stroke.svg b/src/Assets/IconV2/ic-warning-stroke.svg new file mode 100644 index 000000000..1951bcbb7 --- /dev/null +++ b/src/Assets/IconV2/ic-warning-stroke.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Illustration/img-folder-empty.svg b/src/Assets/Illustration/img-folder-empty.svg new file mode 100644 index 000000000..4a4cf95ab --- /dev/null +++ b/src/Assets/Illustration/img-folder-empty.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Pages/ResourceBrowser/types.ts b/src/Pages/ResourceBrowser/types.ts index d0f733021..4ba0a8f9a 100644 --- a/src/Pages/ResourceBrowser/types.ts +++ b/src/Pages/ResourceBrowser/types.ts @@ -25,6 +25,7 @@ export enum ClusterFiltersType { ALL_CLUSTERS = 'all', HEALTHY = 'healthy', UNHEALTHY = 'unhealthy', + CONNECTION_FAILED = 'connectionFailed', } export enum InstallationClusterStatus { diff --git a/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx b/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx index c5e0295fc..e8b053ca8 100644 --- a/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx +++ b/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx @@ -28,6 +28,7 @@ import { ComponentSizeType, PROGRESSING_DEPLOYMENT_STATUS_POLLING_INTERVAL, } from '@Shared/constants' +import { useMainContext } from '@Shared/Providers' import { AppType } from '@Shared/types' import { APIResponseHandler } from '../APIResponseHandler' @@ -57,7 +58,7 @@ const AppStatusModal = ({ initialTab, debugWithAIButton, }: AppStatusModalProps) => { - const [showConfigDriftModal, setShowConfigDriftModal] = useState(false) + const { setTempAppWindowConfig } = useMainContext() const [selectedTab, setSelectedTab] = useState(initialTab || null) const appDetailsAbortControllerRef = useRef(new AbortController()) @@ -241,30 +242,20 @@ const AppStatusModal = ({ const handleShowConfigDriftModal = isConfigDriftEnabled ? () => { - setShowConfigDriftModal(true) + handleClose() + setTempAppWindowConfig({ + open: true, + title: `${appDetails.appName} / Live and desired manifest comparison`, + component: , + }) } : null - const handleCloseConfigDriftModal = () => { - handleClose() - setShowConfigDriftModal(false) - } - const handleSelectTab = async (updatedTab: AppStatusModalTabType) => { handleClearDeploymentStatusTimeout() setSelectedTab(updatedTab) } - if (showConfigDriftModal) { - return ( - - ) - } - const filteredTitleSegments = (titleSegments || []).filter((segment) => !!segment) const getEmptyStateMessage = () => { diff --git a/src/Shared/Components/Charts/Chart.component.tsx b/src/Shared/Components/Charts/Chart.component.tsx index 6cc174a45..c2c470886 100644 --- a/src/Shared/Components/Charts/Chart.component.tsx +++ b/src/Shared/Components/Charts/Chart.component.tsx @@ -277,6 +277,7 @@ const Chart = (props: ChartProps) => { chartProps: props, appTheme, externalTooltipHandler: debouncedExternalTooltipHandler, + setTooltipVisible, }) chartRef.current = new ChartJS(ctx, { diff --git a/src/Shared/Components/Charts/types.ts b/src/Shared/Components/Charts/types.ts index 706d88d9d..89f5ae84e 100644 --- a/src/Shared/Components/Charts/types.ts +++ b/src/Shared/Components/Charts/types.ts @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { Dispatch, ReactNode, SetStateAction } from 'react' import { TooltipOptions, TooltipPositionerFunction } from 'chart.js' import { TooltipProps } from '@Common/Tooltip' @@ -143,6 +143,7 @@ export interface GetDefaultOptionsParams { chartProps: ChartProps appTheme: AppThemeType externalTooltipHandler: TooltipOptions['external'] + setTooltipVisible: Dispatch> } declare module 'chart.js' { diff --git a/src/Shared/Components/Charts/utils.tsx b/src/Shared/Components/Charts/utils.tsx index 785288594..70bbd2d68 100644 --- a/src/Shared/Components/Charts/utils.tsx +++ b/src/Shared/Components/Charts/utils.tsx @@ -96,7 +96,13 @@ export const getChartJSType = (type: ChartType): ChartJSChartType => { } const handleChartClick = - ({ type, onChartClick, datasets, xAxisLabels }: ChartProps) => + ({ + type, + onChartClick, + datasets, + xAxisLabels, + setTooltipVisible, + }: ChartProps & Pick) => (_, elements: ActiveElement[]) => { if (!elements || elements.length === 0 || !datasets || (Array.isArray(datasets) && datasets.length === 0)) { return @@ -117,6 +123,7 @@ const handleChartClick = onChartClick?.(datasets[datasetIndex].datasetName, index) } + setTooltipVisible(false) } const handleChartHover = @@ -171,6 +178,7 @@ export const getDefaultOptions = ({ chartProps, appTheme, externalTooltipHandler, + setTooltipVisible, }: GetDefaultOptionsParams): ChartOptions => { const { onChartClick, @@ -219,7 +227,7 @@ export const getDefaultOptions = ({ }, ...(onChartClick ? { - onClick: handleChartClick(chartProps), + onClick: handleChartClick({ ...chartProps, setTooltipVisible }), onHover: handleChartHover(chartProps), } : {}), diff --git a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx index d58993707..1e9cb8b2d 100644 --- a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx +++ b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx @@ -45,6 +45,7 @@ export const ContextSwitcher = ({ optionListError, reloadOptionList, classNamePrefix, + resource, }: ContextSwitcherTypes) => { const selectRef = useRef>(null) const shouldShowToastRef = useRef(true) @@ -60,7 +61,7 @@ export const ContextSwitcher = ({ if (shouldShowToastRef.current) { ToastManager.showToast({ variant: ToastVariantType.shortcut, - text: 'to switch Applications', + text: `to switch ${resource}`, shortcuts: ['S'], }) } diff --git a/src/Shared/Components/ContextSwitcher/types.ts b/src/Shared/Components/ContextSwitcher/types.ts index 7be803ee4..465bb1563 100644 --- a/src/Shared/Components/ContextSwitcher/types.ts +++ b/src/Shared/Components/ContextSwitcher/types.ts @@ -36,6 +36,7 @@ export interface ContextSwitcherTypes > { options: GroupBase>[] isAppDataAvailable?: boolean + resource: 'Cluster' | 'Release' | 'Tenant' | 'Application' | 'Job' | 'Application Group' | 'Chart Store' } export interface RecentlyVisitedOptions extends SelectPickerOptionType { diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index 1e395c0e9..81db80082 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -23,8 +23,10 @@ import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg' import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg' import { ReactComponent as ICBgBuild } from '@IconsV2/ic-bg-build.svg' import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg' +import { ReactComponent as ICBgCpu } from '@IconsV2/ic-bg-cpu.svg' import { ReactComponent as ICBgDeploy } from '@IconsV2/ic-bg-deploy.svg' import { ReactComponent as ICBgEnvironment } from '@IconsV2/ic-bg-environment.svg' +import { ReactComponent as ICBgMemory } from '@IconsV2/ic-bg-memory.svg' import { ReactComponent as ICBgProductionPipelines } from '@IconsV2/ic-bg-production-pipelines.svg' import { ReactComponent as ICBgProject } from '@IconsV2/ic-bg-project.svg' import { ReactComponent as ICBgScan } from '@IconsV2/ic-bg-scan.svg' @@ -49,6 +51,7 @@ import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg' import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg' import { ReactComponent as ICCheckAll } from '@IconsV2/ic-check-all.svg' +import { ReactComponent as ICCheckCircle } from '@IconsV2/ic-check-circle.svg' import { ReactComponent as ICCheckSquare } from '@IconsV2/ic-check-square.svg' import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg' import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg' @@ -200,6 +203,7 @@ import { ReactComponent as ICOtcCloud } from '@IconsV2/ic-otc-cloud.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 ICParty } from '@IconsV2/ic-party.svg' import { ReactComponent as ICPath } from '@IconsV2/ic-path.svg' import { ReactComponent as ICPauseCircle } from '@IconsV2/ic-pause-circle.svg' import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg' @@ -265,6 +269,7 @@ import { ReactComponent as ICVisibilityOff } from '@IconsV2/ic-visibility-off.sv import { ReactComponent as ICVisibilityOn } from '@IconsV2/ic-visibility-on.svg' import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg' import { ReactComponent as ICWarningFill } from '@IconsV2/ic-warning-fill.svg' +import { ReactComponent as ICWarningStroke } from '@IconsV2/ic-warning-stroke.svg' import { ReactComponent as ICWebhook } from '@IconsV2/ic-webhook.svg' import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg' import { ReactComponent as ICWorldGlobe } from '@IconsV2/ic-world-globe.svg' @@ -297,8 +302,10 @@ export const iconMap = { 'ic-azure': ICAzure, 'ic-bg-build': ICBgBuild, 'ic-bg-cluster': ICBgCluster, + 'ic-bg-cpu': ICBgCpu, 'ic-bg-deploy': ICBgDeploy, 'ic-bg-environment': ICBgEnvironment, + 'ic-bg-memory': ICBgMemory, 'ic-bg-production-pipelines': ICBgProductionPipelines, 'ic-bg-project': ICBgProject, 'ic-bg-scan': ICBgScan, @@ -322,6 +329,7 @@ export const iconMap = { 'ic-chat-circle-dots': ICChatCircleDots, 'ic-chat-circle-online': ICChatCircleOnline, 'ic-check-all': ICCheckAll, + 'ic-check-circle': ICCheckCircle, 'ic-check-square': ICCheckSquare, 'ic-check': ICCheck, 'ic-checks': ICChecks, @@ -474,6 +482,7 @@ export const iconMap = { 'ic-out-of-sync': ICOutOfSync, 'ic-paper-plane-color': ICPaperPlaneColor, 'ic-paper-plane': ICPaperPlane, + 'ic-party': ICParty, 'ic-path': ICPath, 'ic-pause-circle': ICPauseCircle, 'ic-pencil': ICPencil, @@ -538,6 +547,7 @@ export const iconMap = { 'ic-visibility-off': ICVisibilityOff, 'ic-visibility-on': ICVisibilityOn, 'ic-warning-fill': ICWarningFill, + 'ic-warning-stroke': ICWarningStroke, 'ic-warning': ICWarning, 'ic-webhook': ICWebhook, 'ic-wifi-slash': ICWifiSlash, diff --git a/src/Shared/Components/Illustration/Illustration.tsx b/src/Shared/Components/Illustration/Illustration.tsx index d61bbb9e1..c3abd6cdc 100644 --- a/src/Shared/Components/Illustration/Illustration.tsx +++ b/src/Shared/Components/Illustration/Illustration.tsx @@ -4,6 +4,7 @@ import CreateBackupSchedule from '@Illustrations/create-backup-schedule.webp' import CreateBackupSnapshot from '@Illustrations/create-backup-snapshot.webp' import ImgCode from '@Illustrations/img-code.webp' import ImgDevtronFreemium from '@Illustrations/img-devtron-freemium.webp' +import { ReactComponent as ImgFolderEmpty } from '@Illustrations/img-folder-empty.svg' import ImgManOnRocket from '@Illustrations/img-man-on-rocket.webp' import { ReactComponent as ImgMechanicalOperation } from '@Illustrations/img-mechanical-operation.svg' import { ReactComponent as ImgNoRestores } from '@Illustrations/img-no-restores.svg' @@ -15,6 +16,7 @@ import { IllustrationBase } from './IllustrationBase' import { IllustrationBaseProps } from './types' export const illustrationMap = { + 'img-folder-empty': ImgFolderEmpty, 'img-mechanical-operation': ImgMechanicalOperation, 'img-no-restores': ImgNoRestores, 'create-backup-schedule': CreateBackupSchedule, diff --git a/src/Shared/Components/SelectPicker/utils.ts b/src/Shared/Components/SelectPicker/utils.ts index 1bc998734..20fb32729 100644 --- a/src/Shared/Components/SelectPicker/utils.ts +++ b/src/Shared/Components/SelectPicker/utils.ts @@ -373,7 +373,7 @@ export const getCommonSelectStyle = ({ }), menuPortal: (base) => ({ ...base, - zIndex: 2, + zIndex: 3, }), } } diff --git a/src/Shared/constants.tsx b/src/Shared/constants.tsx index d45622b69..4e64b2c63 100644 --- a/src/Shared/constants.tsx +++ b/src/Shared/constants.tsx @@ -613,3 +613,5 @@ export const REMOTE_CONNECTION_TYPE_LABEL_MAP: Record> { envId: number - handleCloseModal?: () => void } export enum RegistryType {