Merge branch 'main' into modal-button-click-issue

Author: shivani170

config.md

@@ -27,5 +27,6 @@
 | CLUSTER_TERMINAL_CONNECTION_POLLING_INTERVAL     | 7000    |  Interval for checking connection with cluster terminal.     |
 | LOGIN_PAGE_IMAGE                   | ""         | Login page image url                          |
 | LOGIN_PAGE_IMAGE_BG                | ""         | Login page image background color code        |
+| DEFAULT_CI_TRIGGER_TYPE_MANUAL     | "false"    | Change default trigger behaviour of newly created ci-pipeline to manual |
 
 # DASHBOARD CONFIG SECRET

src/components/CIPipelineN/AdvancedConfigOptions.tsx

@@ -4,7 +4,6 @@ import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import { ReactComponent as QuestionIcon } from '../v2/assets/icons/ic-question.svg'
 import { ReactComponent as HelpIcon } from '../../assets/icons/ic-help.svg'
 import CIConfig from '../ciConfig/CIConfig'
-import { deepEqual } from '../common'
 import { ComponentStates } from '../EnvironmentOverride/EnvironmentOverrides.type'
 import { AdvancedConfigOptionsProps, CIConfigParentState } from '../ciConfig/types'
 import { DockerConfigOverrideKeys } from '../ciPipeline/types'
