Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/masked-secrets

Elessar1802 · Elessar1802 · commit f7c66a67637a · 2024-12-06T11:13:38.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.1.8-beta-1",
+    "version": "1.1.8-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -35,6 +35,7 @@
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+        "@laynezh/vite-plugin-lib-assets": "^0.5.26",
         "@sentry/browser": "^7.119.1",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
@@ -60,15 +61,15 @@
         "husky": "^7.0.4",
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
-        "monaco-editor": "0.44.0",
-        "monaco-yaml": "5.1.1",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
-        "react-mde": "^11.5.0",
         "react-toastify": "9.1.3",
+        "sharp": "^0.33.5",
+        "svgo": "^3.3.2",
         "typescript": "5.5.4",
         "vite": "5.4.11",
         "vite-plugin-dts": "4.0.3",
+        "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-lib-inject-css": "2.1.1",
         "vite-plugin-svgr": "^2.4.0",
         "vite-tsconfig-paths": "5.0.1"
@@ -79,27 +80,29 @@
         "@rjsf/validator-ajv8": "^5.13.3",
         "@typeform/embed-react": "2.20.0",
         "dompurify": "^3.0.2",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
+        "react-monaco-editor": "^0.54.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },
     "dependencies": {
         "@types/react-dates": "^21.8.6",
-        "marked": "^13.0.3",
         "ansi_up": "^5.2.1",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "framer-motion": "^6.5.1",
         "jsonpath-plus": "^10.0.0",
+        "marked": "^13.0.3",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
-        "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "2.7.0"
     },
diff --git a/src/Common/Api.ts b/src/Common/Api.ts
@@ -204,6 +204,9 @@ function fetchInTime<T = object>(
                 options.abortControllerRef.current = new AbortController()
             }
 
