feat: add flux in deployment types

Author: arunjaindev

.env

@@ -72,3 +72,4 @@ LOGIN_PAGE_IMAGE=
 FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false
 FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false
+FEATURE_FLUX_DEPLOYMENTS_ENABLE=false

config.md

@@ -50,5 +50,6 @@
 | FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE                   | false                                    | If enabled user can pass the manual gitops repo                                                                  |
 | SENTRY_RELEASE_VERSION                                    |                                          | Sentry release Version                                                                                           |
 | LOGIN_PAGE_IMAGE                                          |                                          | Login page image url                                                                                             |
+| FEATURE_FLUX_DEPLOYMENTS_ENABLE                           | false                                    | Enables flux cd deployment type for devtron apps and devtron charts                                              |
 
 # DASHBOARD CONFIG SECRET

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

@@ -241,7 +241,7 @@ const Details: React.FC<DetailsType> = ({
         useState<DeploymentStatusDetailsBreakdownDataType>({
             ...(isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
                 ? processVirtualEnvironmentDeploymentData()
-                : processDeploymentStatusDetailsData()),
+                : processDeploymentStatusDetailsData(appDetails?.deploymentAppType)),
             deploymentStatus: DEFAULT_STATUS,
         })
     const isConfigDriftEnabled: boolean = window._env_.FEATURE_CONFIG_DRIFT_ENABLE && !!ConfigDriftModal
@@ -266,7 +266,7 @@ const Details: React.FC<DetailsType> = ({
             const processedDeploymentStatusDetailsData =
                 isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
                     ? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes)
-                    : processDeploymentStatusDetailsData(deploymentStatusDetailRes)
+                    : processDeploymentStatusDetailsData(appDetails?.deploymentAppType, deploymentStatusDetailRes)
 
             clearDeploymentStatusTimer()
 
@@ -412,7 +412,10 @@ const Details: React.FC<DetailsType> = ({
                         const processedDeploymentStatusData =
                             isVirtualEnvRef.current && processVirtualEnvironmentDeploymentData
                                 ? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes.result)
-                                : processDeploymentStatusDetailsData(deploymentStatusDetailRes.result)
+                                : processDeploymentStatusDetailsData(
+                                      appDetails?.deploymentAppType,
+                                      deploymentStatusDetailRes.result,
+                                  )
 
                         setDeploymentStatusDetailsBreakdownData(processedDeploymentStatusData)
                     } else {

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

@@ -38,7 +38,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICCamera } from '@Icons/ic-camera.svg'
 import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '../../../../config'
-import { DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
 import { Nodes, SourceInfoType } from '../../types'
 import DeploymentStatusCard from './DeploymentStatusCard'
 import { importComponentFromFELibrary } from '../../../common/helpers/Helpers'
@@ -201,18 +200,9 @@ export const SourceInfo = ({
             <div className="flex left w-100">
                 <AppEnvSelector {...(isAppView ? { isAppView, environments } : { isAppView: false, applications })} />
                 {appDetails?.deploymentAppType && (
-                    <Tooltip
-                        placement="top"
-                        alwaysShowTippyOnHover={!appDetails.isVirtualEnvironment}
-                        content={`Deployed using ${
-                            isArgoCdApp ? DeploymentAppTypeNameMapping.GitOps : DeploymentAppTypeNameMapping.Helm
-                        }`}
-                    >
-                        <div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
-                            {/* TODO: verify what appType needs to be passed */}
-                            <DeploymentTypeIcon deploymentAppType={appDetails.deploymentAppType} appType={null} />
-                        </div>
-                    </Tooltip>
+                    <div className={`flex ${!appDetails.isVirtualEnvironment ? 'ml-16' : ''}`}>
+                        <DeploymentTypeIcon deploymentAppType={appDetails.deploymentAppType} />
+                    </div>
                 )}
                 {appDetails?.resourceTree &&
                     !isIsolatedEnv &&

src/components/cdPipeline/BuildCD.tsx

@@ -612,6 +612,8 @@ export default function BuildCD({
                 isGitOpsRepoNotConfigured={isGitOpsRepoNotConfigured}
                 gitOpsRepoConfigInfoBar={gitOpsRepoConfigInfoBar}
                 areGitopsCredentialsConfigured={!isGitOpsInstalledButNotConfigured}
+                // Want to show this when gitops module is installed, does not matter if it is configured or not
+                showGitOpsOption={!noGitOpsModuleInstalledAndConfigured || isGitOpsInstalledButNotConfigured}
             />
         </div>
     )
@@ -802,8 +804,6 @@ export default function BuildCD({
                 {!window._env_.HIDE_GITOPS_OR_HELM_OPTION &&
                     !isVirtualEnvironment &&
                     formData.allowedDeploymentTypes.length > 0 &&
-                    // Want to show this when gitops module is installed, does not matter if it is configured or not
-                    (!noGitOpsModuleInstalledAndConfigured || isGitOpsInstalledButNotConfigured) &&
                     renderDeploymentAppType()}
 
                 {isAdvanced ? renderAdvancedDeploymentStrategy() : renderBasicDeploymentStrategy()}

src/components/common/DeploymentTypeIcon/DeploymentTypeIcon.tsx

@@ -14,43 +14,59 @@
  * limitations under the License.
  */
 
-import { AppType, DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { DeploymentAppTypes, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as ArgoCD } from '../../../assets/icons/argo-cd-app.svg'
-import { ReactComponent as Helm } from '../../../assets/icons/helm-app.svg'
-import { ReactComponent as FluxCD } from '../../../assets/icons/ic-fluxcd.svg'
+import { ReactComponent as ArgoCD } from '@Icons/argo-cd-app.svg'
+import { ReactComponent as Helm } from '@Icons/helm-app.svg'
+import { ReactComponent as FluxCD } from '@Icons/ic-fluxcd.svg'
 import { importComponentFromFELibrary } from '../helpers/Helpers'
 
+export const DEPLOYMENT_TYPE_TO_TEXT_MAP = {
+    [DeploymentAppTypes.GITOPS]: 'GitOps',
+    [DeploymentAppTypes.FLUX]: 'FluxCD',
+    [DeploymentAppTypes.HELM]: 'Helm',
+}
+
+interface DeploymentTypeIconProps {
+    deploymentAppType: DeploymentAppTypes
+    iconSize?: 24 | 32
+}
+
 const VirtualEnvHelpTippy = importComponentFromFELibrary('VirtualEnvHelpTippy')
 
-function DeploymentTypeIcon({
-    deploymentAppType,
-    appType,
-}: {
-    deploymentAppType: string
-    appType: string
-}): JSX.Element {
-    const renderDeploymentTypeIcon = () => {
-        if (
-            (deploymentAppType === DeploymentAppTypes.MANIFEST_DOWNLOAD ||
-                deploymentAppType === DeploymentAppTypes.MANIFEST_PUSH) &&
-            VirtualEnvHelpTippy
-        ) {
-            return <VirtualEnvHelpTippy isVirtualIcon />
-        }
-        if (deploymentAppType === DeploymentAppTypes.GITOPS || appType === AppType.EXTERNAL_ARGO_APP) {
-            return <ArgoCD data-testid="argo-cd-app-logo" className="icon-dim-32" />
-        }
-        if (appType === AppType.EXTERNAL_FLUX_APP) {
-            return <FluxCD data-testid="flux-cd-app-logo" className="icon-dim-32" />
-        }
-        if (deploymentAppType === DeploymentAppTypes.HELM) {
-            return <Helm data-testid="helm-app-logo" className="icon-dim-32" />
-        }
-        return null
+const getDeploymentTypeIcon = ({ deploymentAppType, iconSize = 32 }: DeploymentTypeIconProps) => {
+    const className = `icon-dim-${iconSize}`
+    switch (deploymentAppType) {
+        case DeploymentAppTypes.GITOPS:
+            return <ArgoCD data-testid="argo-cd-app-logo" className={className} />
+        case DeploymentAppTypes.FLUX:
+            return <FluxCD data-testid="flux-cd-app-logo" className={className} />
+        case DeploymentAppTypes.HELM:
+            return <Helm data-testid="helm-app-logo" className={className} />
+        default:
+            return null
     }
+}
 
-    return renderDeploymentTypeIcon()
+const DeploymentTypeIcon = ({ deploymentAppType, iconSize }: DeploymentTypeIconProps): JSX.Element => {
+    switch (deploymentAppType) {
+        case DeploymentAppTypes.MANIFEST_DOWNLOAD:
+        case DeploymentAppTypes.MANIFEST_PUSH:
+            return VirtualEnvHelpTippy ? <VirtualEnvHelpTippy isVirtualIcon /> : null
+        case DeploymentAppTypes.GITOPS:
+        case DeploymentAppTypes.FLUX:
+        case DeploymentAppTypes.HELM:
+            return (
+                <Tooltip
+                    alwaysShowTippyOnHover
+                    content={`Deployed Using ${DEPLOYMENT_TYPE_TO_TEXT_MAP[deploymentAppType]}`}
+                >
+                    <div>{getDeploymentTypeIcon({ deploymentAppType, iconSize })}</div>
+                </Tooltip>
+            )
+        default:
+            return null
+    }
 }
 
 export default DeploymentTypeIcon

src/components/v2/appDetails/AppDetails.component.tsx

@@ -78,7 +78,7 @@ const AppDetailsComponent = ({
         useState<DeploymentStatusDetailsBreakdownDataType>({
             ...(isVirtualEnv.current && processVirtualEnvironmentDeploymentData
                 ? processVirtualEnvironmentDeploymentData()
-                : processDeploymentStatusDetailsData()),
+                : processDeploymentStatusDetailsData(appDetails?.deploymentAppType)),
             deploymentStatus: DEFAULT_STATUS,
         })
 
@@ -121,7 +121,8 @@ const AppDetailsComponent = ({
         const processedDeploymentStatusDetailsData =
             isVirtualEnv.current && processVirtualEnvironmentDeploymentData
                 ? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes)
-                : processDeploymentStatusDetailsData(deploymentStatusDetailRes)
+                : processDeploymentStatusDetailsData(appDetails?.deploymentAppType)
+
         clearDeploymentStatusTimer()
         // If deployment status is in progress then fetch data in every 10 seconds
         if (processedDeploymentStatusDetailsData.deploymentStatus === DEPLOYMENT_STATUS.INPROGRESS) {

src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx

@@ -28,7 +28,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 import './sourceInfo.css'
 import { useParams, useHistory, useRouteMatch } from 'react-router-dom'
-import Tippy from '@tippyjs/react'
 import IndexStore from '../index.store'
 import { AppEnvironment } from './environment.type'
 import { useSharedState } from '../../utils/useSharedState'
@@ -43,7 +42,7 @@ import { deleteInstalledChart } from '../../../charts/charts.service'
 import { ReactComponent as Dots } from '@Icons/ic-more-vertical.svg'
 import { DELETE_ACTION, URLS, checkIfDevtronOperatorHelmRelease } from '../../../../config'
 import { ReactComponent as BinWithDots } from '../../../../assets/icons/ic-delete-dots.svg'
-import { DELETE_DEPLOYMENT_PIPELINE, DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
+import { DELETE_DEPLOYMENT_PIPELINE } from '../../../../config/constantMessaging'
 import { getAppOtherEnvironmentMin } from '../../../../services/service'
 import DeploymentTypeIcon from '../../../common/DeploymentTypeIcon/DeploymentTypeIcon'
 import ClusterNotReachableDialog from '../../../common/ClusterNotReachableDialog/ClusterNotReachableDialog'
@@ -94,19 +93,6 @@ const EnvironmentSelectorComponent = ({
         }
     }, [params.appId])
 
-    const getDeployedUsing = () => {
-        if (isGitops) {
-            return DeploymentAppTypeNameMapping.GitOps
-        }
-        if (appDetails.appType === AppType.EXTERNAL_ARGO_APP) {
-            return DeploymentAppTypeNameMapping.ArgoCD
-        }
-        if (appDetails.appType === AppType.EXTERNAL_FLUX_APP) {
-            return DeploymentAppTypeNameMapping.FluxCD
-        }
-        return DeploymentAppTypeNameMapping.Helm
-    }
-
     useEffect(() => {
         if (!params.envId && appDetails.environmentId && !isExternalApp) {
             handleEnvironmentChange(appDetails.environmentId)
@@ -318,21 +304,12 @@ const EnvironmentSelectorComponent = ({
                             )}
                         </div>
                     </div>
-                    {(appDetails?.deploymentAppType || appDetails?.appType) && (
-                        <Tippy
-                            className="default-tt"
-                            arrow={false}
-                            disabled={isVirtualEnvironment}
-                            placement="top"
-                            content={`Deployed using ${getDeployedUsing()}`}
-                        >
+                    {(appDetails?.deploymentAppType) && (
                             <div className={`flex ${!isVirtualEnvironment ? 'ml-16' : ''}`}>
                                 <DeploymentTypeIcon
                                     deploymentAppType={appDetails.deploymentAppType}
-                                    appType={appDetails.appType}
                                 />
                             </div>
-                        </Tippy>
                     )}
                     {appDetails?.deploymentAppDeleteRequest && (
                         <>