feat: generic gitops

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.83-beta-8",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.83-beta-9",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/gitOps/GitProviderTabIcons.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { GitProvider, GitProviderTabIconsProps } from './gitops.type'
+import { ReactComponent as Bitbucket } from '../../assets/icons/git/bitbucket.svg'
+import { ReactComponent as ICAwsCodeCommit } from '../../assets/icons/ic-aws-codecommit.svg'
+import { ReactComponent as GitLab } from '../../assets/icons/git/gitlab.svg'
+import { ReactComponent as GitHub } from '../../assets/icons/git/github.svg'
+import { ReactComponent as Azure } from '../../assets/icons/ic-azure.svg'
+import { ReactComponent as ICGit } from '../../assets/icons/git/git.svg'
+
+const GitProviderTabIcons = ({ provider, rootClassName }: GitProviderTabIconsProps) => {
+    switch (provider) {
+        case GitProvider.GITHUB:
+            return <GitHub className={`${rootClassName || ''} dc__no-shrink`} />
+        case GitProvider.GITLAB:
+            return <GitLab className={`${rootClassName || ''} dc__no-shrink`} />
+        case GitProvider.AZURE_DEVOPS:
+            return <Azure className={`${rootClassName || ''} dc__no-shrink`} />
+        case GitProvider.BITBUCKET_CLOUD:
+            return <Bitbucket className={`${rootClassName || ''} dc__no-shrink`} />
+        case GitProvider.AWS_CODE_COMMIT:
+            return <ICAwsCodeCommit className={`${rootClassName || ''} dc__no-shrink`} />
+        default:
+            return <ICGit className={`${rootClassName || ''} dc__no-shrink`} />
+    }
+}
+
+export default GitProviderTabIcons

src/components/gitOps/UpdateConfirmationDialog.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import { ButtonWithLoader, ConfirmationDialog } from '@devtron-labs/devtron-fe-common-lib'
+import GitProviderTabIcons from './GitProviderTabIcons'
+import { GitProvider, UpdateConfirmationDialogProps } from './gitops.type'
+import { ReactComponent as ICWarning } from '../../assets/icons/ic-warning.svg'
+import { ReactComponent as ICArrowRight } from '../../assets/icons/ic-arrow-right.svg'
+import { getProviderNameFromEnum } from './utils'
+import { DOCUMENTATION } from '../../config'
+
+const UpdateConfirmationDialog = ({
+    providerTab,
+    lastActiveGitOp,
+    handleCancel,
+    handleUpdate,
+    saveLoading,
+    enableBitBucketSource,
+}: Readonly<UpdateConfirmationDialogProps>) => {
+    const lastActiveGitOpsProvider =
+        lastActiveGitOp?.provider === 'BITBUCKET_DC' ? GitProvider.BITBUCKET_CLOUD : lastActiveGitOp?.provider
+    const isSwitchingProvider = lastActiveGitOpsProvider !== providerTab
+
+    const renderIconField = () => {
+        if (isSwitchingProvider) {
+            return (
+                <div className="flexbox dc__align-items-center dc__no-shrink dc__gap-20 pb-24">
+                    <GitProviderTabIcons provider={lastActiveGitOpsProvider} rootClassName="icon-dim-48" />
+                    <ICArrowRight className="dc__no-shrink icon-dim-16 scn-5" />
+                    <GitProviderTabIcons provider={providerTab} rootClassName="icon-dim-48" />
+                </div>
+            )
+        }
+
+        return <ICWarning className="dc__no-shrink icon-dim-48" />
+    }
+
+    const renderTitle = () => {
+        if (isSwitchingProvider) {
+            return `Switch to ${getProviderNameFromEnum(providerTab, enableBitBucketSource)}`
+        }
+
+        return 'Update GitOps provider'
+    }
+
+    const renderContent = () => {
+        if (isSwitchingProvider) {
+            return (
+                <div className="flexbox-col dc__gap-24">
+                    <p className="m-0 cn-9 fs-14 fw-4 lh-20">
+                        Switching to different GitOps provider might be impacting ....(?)
+                    </p>
+
+                    <p className="m-0 cn-8 fs-13 fw-4 lh-20">Are you sure to switch & make the changes?</p>
+                </div>
+            )
+        }
+
+        return (
+            <div className="flexbox-col dc__gap-24">
+                <p className="m-0 cn-8 fs-13 fw-4 lh-20">
+                    Changing/Updating GitOps provider details might be disastrous.&nbsp;
+                    <a
+                        href={DOCUMENTATION.GLOBAL_CONFIG_GITOPS}
+                        target="_blank"
+                        className="anchor"
+                        rel="noreferrer noopener"
+                    >
+                        Know more
+                    </a>
+                </p>
+
+                <p className="m-0 cn-8 fs-13 fw-4 lh-20">Are you sure to make the changes?</p>
+            </div>
+        )
+    }
+
+    return (
+        <ConfirmationDialog className="w-400">
+            {renderIconField()}
+            <ConfirmationDialog.Body title={renderTitle()}>{renderContent()}</ConfirmationDialog.Body>
+
+            <ConfirmationDialog.ButtonGroup>
+                <button
+                    type="button"
+                    className="cta cancel h-36 flex"
+                    onClick={handleCancel}
+                    disabled={saveLoading}
+                    data-testid="cancel-git-ops-update"
+                >
+                    Cancel
+                </button>
+
+                <ButtonWithLoader
+                    isLoading={saveLoading}
+                    rootClassName="cta h-36 flex"
+                    onClick={handleUpdate}
+                    type="button"
+                    disabled={saveLoading}
+                    dataTestId="cancel-git-ops-update"
+                >
+                    {isSwitchingProvider ? 'Switch & Save' : 'Save'}
+                </ButtonWithLoader>
+            </ConfirmationDialog.ButtonGroup>
+        </ConfirmationDialog>
+    )
+}
+
+export default UpdateConfirmationDialog