+            // Note: This is not catered in case abortControllerRef is passed since
+            // the API is rejected with abort signal from line 202
+            // FIXME: Remove once signal is removed
             reject({
                 code: 408,
                 errors: [{ code: 408, internalMessage: 'Request cancelled', userMessage: 'Request Cancelled' }],
@@ -224,6 +227,7 @@ function fetchInTime<T = object>(
         if (err instanceof ServerErrors) {
             throw err
         } else {
+            // FIXME: Can be removed once signal is removed
             throw new ServerErrors({
                 code: 408,
                 errors: [
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -512,6 +512,7 @@ export const API_STATUS_CODES = {
     UNAUTHORIZED: 401,
     PERMISSION_DENIED: 403,
     NOT_FOUND: 404,
+    REQUEST_TIMEOUT: 408,
     EXPECTATION_FAILED: 417,
     UNPROCESSABLE_ENTITY: 422,
     LOCKED: 423,
diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
@@ -49,6 +49,7 @@ import regexIcon from '@Icons/ic-regex.svg'
 import pullRequest from '@Icons/ic-pull-request.svg'
 import tagIcon from '@Icons/ic-tag.svg'
 import { SourceTypeMap } from '@Common/Common.service'
+import { getIsRequestAborted } from './Api'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
@@ -71,7 +72,7 @@ export function showError(serverError, showToastOnUnknownError = true, hideAcces
             }
         })
     } else {
-        if (serverError.code !== 403 && serverError.code !== 408) {
+        if (serverError.code !== 403 && serverError.code !== 408 && !getIsRequestAborted(serverError)) {
             Sentry.captureException(serverError)
         }
 
diff --git a/src/Common/Modals/VisibleModal.tsx b/src/Common/Modals/VisibleModal.tsx
@@ -34,8 +34,8 @@ export class VisibleModal extends React.Component<{
     }
 
     escFunction(event) {
-        stopPropagation(event)
         if (event.keyCode === 27 || event.key === 'Escape') {
+            stopPropagation(event)
             if (this.props.onEscape) {
                 this.props.onEscape(event)
             } else if (this.props.close) {
diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx
@@ -166,14 +166,11 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
                 variant: ToastVariantType.success,
                 description: 'Build Aborted',
             })
-            setAbortConfirmation(false)
             setAbortError({
                 status: false,
                 message: '',
             })
         } catch (error) {
-            setAborting(false)
-            setAbortConfirmation(false)
             if (error.code === 400) {
                 // code 400 is for aborting a running build
                 const { errors } = error
@@ -182,6 +179,9 @@ const ProgressingStatus = React.memo(({ status, stage, type }: ProgressingStatus
                     message: errors[0].userMessage,
                 })
             }
+        } finally {
+            setAborting(false)
+            setAbortConfirmation(false)
         }
     }
 
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -194,8 +194,11 @@ export const DeploymentConfigDiffMain = ({
                         <DiffViewer
                             oldValue={primaryList.codeEditorValue.value}
                             newValue={secondaryList.codeEditorValue.value}
-                            leftTitle={primaryHeading}
-                            rightTitle={secondaryHeading}
+                            // Need to hide the title since the null state is controlled explicitly
+                            {...(primaryList.codeEditorValue.value !== secondaryList.codeEditorValue.value && {
+                                leftTitle: primaryHeading,
+                                rightTitle: secondaryHeading,
+                            })}
                             codeFoldMessageRenderer={renderDiffViewNoDifferenceState(
                                 primaryList.codeEditorValue.value,
                                 secondaryList.codeEditorValue.value,
diff --git a/src/Shared/Components/Header/IframePromoButton.tsx b/src/Shared/Components/Header/IframePromoButton.tsx
@@ -1,6 +1,7 @@
+import { useState, useCallback } from 'react'
 import { GenericEmptyState, VisibleModal } from '@Common/index'
 import { ComponentSizeType } from '@Shared/constants'
-import { useState, useCallback } from 'react'
+import ReactGA from 'react-ga4'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 
@@ -13,7 +14,13 @@ export const IframePromoButton = () => {
         FEATURE_PROMO_EMBEDDED_IFRAME_URL,
     } = window._env_
 
-    const onClickShowIframeModal = useCallback(() => setEmbeddedIframeModal(true), [])
+    const onClickShowIframeModal = useCallback(() => {
+        setEmbeddedIframeModal(true)
+        ReactGA.event({
+            category: 'PRIMARY_HEADER',
+            action: 'HEADER_IFRAME_BUTTON_CLICKED',
+        })
+    }, [])
     const onClickCloseIframeModal = useCallback(() => setEmbeddedIframeModal(false), [])
 
     const renderIframeDrawer = () => (
diff --git a/src/index.ts b/src/index.ts
@@ -19,6 +19,12 @@ export interface customEnv {
     SENTRY_ERROR_ENABLED?: boolean
     SENTRY_PERFORMANCE_ENABLED?: boolean
     SENTRY_DSN?: string
+    /**
+     * Release version for sentry
+     *
+     * @default 'dashboard@${SHORT_GIT_HASH}'
+     */
+    SENTRY_RELEASE_VERSION?: string
     SENTRY_TRACES_SAMPLE_RATE?: number
     HOTJAR_ENABLED?: boolean
     CLUSTER_NAME?: boolean
diff --git a/vite.config.ts b/vite.config.ts
@@ -19,14 +19,19 @@ import { resolve } from 'path'
 import react from '@vitejs/plugin-react'
 import dts from 'vite-plugin-dts'
 import { libInjectCss } from 'vite-plugin-lib-inject-css'
+import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
 import svgr from 'vite-plugin-svgr'
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
 import * as packageJson from './package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
+        libAssetsPlugin({
+            name: '[name].[contenthash:8].[ext]',
+        }),
         tsconfigPaths(),
         react(),
         libInjectCss(),
@@ -37,6 +42,9 @@ export default defineConfig({
         NodeGlobalsPolyfillPlugin({
             process: true,
         }),
+        ViteImageOptimizer({
+            logStats: false,
+        }),
     ],
     build: {
         target: 'ES2021',
@@ -51,6 +59,50 @@ export default defineConfig({
             output: {
                 assetFileNames: 'assets/[name][extname]',
                 entryFileNames: '[name].js',
+                manualChunks(id: string) {
+                    if (
+                        id.includes('/node_modules/monaco-editor') ||
+                        id.includes('/node_modules/react-monaco-editor')
+                    ) {
+                        return '@monaco-editor'
+                    }
+
+                    if (id.includes('/node_modules/react-dates')) {
+                        return '@react-dates'
+                    }
+
+                    if (id.includes('/node_modules/framer-motion')) {
+                        return '@framer-motion'
+                    }
+
+                    if (id.includes('/node_modules/moment')) {
+                        return '@moment'
+                    }
+
+                    if (id.includes('/node_modules/react-select')) {
+                        return '@react-select'
+                    }
+
+                    if (id.includes('/node_modules/')) {
+                        return '@vendor'
+                    }
+
+                    if (id.includes('src/Common/CodeEditor')) {
+                        return '@code-editor'
+                    }
+
+                    if (id.includes('src/Common/RJSF')) {
+                        return '@common-rjsf'
+                    }
+
+                    if (id.includes('src/Assets/Icons')) {
+                        return '@src-assets-icons'
+                    }
+
+                    if (id.includes('src/Assets/Img')) {
+                        return '@src-assets-images'
+                    }
+                },
             },
         },
     },

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ import regexIcon from '@Icons/ic-regex.svg'`
`49`	`49`	`import pullRequest from '@Icons/ic-pull-request.svg'`
`50`	`50`	`import tagIcon from '@Icons/ic-tag.svg'`
`51`	`51`	`import { SourceTypeMap } from '@Common/Common.service'`
	`52`	`+import { getIsRequestAborted } from './Api'`
`52`	`53`
`53`	`54`	`export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {`
`54`	`55`	`if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {`
`@@ -71,7 +72,7 @@ export function showError(serverError, showToastOnUnknownError = true, hideAcces`
`71`	`72`	`}`
`72`	`73`	`})`
`73`	`74`	`} else {`
`74`		`- if (serverError.code !== 403 && serverError.code !== 408) {`
	`75`	`+ if (serverError.code !== 403 && serverError.code !== 408 && !getIsRequestAborted(serverError)) {`
`75`	`76`	`Sentry.captureException(serverError)`
`76`	`77`	`}`
`77`	`78`
Original file line number	Diff line number	Diff line change
`@@ -34,8 +34,8 @@ export class VisibleModal extends React.Component<{`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`escFunction(event) {`
`37`		`- stopPropagation(event)`
`38`	`37`	`if (event.keyCode === 27 \|\| event.key === 'Escape') {`
	`38`	`+ stopPropagation(event)`
`39`	`39`	`if (this.props.onEscape) {`
`40`	`40`	`this.props.onEscape(event)`
`41`	`41`	`} else if (this.props.close) {`