feat: Revamp Runtime Parameters in Resource Watcher

package.json

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

src/Common/CodeMirror/Extensions/diffMap.ts

@@ -0,0 +1,42 @@
+import { EditorView, Facet, ViewPlugin } from '@uiw/react-codemirror'
+
+const Theme = EditorView.theme({
+    '&': { height: '100%', overflowY: 'auto' },
+    '& .cm-minimap-gutter': { position: 'sticky', right: 0, top: 0 },
+    '& .cm-minimap-inner': { height: '100%', position: 'absolute', right: 0, top: 0 },
+})
+
+export interface MinimapConfig {
+    create: (view: EditorView) => { dom: HTMLElement }
+}
+
+const minimapClass = ViewPlugin.fromClass(
+    class {
+        private dom: HTMLElement
+
+        constructor(view: EditorView) {
+            // eslint-disable-next-line no-use-before-define
+            if (view.state.facet(showDiffMap)) {
+                this.create(view)
+            }
+        }
+
+        private create(view: EditorView) {
+            const dom = document.createElement('div')
+            dom.classList.add('cm-gutters')
+            this.dom = dom
+            view.scrollDOM.insertBefore(this.dom, view.contentDOM.nextSibling)
+        }
+
+        destroy() {
+            this.dom.remove()
+        }
+    },
+)
+
+const showDiffMap = Facet.define<MinimapConfig | null, MinimapConfig | null>({
+    combine: (c) => c.find((o) => o !== null) ?? null,
+    enables: () => [Theme, minimapClass],
+})
+
+export { showDiffMap }

src/Common/Common.service.ts

@@ -270,6 +270,7 @@ export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): Runt
     const runtimeParams = (response?.runtimePluginVariables ?? []).map<RuntimePluginVariables>((variable) => ({
         ...variable,
         defaultValue: variable.value,
+        stepVariableId: variable.stepVariableId || Math.floor(new Date().valueOf() * Math.random())
     }))
 
     runtimeParams.push(...envVariables)

src/Shared/Components/MaterialHistory/MaterialHistory.component.tsx

@@ -58,7 +58,7 @@ const MaterialHistory = ({
     return (
         // added for consistent typing
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        <div className="flexbox-col dc__gap-12 py-12 px-16">
+        <div className="flexbox-col dc__gap-12">
             {dateKeys.map((date) => {
                 const historyList = materialHistoryMapWithTime[date]
                 return (

src/Shared/Components/index.ts

@@ -24,7 +24,6 @@ export * from './ScannedByToolModal'
 export * from './FilterChips'
 export * from './ActivityIndicator'
 export * from './GenericSectionErrorState'
-export * from './KeyValueList'
 export * from './InfoIconTippy'
 export * from './EditableTextArea'
 export * from './Header'