{baseTemplateConfiguration?.codeEditorValue?.displayName}
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
new file mode 100644
index 000000000..ca5b08981
--- /dev/null
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/helpers.tsx
@@ -0,0 +1,96 @@
+import { NavLink } from 'react-router-dom'
+
+import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
+import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
+import {
+ DeploymentConfigDiffProps,
+ DeploymentConfigDiffState,
+ diffStateIconMap,
+ diffStateTextColorMap,
+ diffStateTextMap,
+} from '@Shared/Components/DeploymentConfigDiff'
+
+import { History } from '../types'
+import { DeploymentHistoryConfigDiffProps } from './types'
+
+const renderState = (diffState: DeploymentConfigDiffState) => {
+ const Icon = diffStateIconMap[diffState]
+
+ return (
+
+ {Icon && }
+ {diffStateTextMap[diffState]}
+
+ )
+}
+
+export const renderDeploymentHistoryConfig = (
+ config: DeploymentConfigDiffProps['configList'],
+ heading: string,
+ pathname: string,
+ hideDiffState: boolean,
+) => (
+
+ {heading && (
+
+
{heading}
+
+ )}
+ {config.map(({ id, title, name, diffState, pathType }, index) => {
+ const href = `${pathname}/${name ? `${pathType}/${name}` : pathType}`
+
+ return (
+
+
+
+
+ {name || title}
+
+
+ {!hideDiffState && renderState(diffState)}
+
+ )
+ })}
+
+)
+
+export const renderPipelineDeploymentStatusIcon = (status: string) => (
+
+)
+
+export const renderPipelineDeploymentOptionDescription = ({
+ stage,
+ triggeredBy,
+ triggeredByEmail,
+ artifact,
+ renderRunSource,
+ resourceId,
+ runSource,
+}: Pick
&
+ Pick) => (
+
+
+ {stage}
+
+ {artifact && (
+
+
+ {artifact.split(':')[1].slice(-12)}
+
+ )}
+
+ {triggeredBy === 1 ? 'auto trigger' : triggeredByEmail}
+
+ {runSource && renderRunSource && renderRunSource(runSource, resourceId === runSource?.id)}
+
- {historicalComponent.childList?.length > 0 ? (
- <>
-
- {DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[historicalComponent.name].DISPLAY_NAME}
-
- {historicalComponent.childList.map((historicalComponentName, childIndex) =>
- getNavLink(
- index,
- historicalComponent.id,
- historicalComponent.name,
- `config-${index}-${childIndex}`,
- historicalComponentName,
- ),
- )}
-
- ) : (
- getNavLink(index, historicalComponent.id, historicalComponent.name, `config-${index}`)
- )}
-
-
- {loader ? (
-
- ) : (
-
-
-
- )}
-
-
- Compare with
-
-
- {deploymentTemplateOption.length > 0 ? (
-
- ) : (
-
-
- {
- DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[
- historyComponent.replace('-', '_').toUpperCase()
- ]?.DISPLAY_NAME
- }
- {historyComponentName ? ` “${historyComponentName}”` : ''} was added in this
- deployment. There is no previous instance to compare with.
-
- }
- >
- No options
-
-
- )}
-
-
-
- Base configuration
-
-
- {baseTemplateTimeStamp && moment(baseTemplateTimeStamp).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
-
-
- {renderGoBackToConfiguration()}
- {renderCompareDeploymentConfig()}
- {renderBaseDeploymentConfig()}
-
- )
-}
-
-export default DeploymentHistoryHeader
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx
deleted file mode 100644
index 3763fd8e1..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistorySidebar.tsx
+++ /dev/null
@@ -1,77 +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 { useEffect } from 'react'
-import { NavLink, useRouteMatch, useParams } from 'react-router-dom'
-import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
-import { DeploymentHistoryParamsType } from './types'
-import { getDeploymentHistoryList } from '../service'
-import { DeploymentHistorySidebarType } from '../types'
-import { URLS } from '../../../../Common'
-
-const DeploymentHistorySidebar = ({
- deploymentHistoryList,
- setDeploymentHistoryList,
-}: DeploymentHistorySidebarType) => {
- const match = useRouteMatch()
- const { appId, pipelineId, triggerId } = useParams()
- useEffect(() => {
- if (!deploymentHistoryList) {
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
- getDeploymentHistoryList(appId, pipelineId, triggerId).then((response) => {
- setDeploymentHistoryList(response.result)
- })
- }
- }, [deploymentHistoryList])
-
- const getNavLink = (componentId: number, componentName: string, key: string, childComponentName?: string) => {
- const currentComponent = DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[componentName]
- const childComponentDetail = childComponentName ? `/${childComponentName}` : ''
- const configURL = `${match.url.split(URLS.DEPLOYMENT_HISTORY_CONFIGURATIONS)[0]}${
- URLS.DEPLOYMENT_HISTORY_CONFIGURATIONS
- }/${currentComponent.VALUE}/${componentId}${childComponentDetail}`
- return (
-
-
- {currentComponent.DISPLAY_NAME + childComponentDetail}
-
-
- )
- }
-
- return (
-
- {deploymentHistoryList?.map((historicalComponent, index) =>
- historicalComponent.childList?.length > 0
- ? historicalComponent.childList.map((historicalComponentName, childIndex) =>
- getNavLink(
- historicalComponent.id,
- historicalComponent.name,
- `config-${index}-${childIndex}`,
- historicalComponentName,
- ),
- )
- : getNavLink(historicalComponent.id, historicalComponent.name, `config-${index}`),
- )}
-
- )
-}
-
-export default DeploymentHistorySidebar
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx
deleted file mode 100644
index 94dcac337..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/index.tsx
+++ /dev/null
@@ -1,19 +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.
- */
-
-export { default as DeploymentHistoryDetailedView } from './DeploymentHistoryDetailedView'
-export { default as DeploymentHistoryConfigList } from './DeploymentHistoryConfigList.component'
-export { default as DeploymentHistoryDiffView } from './DeploymentHistoryDiffView'
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx
deleted file mode 100644
index 74879b908..000000000
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryDiff/types.tsx
+++ /dev/null
@@ -1,56 +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 { OptionType } from '../../../../Common'
-import { DeploymentTemplateList, RunSourceType, RenderRunSourceType } from '../types'
-
-export interface DeploymentHistoryParamsType {
- appId: string
- pipelineId?: string
- historyComponent?: string
- baseConfigurationId?: string
- historyComponentName?: string
- envId?: string
- triggerId?: string
-}
-
-export interface CompareViewDeploymentType extends RenderRunSourceType {
- setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
- resourceId?: number
-}
-
-export interface DeploymentTemplateOptions extends OptionType {
- author: string
- status: string
- runSource?: RunSourceType
-}
-
-export interface CompareWithBaseConfiguration extends RenderRunSourceType {
- selectedDeploymentTemplate: DeploymentTemplateOptions
- setSelectedDeploymentTemplate: (selected) => void
- setFullScreenView: React.Dispatch>
- setLoader: React.Dispatch>
- setPreviousConfigAvailable: React.Dispatch>
- resourceId?: number
-}
-
-export interface TemplateConfiguration {
- setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
-}
diff --git a/src/Shared/Components/CICDHistory/History.components.tsx b/src/Shared/Components/CICDHistory/History.components.tsx
index f70cee230..5fa8b4e81 100644
--- a/src/Shared/Components/CICDHistory/History.components.tsx
+++ b/src/Shared/Components/CICDHistory/History.components.tsx
@@ -16,14 +16,13 @@
import { useCallback, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
-import { withShortcut, IWithShortcut } from 'react-keybind'
import {
ClipboardButton,
GenericEmptyState,
Tooltip,
extractImage,
- IS_PLATFORM_MAC_OS,
useSuperAdmin,
+ useRegisterShortcut,
} from '../../../Common'
import { EMPTY_STATE_STATUS } from '../../constants'
import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
@@ -34,69 +33,56 @@ import { ReactComponent as ZoomIn } from '../../../Assets/Icon/ic-fullscreen.svg
import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscreen.svg'
import './cicdHistory.scss'
-export const LogResizeButton = withShortcut(
- ({
- shortcutCombo = ['F'],
- showOnlyWhenPathIncludesLogs = true,
- fullScreenView,
- setFullScreenView,
- shortcut,
- }: LogResizeButtonType & IWithShortcut): JSX.Element => {
- const { pathname } = useLocation()
+export const LogResizeButton = ({
+ shortcutCombo = ['F'],
+ showOnlyWhenPathIncludesLogs = true,
+ fullScreenView,
+ setFullScreenView,
+}: LogResizeButtonType): JSX.Element => {
+ const { pathname } = useLocation()
+ const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
- const toggleFullScreen = useCallback((): void => {
- setFullScreenView(!fullScreenView)
- }, [fullScreenView])
+ const toggleFullScreen = useCallback((): void => {
+ setFullScreenView(!fullScreenView)
+ }, [fullScreenView])
- const showButton = !showOnlyWhenPathIncludesLogs || pathname.includes('/logs')
- const doesShortcutContainCmdKey = shortcutCombo.some((key) => key === 'Control') && IS_PLATFORM_MAC_OS
+ const showButton = !showOnlyWhenPathIncludesLogs || pathname.includes('/logs')
- useEffect(() => {
- const combo = shortcutCombo
- .map((key) => {
- if (key === 'Control') {
- return IS_PLATFORM_MAC_OS ? 'cmd' : 'ctrl'
- }
- return key.toLowerCase()
- })
- .join('+')
+ useEffect(() => {
+ if (showButton && shortcutCombo.length) {
+ registerShortcut({ callback: toggleFullScreen, keys: shortcutCombo })
+ }
- // FIXME: disabling shortcut for macos since pressing cmd breaks shortcuts through react-keybind
- if (showButton && shortcutCombo.length && !doesShortcutContainCmdKey) {
- shortcut.registerShortcut(toggleFullScreen, [combo], 'ToggleFullscreen', 'Enter/Exit fullscreen')
- }
+ return () => {
+ unregisterShortcut(shortcutCombo)
+ }
+ }, [showButton, toggleFullScreen])
- return () => {
- shortcut.unregisterShortcut([combo])
- }
- }, [showButton, toggleFullScreen])
-
- return (
- showButton && (
-
+
- )
+ {fullScreenView ? (
+
+ ) : (
+
+ )}
+
+
)
- },
-)
+ )
+}
export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
diff --git a/src/Shared/Components/CICDHistory/LogsRenderer.tsx b/src/Shared/Components/CICDHistory/LogsRenderer.tsx
index 480f34edf..5cf8dcfa8 100644
--- a/src/Shared/Components/CICDHistory/LogsRenderer.tsx
+++ b/src/Shared/Components/CICDHistory/LogsRenderer.tsx
@@ -22,7 +22,6 @@ import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
import { escapeRegExp } from '@Shared/Helpers'
import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
-import { withShortcut, IWithShortcut } from 'react-keybind'
import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg'
import {
Progressing,
@@ -33,6 +32,7 @@ import {
SearchBar,
useUrlFilters,
Tooltip,
+ useRegisterShortcut,
} from '../../../Common'
import LogStageAccordion from './LogStageAccordion'
import {
@@ -173,13 +173,7 @@ const useCIEventSource = (url: string, maxLength?: number): [string[], EventSour
return [dataVal, eventSourceRef.current, logsNotAvailableError]
}
-const LogsRenderer = ({
- triggerDetails,
- isBlobStorageConfigured,
- parentType,
- fullScreenView,
- shortcut,
-}: LogsRendererType & IWithShortcut) => {
+const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, fullScreenView }: LogsRendererType) => {
const { pipelineId, envId, appId } = useParams
()
const logsURL =
parentType === HistoryComponentType.CI
@@ -200,6 +194,8 @@ const LogsRenderer = ({
const areAllStagesExpanded = useMemo(() => stageList.every((item) => item.isOpen), [stageList])
const shortcutTippyText = areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages'
+ const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
const areStagesAvailable =
(window._env_.FEATURE_STEP_WISE_LOGS_ENABLE && streamDataList[0]?.startsWith(LOGS_STAGE_IDENTIFIER)) || false
@@ -431,15 +427,10 @@ const LogsRenderer = ({
}, [areAllStagesExpanded])
useEffect(() => {
- shortcut.registerShortcut(
- handleToggleOpenAllStages,
- ['e'],
- 'ExpandCollapseLogStages',
- 'Expand/Collapse all log stages',
- )
+ registerShortcut({ callback: handleToggleOpenAllStages, keys: ['E'] })
return () => {
- shortcut.unregisterShortcut(['e'])
+ unregisterShortcut(['E'])
}
}, [handleToggleOpenAllStages])
@@ -623,4 +614,4 @@ const LogsRenderer = ({
: renderLogs()
}
-export default withShortcut(LogsRenderer)
+export default LogsRenderer
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
index 87fc4953b..1113074dc 100644
--- a/src/Shared/Components/CICDHistory/TriggerOutput.tsx
+++ b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -24,8 +24,8 @@ import { CommitChipCell } from '@Shared/Components/CommitChipCell'
import { ReactComponent as ICLines } from '@Icons/ic-lines.svg'
import { ReactComponent as ICPulsateStatus } from '@Icons/ic-pulsate-status.svg'
import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
-import { getDeploymentStageTitle } from '@Pages/App'
import { ToastManager, ToastVariantType } from '@Shared/Services'
+import { getDeploymentStageTitle } from '@Pages/Applications'
import {
ConfirmationDialog,
DATE_TIME_FORMATS,
@@ -66,7 +66,7 @@ import { GitTriggers } from '../../types'
import warn from '../../../Assets/Icon/ic-warning.svg'
import LogsRenderer from './LogsRenderer'
import DeploymentDetailSteps from './DeploymentDetailSteps'
-import { DeploymentHistoryDetailedView, DeploymentHistoryConfigList } from './DeploymentHistoryDiff'
+import { DeploymentHistoryConfigDiff } from './DeploymentHistoryConfigDiff'
import { GitChanges, Scroller } from './History.components'
import Artifacts from './Artifacts'
import { statusColor as colorMap, EMPTY_STATE_STATUS, PULSATING_STATUS_MAP } from '../../constants'
@@ -297,7 +297,7 @@ const StartDetails = ({
return (
-
+
Start
@@ -488,8 +488,6 @@ const HistoryLogs: React.FC
= ({
triggerDetails,
loading,
setFullScreenView,
- deploymentHistoryList,
- setDeploymentHistoryList,
deploymentAppType,
isBlobStorageConfigured,
userApprovalMetadata,
@@ -509,6 +507,8 @@ const HistoryLogs: React.FC = ({
scrollToTop,
scrollToBottom,
fullScreenView,
+ appName,
+ triggerHistory,
}) => {
const { path } = useRouteMatch()
const { appId, pipelineId, triggerId, envId } = useParams<{
@@ -528,7 +528,7 @@ const HistoryLogs: React.FC = ({
const CDBuildReportUrl = `app/cd-pipeline/workflow/download/${appId}/${envId}/${pipelineId}/${triggerId}`
return (
-
+
{loading ? (
) : (
@@ -591,24 +591,16 @@ const HistoryLogs: React.FC
= ({
/>
{triggerDetails.stage === 'DEPLOY' && (
-
-
+
-
- )}
- {triggerDetails.stage === 'DEPLOY' && (
-
-
)}
@@ -662,8 +654,6 @@ const TriggerOutput = ({
triggerHistory,
setTriggerHistory,
setFullScreenView,
- setDeploymentHistoryList,
- deploymentHistoryList,
deploymentAppType,
isBlobStorageConfigured,
appReleaseTags,
@@ -683,6 +673,7 @@ const TriggerOutput = ({
scrollToTop,
scrollToBottom,
renderTargetConfigInfo,
+ appName,
}: TriggerOutputProps) => {
const { appId, triggerId, envId, pipelineId } = useParams<{
appId: string
@@ -913,8 +904,6 @@ const TriggerOutput = ({
userApprovalMetadata={triggerDetailsResult?.result?.userApprovalMetadata}
triggeredByEmail={triggerDetailsResult?.result?.triggeredByEmail}
setFullScreenView={setFullScreenView}
- setDeploymentHistoryList={setDeploymentHistoryList}
- deploymentHistoryList={deploymentHistoryList}
deploymentAppType={deploymentAppType}
isBlobStorageConfigured={isBlobStorageConfigured}
artifactId={triggerDetailsResult?.result?.artifactId}
@@ -932,6 +921,8 @@ const TriggerOutput = ({
scrollToTop={scrollToTop}
scrollToBottom={scrollToBottom}
fullScreenView={fullScreenView}
+ appName={appName}
+ triggerHistory={triggerHistory}
/>
)
diff --git a/src/Shared/Components/CICDHistory/cicdHistory.scss b/src/Shared/Components/CICDHistory/cicdHistory.scss
index 2080de484..7df3367f4 100644
--- a/src/Shared/Components/CICDHistory/cicdHistory.scss
+++ b/src/Shared/Components/CICDHistory/cicdHistory.scss
@@ -114,8 +114,17 @@
.deployment-diff__upper {
display: grid;
- grid-template-columns: 50% 50%;
- grid-template-rows: auto;
+ grid-template-columns: repeat(2, 1fr);
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 1px;
+ height: 100%;
+ left: calc(50% - 1px);
+ background: var(--N200);
+ }
}
.historical-diff__left {
diff --git a/src/Shared/Components/CICDHistory/index.tsx b/src/Shared/Components/CICDHistory/index.tsx
index 0940f1876..002bcd92f 100644
--- a/src/Shared/Components/CICDHistory/index.tsx
+++ b/src/Shared/Components/CICDHistory/index.tsx
@@ -27,6 +27,6 @@ export * from './History.components'
export * from './utils'
export * from './TriggerOutput'
export { default as LogsRenderer } from './LogsRenderer'
-export * from './DeploymentHistoryDiff'
+export * from './DeploymentHistoryConfigDiff'
export * from './CiPipelineSourceConfig'
export * from './StatusFilterButtonComponent'
diff --git a/src/Shared/Components/CICDHistory/service.tsx b/src/Shared/Components/CICDHistory/service.tsx
index 437e67ae9..2763c2eb1 100644
--- a/src/Shared/Components/CICDHistory/service.tsx
+++ b/src/Shared/Components/CICDHistory/service.tsx
@@ -197,8 +197,11 @@ export const prepareConfigMapAndSecretData = (
let typeValue = 'Environment Variable'
if (rawData.type === 'volume') {
typeValue = 'Data Volume'
- if (rawData.mountPath) {
- secretValues['mountPath'] = { displayName: 'Volume mount path', value: rawData.mountPath }
+ if (rawData.mountPath || rawData.defaultMountPath) {
+ secretValues['mountPath'] = {
+ displayName: 'Volume mount path',
+ value: rawData.mountPath || rawData.defaultMountPath,
+ }
}
if (rawData.subPath) {
secretValues['subPath'] = { displayName: 'Set SubPath', value: 'Yes' }
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index 4ef8ce948..558b5806a 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -15,6 +15,7 @@
*/
import { CSSProperties, ReactElement } from 'react'
+import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types'
import {
OptionType,
UserApprovalMetadataType,
@@ -27,7 +28,6 @@ import {
PaginationProps,
useScrollable,
SortingOrder,
- SupportedKeyboardKeysType,
} from '../../../Common'
import { DeploymentStageType } from '../../constants'
import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
@@ -388,14 +388,13 @@ export interface TriggerOutputProps extends RenderRunSourceType, Pick
setFullScreenView: React.Dispatch>
- deploymentHistoryList: DeploymentTemplateList[]
- setDeploymentHistoryList: React.Dispatch>
deploymentAppType: DeploymentAppTypes
isBlobStorageConfigured: boolean
appReleaseTags: string[]
tagsEditable: boolean
hideImageTaggingHardDelete: boolean
fetchIdData: FetchIdDataStatus
+ appName: string
selectedEnvironmentName?: string
renderCIListHeader?: (renderCIListHeaderProps: RenderCIListHeaderProps) => JSX.Element
renderDeploymentApprovalInfo?: (userApprovalMetadata: UserApprovalMetadataType) => JSX.Element
@@ -418,8 +417,6 @@ export interface HistoryLogsProps
| 'scrollToTop'
| 'scrollToBottom'
| 'setFullScreenView'
- | 'deploymentHistoryList'
- | 'setDeploymentHistoryList'
| 'deploymentAppType'
| 'isBlobStorageConfigured'
| 'appReleaseTags'
@@ -431,6 +428,8 @@ export interface HistoryLogsProps
| 'renderCIListHeader'
| 'renderVirtualHistoryArtifacts'
| 'fullScreenView'
+ | 'appName'
+ | 'triggerHistory'
> {
triggerDetails: History
loading: boolean
@@ -489,8 +488,11 @@ export interface DeploymentTemplateHistoryType {
isUnpublished?: boolean
isDeleteDraft?: boolean
rootClassName?: string
- comparisonBodyClassName?: string
- sortOrder?: SortingOrder
+ codeEditorKey?: React.Key
+ sortingConfig?: {
+ sortBy: string
+ sortOrder: SortingOrder
+ }
}
export interface DeploymentHistoryDetailRes extends ResponseType {
result?: DeploymentHistoryDetail
diff --git a/src/Shared/Components/Collapse/Collapse.tsx b/src/Shared/Components/Collapse/Collapse.tsx
index 26e9b8768..273dd55a3 100644
--- a/src/Shared/Components/Collapse/Collapse.tsx
+++ b/src/Shared/Components/Collapse/Collapse.tsx
@@ -1,6 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
import { CollapseProps } from './types'
-export const Collapse = ({ expand, children }: CollapseProps) => (
- // TODO: removed animation because of miscalculations (broken with auto editor height)
- {expand ? children : null}
-)
+/**
+ * Collapse component for smoothly expanding or collapsing its content.
+ * Dynamically calculates the content height and applies smooth transitions.
+ * It also supports a callback when the transition ends.
+ */
+export const Collapse = ({ expand, onTransitionEnd, children }: CollapseProps) => {
+ // Reference to the content container to calculate its height
+ const contentRef = useRef(null)
+
+ // State to store the dynamic height of the content; initially set to 0 if collapsed
+ const [contentHeight, setContentHeight] = useState(!expand ? 0 : null)
+
+ /**
+ * Effect to observe changes in the content size when expanded and recalculate the height.
+ * Uses a ResizeObserver to handle dynamic content size changes.
+ */
+ useEffect(() => {
+ if (!contentHeight || !expand || !contentRef.current) {
+ return null
+ }
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ // Update the height when content size changes
+ setContentHeight(entries[0].contentRect.height)
+ })
+
+ // Observe the content container for resizing
+ resizeObserver.observe(contentRef.current)
+
+ // Clean up the observer when the component unmounts or content changes
+ return () => {
+ resizeObserver.disconnect()
+ }
+ }, [contentHeight, expand])
+
+ /**
+ * Effect to handle the initial setting of content height during expansion or collapse.
+ * Sets height to the content's full height when expanded, or 0 when collapsed.
+ */
+ useEffect(() => {
+ if (expand) {
+ // Set the content height when expanded
+ setContentHeight(contentRef.current?.getBoundingClientRect().height)
+ } else {
+ // Collapse content by setting the height to 0
+ setContentHeight(0)
+ }
+ }, [expand])
+
+ return (
+
+ {/* The container that holds the collapsible content */}
+
{children}
+
) : (
- items.map(({ title, href, iconConfig, subtitle, onClick }) => (
+ items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
-
+
{title}
{subtitle && (
@@ -88,7 +90,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
>
)}
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
index be4944f82..e67b599ff 100644
--- a/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
+++ b/src/Shared/Components/CollapsibleList/CollapsibleList.types.ts
@@ -10,6 +10,10 @@ export interface CollapsibleListItem {
* The subtitle of the list item.
*/
subtitle?: string
+ /**
+ * If true, the title will be rendered with line-through.
+ */
+ strikeThrough?: boolean
/**
* Configuration for the icon.
*/
diff --git a/src/Shared/Components/DatePicker/DateTimePicker.tsx b/src/Shared/Components/DatePicker/DateTimePicker.tsx
index 3cf86875a..515f04975 100644
--- a/src/Shared/Components/DatePicker/DateTimePicker.tsx
+++ b/src/Shared/Components/DatePicker/DateTimePicker.tsx
@@ -110,7 +110,6 @@ const DateTimePicker = ({
onChange={handleTimeChange}
data-testid={dataTestIdForTime}
menuSize={ComponentSizeType.xs}
- menuPosition="fixed"
size={ComponentSizeType.large}
shouldMenuAlignRight
/>
diff --git a/src/Shared/Components/DatePicker/TimeSelect.tsx b/src/Shared/Components/DatePicker/TimeSelect.tsx
index 3ffc30aa4..01c8ba7d0 100644
--- a/src/Shared/Components/DatePicker/TimeSelect.tsx
+++ b/src/Shared/Components/DatePicker/TimeSelect.tsx
@@ -14,7 +14,6 @@
* limitations under the License.
*/
-import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
import { ReactComponent as ClockIcon } from '@Icons/ic-clock.svg'
import { ComponentSizeType } from '@Shared/constants'
import { DEFAULT_TIME_OPTIONS } from './utils'
@@ -29,26 +28,18 @@ export const TimePickerSelect = ({
error,
selectedTimeOption,
}: TimeSelectProps) => (
- <>
- }
- onChange={onChange}
- data-testid={DATE_PICKER_IDS.TIME}
- size={ComponentSizeType.large}
- menuPosition="fixed"
- />
- {error && (
-
-
- {error}
-
- )}
-
+ }
+ onChange={onChange}
+ data-testid={DATE_PICKER_IDS.TIME}
+ size={ComponentSizeType.large}
+ error={error}
+ />
)
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
index 7c48506d8..b12795bde 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -11,10 +11,17 @@ export const DeploymentConfigDiff = ({
goBackURL,
navHeading,
navHelpText,
+ isNavHelpTextShowingError,
tabConfig,
+ errorConfig,
+ showDetailedDiffState,
+ hideDiffState,
+ renderedInDrawer,
...resProps
}: DeploymentConfigDiffProps) => (
-
+
+
-
)
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts
new file mode 100644
index 000000000..590cdaf86
--- /dev/null
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.constants.ts
@@ -0,0 +1,35 @@
+import { FunctionComponent, SVGProps } from 'react'
+
+import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg'
+import { ReactComponent as ICDiffFileAdded } from '@Icons/ic-diff-file-added.svg'
+import { ReactComponent as ICDiffFileRemoved } from '@Icons/ic-diff-file-removed.svg'
+
+import { DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+
+export const diffStateTextMap: Record
= {
+ hasDiff: 'Has difference',
+ added: 'Added',
+ deleted: 'Deleted',
+ noDiff: 'No change',
+}
+
+export const diffStateIconMap: Record>> = {
+ hasDiff: ICDiffFileUpdated,
+ added: ICDiffFileAdded,
+ deleted: ICDiffFileRemoved,
+ noDiff: null,
+}
+
+export const diffStateTooltipTextMap: Record = {
+ hasDiff: 'File has difference',
+ added: 'File has been added',
+ deleted: 'File has been deleted',
+ noDiff: null,
+}
+
+export const diffStateTextColorMap: Record = {
+ hasDiff: 'cy-7',
+ added: 'cg-5',
+ deleted: 'cr-5',
+ noDiff: 'cn-7',
+}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
index 9e0859448..e5f8a18d5 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
@@ -3,6 +3,10 @@
grid-template-columns: 255px 1fr;
height: 100%;
+ &--drawer {
+ grid-template-columns: 220px 1fr;
+ }
+
&__accordion {
scroll-margin-top: 12px;
}
@@ -18,8 +22,7 @@
}
&__main-content {
- height: calc(100vh - 122px);
- overflow: auto;
+ flex-grow: 1;
&__heading {
display: grid;
@@ -27,10 +30,6 @@
grid-template-columns: calc(50% - 15px) calc(50% - 15px);
grid-template-rows: auto;
}
-
- &__comparison {
- margin: 16px 0 0;
- }
}
& .react-monaco-editor-container {
@@ -39,7 +38,7 @@
&__tab-list {
label {
- flex-grow: 1
+ flex-grow: 1;
}
.radio__item-label {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index 9064785a4..f23f7d9c8 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -5,14 +5,22 @@ import {
ConfigMapSecretDataConfigDatumDTO,
DeploymentTemplateDTO,
EnvResourceType,
- ManifestTemplateDTO,
+ TemplateListDTO,
} from '@Shared/Services'
+import { ManifestTemplateDTO } from '@Pages/Applications'
import { DeploymentHistoryDetail } from '../CICDHistory'
import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
import { SelectPickerProps } from '../SelectPicker'
import { CollapseProps } from '../Collapse'
+export enum DeploymentConfigDiffState {
+ NO_DIFF = 'noDiff',
+ HAS_DIFF = 'hasDiff',
+ ADDED = 'added',
+ DELETED = 'deleted',
+}
+
export interface DeploymentConfigType {
list: DeploymentHistoryDetail
heading: React.ReactNode
@@ -21,10 +29,13 @@ export interface DeploymentConfigType {
export interface DeploymentConfigListItem {
id: string
title: string
+ name?: string
+ pathType: EnvResourceType
primaryConfig: DeploymentConfigType
secondaryConfig: DeploymentConfigType
- hasDiff?: boolean
- isDeploymentTemplate?: boolean
+ diffState: DeploymentConfigDiffState
+ singleView?: boolean
+ groupHeader?: string
}
export type DeploymentConfigDiffSelectPickerProps =
@@ -42,7 +53,8 @@ export type DeploymentConfigDiffSelectPickerProps =
}
export interface DeploymentConfigDiffNavigationItem extends Pick {
- hasDiff?: boolean
+ Icon?: React.FunctionComponent>
+ diffState: DeploymentConfigListItem['diffState']
}
export interface DeploymentConfigDiffNavigationCollapsibleItem
@@ -55,14 +67,19 @@ export interface DeploymentConfigDiffProps {
errorConfig?: {
error: boolean
code: number
+ message?: string
+ redirectURL?: string
reload: () => void
}
configList: DeploymentConfigListItem[]
+ showDetailedDiffState?: boolean
+ hideDiffState?: boolean
headerText?: string
scrollIntoViewId?: string
selectorsConfig: {
primaryConfig: DeploymentConfigDiffSelectPickerProps[]
secondaryConfig: DeploymentConfigDiffSelectPickerProps[]
+ hideDivider?: boolean
}
sortingConfig?: {
sortBy: string
@@ -74,17 +91,33 @@ export interface DeploymentConfigDiffProps {
goBackURL?: string
navHeading: string
navHelpText?: string
+ isNavHelpTextShowingError?: boolean
tabConfig?: {
tabs: string[]
activeTab: string
onClick: (tab: string) => void
}
+ scopeVariablesConfig?: {
+ convertVariables: boolean
+ onConvertVariablesClick: () => void
+ }
+ renderedInDrawer?: boolean
}
export interface DeploymentConfigDiffNavigationProps
extends Pick<
DeploymentConfigDiffProps,
- 'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
+ | 'isLoading'
+ | 'navList'
+ | 'collapsibleNavList'
+ | 'goBackURL'
+ | 'navHeading'
+ | 'navHelpText'
+ | 'tabConfig'
+ | 'errorConfig'
+ | 'isNavHelpTextShowingError'
+ | 'showDetailedDiffState'
+ | 'hideDiffState'
> {}
export interface DeploymentConfigDiffMainProps
@@ -97,16 +130,20 @@ export interface DeploymentConfigDiffMainProps
| 'scrollIntoViewId'
| 'selectorsConfig'
| 'sortingConfig'
+ | 'scopeVariablesConfig'
+ | 'showDetailedDiffState'
+ | 'hideDiffState'
> {}
-export interface DeploymentConfigDiffAccordionProps extends Pick {
- id: string
- title: string
- children: React.ReactNode
- hasDiff?: boolean
- isExpanded?: boolean
- onClick?: (e: React.MouseEvent) => void
-}
+export type DeploymentConfigDiffAccordionProps = Pick &
+ Pick & {
+ id: string
+ title: string
+ children: React.ReactNode
+ diffState: DeploymentConfigDiffState
+ isExpanded?: boolean
+ onClick?: (e: React.MouseEvent) => void
+ }
export type DiffHeadingDataType = DeploymentTemplate extends true
? DeploymentTemplateDTO
@@ -116,13 +153,16 @@ export type AppEnvDeploymentConfigListParams = (IsManifestView e
? {
currentList: ManifestTemplateDTO
compareList: ManifestTemplateDTO
- sortOrder?: never
+ compareToTemplateOptions?: never
+ compareWithTemplateOptions?: never
}
: {
currentList: AppEnvDeploymentConfigDTO
compareList: AppEnvDeploymentConfigDTO
- sortOrder?: SortingOrder
+ compareToTemplateOptions?: TemplateListDTO[]
+ compareWithTemplateOptions?: TemplateListDTO[]
}) & {
getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
isManifestView?: IsManifestView
+ convertVariables?: boolean
}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index f4845458a..9329419b3 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -1,18 +1,21 @@
import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
import { ReactComponent as ICEditFile } from '@Icons/ic-edit-file.svg'
-import { stringComparatorBySortOrder, yamlComparatorBySortOrder } from '@Shared/Helpers'
+import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
+import { stringComparatorBySortOrder } from '@Shared/Helpers'
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '@Shared/constants'
-import { YAMLStringify } from '@Common/Helper'
-import { SortingOrder } from '@Common/Constants'
import {
DeploymentConfigDiffProps,
+ DeploymentConfigDiffState,
+ DeploymentHistoryDetail,
DeploymentHistorySingleValue,
AppEnvDeploymentConfigListParams,
DiffHeadingDataType,
prepareHistoryData,
} from '@Shared/Components'
+import { deepEqual } from '@Common/Helper'
+import { ManifestTemplateDTO } from '@Pages/Applications'
import {
ConfigMapSecretDataConfigDatumDTO,
ConfigMapSecretDataDTO,
@@ -20,11 +23,39 @@ import {
DeploymentTemplateDTO,
DraftState,
EnvResourceType,
- ManifestTemplateDTO,
+ PipelineConfigDataDTO,
TemplateListDTO,
TemplateListType,
} from '../../Services/app.types'
+export const getDeploymentTemplateData = (data: DeploymentTemplateDTO) => {
+ const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
+
+ return (
+ parsedDraftData?.envOverrideValues ||
+ parsedDraftData?.valuesOverride ||
+ parsedDraftData?.defaultAppOverride ||
+ data?.data ||
+ null
+ )
+}
+
+const getDeploymentTemplateAppMetricsAndTemplateVersion = (
+ data: DeploymentTemplateDTO,
+ templateOptions: TemplateListDTO[],
+) => {
+ const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
+ const draftTemplateVersion = templateOptions?.find(
+ ({ chartRefId }) => parsedDraftData?.chartRefId === chartRefId,
+ )?.chartVersion
+
+ return {
+ isAppMetricsEnabled:
+ parsedDraftData || data ? parsedDraftData?.isAppMetricsEnabled || data?.isAppMetricsEnabled || false : null,
+ templateVersion: draftTemplateVersion || data?.templateVersion,
+ }
+}
+
/**
* Retrieves the draft data from the given configuration data object.
*
@@ -243,6 +274,32 @@ const getCodeEditorData = (
return { compareToCodeEditorData, compareWithCodeEditorData }
}
+/**
+ * Compares two values and returns the appropriate deployment configuration difference state.
+ *
+ * @param compareToValue - The original value to compare.
+ * @param compareWithValue - The new value to compare against the original.
+ * @returns `DeploymentConfigDiffState` enum value indicating the difference between the two values
+ */
+const getDiffState = (compareToValue: DeploymentHistoryDetail, compareWithValue: DeploymentHistoryDetail) => {
+ const isCompareToPresent = !!compareToValue.codeEditorValue.value
+ const isCompareWithPresent = !!compareWithValue.codeEditorValue.value
+
+ if (!isCompareToPresent && isCompareWithPresent) {
+ return DeploymentConfigDiffState.DELETED
+ }
+
+ if (isCompareToPresent && !isCompareWithPresent) {
+ return DeploymentConfigDiffState.ADDED
+ }
+
+ if (!deepEqual(compareToValue, compareWithValue)) {
+ return DeploymentConfigDiffState.HAS_DIFF
+ }
+
+ return DeploymentConfigDiffState.NO_DIFF
+}
+
/**
* Prepares the data for displaying the diff view between two configuration items.
*
@@ -289,37 +346,26 @@ const getDiffViewData = (
type === ConfigResourceType.Secret && !compareWithIsAdmin,
)
- // Check if there is a difference between the compareTo and compareWith data
- const hasDiff = compareWithCodeEditorData.value !== compareToCodeEditorData.value
-
// Return the combined diff data
return {
compareToDiff,
compareWithDiff,
- hasDiff,
+ diffState: getDiffState(compareToDiff, compareWithDiff),
}
}
-const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null, sortOrder: SortingOrder) => {
- const parsedDraftData = JSON.parse(data?.deploymentDraftData?.configData[0].draftMetadata.data || null)
- const _data =
- parsedDraftData?.envOverrideValues ||
- parsedDraftData?.valuesOverride ||
- parsedDraftData?.defaultAppOverride ||
- data?.data ||
- null
-
+const getDeploymentTemplateDiffViewData = (data: DeploymentTemplateDTO | null, templateOptions: TemplateListDTO[]) => {
+ const _data = getDeploymentTemplateData(data)
const codeEditorValue = {
displayName: 'data',
- value: _data
- ? YAMLStringify(_data, {
- sortMapEntries: (a, b) => yamlComparatorBySortOrder(a, b, sortOrder),
- }) ?? ''
- : '',
+ value: _data ? JSON.stringify(_data) : '',
}
const diffViewData = prepareHistoryData(
- { codeEditorValue },
+ {
+ ...getDeploymentTemplateAppMetricsAndTemplateVersion(data, templateOptions),
+ codeEditorValue,
+ },
DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP.DEPLOYMENT_TEMPLATE.VALUE,
)
@@ -340,6 +386,20 @@ const getManifestDiffViewData = (data: ManifestTemplateDTO) => {
return diffViewData
}
+const getPipelineConfigDiffViewData = (data: PipelineConfigDataDTO) => {
+ const codeEditorValue = {
+ displayName: 'data',
+ value: data?.data ? JSON.stringify(data.data) : '',
+ }
+
+ const diffViewData = prepareHistoryData(
+ { ...(data || {}), strategy: data?.Strategy, codeEditorValue },
+ DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP.PIPELINE_STRATEGY.VALUE,
+ )
+
+ return diffViewData
+}
+
const getDiffHeading = (
data: DiffHeadingDataType,
deploymentTemplate?: DeploymentTemplate,
@@ -396,20 +456,50 @@ const getDiffHeading = (
)
}
+const getConfigMapSecretResolvedValues = (configMapSecretData: ConfigMapSecretDataDTO, convertVariables: boolean) => {
+ const resolvedData: ConfigMapSecretDataConfigDatumDTO[] =
+ ((convertVariables && JSON.parse(configMapSecretData?.resolvedValue || null)) || configMapSecretData?.data)
+ ?.configData || []
+
+ const data =
+ (convertVariables &&
+ resolvedData.map((item, index) => {
+ if (configMapSecretData.data.configData[index].draftMetadata) {
+ const resolvedDraftData =
+ configMapSecretData.data.configData[index].draftMetadata.draftResolvedValue ||
+ configMapSecretData.data.configData[index].draftMetadata.data
+
+ return {
+ ...configMapSecretData.data.configData[index],
+ draftMetadata: {
+ ...configMapSecretData.data.configData[index].draftMetadata,
+ data: resolvedDraftData,
+ },
+ }
+ }
+
+ return item
+ })) ||
+ resolvedData
+
+ return data
+}
+
const getConfigMapSecretData = (
compareToList: ConfigMapSecretDataDTO,
compareWithList: ConfigMapSecretDataDTO,
resourceType: ConfigResourceType,
compareToIsAdmin: boolean,
compareWithIsAdmin: boolean,
+ convertVariables: boolean,
) => {
const combinedList = mergeConfigDataArraysByName(
- compareToList?.data.configData || [],
- compareWithList?.data.configData || [],
+ getConfigMapSecretResolvedValues(compareToList, convertVariables),
+ getConfigMapSecretResolvedValues(compareWithList, convertVariables),
)
- const deploymentConfig = combinedList.map(([currentItem, compareItem]) => {
- const { compareToDiff, compareWithDiff, hasDiff } = getDiffViewData(
+ const deploymentConfig: DeploymentConfigDiffProps['configList'] = combinedList.map(([currentItem, compareItem]) => {
+ const { compareToDiff, compareWithDiff, diffState } = getDiffViewData(
currentItem,
compareItem,
resourceType,
@@ -417,8 +507,12 @@ const getConfigMapSecretData = (
compareWithIsAdmin,
)
+ const pathType =
+ resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret
+
return {
- id: `${resourceType === ConfigResourceType.ConfigMap ? EnvResourceType.ConfigMap : EnvResourceType.Secret}-${currentItem?.name || compareItem?.name}`,
+ id: `${pathType}-${currentItem?.name || compareItem?.name}`,
+ pathType,
title: `${resourceType === ConfigResourceType.ConfigMap ? 'ConfigMap' : 'Secret'} / ${currentItem?.name || compareItem?.name}`,
name: currentItem?.name || compareItem?.name,
primaryConfig: {
@@ -429,13 +523,76 @@ const getConfigMapSecretData = (
heading: getDiffHeading(currentItem),
list: compareToDiff,
},
- hasDiff,
+ diffState,
+ groupHeader: resourceType === ConfigResourceType.ConfigMap ? 'CONFIGMAPS' : 'SECRETS',
}
})
return deploymentConfig
}
+const getDeploymentTemplateResolvedData = (deploymentTemplate: DeploymentTemplateDTO): DeploymentTemplateDTO => {
+ try {
+ if (deploymentTemplate.deploymentDraftData) {
+ const parsedDraftResolvedData = JSON.parse(
+ deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.draftResolvedValue,
+ )
+
+ return {
+ ...deploymentTemplate,
+ deploymentDraftData: {
+ ...deploymentTemplate.deploymentDraftData,
+ configData: [
+ {
+ ...deploymentTemplate.deploymentDraftData.configData[0],
+ draftMetadata: {
+ ...deploymentTemplate.deploymentDraftData.configData[0].draftMetadata,
+ data: JSON.stringify({
+ ...JSON.parse(
+ deploymentTemplate.deploymentDraftData.configData[0].draftMetadata.data,
+ ),
+ envOverrideValues: parsedDraftResolvedData,
+ }),
+ },
+ },
+ ],
+ },
+ }
+ }
+
+ return {
+ ...deploymentTemplate,
+ data: deploymentTemplate.resolvedValue,
+ }
+ } catch {
+ return null
+ }
+}
+
+const getConfigDataWithResolvedDeploymentTemplate = (
+ data: AppEnvDeploymentConfigListParams['compareList'],
+ convertVariables: boolean,
+): AppEnvDeploymentConfigListParams['compareList'] => {
+ if (!data) {
+ return {
+ deploymentTemplate: null,
+ configMapData: null,
+ isAppAdmin: null,
+ secretsData: null,
+ pipelineConfigData: null,
+ }
+ }
+
+ if (!data.deploymentTemplate || !convertVariables) {
+ return data
+ }
+
+ return {
+ ...data,
+ deploymentTemplate: getDeploymentTemplateResolvedData(data.deploymentTemplate),
+ }
+}
+
/**
* Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
*
@@ -453,70 +610,129 @@ export const getAppEnvDeploymentConfigList = ): {
configList: DeploymentConfigDiffProps['configList']
navList: DeploymentConfigDiffProps['navList']
collapsibleNavList: DeploymentConfigDiffProps['collapsibleNavList']
} => {
if (!isManifestView) {
- const _currentList = currentList as AppEnvDeploymentConfigListParams['currentList']
- const _compareList = compareList as AppEnvDeploymentConfigListParams['compareList']
- const currentDeploymentData = getDeploymentTemplateDiffViewData(_currentList.deploymentTemplate, sortOrder)
- const compareDeploymentData = getDeploymentTemplateDiffViewData(_compareList.deploymentTemplate, sortOrder)
+ const compareToObject = getConfigDataWithResolvedDeploymentTemplate(
+ currentList as AppEnvDeploymentConfigListParams['currentList'],
+ convertVariables,
+ )
+ const compareWithObject = getConfigDataWithResolvedDeploymentTemplate(
+ compareList as AppEnvDeploymentConfigListParams['compareList'],
+ convertVariables,
+ )
+ const currentDeploymentData = getDeploymentTemplateDiffViewData(
+ compareToObject.deploymentTemplate,
+ compareToTemplateOptions,
+ )
+ const compareDeploymentData = getDeploymentTemplateDiffViewData(
+ compareWithObject.deploymentTemplate,
+ compareWithTemplateOptions,
+ )
const deploymentTemplateData = {
id: EnvResourceType.DeploymentTemplate,
+ pathType: EnvResourceType.DeploymentTemplate,
title: 'Deployment Template',
primaryConfig: {
- heading: getDiffHeading(_compareList.deploymentTemplate, true),
+ heading: getDiffHeading(compareWithObject.deploymentTemplate, true),
list: compareDeploymentData,
},
secondaryConfig: {
- heading: getDiffHeading(_currentList.deploymentTemplate, true),
+ heading: getDiffHeading(compareToObject.deploymentTemplate, true),
list: currentDeploymentData,
},
- hasDiff: currentDeploymentData.codeEditorValue.value !== compareDeploymentData.codeEditorValue.value,
- isDeploymentTemplate: true,
+ diffState: getDiffState(currentDeploymentData, compareDeploymentData),
+ }
+
+ let currentPipelineConfigData: DeploymentHistoryDetail
+ let comparePipelineConfigData: DeploymentHistoryDetail
+ let pipelineConfigData: DeploymentConfigDiffProps['configList'][0]
+
+ if (compareToObject.pipelineConfigData || compareWithObject.pipelineConfigData) {
+ currentPipelineConfigData = getPipelineConfigDiffViewData(compareToObject.pipelineConfigData)
+ comparePipelineConfigData = getPipelineConfigDiffViewData(compareWithObject.pipelineConfigData)
+ pipelineConfigData = {
+ id: EnvResourceType.PipelineStrategy,
+ pathType: EnvResourceType.PipelineStrategy,
+ title: 'Pipeline Configuration',
+ primaryConfig: {
+ heading: null,
+ list: comparePipelineConfigData,
+ },
+ secondaryConfig: {
+ heading: null,
+ list: currentPipelineConfigData,
+ },
+ diffState: getDiffState(currentPipelineConfigData, comparePipelineConfigData),
+ }
}
const cmData = getConfigMapSecretData(
- _currentList.configMapData,
- _compareList.configMapData,
+ compareToObject.configMapData,
+ compareWithObject.configMapData,
ConfigResourceType.ConfigMap,
- _currentList.isAppAdmin,
- _compareList.isAppAdmin,
+ compareToObject.isAppAdmin,
+ compareWithObject.isAppAdmin,
+ convertVariables,
)
const secretData = getConfigMapSecretData(
- _currentList.secretsData,
- _compareList.secretsData,
+ compareToObject.secretsData,
+ compareWithObject.secretsData,
ConfigResourceType.Secret,
- _currentList.isAppAdmin,
- _compareList.isAppAdmin,
+ compareToObject.isAppAdmin,
+ compareWithObject.isAppAdmin,
+ convertVariables,
)
- const configList: DeploymentConfigDiffProps['configList'] = [deploymentTemplateData, ...cmData, ...secretData]
+ const configList: DeploymentConfigDiffProps['configList'] = [
+ deploymentTemplateData,
+ ...(pipelineConfigData ? [pipelineConfigData] : []),
+ ...cmData,
+ ...secretData,
+ ]
const navList: DeploymentConfigDiffProps['navList'] = [
{
title: deploymentTemplateData.title,
- hasDiff: deploymentTemplateData.hasDiff,
+ diffState: deploymentTemplateData.diffState,
href: getNavItemHref(EnvResourceType.DeploymentTemplate, null),
onClick: () => {
const element = document.querySelector(`#${deploymentTemplateData.id}`)
element?.scrollIntoView({ block: 'start' })
},
+ Icon: ICFileCode,
},
+ ...(pipelineConfigData
+ ? [
+ {
+ title: pipelineConfigData.title,
+ diffState: pipelineConfigData.diffState,
+ href: getNavItemHref(EnvResourceType.PipelineStrategy, null),
+ onClick: () => {
+ const element = document.querySelector(`#${pipelineConfigData.id}`)
+ element?.scrollIntoView({ block: 'start' })
+ },
+ Icon: ICFileCode,
+ },
+ ]
+ : []),
]
const collapsibleNavList: DeploymentConfigDiffProps['collapsibleNavList'] = [
{
header: 'ConfigMaps',
id: EnvResourceType.ConfigMap,
- items: cmData.map(({ name, hasDiff, id }) => ({
+ items: cmData.map(({ name, diffState, id }) => ({
title: name,
- hasDiff,
+ diffState,
href: getNavItemHref(EnvResourceType.ConfigMap, name),
onClick: () => {
const element = document.querySelector(`#${id}`)
@@ -528,9 +744,9 @@ export const getAppEnvDeploymentConfigList = ({
+ items: secretData.map(({ name, diffState, id }) => ({
title: name,
- hasDiff,
+ diffState,
href: getNavItemHref(EnvResourceType.Secret, name),
onClick: () => {
const element = document.querySelector(`#${id}`)
@@ -548,14 +764,15 @@ export const getAppEnvDeploymentConfigList = ['currentList']
- const _compareList = compareList as AppEnvDeploymentConfigListParams['compareList']
+ const compareToObject = currentList as AppEnvDeploymentConfigListParams['currentList']
+ const compareWithObject = compareList as AppEnvDeploymentConfigListParams['compareList']
- const currentManifestData = getManifestDiffViewData(_currentList)
- const compareManifestData = getManifestDiffViewData(_compareList)
+ const currentManifestData = getManifestDiffViewData(compareToObject)
+ const compareManifestData = getManifestDiffViewData(compareWithObject)
const manifestData = {
id: EnvResourceType.Manifest,
+ pathType: EnvResourceType.Manifest,
title: 'Manifest Output',
primaryConfig: {
heading: Generated Manifest,
@@ -565,8 +782,8 @@ export const getAppEnvDeploymentConfigList = Generated Manifest,
list: currentManifestData,
},
- hasDiff: currentManifestData.codeEditorValue.value !== compareManifestData.codeEditorValue.value,
- isDeploymentTemplate: true,
+ diffState: getDiffState(currentManifestData, compareManifestData),
+ singleView: true,
}
const configList: DeploymentConfigDiffProps['configList'] = [manifestData]
@@ -574,7 +791,7 @@ export const getAppEnvDeploymentConfigList = {
const element = document.querySelector(`#${manifestData.id}`)
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
index 64b720431..a13f67817 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx
@@ -1,34 +1,44 @@
-import { forwardRef } from 'react'
-
import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
import { Collapse } from '../Collapse'
-import { DeploymentConfigDiffAccordionProps } from './DeploymentConfigDiff.types'
+import { DeploymentConfigDiffAccordionProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+import { diffStateTextColorMap, diffStateTextMap } from './DeploymentConfigDiff.constants'
-export const DeploymentConfigDiffAccordion = forwardRef(
- (
- { hasDiff, children, title, id, isExpanded, onClick, onTransitionEnd }: DeploymentConfigDiffAccordionProps,
- ref,
- ) => (
-
-
+
+ {children}
+
+
-
-
+
+ )
+ }
+ onClick={handleSorting}
+ disabled={isLoading}
+ />
+ )
+ }
+
+ return null
+ }
+
+ const renderScopeVariablesButton = () => {
+ if (scopeVariablesConfig) {
+ const { convertVariables } = scopeVariablesConfig
+
+ return (
+
+
+
+
+
)
}
@@ -117,7 +173,7 @@ export const DeploymentConfigDiffMain = ({
}
const renderDiffs = () =>
- configList.map(({ id, isDeploymentTemplate, primaryConfig, secondaryConfig, title, hasDiff }) => {
+ configList.map(({ id, primaryConfig, secondaryConfig, title, diffState, singleView }) => {
const { heading: primaryHeading, list: primaryList } = primaryConfig
const { heading: secondaryHeading, list: secondaryList } = secondaryConfig
@@ -127,18 +183,20 @@ export const DeploymentConfigDiffMain = ({
id={id}
title={title}
isExpanded={expandedView[id]}
- hasDiff={hasDiff}
+ diffState={diffState}
onClick={handleAccordionClick(id)}
- onTransitionEnd={handleTransitionEnd(id)}
+ onTransitionEnd={onTransitionEnd}
+ showDetailedDiffState={showDetailedDiffState}
+ hideDiffState={hideDiffState}
>
- {isDeploymentTemplate ? (
+ {singleView ? (
<>
{primaryHeading}
{secondaryHeading}
) : (
-
-
{primaryHeading}
-
{secondaryHeading}
-
+ {primaryHeading && secondaryHeading && (
+
+
{primaryHeading}
+
{secondaryHeading}
+
+ )}
{renderDiffs()}
+ }
+
return (
-
+
-
{headerText}
+ {!!headerText &&
{headerText}
}
{renderHeaderSelectors(selectorsConfig.primaryConfig)}
{renderHeaderSelectors(selectorsConfig.secondaryConfig)}
- {renderSortButton()}
+ {(sortingConfig || scopeVariablesConfig) && (
+
+ {renderSortButton()}
+ {renderScopeVariablesButton()}
+
+ )}
-
- {errorConfig?.error &&
}
- {!errorConfig?.error &&
- (isLoading ? (
-
- ) : (
-
{renderDiffs()}
- ))}
-
+
{renderContent()}
)
}
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index b8f2d8307..1211a2901 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -4,11 +4,12 @@ import Tippy from '@tippyjs/react'
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
-import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg'
+import { ReactComponent as ICError } from '@Icons/ic-error.svg'
import { StyledRadioGroup } from '@Common/index'
-import { CollapsibleList } from '../CollapsibleList'
-import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types'
+import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
+import { DeploymentConfigDiffNavigationProps, DeploymentConfigDiffState } from './DeploymentConfigDiff.types'
+import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
// LOADING SHIMMER
const ShimmerText = ({ width }: { width: string }) => (
@@ -24,7 +25,11 @@ export const DeploymentConfigDiffNavigation = ({
goBackURL,
navHeading,
navHelpText,
+ isNavHelpTextShowingError,
tabConfig,
+ errorConfig,
+ showDetailedDiffState,
+ hideDiffState,
}: DeploymentConfigDiffNavigationProps) => {
// STATES
const [expandedIds, setExpandedIds] = useState
>({})
@@ -34,17 +39,23 @@ export const DeploymentConfigDiffNavigation = ({
}, [collapsibleNavList])
/** Collapsible List Config. */
- const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
+ const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
...resListItem,
isExpanded: expandedIds[resListItem.id],
- items: items.map(({ hasDiff, ...resItem }) => ({
+ items: items.map(({ diffState, ...resItem }) => ({
...resItem,
- ...(hasDiff
+ strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
+ ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
? {
iconConfig: {
- Icon: ICDiffFileUpdated,
- props: { className: 'icon-dim-16 dc__no-shrink' },
- tooltipProps: { content: 'File has difference', arrow: false, placement: 'right' as const },
+ Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
+ tooltipProps: {
+ content: showDetailedDiffState
+ ? diffStateTooltipTextMap[diffState]
+ : diffStateTooltipTextMap.hasDiff,
+ arrow: false,
+ placement: 'right' as const,
+ },
},
}
: {}),
@@ -101,45 +112,81 @@ export const DeploymentConfigDiffNavigation = ({
)
}
- const renderContent = () => (
+ const renderNavigation = () => (
<>
- {navList.map(({ title, href, onClick, hasDiff }) => (
-
- {title}
- {hasDiff && (
-
-
-
-
-
- )}
-
- ))}
+ {navList.map(({ title, href, onClick, diffState, Icon }) => {
+ const DiffIcon = showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff
+ return (
+
+ {Icon && }
+ {title}
+ {!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF && (
+
+
+
+
+
+ )}
+
+ )
+ })}
{navHelpText && (
-
+ {isNavHelpTextShowingError ? (
+
+ ) : (
+
+ )}
-
{navHelpText}
+
{navHelpText}
)}
)
- const renderLoading = () => ['90', '70', '50'].map((item) => )
+ const renderContent = () => {
+ if (isLoading) {
+ return ['90', '70', '50'].map((item) => )
+ }
+
+ if (errorConfig?.error) {
+ return (
+
+
+
+
+
+ Failed to load files. Please reload or select a different reference to compare with.
+
+
+
{renderTopContent()}
{!!tabConfig?.tabs.length && renderTabConfig()}
-
{isLoading ? renderLoading() : renderContent()}
+
{renderContent()}
)
}
diff --git a/src/Shared/Components/DeploymentConfigDiff/index.ts b/src/Shared/Components/DeploymentConfigDiff/index.ts
index c84340d18..0b8c7a4d5 100644
--- a/src/Shared/Components/DeploymentConfigDiff/index.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/index.ts
@@ -1,3 +1,4 @@
export * from './DeploymentConfigDiff.component'
export * from './DeploymentConfigDiff.types'
export * from './DeploymentConfigDiff.utils'
+export * from './DeploymentConfigDiff.constants'
diff --git a/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx b/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
index d9ca3b71b..e27666807 100644
--- a/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
+++ b/src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx
@@ -16,13 +16,14 @@
import { useState } from 'react'
import { useHistory, useLocation, useParams } from 'react-router-dom'
-import { Modal, SERVER_MODE, URLS } from '../../../../Common'
+import Button from '@Shared/Components/Button/Button.component'
+import { ReactComponent as DropDown } from '@Icons/ic-caret-down-small.svg'
+import { ReactComponent as ChartIcon } from '@Icons/ic-charts.svg'
+import { ReactComponent as AddIcon } from '@Icons/ic-add.svg'
+import { ReactComponent as JobIcon } from '@Icons/ic-k8s-job.svg'
import PageHeader from '../PageHeader'
-import { ReactComponent as DropDown } from '../../../../Assets/Icon/ic-dropdown-filled.svg'
-import { ReactComponent as ChartIcon } from '../../../../Assets/Icon/ic-charts.svg'
-import { ReactComponent as AddIcon } from '../../../../Assets/Icon/ic-add.svg'
-import { ReactComponent as JobIcon } from '../../../../Assets/Icon/ic-k8s-job.svg'
-import { AppListConstants } from '../../../constants'
+import { Modal, SERVER_MODE, URLS } from '../../../../Common'
+import { AppListConstants, ComponentSizeType } from '../../../constants'
import './HeaderWithCreateButton.scss'
import { useMainContext } from '../../../Providers'
@@ -56,23 +57,28 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
const renderActionButtons = () =>
serverMode === SERVER_MODE.FULL ? (
-
+ dataTestId="create-app-button-on-header"
+ endIcon={
}
+ size={ComponentSizeType.small}
+ />
) : (
-
+
)
const renderCreateSelectionModal = () => (
-
+
{
+ const [showEmbeddedIframeModal, setEmbeddedIframeModal] = useState(false)
+
+ const {
+ FEATURE_PROMO_EMBEDDED_BUTTON_TEXT,
+ FEATURE_PROMO_EMBEDDED_MODAL_TITLE,
+ FEATURE_PROMO_EMBEDDED_IFRAME_URL,
+ } = window._env_
+
+ const onClickShowIframeModal = useCallback(() => setEmbeddedIframeModal(true), [])
+ const onClickCloseIframeModal = useCallback(() => setEmbeddedIframeModal(false), [])
+
+ const renderIframeDrawer = () => (
+
+
+
+
+ {FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
+
+ }
+ showAriaLabelInTippy={false}
+ />
+
+ {FEATURE_PROMO_EMBEDDED_IFRAME_URL ? (
+
+ ) : (
+
+
+
+ )}
+
+ )
+
+ return (
+
+ {FEATURE_PROMO_EMBEDDED_BUTTON_TEXT && (
+
+ )}
+ {showEmbeddedIframeModal && renderIframeDrawer()}
+
+ )
+}
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
index eddfc87ac..aa2bc51eb 100644
--- a/src/Shared/Components/Header/PageHeader.tsx
+++ b/src/Shared/Components/Header/PageHeader.tsx
@@ -32,6 +32,7 @@ import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-
import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
import { useMainContext, useUserEmail } from '../../Providers'
import { InfoIconTippy } from '../InfoIconTippy'
+import { IframePromoButton } from './IframePromoButton'
const PageHeader = ({
headerName,
@@ -121,8 +122,8 @@ const PageHeader = ({
const renderLogoutHelpSection = () => (
<>
-
-
+
+
@@ -156,6 +157,8 @@ const PageHeader = ({
Beta
)
+ const renderIframeButton = () =>
+
return (
{showTabs && (
-
+
+ {renderIframeButton()}
{typeof renderActionButtons === 'function' && renderActionButtons()}
{renderLogoutHelpSection()}
@@ -258,8 +262,9 @@ const PageHeader = ({
/>
)}
{!showTabs && (
-
+
{typeof renderActionButtons === 'function' && renderActionButtons()}
+ {renderIframeButton()}
{renderLogoutHelpSection()}
)}
diff --git a/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx b/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
index c482227f0..56d5b6025 100644
--- a/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
+++ b/src/Shared/Components/ImageCard/ArtifactInfo/ArtifactInfo.tsx
@@ -15,6 +15,7 @@
*/
import Tippy from '@tippyjs/react'
+import { Tooltip } from '@Common/Tooltip'
import { DefaultUserKey } from '../../../types'
import { ImagePathTippyContentProps } from './types'
import { ArtifactInfoProps } from '../types'
@@ -57,8 +58,8 @@ const ArtifactInfo = ({
}
return (
-
-
+
+
{deployedTime}
)
@@ -88,7 +89,9 @@ const ArtifactInfo = ({
>
{deployedBy[0]}
-
{deployedBy}
+
+ {deployedBy}
+
)
}
diff --git a/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx b/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx
index 729ddae89..1af043d41 100644
--- a/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx
+++ b/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx
@@ -26,7 +26,7 @@ const InfoIconTippy = ({
documentationLink,
documentationLinkText,
additionalContent,
- iconClassName = 'icon-dim-16',
+ iconClassName = 'icon-dim-16 dc__no-shrink',
placement = 'bottom',
dataTestid = 'info-tippy-button',
children,
@@ -49,7 +49,7 @@ const InfoIconTippy = ({
{children || (