Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/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.9",
     "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",
@@ -66,6 +66,8 @@
         "react-toastify": "9.1.3",
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
         "typescript": "5.5.4",
         "vite": "5.4.11",
         "vite-plugin-dts": "4.0.3",
@@ -80,14 +82,11 @@
         "@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",
@@ -102,11 +101,13 @@
         "jsonpath-plus": "^10.0.0",
         "marked": "^13.0.3",
         "react-dates": "^21.8.0",
+        "react-monaco-editor": "^0.54.0",
         "react-diff-viewer-continued": "^3.4.0",
         "sass": "^1.69.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

@@ -118,6 +118,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

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * 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 { OptionType } from '@Common/Types'
+import StyledRadioGroup from '../RadioGroup/RadioGroup'
+import { SegmentedControlProps, SegmentedControlVariant } from './types'
+
+const SegmentedControl = ({
+    tabs,
+    initialTab,
+    onChange,
+    tooltips,
+    disabled = false,
+    rootClassName = '',
+    name,
+    variant = SegmentedControlVariant.WHITE_ON_GRAY,
+}: SegmentedControlProps) => (
+    <StyledRadioGroup
+        className={`${variant} ${rootClassName}`}
+        onChange={onChange}
+        initialTab={initialTab}
+        name={name}
+        disabled={disabled}
+    >
+        {tabs.map((tab: OptionType, index) => (
+            <StyledRadioGroup.Radio
+                value={tab.value}
+                key={tab.value}
+                className="fs-12 cn-7 fw-6 lh-20"
+                showTippy={!!tooltips?.[index]}
+                tippyContent={tooltips?.[index] ?? ''}
+                dataTestId={`${name}-${tab.value}`}
+            >
+                {tab.label}
+            </StyledRadioGroup.Radio>
+        ))}
+    </StyledRadioGroup>
+)
+
+export default SegmentedControl

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -0,0 +1,2 @@
+export { type SegmentedControlProps, SegmentedControlVariant } from './types'
+export { default as SegmentedControl } from './SegmentedControl.component'