feat: generic gitops

.eslintignore

@@ -613,3 +613,8 @@ src/util/Util.ts
 src/components/ResourceBrowser/ResourceList/ResourceList.component.tsx
 types/patternfly-react.d.ts
 tests-examples/demo-todo-app.spec.ts
+e2e-tests/adminLogin.spec.ts
+e2e-tests/example.spec.ts
+e2e-tests/auth.setup.ts
+playwright.config.ts
+jest.config.js

src/components/gitOps/GitProviderTabIcons.tsx

@@ -0,0 +1,44 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   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 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,124 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   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 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

@@ -25,11 +25,12 @@ export type GitOpsOrganisationIdType =
     | 'bitBucketProjectKey'
 
 export enum GitProvider {
-    GITLAB = 'GITLAB',
     GITHUB = 'GITHUB',
+    GITLAB = 'GITLAB',
+    AWS_CODE_COMMIT = 'AWS_CODE_COMMIT',
     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'
@@ -81,7 +82,7 @@ export interface GitOpsState {
     /**
      * Currently selected tab
      */
-    providerTab: GitProviderType
+    providerTab: GitProvider
     /**
      * API response list of all providers with their config
      */
@@ -94,10 +95,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
@@ -117,6 +122,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<{}> {
@@ -143,6 +152,9 @@ export interface BitbucketCloudAndServerToggleSectionPropsType {
 }
 
 export interface GitProviderTabProps {
+    /**
+     * Currently selected tab
+     */
     providerTab: GitProviderType
     /**
      * Acts as handleChange on radio tab
@@ -153,16 +165,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,35 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   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 { 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,30 @@
+/*
+ *   Copyright (c) 2024 Devtron Inc.
+ *   All rights reserved.
+
+ *   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.
+ */
+
+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

@@ -3801,7 +3801,7 @@ esrecurse@^4.3.0:
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0: