Merge pull request #398 from devtron-labs/chore/sync-kubecon-2024

feat: kubecon 2024

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.7.3",
+    "version": "1.0.1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -40,6 +40,7 @@
         "@testing-library/react": "^12.1.4",
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
+        "@types/dompurify": "^3.0.5",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",

package.json

@@ -264,4 +264,4 @@ export const abortPreviousRequests = <T>(
  */
 export const getIsRequestAborted = (error) =>
     // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message.search('abort|aborted')
+    error && error.code === 0 && error.message.search('abort|aborted') > -1

src/Common/Api.ts

@@ -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

@@ -67,6 +67,7 @@ export const URLS = {
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
     CONFIG_DRIFT: 'config-drift',
+    RESOURCE_BROWSER: '/resource-browser',
 }
 
 export const ROUTES = {
@@ -114,6 +115,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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
 import { DraggableWrapperProps, DraggablePositionVariant } from './types'
 import { useWindowSize } from '../Hooks'
@@ -71,6 +71,12 @@ export default function DraggableWrapper({
                 const y = baseY - nodeRefHeight - boundaryGap
                 return { x, y }
             }
+            case DraggablePositionVariant.SCREEN_BOTTOM_RIGHT: {
+                const x = windowSize.width - parentRect.left - nodeRefWidth - boundaryGap
+                const y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap
+
+                return { x, y }
+            }
             // Add more cases for other variants if needed
             default: {
                 // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.

src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -19,6 +19,7 @@ import { HTMLAttributes, ReactNode, RefObject } from 'react'
 export enum DraggablePositionVariant {
     PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
     SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
+    SCREEN_BOTTOM_RIGHT = 'SCREEN_BOTTOM_RIGHT',
     // Can add more based on requirement
 }
 

src/Common/DraggableWrapper/types.ts

@@ -15,8 +15,9 @@
  */
 
 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'
@@ -594,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) }
 }
 
 /**
@@ -642,7 +643,8 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
         return _keys
     })
 
-export const convertJSONPointerToJSONPath = (pointer: string) => pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.')
+export const convertJSONPointerToJSONPath = (pointer: string) =>
+    unescapePathComponent(pointer.replace(/\/([\*0-9]+)\//g, '[$1].').replace(/\//g, '.').replace(/\./, '$.'))
 
 export const flatMapOfJSONPaths = (
     paths: string[],
@@ -953,3 +955,42 @@ export const throttle = <T extends (...args: unknown[]) => unknown>(
         }
     }
 }
+
+// TODO: Might need to expose sandbox and referrer policy
+export const getSanitizedIframe = (iframeString: string) =>
+    DOMPurify.sanitize(iframeString, {
+        ADD_TAGS: ['iframe'],
+        ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+    })
+
+/**
+ * This method adds default attributes to iframe - title, loading ="lazy", width="100%", height="100%"
+ */
+export const getIframeWithDefaultAttributes = (iframeString: string, defaultName?: string): string => {
+    const parentDiv = document.createElement('div')
+    parentDiv.innerHTML = getSanitizedIframe(iframeString)
+
+
+    const iframe = parentDiv.querySelector('iframe')
+    if (iframe) {
+        if (!iframe.hasAttribute('title') && !!defaultName) {
+            iframe.setAttribute('title', defaultName)
+        }
+
+        if (!iframe.hasAttribute('loading')) {
+            iframe.setAttribute('loading', 'lazy')
+        }
+
+        if (!iframe.hasAttribute('width')) {
+            iframe.setAttribute('width', '100%')
+        }
+
+        if (!iframe.hasAttribute('height')) {
+            iframe.setAttribute('height', '100%')
+        }
+
+        return parentDiv.innerHTML
+    }
+
+    return iframeString
+}

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

@@ -997,3 +997,13 @@ export interface EnvironmentHelmResult {
 }
 
 export type EnvironmentListHelmResponse = ResponseType<EnvironmentListHelmResult[]>
+
+export interface WidgetEventDetails {
+    message: string
+    namespace: string
+    object: string
+    source: string
+    count: number
+    age: string
+    lastSeen: string
+}