chore: release candidate v0.21.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-patch-1",
+    "version": "0.6.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -35,7 +35,7 @@
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-        "@sentry/browser": "^7.31.1",
+        "@sentry/browser": "^7.119.1",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@tippyjs/react": "^4.2.0",
@@ -83,7 +83,6 @@
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
-        "react-keybind": "^0.9.4",
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
@@ -96,7 +95,7 @@
         "ansi_up": "^5.2.1",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
-        "jsonpath-plus": "^9.0.0",
+        "jsonpath-plus": "^10.0.0",
         "react-dates": "^21.8.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",

src/Common/ChartVersionAndTypeSelector.tsx

@@ -15,10 +15,17 @@
  */
 
 import { useEffect, useState } from 'react'
+import { SelectPicker, SelectPickerVariantType } from '@Shared/Components'
 import { fetchChartTemplateVersions } from './Common.service'
-import { ChartVersionAndTypeSelectorProps, DeploymentChartVersionType } from './Types'
+import { ChartVersionAndTypeSelectorProps } from './Types'
 import { getFilteredChartVersions, showError } from './Helper'
-import { SelectPicker, SelectPickerVariantType } from '@Shared/Components'
+
+interface DeploymentChartVersionType {
+    chartRefId: number
+    chartVersion: string
+    chartType: string
+    type: number
+}
 
 // @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
 // when the Code Editor is moved to the fe-common-lib

src/Common/CodeEditor/CodeEditor.tsx

@@ -21,9 +21,9 @@ import ReactGA from 'react-ga4'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { configureMonacoYaml } from 'monaco-yaml'
 
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg'
-import { ReactComponent as WarningIcon } from '../../Assets/Icon/ic-warning.svg'
 import './codeEditor.scss'
 import 'monaco-editor'
 
@@ -348,7 +348,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
                     <CodeEditorPlaceholder customLoader={customLoader} />
                 ) : (
                     <>
-                        {shebang && <div className="shebang">{shebang}</div>}
+                        {shebang && <div className="code-editor__shebang">{shebang}</div>}
                         {state.diffMode ? (
                             <MonacoDiffEditor
                                 original={
@@ -452,7 +452,7 @@ const ValidationError = () => {
 
 const Warning: React.FC<InformationBarProps> = (props) => (
     <div className={`code-editor__warning ${props.className || ''}`}>
-        <WarningIcon className="code-editor__information-info-icon" />
+        <ICWarningY5 className="code-editor__information-info-icon" />
         {props.text}
         {props.children}
     </div>
@@ -476,7 +476,7 @@ const Information: React.FC<InformationBarProps> = (props) => (
 
 const Clipboard = () => {
     const { state } = useCodeEditorContext()
-    return <ClipboardButton content={state.code} rootClassName="bcn-1" iconSize={20} />
+    return <ClipboardButton content={state.code} iconSize={16} />
 }
 
 const SplitPane = ({}) => {

src/Common/CodeEditor/codeEditor.scss

@@ -105,18 +105,6 @@
     min-height: 300px;
 }
 
-.code-editor__warning {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.33;
-    letter-spacing: normal;
-    color: var(--Y700);
-    height: auto;
-    padding: 8px 16px;
-    border-bottom: 1px solid #d6dbdf;
-    background-color: var(--Y100);
-}
-
 .code-editor__information {
     font-size: 12px;
     font-weight: 400;
@@ -171,3 +159,9 @@
         z-index: 9;
     }
 }
+
+.code-editor__shebang {
+    padding: 0 52px;
+    color: #151515;
+    opacity: 0.6;
+}

src/Common/Constants.ts

@@ -24,6 +24,7 @@ export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
 export const DOCUMENTATION_VERSION = '/v/v0.7'
 export const DISCORD_LINK = 'https://discord.devtron.ai/'
 export const DOCUMENTATION = {
+    APP_METRICS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/app-details/app-metrics`,
     APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
     APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
     BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
@@ -70,6 +71,7 @@ export const URLS = {
 export const ROUTES = {
     APP: 'app',
     APP_ARTIFACT_PROMOTE_MATERIAL: 'app/artifact/promotion-request/material',
+    APP_TEMPLATE_DATA: 'app/template/data',
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
@@ -507,6 +509,7 @@ export const API_STATUS_CODES = {
     PERMISSION_DENIED: 403,
     NOT_FOUND: 404,
     EXPECTATION_FAILED: 417,
+    LOCKED: 423,
 }
 
 export enum SERVER_MODE {

src/Common/Helper.tsx

@@ -642,7 +642,7 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
         return _keys
     })
 
-export const convertJSONPointerToJSONPath = (pointer: string) => pointer.replace(/\//g, '.').replace(/\./, '$.')
+export const convertJSONPointerToJSONPath = (pointer: string) => pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.')
 
 export const flatMapOfJSONPaths = (
     paths: string[],
@@ -937,3 +937,19 @@ export function asyncWrap(promise): any[] {
 }
 
 export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)
+
+export const throttle = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    delay: number = 300,
+): ((...args: Parameters<T>) => void) => {
+    let lastCall = 0
+
+    return (...args: Parameters<T>) => {
+        const now = Date.now()
+
+        if (now - lastCall >= delay) {
+            lastCall = now
+            func(...args)
+        }
+    }
+}

src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcut.tsx

@@ -15,8 +15,8 @@
  */
 
 import { useContext } from 'react'
-import { context } from './UseRegisterShortcutContext'
+import { UseRegisterShortcutContext } from './UseRegisterShortcutContext'
 
-const useRegisterShortcut = () => useContext(context)
+const useRegisterShortcut = () => useContext(UseRegisterShortcutContext)
 
 export default useRegisterShortcut

src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutContext.tsx

@@ -17,4 +17,4 @@
 import { createContext } from 'react'
 import { UseRegisterShortcutContextType } from './types'
 
-export const context = createContext<UseRegisterShortcutContextType>(null)
+export const UseRegisterShortcutContext = createContext<UseRegisterShortcutContextType>(null)