@@ -18,7 +17,6 @@ import { pipelineContext } from '../workflowEditor/workflowEditor'
 
 export default function AdvancedConfigOptions({
     ciPipeline,
-    setDockerConfigOverridden,
 }: AdvancedConfigOptionsProps) {
     const {
         formData,
@@ -151,9 +149,6 @@ export default function AdvancedConfigOptions({
 
         // set updated form data
         setFormData(_form)
-
-        // Check for diff in global & current CI config and set isDockerConfigOverridden flag accordingly
-        setDockerConfigOverridden(!deepEqual(_form.dockerConfigOverride, parentState.defaultDockerConfigs))
     }
 
     const renderDockerArgs = () => {

src/components/CIPipelineN/Build.tsx

@@ -16,7 +16,6 @@ export function Build({
     ciPipeline,
     pageState,
     isSecurityModuleInstalled,
-    setDockerConfigOverridden,
     isJobView,
     getPluginData,
 }: BuildType) {
@@ -261,7 +260,6 @@ export function Build({
                     {isSecurityModuleInstalled && renderScanner()}
                     <AdvancedConfigOptions
                         ciPipeline={ciPipeline}
-                        setDockerConfigOverridden={setDockerConfigOverridden}
                     />
                 </>
             )}

src/components/CIPipelineN/CIPipeline.tsx

@@ -14,7 +14,6 @@ import {
     VisibleModal,
     Drawer,
     DeleteDialog,
-    DockerConfigOverrideType,
     RefVariableType,
     VariableType,
     MandatoryPluginDataType,
@@ -179,7 +178,6 @@ export default function CIPipeline({
         },
     })
     const validationRules = new ValidationRules()
-    const [isDockerConfigOverridden, setDockerConfigOverridden] = useState(false)
     const [mandatoryPluginData, setMandatoryPluginData] = useState<MandatoryPluginDataType>(null)
     const selectedBranchRef = useRef(null)
 
@@ -285,6 +283,7 @@ export default function CIPipeline({
         setPageState(ViewType.LOADING)
         getSecurityModuleStatus()
         if (ciPipelineId) {
+            // TODO: Would need to add loader for getAvailablePlugins to avoid state toggle
             getInitDataWithCIPipeline(appId, ciPipelineId, true)
                 .then((ciResponse) => {
                     const preBuildVariable = calculateLastStepDetail(
@@ -383,7 +382,10 @@ export default function CIPipeline({
         } catch (error) {}
     }
 
-    const getMandatoryPluginData = (_formData: PipelineFormType, pluginList: PluginDetailType[]): void => {
+    const getMandatoryPluginData = (
+        _formData: PipelineFormType,
+        pluginList: PluginDetailType[],
+    ): void => {
         if (!isJobCard && processPluginData && prepareFormData && pluginList.length) {
             let branchName = ''
             if (_formData?.materials?.length) {
@@ -398,9 +400,7 @@ export default function CIPipeline({
                 processPluginData(_formData, pluginList, appId, ciPipelineId, branchName)
                     .then((response: MandatoryPluginDataType) => {
                         setMandatoryPluginData(response)
-                        if (_formData) {
-                            setFormData(prepareFormData(_formData, response?.pluginData ?? []))
-                        }
+                        setFormData((prevForm) => prepareFormData({ ...prevForm }, response?.pluginData ?? []))
                     })
                     .catch((error: ServerErrors) => {
                         showError(error)
@@ -533,11 +533,6 @@ export default function CIPipeline({
 
         const msg = ciPipeline.id ? 'Pipeline Updated' : 'Pipeline Created'
 
-        // Reset allow override flag to false if config matches with global
-        if (!ciPipeline.isDockerConfigOverridden && !isDockerConfigOverridden) {
-            formData.isDockerConfigOverridden = false
-            formData.dockerConfigOverride = {} as DockerConfigOverrideType
-        }
         //here we check for the case where the pipeline is multigit and user selects pullrequest or tag creation(webhook)
         //in that case we only send the webhook data not the other one.
         let _materials = formData.materials
@@ -813,7 +808,6 @@ export default function CIPipeline({
                                     isAdvanced={isAdvanced}
                                     ciPipeline={ciPipeline}
                                     isSecurityModuleInstalled={isSecurityModuleInstalled}
-                                    setDockerConfigOverridden={setDockerConfigOverridden}
                                     isJobView={isJobCard}
                                     getPluginData={getPluginData}
                                 />

src/components/app/details/appDetails/AppDetails.tsx

@@ -3,7 +3,6 @@ import {
     showError,
     Progressing,
     ConfirmationDialog,
-    Host,
     noop,
     stopPropagation,
     multiSelectStyles,
@@ -24,7 +23,7 @@ import {
     HELM_DEPLOYMENT_STATUS_TEXT,
     RESOURCES_NOT_FOUND,
 } from '../../../../config'
-import { NavigationArrow, useAppContext, useEventSource, FragmentHOC, ScanDetailsModal } from '../../../common'
+import { NavigationArrow, useAppContext, FragmentHOC, ScanDetailsModal } from '../../../common'
 import { CustomValueContainer, groupHeaderStyle, GroupHeading, Option } from './../../../v2/common/ReactSelect.utils'
 import {
     getAppConfigStatus,
@@ -139,8 +138,10 @@ export default function AppDetail({ filteredEnvIds }: { filteredEnvIds?: string
 
                 // Set the URL and push to navigation stack
                 if (selectedEnvId) {
-                    const newUrl = getAppDetailsURL(params.appId, selectedEnvId)
-                    push(newUrl)
+                    if (String(selectedEnvId) !== String(params.envId)) {
+                        const newUrl = getAppDetailsURL(params.appId, selectedEnvId)
+                        push(newUrl)
+                    }
                 } else {
                     setEnvironmentId(null)
                 }
@@ -224,7 +225,8 @@ export const Details: React.FC<DetailsType> = ({
 }) => {
     const params = useParams<{ appId: string; envId: string }>()
     const location = useLocation()
-    const [streamData, setStreamData] = useState<AppStreamData>(null)
+    // fixme: the state is not being set anywhere and just being drilled down
+    const [streamData] = useState<AppStreamData>(null)
     const [detailedStatus, toggleDetailedStatus] = useState<boolean>(false)
     const [resourceTreeFetchTimeOut, setResourceTreeFetchTimeOut] = useState<boolean>(false)
     const [urlInfo, setUrlInfo] = useState<boolean>(false)
@@ -246,13 +248,15 @@ export const Details: React.FC<DetailsType> = ({
     })
     const [loadingDetails, setLoadingDetails] = useState(true)
     const [loadingResourceTree, setLoadingResourceTree] = useState(true)
+    // State to track the loading state for the timeline data when the detailed status modal opens
+    const [isInitialTimelineDataLoading, setIsInitialTimelineDataLoading] = useState(true)
     const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
     const appDetailsRef = useRef(null)
     const appDetailsRequestRef = useRef(null)
-    const deploymentModalShownRef = useRef(false)
     const { envId } = useParams<{ appId: string; envId?: string }>()
     const pollResourceTreeRef = useRef(true)
     const appDetailsAbortRef = useRef(null)
+    const shouldFetchTimelineRef = useRef(false)
 
     const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
         useState<DeploymentStatusDetailsBreakdownDataType>({
@@ -267,26 +271,18 @@ export const Details: React.FC<DetailsType> = ({
     const interval = window._env_.DEVTRON_APP_DETAILS_POLLING_INTERVAL || 30000
     appDetailsRequestRef.current = appDetails?.deploymentAppDeleteRequest
 
-    const syncSSE = useEventSource(
-        `${Host}/api/v1/applications/stream?name=${appDetails?.appName}-${appDetails?.environmentName}`,
-        [params.appId, params.envId],
-        appDetails &&
-            !!appDetails.appName &&
-            !!appDetails.environmentName &&
-            appDetails.deploymentAppType !== DeploymentAppTypes.HELM,
-        (event) => setStreamData(JSON.parse(event.data)),
-    )
-
     const aggregatedNodes: AggregatedNodes = useMemo(() => {
         return aggregateNodes(appDetails?.resourceTree?.nodes || [], appDetails?.resourceTree?.podMetadata || [])
     }, [appDetails])
 
     useEffect(() => {
-        if (location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)) {
-            deploymentModalShownRef.current = true
-        } else {
-            deploymentModalShownRef.current = false
+        const isModalOpen = location.search.includes(DEPLOYMENT_STATUS_QUERY_PARAM)
+        // Reset the loading state when the modal is closed
+        if (shouldFetchTimelineRef.current && !isModalOpen) {
+            setIsInitialTimelineDataLoading(true)
         }
+        // The timeline should be fetched by default if the modal is open
+        shouldFetchTimelineRef.current = isModalOpen
     }, [location.search])
 
     const clearDeploymentStatusTimer = useCallback((): void => {
@@ -304,15 +300,6 @@ export const Details: React.FC<DetailsType> = ({
 
             clearDeploymentStatusTimer()
 
-            if (
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.HEALTHY ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.TIMED_OUT ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.SUPERSEDED ||
-                processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.SUCCEEDED
-            ) {
-                deploymentModalShownRef.current = false
-            }
-
             if (processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS) {
                 deploymentStatusTimer = setTimeout(() => {
                     getDeploymentDetailStepsData()
@@ -327,24 +314,29 @@ export const Details: React.FC<DetailsType> = ({
             processDeploymentStatusDetailsData,
             clearDeploymentStatusTimer,
             DEPLOYMENT_STATUS,
-            deploymentModalShownRef,
             setDeploymentStatusDetailsBreakdownData,
         ],
     )
 
     const getDeploymentDetailStepsData = useCallback(
         (showTimeline?: boolean): void => {
+            const shouldFetchTimeline = showTimeline ?? shouldFetchTimelineRef.current
+
             // Deployments status details for Devtron apps
-            getDeploymentStatusDetail(params.appId, params.envId, showTimeline ?? deploymentModalShownRef.current).then(
+            getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline).then(
                 (deploymentStatusDetailRes) => {
                     processDeploymentStatusData(deploymentStatusDetailRes.result)
+                    // Update the loading status if the modal is open
+                    if (shouldFetchTimeline) {
+                        setIsInitialTimelineDataLoading(false)
+                    }
                 },
             )
         },
         [
             params.appId,
             params.envId,
-            deploymentModalShownRef.current,
+            shouldFetchTimelineRef.current,
             getDeploymentStatusDetail,
             processDeploymentStatusData,
         ],
@@ -437,7 +429,9 @@ export const Details: React.FC<DetailsType> = ({
     }
 
     function _getDeploymentStatusDetail(deploymentAppType: DeploymentAppTypes) {
-        getDeploymentStatusDetail(params.appId, params.envId, deploymentModalShownRef.current)
+        const shouldFetchTimeline = shouldFetchTimelineRef.current
+
+        getDeploymentStatusDetail(params.appId, params.envId, shouldFetchTimeline)
             .then((deploymentStatusDetailRes) => {
                 if (deploymentStatusDetailRes.result) {
                     if (deploymentAppType === DeploymentAppTypes.HELM) {
@@ -456,6 +450,9 @@ export const Details: React.FC<DetailsType> = ({
                     } else {
                         processDeploymentStatusData(deploymentStatusDetailRes.result)
                     }
+                    if (shouldFetchTimeline) {
+                        setIsInitialTimelineDataLoading(false)
+                    }
                 }
             })
             .catch(noop)
@@ -687,6 +684,7 @@ export const Details: React.FC<DetailsType> = ({
                     streamData={streamData}
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     isVirtualEnvironment={isVirtualEnvRef.current}
+                    isLoading={isInitialTimelineDataLoading}
                 />
             )}
             {showScanDetailsModal && (

src/components/app/details/appDetails/DeploymentStatusBreakdown.tsx

@@ -46,6 +46,17 @@ export default function DeploymentStatusDetailBreakdown({
                             type={TIMELINE_STATUS.GIT_COMMIT}
                             deploymentDetailedData={deploymentStatusDetailsBreakdownData}
                         />
+
+                        <ErrorInfoStatusBar
+                            type={TIMELINE_STATUS.ARGOCD_SYNC}
+                            nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
+                            errorMessage={deploymentStatusDetailsBreakdownData.deploymentError}
+                        />
+                        <DeploymentStatusDetailRow
+                            type={TIMELINE_STATUS.ARGOCD_SYNC}
+                            deploymentDetailedData={deploymentStatusDetailsBreakdownData}
+                        />
+
                         <ErrorInfoStatusBar
                             type={TIMELINE_STATUS.KUBECTL_APPLY}
                             nonDeploymentError={deploymentStatusDetailsBreakdownData.nonDeploymentError}
@@ -55,6 +66,7 @@ export default function DeploymentStatusDetailBreakdown({
                             type={TIMELINE_STATUS.KUBECTL_APPLY}
                             deploymentDetailedData={deploymentStatusDetailsBreakdownData}
                         />
+
                         <DeploymentStatusDetailRow
                             type={TIMELINE_STATUS.APP_HEALTH}
                             hideVerticalConnector={true}

src/components/app/details/appDetails/DeploymentStatusCard.tsx

@@ -87,8 +87,8 @@ function DeploymentStatusCard({
 
     const onClickLastDeploymentStatus = (e) => {
         if (!hideDetails) {
-            refetchDeploymentStatus(true)
             showDeploymentDetailedStatus(e)
+            refetchDeploymentStatus(true)
         }
     }