Merge branch 'kubecon-2024' of github.com:devtron-labs/devtron-fe-common-lib into feat/silver-surfer

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.0-patch-1-beta-11",
+    "version": "0.6.0-patch-1-beta-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -105,18 +105,6 @@
     min-height: 300px;
 }
 
-.code-editor__information {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.33;
-    letter-spacing: normal;
-    color: var(--N900);
-    height: auto;
-    padding: 8px 16px;
-    border-bottom: 1px solid #d6dbdf;
-    background-color: var(--B100);
-}
-
 .code-editor__information-info-icon {
     width: 16px;
     height: 16px;
@@ -140,16 +128,6 @@
     background: url('../../Assets/Icon/ic-compare.svg');
 }
 
-.code-editor__error {
-    background-color: #fde7e7;
-    color: #862020;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.33;
-    padding: 8px 16px;
-    border-bottom: 1px solid #d6dbdf;
-}
-
 .monaco-editor-hover {
     margin-left: 40px;
 }

src/Common/CodeEditor/codeEditor.scss

@@ -114,6 +114,7 @@ export const ROUTES = {
     DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
     USER_LIST_MIN: 'user/list/min',
     CONFIG_DATA: 'config/data',
+    K8S_RESOURCE_LIST: 'k8s/resource/list',
 }
 
 export enum KEY_VALUE {

src/Common/Constants.ts

@@ -17,7 +17,7 @@
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DOMPurify from 'dompurify'
 import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
-import { compare as compareJSON, applyPatch } from 'fast-json-patch'
+import { compare as compareJSON, applyPatch, unescapePathComponent } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -595,7 +595,7 @@ const buildObjectFromPathTokens = (index: number, tokens: string[], value: any)
     const isKeyNumber = !Number.isNaN(numberKey)
     return isKeyNumber
         ? [...Array(numberKey).fill(null), buildObjectFromPathTokens(index + 1, tokens, value)]
-        : { [key]: buildObjectFromPathTokens(index + 1, tokens, value) }
+        : { [unescapePathComponent(key)]: buildObjectFromPathTokens(index + 1, tokens, value) }
 }
 
 /**
@@ -644,10 +644,7 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
     })
 
 export const convertJSONPointerToJSONPath = (pointer: string) =>
-    pointer
-        .replace(/\/([\*0-9]+)\//g, '[$1].')
-        .replace(/\//g, '.')
-        .replace(/\./, '$.')
+    unescapePathComponent(pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.'))
 
 export const flatMapOfJSONPaths = (
     paths: string[],

src/Common/Helper.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react'
 import RJSF from '@rjsf/core'
 import RJSFValidator from '@rjsf/validator-ajv8'
 
@@ -27,7 +28,7 @@ import './rjsfForm.scss'
 const Form = RJSF
 const validator = RJSFValidator
 
-export const RJSFForm = (props: FormProps) => (
+export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) => (
     <Form
         noHtml5Validate
         showErrorList={false}
@@ -42,5 +43,6 @@ export const RJSFForm = (props: FormProps) => (
         formContext={props.formData}
         widgets={{ ...widgets, ...props.widgets }}
         translateString={translateString}
+        ref={ref}
     />
-)
+))

src/Common/RJSF/Form.tsx

@@ -40,6 +40,33 @@ export interface K8SObjectBaseType {
     isExpanded: boolean
 }
 
+interface K8sRequestResourceIdentifierType {
+    groupVersionKind: GVKType
+    namespace?: string
+    name?: string
+}
+
+interface ResourceListPayloadK8sRequestType {
+    resourceIdentifier: K8sRequestResourceIdentifierType
+    patch?: string
+    forceDelete?: boolean
+}
+
+export interface K8sResourceListPayloadType {
+    clusterId: number
+    filter?: string
+    k8sRequest: ResourceListPayloadK8sRequestType
+}
+
+export type K8sResourceDetailDataType = {
+    [key: string]: string | number | object
+}
+
+export interface K8sResourceDetailType {
+    headers: string[]
+    data: K8sResourceDetailDataType[]
+}
+
 export interface BulkSelectionActionWidgetProps {
     count: number
     handleOpenBulkDeleteModal: () => void

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

@@ -17,3 +17,4 @@
 export * from './ResourceBrowser.Types'
 export * from './Helper'
 export * from './types'
+export * from './service'

src/Pages/ResourceBrowser/index.ts

@@ -0,0 +1,12 @@
+import { post } from '@Common/Api'
+import { ROUTES } from '@Common/Constants'
+import { ResponseType } from '@Common/Types'
+import { K8sResourceDetailType, K8sResourceListPayloadType } from './ResourceBrowser.Types'
+
+export const getK8sResourceList = (
+    resourceListPayload: K8sResourceListPayloadType,
+    signal?: AbortSignal,
+): Promise<ResponseType<K8sResourceDetailType>> =>
+    post(ROUTES.K8S_RESOURCE_LIST, resourceListPayload, {
+        signal,
+    })