Merge branch 'develop' of github.com:devtron-labs/dashboard into feat…

…/common-icons

.eslintignore

@@ -61,7 +61,6 @@ src/components/ClusterNodes/ClusterEvents.tsx
 src/components/ClusterNodes/ClusterManifest.tsx
 src/components/ClusterNodes/ClusterNodeEmptyStates.tsx
 src/components/ClusterNodes/ClusterOverview.tsx
-src/components/ClusterNodes/NodeActions/DeleteNodeModal.tsx
 src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
 src/components/ClusterNodes/NodeActions/NodeActionsMenu.tsx
 src/components/ClusterNodes/NodeActions/validationRules.ts
@@ -78,7 +77,6 @@ src/components/Jobs/JobsEmptyState.tsx
 src/components/Jobs/Service.ts
 src/components/Jobs/Utils.ts
 src/components/LogViewer/LogViewer.tsx
-src/components/ResourceBrowser/ResourceList/ResourceList.component.tsx
 src/components/ResourceBrowser/ResourceList/__tests__/Sidebar.test.tsx
 src/components/__mocks__/xterm-webfont.js
 src/components/app/LogFilter.test.ts
@@ -233,7 +231,6 @@ src/components/command/command.util.ts
 src/components/common/Accordian/Accordian.tsx
 src/components/common/AppDetailsEmptyState.tsx
 src/components/common/Carousel/Carousel.tsx
-src/components/common/ClusterNotReachableDailog/ClusterNotReachableDialog.tsx
 src/components/common/ContentCard/ContentCard.tsx
 src/components/common/Contexts/AppContext.ts
 src/components/common/DatePickers/Calender.tsx

.github/CODEOWNERS

@@ -1 +1 @@
-* vivek@devtron.ai @vikramdevtron
+* @vivek-devtron @vikramdevtron

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install dependencies
-      run: yarn install
+      run: yarn install --frozen-lockfile
 
     - name: Check linting issues
       run: yarn lint

.github/workflows/sentry-source-map-upload.yaml

@@ -30,7 +30,7 @@ jobs:
 
     - name: Set SENTRY_RELEASE_VERSION
       id: vars
-      run: echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+      run: echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short=9 HEAD)" >> $GITHUB_OUTPUT
 
     - name: Create Sentry release
       uses: getsentry/action-release@v1

.storybook/preview.tsx

@@ -2,7 +2,14 @@ import React from 'react'
 import type { Preview } from '@storybook/react'
 import '../src/css/application.scss'
 import { BrowserRouter } from 'react-router-dom'
