Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into fix/runtime-params

Author: RohitRaj011

.gitignore

@@ -105,3 +105,4 @@ typings/
 
 .DS_Store
 .npmrc
+.build-cache

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.4-beta-16",
+    "version": "1.2.7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -48,7 +48,7 @@
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
         "@vitejs/plugin-react": "4.3.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
@@ -107,6 +107,7 @@
         "tslib": "2.7.0"
     },
     "overrides": {
+        "cross-spawn": "^7.0.5",
         "react-dates": {
             "react": "^17.0.2",
             "react-dom": "^17.0.2"

package.json

@@ -150,7 +150,14 @@ async function fetchAPI<K = object>(
                     })
                 } else {
                     handleLogout()
-                    return { code: 401, status: 'Unauthorized', result: [] }
+                    // Using this way to ensure that the user is redirected to the login page
+                    // and the component has enough time to get unmounted otherwise the component re-renders
+                    // and try to access some property of a variable and log exception to sentry
+                    return await new Promise((resolve) => {
+                        setTimeout(() => {
+                            resolve({ code: 401, status: 'Unauthorized', result: [] })
+                        }, 1000)
+                    })
                 }
             } else if (response.status >= 300 && response.status <= 599) {
                 return await handleServerError(contentType, response)

src/Common/Api.ts

@@ -120,6 +120,7 @@ export const ROUTES = {
     K8S_RESOURCE_LIST: 'k8s/resource/list',
     FILE_UPLOAD: 'file/upload',
     PLUGIN_GLOBAL_VARIABLES: 'plugin/global/list/global-variable',
+    CONFIG_COMPARE_SECRET: 'config/compare/secret',
 }
 
 export enum KEY_VALUE {

src/Common/Constants.ts

@@ -511,7 +511,7 @@ export const getUrlWithSearchParams = <T extends string | number = string | numb
 /**
  * Custom exception logger function for logging errors to sentry
  */
-export const logExceptionToSentry = Sentry.captureException.bind(window)
+export const logExceptionToSentry: typeof Sentry.captureException  = Sentry.captureException.bind(window)
 
 export const customStyles = {
     control: (base, state) => ({

src/Common/Helper.tsx

@@ -47,10 +47,10 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         if (task) {
             return `<li style="list-style: none">
                         <input disabled type="checkbox" ${checked ? 'checked' : ''} class="dc__vertical-align-middle" style="margin: 0 0.2em 0.25em -1.4em">
-                        ${text}
+                        ${marked(text)}
                     </li>`
         }
-        return `<li>${text}</li>`
+        return `<li>${marked(text)}</li>`
     }
 
     renderer.image = ({ href, title, text }: Tokens.Image) =>
@@ -60,7 +60,7 @@ const MarkDown = ({ setExpandableIcon, markdown, className, breaks, disableEscap
         <div class="table-container">
             <table>
                 <thead>
-                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${headerCell.text}</th>`).join('')}</tr>
+                    <tr>${header.map((headerCell) => `<th align="${headerCell.align}">${marked(headerCell.text)}</th>`).join('')}</tr>
                 </thead>
                 <tbody>
                     ${rows.map((row) => renderTableRow(row)).join('')}

src/Common/Markdown/MarkDown.tsx

@@ -4,13 +4,14 @@ import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-r
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
 import { useAsync } from '@Common/Helper'
-import { EnvResourceType, getAppEnvDeploymentConfig } from '@Shared/Services'
+import { EnvResourceType, getAppEnvDeploymentConfig, getCompareSecretsData } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
 import { useUrlFilters } from '@Common/Hooks'
 import { GenericEmptyState, InfoColourBar } from '@Common/index'
 
+import { useMainContext } from '@Shared/Providers'
 import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
 import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
 import {
@@ -35,6 +36,7 @@ export const DeploymentHistoryConfigDiff = ({
     // HOOKS
     const { path, params } = useRouteMatch()
     const { pathname, search } = useLocation()
+    const { isSuperAdmin } = useMainContext()
 
     // CONSTANTS
     const pipelineDeployments = useMemo(() => getPipelineDeployments(triggerHistory), [triggerHistory])
@@ -54,32 +56,49 @@ export const DeploymentHistoryConfigDiff = ({
 
     // ASYNC CALLS
     // Load comparison deployment data
-    const [compareDeploymentConfigLoader, compareDeploymentConfig, , reloadCompareDeploymentConfig] = useAsync(
-        () =>
-            Promise.allSettled([
-                getAppEnvDeploymentConfig({
-                    params: {
-                        appName,
-                        envName,
-                        configArea: 'DeploymentHistory',
-                        pipelineId,
-                        wfrId: currentWfrId,
-                    },
-                }),
+    const [compareDeploymentConfigLoader, compareDeploymentConfig, , reloadCompareDeploymentConfig] =
+        useAsync(async () => {
+            const payloads = [
+                {
+                    appName,
+                    envName,
+                    configArea: 'DeploymentHistory',
+                    pipelineId,
+                    wfrId: currentWfrId,
+                } as const,
                 isPreviousDeploymentConfigAvailable
-                    ? getAppEnvDeploymentConfig({
-                          params: {
-                              appName,
-                              envName,
-                              configArea: 'DeploymentHistory',
-                              pipelineId,
-                              wfrId: compareWfrId,
-                          },
-                      })
+                    ? ({
+                          appName,
+                          envName,
+                          configArea: 'DeploymentHistory',
+                          pipelineId,
+                          wfrId: compareWfrId,
+                      } as const)
                     : null,
-            ]),
-        [currentWfrId, compareWfrId],
-    )
+            ] as const
+
+            const [secretsData, ...configDatas] = await Promise.allSettled([
+                !isSuperAdmin ? getCompareSecretsData([...payloads]) : null,
+                ...payloads.map((payload) => payload && getAppEnvDeploymentConfig({ params: payload })),
+            ])
+
+            if (secretsData.status !== 'fulfilled' || !secretsData.value) {
+                return configDatas
+            }
+
+            secretsData.value.forEach((data, index) => {
+                if (
+                    configDatas[index].status !== 'fulfilled' ||
+                    !configDatas[index].value ||
+                    configDatas[index].value.result.isAppAdmin
+                ) {
+                    return
+                }
+                configDatas[index].value.result.secretsData = data.secretsData
+            })
+
+            return configDatas
+        }, [currentWfrId, compareWfrId])
 
     // METHODS
     const getNavItemHref = (resourceType: EnvResourceType, resourceName: string) =>