src/components/gitOps/gitops.type.ts

@@ -14,6 +14,7 @@ export enum GitProvider {
     AZURE_DEVOPS = 'AZURE_DEVOPS',
     BITBUCKET_CLOUD = 'BITBUCKET_CLOUD',
     AWS_CODE_COMMIT = 'AWS_CODE_COMMIT',
+    OTHER_GIT_OPS = 'OTHER_GIT_OPS',
 }
 
 export type GitProviderType = GitProvider | 'BITBUCKET_DC'
@@ -65,7 +66,7 @@ export interface GitOpsState {
     /**
      * Currently selected tab
      */
-    providerTab: GitProviderType
+    providerTab: GitProvider
     /**
      * API response list of all providers with their config
      */
@@ -78,10 +79,14 @@ export interface GitOpsState {
     /**
      * To show triangular check on the selected git provider
      * Will be only changed after API call
+     * Can also contain BitBucket DC as provider
      */
     lastActiveGitOp: undefined | GitOpsConfig
     saveLoading: boolean
     validateLoading: boolean
+    /**
+     * To identify which radio tab is selected in case of bitbucket
+     */
     isBitbucketCloud: boolean
     /**
      * Error states for input fields
@@ -101,6 +106,10 @@ export interface GitOpsState {
     selectedRepoType: string
     validationSkipped: boolean
     allowCustomGitRepo: boolean
+    /**
+     * To show update confirmation dialog, in case of updating git provider details
+     */
+    showUpdateConfirmationDialog: boolean
 }
 
 export interface GitOpsProps extends RouteComponentProps<{}> {
@@ -127,6 +136,9 @@ export interface BitbucketCloudAndServerToggleSectionPropsType {
 }
 
 export interface GitProviderTabProps {
+    /**
+     * Currently selected tab
+     */
     providerTab: GitProviderType
     /**
      * Acts as handleChange on radio tab
@@ -137,16 +149,25 @@ export interface GitProviderTabProps {
      */
     lastActiveGitOp: undefined | GitOpsConfig
     /**
-     * Value of current tab
+     * Value of tab to be rendered
      */
     provider: GitProvider
-    /**
-     * The name to be displayed on tab and would be using that in switch case of GitProviderTabIcons
-     */
-    gitops: string
     /**
      * If true would disable radio tab
      */
     saveLoading: boolean
     datatestid: string
 }
+
+export interface GitProviderTabIconsProps extends Pick<GitProviderTabProps, 'provider'> {
+    rootClassName?: string
+}
+
+export interface UpdateConfirmationDialogProps extends Pick<GitOpsState, 'lastActiveGitOp' | 'providerTab' | 'saveLoading'> {
+    handleUpdate: () => void
+    handleCancel: () => void
+    /**
+     * To render title provider for bitbucket
+     */
+    enableBitBucketSource: boolean
+}

src/components/gitOps/utils.ts

@@ -0,0 +1,18 @@
+import { GitProvider } from './gitops.type'
+
+export const getProviderNameFromEnum = (provider: GitProvider, enableBitBucketSource?: boolean) => {
+    switch (provider) {
+        case GitProvider.GITHUB:
+            return 'GitHub'
+        case GitProvider.GITLAB:
+            return 'GitLab'
+        case GitProvider.AZURE_DEVOPS:
+            return 'Azure'
+        case GitProvider.BITBUCKET_CLOUD:
+            return enableBitBucketSource ? 'Bitbucket' : 'Bitbucket Cloud'
+        case GitProvider.AWS_CODE_COMMIT:
+            return 'AWS Code Commit'
+        default:
+            return 'Other GitOps'
+    }
+}

src/custom.d.ts

@@ -0,0 +1,13 @@
+declare module '*.svg' {
+    import * as React from 'react'
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+
+    const src: string
+    export default src
+}
+
+declare module '*.png' {
+    const src: string
+    export default src
+}

yarn.lock

@@ -1061,10 +1061,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@0.0.83-beta-8":
-  version "0.0.83-beta-8"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.0.83-beta-8.tgz#c1e36d05359e62b619b5e74f861dd9c4bf42c96e"
-  integrity sha512-6u7h6rnnRgQwaDuax/n3EnUmVN/YuApMDWruzJYr1qCo/1r/ptTtaY5bUyX+4D8zxHMipx2gD8kvPkFDq37H0w==
+"@devtron-labs/devtron-fe-common-lib@0.0.83-beta-9":
+  version "0.0.83-beta-9"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.0.83-beta-9.tgz#1c6699b8212fc5050ec6ccbf3d415a4d1ee4a8b9"
+  integrity sha512-d5x+UmyfFlF3/FDWNC3pHM15CZ5mIwd3I3j3sxuv/qPvMxl8CL52Y6QBFRfDPBBTNKfXtFyYREKvf+cza54JMA==
   dependencies:
     fast-json-patch "^3.1.1"
     jsonpath-plus "^7.2.0"