-import { ThemeProvider, ToastManagerContainer, ThemeSwitcher, noop, customEnv } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ThemeProvider,
+    ToastManagerContainer,
+    ThemeSwitcher,
+    noop,
+    customEnv,
+    DEVTRON_BASE_MAIN_ID,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 const preview: Preview = {
     parameters: {
@@ -22,13 +29,17 @@ const preview: Preview = {
 
         return (
             <ThemeProvider>
-                <div className="dc__border-bottom mb-10">
-                    <ThemeSwitcher onChange={noop} />
+                <div id={DEVTRON_BASE_MAIN_ID}>
+                    <div className="dc__border-bottom mb-10">
+                        <ThemeSwitcher onChange={noop} />
+                    </div>
+                    <BrowserRouter>
+                        <Story />
+                    </BrowserRouter>
+                    <ToastManagerContainer />
                 </div>
-                <BrowserRouter>
-                    <Story />
-                </BrowserRouter>
-                <ToastManagerContainer />
+
+                <div id="animated-dialog-backdrop" />
             </ThemeProvider>
         )
     },

Dockerfile

@@ -6,15 +6,15 @@ WORKDIR /app
 COPY package.json .
 COPY yarn.lock .
 
-RUN yarn install --network-timeout 600000
+RUN yarn install --frozen-lockfile --network-timeout 600000
 
 COPY src/ src
 COPY nginx.conf .
 COPY tsconfig.json .
 COPY vite.config.mts .
 COPY . .
 
-RUN echo `git rev-parse --short HEAD` > health.html
+RUN echo `git rev-parse --short=9 HEAD` > health.html
 
 RUN echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short HEAD)" >> .env
 

package.json

@@ -1,10 +1,10 @@
 {
     "name": "dashboard",
-    "version": "1.5.0",
+    "version": "1.7.0",
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.5.14",
+        "@devtron-labs/devtron-fe-common-lib": "1.7.2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -18,11 +18,13 @@
         "command-line-parser": "^0.2.10",
         "compute-histogram": "^0.9.11",
         "dayjs": "^1.11.8",
-        "dompurify": "^3.0.2",
+        "dompurify": "^3.2.4",
         "fast-json-patch": "^3.1.1",
         "flexsearch": "^0.6.32",
-        "jsonpath-plus": "^10.0.0",
+        "jsonpath-plus": "^10.3.0",
         "moment": "^2.29.4",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
         "query-string": "^7.1.1",
         "react": "^17.0.2",
         "react-csv": "^2.2.2",
@@ -31,6 +33,7 @@
         "react-ga4": "^1.4.1",
         "react-gtm-module": "^2.0.11",
         "react-mde": "^11.5.0",
+        "react-monaco-editor": "^0.55.0",
         "react-router-dom": "^5.3.4",
         "react-select": "5.8.0",
         "react-virtualized": "^9.22.5",
@@ -39,7 +42,7 @@
         "rxjs": "^7.5.4",
         "sockjs-client": "1.6.1",
         "tippy.js": "^6.3.7",
-        "vite": "5.4.11",
+        "vite": "5.4.14",
         "vite-plugin-require-transform": "1.0.21",
         "vite-plugin-svgr": "^2.4.0",
         "xterm": "^4.19.0",
@@ -128,8 +131,7 @@
         "typescript": "5.5.4",
         "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-pwa": "^0.21.1",
-        "vite-tsconfig-paths": "5.0.1",
-        "vitest": "2.0.5"
+        "vite-tsconfig-paths": "5.0.1"
     },
     "jest": {
         "collectCoverageFrom": [
@@ -143,7 +145,11 @@
         ],
         "setupFilesAfterEnv": [
             "jest-extended"
-        ]
+        ],
+        "moduleNameMapper": {
+            "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
+            "monaco-yaml": "<rootDir>/node_modules/react-monaco-editor"
+        }
     },
     "resolutions": {
         "nanoid": "^3.3.8",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx

@@ -15,23 +15,24 @@
  */
 
 import { useState, useEffect } from 'react'
-import { useParams, useLocation, useRouteMatch, useHistory, Link } from 'react-router-dom'
+import { useParams, useLocation, useRouteMatch, useHistory } from 'react-router-dom'
 import {
     showError,
     Progressing,
     ErrorScreenManager,
-    DeleteDialog,
-    ConfirmationDialog,
     useAsync,
     ResourceKindType,
     ToastManager,
     ToastVariantType,
     ResourceIdToResourceApprovalPolicyConfigMapType,
+    ConfirmationModal,
+    ConfirmationModalVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { DeleteComponentsName } from '@Config/constantMessaging'
+import { ApplicationDeletionInfo } from '@Pages/Shared/ApplicationDeletionInfo/ApplicationDeletionInfo'
 import { URLS, getAppComposeURL, APP_COMPOSE_STAGE, ViewType } from '../../../../../config'
 import { importComponentFromFELibrary } from '../../../../../components/common'
 import { getAppOtherEnvironmentMin, getJobOtherEnvironmentMin, getWorkflowList } from '../../../../../services/service'
-import warn from '../../../../../assets/icons/ic-warning.svg'
 import './appConfig.scss'
 import {
     AppConfigProps,
@@ -326,30 +327,27 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
         }))
     }
 
-    const redirectToWorkflowEditor = () => getAppComposeURL(appId, APP_COMPOSE_STAGE.WORKFLOW_EDITOR, isJob)
-
-    const deleteAppHandler = () => {
-        deleteApp(appId)
-            .then((response) => {
-                if (response.code === 200) {
-                    if (isJob) {
-                        ToastManager.showToast({
-                            variant: ToastVariantType.success,
-                            description: 'Job Deleted!',
-                        })
-                        history.push(`${URLS.JOB}/${URLS.APP_LIST}`)
-                    } else {
-                        ToastManager.showToast({
-                            variant: ToastVariantType.success,
-                            description: 'Application Deleted!',
-                        })
-                        history.push(`${URLS.APP}/${URLS.APP_LIST}`)
-                    }
+    const deleteAppHandler = async () => {
+        try {
+            const response = await deleteApp(appId)
+            if (response) {
+                if (isJob) {
+                    ToastManager.showToast({
+                        variant: ToastVariantType.success,
+                        description: 'Job Deleted!',
+                    })
+                    history.push(`${URLS.JOB}/${URLS.APP_LIST}`)
+                } else {
+                    ToastManager.showToast({
+                        variant: ToastVariantType.success,
+                        description: 'Application Deleted!',
+                    })
+                    history.push(`${URLS.APP}/${URLS.APP_LIST}`)
                 }
-            })
-            .catch((error) => {
-                showError(error)
-            })
+            }
+        } catch (error) {
+            showError(error)
+        }
     }
 
     const respondOnSuccess = (redirection: boolean = false) => {
@@ -395,52 +393,57 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
             })
     }
 
+    const closeDeleteConfirmationModal = () => setState((prevState) => ({ ...prevState, showDeleteConfirm: false }))
+
+    const onClickCloseCannotDeleteModal = () => setState((prevState) => ({ ...prevState, showDeleteConfirm: false }))
+
+    const redirectToWorkflowEditor = () => {
+        onClickCloseCannotDeleteModal()
+        history.push(getAppComposeURL(appId, APP_COMPOSE_STAGE.WORKFLOW_EDITOR, isJob))
+    }
+
     const renderDeleteDialog = () => {
-        if (state.showDeleteConfirm) {
-            return state.canDeleteApp ? (
-                <DeleteDialog
-                    title={`Delete '${appName}'?`}
-                    delete={deleteAppHandler}
-                    closeDelete={() => {
-                        setState((prevState) => ({ ...prevState, showDeleteConfirm: false }))
+        // Using Confirmation Dialog Modal instead of Delete Confirmation as we are evaluating status on the basis of local variable despite of error code
+        if (!state.showDeleteConfirm) return null
+        return (
+            <>
+                <ConfirmationModal
+                    title={`Delete ${isJob ? DeleteComponentsName.Job : DeleteComponentsName.Application} '${appName}' ?`}
+                    variant={ConfirmationModalVariantType.delete}
+                    showConfirmationModal={state.canDeleteApp}
+                    subtitle={<ApplicationDeletionInfo />}
+                    buttonConfig={{
+                        secondaryButtonConfig: {
+                            text: 'Cancel',
+                            onClick: closeDeleteConfirmationModal,
+                        },
+                        primaryButtonConfig: {
+                            text: 'Delete',
+                            onClick: deleteAppHandler,
+                            isLoading: state.view === ViewType.LOADING,
+                        },
                     }}
-                >
-                    <DeleteDialog.Description>
-                        <p className="fs-13 cn-7 lh-1-54">
-                            This will delete all resources associated with this application.
-                        </p>
-                        <p className="fs-13 cn-7 lh-1-54">Deleted applications cannot be restored.</p>
-                    </DeleteDialog.Description>
-                </DeleteDialog>
-            ) : (
-                <ConfirmationDialog>
-                    <ConfirmationDialog.Icon src={warn} />
-                    <ConfirmationDialog.Body title={`Cannot Delete ${isJob ? 'job' : 'application'}`} />
-                    <p className="fs-13 cn-7 lh-1-54">
-                        Delete all pipelines and workflows before deleting this {isJob ? 'job' : 'application'}.
-                    </p>
-                    <ConfirmationDialog.ButtonGroup>
-                        <button
-                            type="button"
-                            className="cta cancel"
-                            onClick={() => {
-                                setState((prevState) => ({ ...prevState, showDeleteConfirm: false }))
-                            }}
-                        >
-                            Cancel
-                        </button>
-                        <Link
-                            onClick={() => setState((prevState) => ({ ...prevState, showDeleteConfirm: false }))}
-                            to={redirectToWorkflowEditor()}
-                            className="cta ml-12 dc__no-decor"
-                        >
-                            View Workflows
-                        </Link>
-                    </ConfirmationDialog.ButtonGroup>
-                </ConfirmationDialog>
-            )
-        }
-        return null
+                    handleClose={closeDeleteConfirmationModal}
+                />
+                <ConfirmationModal
+                    title={`Cannot Delete ${isJob ? DeleteComponentsName.Job : DeleteComponentsName.Application} '${appName}'`}
+                    variant={ConfirmationModalVariantType.warning}
+                    subtitle={`Delete all pipelines and workflows before deleting this ${isJob ? DeleteComponentsName.Job : DeleteComponentsName.Application}`}
+                    showConfirmationModal={!state.canDeleteApp}
+                    buttonConfig={{
+                        secondaryButtonConfig: {
+                            text: 'Cancel',
+                            onClick: onClickCloseCannotDeleteModal,
+                        },
+                        primaryButtonConfig: {
+                            text: 'View Workflows',
+                            onClick: redirectToWorkflowEditor,
+                        },
+                    }}
+                    handleClose={onClickCloseCannotDeleteModal}
+                />
+            </>
+        )
     }
 
     const getAdditionalParentClass = () => {

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx

@@ -34,6 +34,7 @@ const CompareConfigView = ({
     selectedChartVersion,
     draftChartVersion,
     isDeleteOverrideView,
+    editorKey = `${compareFromSelectedOptionValue || 'compare'}-draft-editor-key`,
     className = '',
     errorInfo,
     handleErrorReload,
@@ -71,6 +72,7 @@ const CompareConfigView = ({
         ) : (
             <div className="p-16">
                 <DeploymentHistoryDiffView
+                    key={editorKey}
                     currentConfiguration={getCompareViewHistoryDiffConfigProps(
                         publishedEditorTemplate,
                         publishedEditorConfig,

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx

@@ -111,7 +111,7 @@ export const DeploymentConfigCompare = ({
 
     useEffect(() => {
         // Set default initial sorting
-        if (!isManifestView) {
+        if (!isManifestView && sortBy !== DEPLOYMENT_CONFIG_DIFF_SORT_KEY) {
             handleSorting(DEPLOYMENT_CONFIG_DIFF_SORT_KEY)
         }
     }, [])
@@ -380,8 +380,6 @@ export const DeploymentConfigCompare = ({
 
     // METHODS
     const onCompareEnvironmentChange = ({ value }: SelectPickerOptionType) => {
-        handleSorting('')
-
         if (typeof value === 'number') {
             updateSearchParams({
                 chartRefId: value,
@@ -406,8 +404,6 @@ export const DeploymentConfigCompare = ({
     const onEnvironmentConfigTypeChange =
         (isCompare?: boolean) =>
         ({ value }: SelectPickerOptionType) => {
-            handleSorting('')
-
             if (typeof value === 'string') {
                 const modifiedValue = getPreviousDeploymentValue(value)
                 if (modifiedValue) {