Merge pull request #1283 from devtron-labs/fix/variables-update

Fix: variables update

Author: AbhishekA1509

src/components/scopedVariables/Descriptor.tsx

@@ -54,7 +54,7 @@ export default function Descriptor({ children, showUploadButton, readFile, onSea
                     </div>
 
                     <div className="flex dc__gap-12">
-                        {onSearch && <SearchBar onSearch={onSearch} placeholder="Search Variables" Icon={ICSearch} />}
+                        {onSearch && <SearchBar onSearch={onSearch} placeholder="Search variables" Icon={ICSearch} />}
 
                         {showUploadButton && (
                             <button

src/components/scopedVariables/SavedVariables.tsx

@@ -4,7 +4,7 @@ import { PopupMenu } from '@devtron-labs/devtron-fe-common-lib'
 import ScopedVariablesLoader from './ScopedVariablesLoader'
 import ScopedVariablesEditor from './ScopedVariablesEditor'
 import VariablesList from './VariablesList'
-import { useFileReader } from '../common'
+import { importComponentFromFELibrary, useFileReader } from '../common'
 import CodeEditor from '../CodeEditor/CodeEditor'
 import Descriptor from './Descriptor'
 import { downloadData, parseIntoYAMLString } from './utils'
@@ -33,6 +33,11 @@ export default function SavedVariablesView({
     const scopedVariablesYAML = parseIntoYAMLString(scopedVariablesData)
 
     const { status, progress, fileData, abortRead, readFile } = useFileReader()
+    const SCOPED_VARIABLES_TEMPLATE = importComponentFromFELibrary(
+        'SCOPED_VARIABLES_TEMPLATE_DATA',
+        SCOPED_VARIABLES_TEMPLATE_DATA,
+        'function',
+    )
 
     useEffect(() => {
         if (status?.status == null && scopedVariablesData?.spec?.length) {
@@ -74,7 +79,7 @@ export default function SavedVariablesView({
                     downloadData(scopedVariablesYAML, DOWNLOAD_FILE_NAME, DOWNLOAD_FILES_AS)
                     break
                 case DROPDOWN_ITEMS[1]:
-                    downloadData(SCOPED_VARIABLES_TEMPLATE_DATA, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS)
+                    downloadData(SCOPED_VARIABLES_TEMPLATE, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS)
                     break
             }
         }

src/components/scopedVariables/ScopedVariablesEditor.tsx

@@ -28,7 +28,7 @@ export default function ScopedVariablesEditor({
     const [showSaveView, setShowSaveView] = useState<boolean>(false)
     const [loadingSavedScopedVariables, setLoadingSavedScopedVariables] = useState<boolean>(false)
     const [isSaving, setIsSaving] = useState<boolean>(false)
-    const [footerError, setFooterError] = useState<string>('')
+    const [infoError, setInfoError] = useState<string>('')
 
     const handleParsing = (data: string): ScopedVariablesDataType => {
         let variablesObj: ScopedVariablesDataType
@@ -60,7 +60,7 @@ export default function ScopedVariablesEditor({
             }
         } catch (e) {
             if (e instanceof ServerErrors && Array.isArray(e.errors) && e.code === 406) {
-                setFooterError(e.errors[0]?.userMessage || UPLOAD_FAILED_STANDARD_MESSAGE)
+                setInfoError(e.errors[0]?.userMessage || UPLOAD_FAILED_STANDARD_MESSAGE)
             }
             toast.error(UPLOAD_FAILED_STANDARD_MESSAGE)
             setIsSaving(false)
@@ -108,22 +108,6 @@ export default function ScopedVariablesEditor({
         abortRead()
     }
 
-    const handleClearError = () => {
-        setFooterError('')
-    }
-
-    function renderInfoBarCloseButton(): JSX.Element {
-        return (
-            <button
-                type="button"
-                className="p-0 h-20 dc__no-border dc__outline-none-imp bcr-1"
-                onClick={handleClearError}
-            >
-                <ICClose className="icon-dim-20 mt-2" />
-            </button>
-        )
-    }
-
     return (
         <div className="flex column dc__content-space h-100 bcn-0 saved-variables-editor">
             <Descriptor />
@@ -154,6 +138,15 @@ export default function ScopedVariablesEditor({
                         </Tippy>
                     </div>
 
+                    {infoError && (
+                        <InfoColourBar
+                            message={infoError}
+                            classname="w-100 bcr-1 mb-16 m-0 dc__border dc__border-bottom-r2 dc__no-border-radius dc__no-top-border dc__no-left-border dc__no-right-border"
+                            Icon={ICError}
+                            iconClass="icon-dim-20"
+                        />
+                    )}
+
                     {showSaveView && (
                         <div className="bcn-1 flexbox dc__content-space w-100 h-32 dc__align-items-center">
                             <div
@@ -182,16 +175,6 @@ export default function ScopedVariablesEditor({
                         validatorSchema={jsonSchema}
                     />
 
-                    {footerError && (
-                        <InfoColourBar
-                            message={footerError}
-                            classname="w-100 bcr-1 mb-16 m-0"
-                            Icon={ICError}
-                            iconClass="icon-dim-20"
-                            renderActionButton={renderInfoBarCloseButton}
-                        />
-                    )}
-
                     <div className="flexbox pt-13 pb-13 pl-12 pr-12 bcn-0 dc__border-top dc__content-end dc__align-items-center dc__align-self-stretch dc__gap-12">
                         <button
                             type="button"

src/components/scopedVariables/UploadScopedVariables.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useFileReader, HiddenInput } from '../common'
+import { useFileReader, HiddenInput, importComponentFromFELibrary } from '../common'
 import ScopedVariablesEditor from './ScopedVariablesEditor'
 import ScopedVariablesLoader from './ScopedVariablesLoader'
 import { validator, downloadData } from './utils'
@@ -24,13 +24,19 @@ export default function UploadScopedVariables({
 }: UploadScopedVariablesProps) {
     const { fileData, progress, status, readFile, abortRead } = useFileReader()
 
+    const SCOPED_VARIABLES_TEMPLATE = importComponentFromFELibrary(
+        'SCOPED_VARIABLES_TEMPLATE_DATA',
+        SCOPED_VARIABLES_TEMPLATE_DATA,
+        'function',
+    )
+
     const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault()
         readFile(e.target.files![0], validator, ReadFileAs.TEXT)
     }
 
     const handleDownloadTemplate = () => {
-        downloadData(SCOPED_VARIABLES_TEMPLATE_DATA, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS)
+        downloadData(SCOPED_VARIABLES_TEMPLATE, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS)
     }
 
     return status?.status === FileReaderStatus.SUCCESS ? (

src/components/scopedVariables/__tests__/UploadScopedVariables.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react'
 import UploadScopedVariables from '../UploadScopedVariables'
 import { downloadData } from '../utils'
 import { SCOPED_VARIABLES_TEMPLATE_DATA, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS } from '../constants'
+import { importComponentFromFELibrary } from '../../common'
 
 jest.mock('../utils', () => ({
     validator: jest.fn(),
@@ -12,6 +13,11 @@ jest.mock('../utils', () => ({
 describe('UploadScopedVariables', () => {
     describe('UploadScopedVariables', () => {
         it('should download template when download template button is clicked', () => {
+            const downloadTemplateData = importComponentFromFELibrary(
+                'SCOPED_VARIABLES_TEMPLATE_DATA',
+                SCOPED_VARIABLES_TEMPLATE_DATA,
+                'function',
+            )
             const { container } = render(
                 <UploadScopedVariables
                     reloadScopedVariables={() => {}}
@@ -20,11 +26,7 @@ describe('UploadScopedVariables', () => {
                 />,
             )
             fireEvent.click(container.querySelector('button')!)
-            expect(downloadData).toHaveBeenCalledWith(
-                SCOPED_VARIABLES_TEMPLATE_DATA,
-                DOWNLOAD_TEMPLATE_NAME,
-                DOWNLOAD_FILES_AS,
-            )
+            expect(downloadData).toHaveBeenCalledWith(downloadTemplateData, DOWNLOAD_TEMPLATE_NAME, DOWNLOAD_FILES_AS)
         })
 
         it('should read file when file is uploaded', () => {

src/components/scopedVariables/constants.tsx

@@ -10,7 +10,7 @@ export const DOWNLOAD_FILE_NAME = 'variables.yaml'
 export const DOWNLOAD_TEMPLATE_NAME = 'variables-template.yaml'
 export const DOWNLOAD_FILES_AS = 'application/x-yaml'
 export const DROPDOWN_ITEMS = ['Download saved file', 'Download template']
-export const TABLE_LIST_HEADINGS = ['VARIABLE NAMES', 'DESCRIPTION', 'VALUE IS']
+export const TABLE_LIST_HEADINGS = ['VARIABLE NAME', 'DESCRIPTION', 'VALUE IS']
 
 // File Reader error messages
 export const PARSE_ERROR_STATUS = {
@@ -55,67 +55,19 @@ export const UPLOAD_FAILED_STANDARD_MESSAGE = 'Invalid file content'
 export const SCOPED_VARIABLES_TEMPLATE_DATA = `apiVersion: devtron.ai/v1beta1
 kind: Variable
 spec:
-  - description: Sample Variable 1
-    name: variableNew1
-    values:
-      - category: ApplicationEnv
-        value: test-app-env
-        selectors:
-          attributeSelectors:
-            ApplicationName: dev-test
-            EnvName: dev
-      - category: Env
-        value: 'null'
-        selectors:
-          attributeSelectors:
-            EnvName: dev
-      - category: Env
-        value: 'null'
-        selectors:
-          attributeSelectors:
-            EnvName: virtual-env-1
-      - category: Cluster
-        value: test-cluster
-        selectors:
-          attributeSelectors:
-            ClusterName: default_cluster
-      - category: Global
-        value: test-global
-        selectors: null
-  - description: 'Sample Variable 2'
-    name: variableNew2
-    values:
-      - category: ApplicationEnv
-        value: test-app-env
-        selectors:
-          attributeSelectors:
-            ApplicationName: dev-test
-            EnvName: dev
-      - category: ApplicationEnv
-        value: test-app-env
-        selectors:
-          attributeSelectors:
-            ApplicationName: dev-test
-            EnvName: virtual-env-1
-      - category: Application
-        value: test-app
-        selectors:
-          attributeSelectors:
-            ApplicationName: dev-test
-      - category: Env
-        value: test-env
-        selectors:
-          attributeSelectors:
-            EnvName: dev
-      - category: Cluster
-        value: test-cluster
-        selectors:
-          attributeSelectors:
-            ClusterName: default_cluster
-      - category: Global
-        value: test-global
-        selectors: null
-`
+  # Name of the variable, must be unique
+- name: KAFKA 
+  #Provide a short description for this variable in max 120 characters. This description will be shown in UI while using the variable.
+  shortDescription: Enter a short description here
+  # Mention notes that tell more about this variable. This will not be shown in UI while using the variable. No char limit.
+  notes: Enter any notes for additional details 
+  # Optional property. Accepts Boolean Value, default value false. Values for sensitive variables are not shown in UI while using the variable
+  isSensitive: false 
+  # List of values for this variable
+  values: 
+      #Global category can be used to define variables which are common across all applications
+    - category: Global 
+      value: Global`
 
 // TOAST Messages while saving file
 export const SAVE_SUCCESS_TOAST_MESSAGE = 'File saved successfully'
@@ -129,5 +81,5 @@ export const NO_VARIABLES_MESSAGE = {
 }
 
 export const NO_DESCRIPTION_MESSAGE = 'No description'
-export const SENSITIVE_VARIABLE_DESCRIPTION = 'Value is sensitive & hidden while using this variable'
-export const IN_SENSITIVE_VARIABLE_DESCRIPTION = 'Value is not sensitive & visible while using this variable'
+export const SENSITIVE_VARIABLE_DESCRIPTION = 'Value is sensitive & will be hidden while using this variable'
+export const IN_SENSITIVE_VARIABLE_DESCRIPTION = 'Value is not sensitive & will be visible while using this variable'

src/components/scopedVariables/mocks.ts

@@ -27,16 +27,14 @@ export const validScopedVariablesData = {
                 },
             ],
         },
-        jsonSchema:
-            '{\n  "$schema": "https://json-schema.org/draft/2020-12/schema",\n  "$id": "https://github.com/devtron-labs/devtron/pkg/variables/models/scoped-variable-manifest",\n  "$ref": "#/$defs/ScopedVariableManifest",\n  "$defs": {\n    "ScopedVariableManifest": {\n      "properties": {\n        "apiVersion": {\n          "type": "string"\n        },\n        "kind": {\n          "type": "string"\n        },\n        "spec": {\n          "items": {\n            "$ref": "#/$defs/VariableSpec"\n          },\n          "type": "array"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "apiVersion",\n        "kind",\n        "spec"\n      ]\n    },\n    "Selector": {\n      "properties": {\n        "attributeSelectors": {\n          "patternProperties": {\n            ".*": {\n              "type": "string"\n            }\n          },\n          "type": "object"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "attributeSelectors"\n      ]\n    },\n    "VariableSpec": {\n      "properties": {\n        "notes": {\n          "type": "string"\n        },\n        "shortDescription": {\n          "type": "string"\n        },\n        "isSensitive": {\n          "type": "boolean"\n        },\n        "name": {\n          "type": "string"\n        },\n        "values": {\n          "items": {\n            "$ref": "#/$defs/VariableValueSpec"\n          },\n          "type": "array"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "notes",\n        "shortDescription",\n        "isSensitive",\n        "name",\n        "values"\n      ]\n    },\n    "VariableValueSpec": {\n      "properties": {\n        "category": {\n          "type": "string"\n        },\n        "value": true,\n        "selectors": {\n          "$ref": "#/$defs/Selector"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "category",\n        "value"\n      ]\n    }\n  }\n}',
+        jsonSchema: `{}`
     },
 }
 
 export const noScopedVariablesData = {
     result: {
         manifest: null,
-        jsonSchema:
-            '{\n  "$schema": "https://json-schema.org/draft/2020-12/schema",\n  "$id": "https://github.com/devtron-labs/devtron/pkg/variables/repository/payload",\n  "$ref": "#/$defs/Payload",\n  "$defs": {\n    "AttributeValue": {\n      "properties": {\n        "variableValue": {\n          "$ref": "#/$defs/VariableValue"\n        },\n        "attributeType": {\n          "type": "string"\n        },\n        "attributeParams": {\n          "patternProperties": {\n            ".*": {\n              "type": "string"\n            }\n          },\n          "type": "object"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "variableValue",\n        "attributeType",\n        "attributeParams"\n      ]\n    },\n    "Definition": {\n      "properties": {\n        "varName": {\n          "type": "string"\n        },\n        "dataType": {\n          "type": "string"\n        },\n        "varType": {\n          "type": "string"\n        },\n        "description": {\n          "type": "string"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "varName",\n        "dataType",\n        "varType",\n        "description"\n      ]\n    },\n    "Payload": {\n      "properties": {\n        "variables": {\n          "items": {\n            "$ref": "#/$defs/Variables"\n          },\n          "type": "array"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "variables"\n      ]\n    },\n    "VariableValue": {\n      "properties": {\n        "value": {\n          "type": "string"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "value"\n      ]\n    },\n    "Variables": {\n      "properties": {\n        "definition": {\n          "$ref": "#/$defs/Definition"\n        },\n        "attributeValue": {\n          "items": {\n            "$ref": "#/$defs/AttributeValue"\n          },\n          "type": "array"\n        }\n      },\n      "additionalProperties": false,\n      "type": "object",\n      "required": [\n        "definition",\n        "attributeValue"\n      ]\n    }\n  }\n}',
+        jsonSchema: '{}'
     },
     code: 200,
 }

src/css/base.scss

@@ -1967,7 +1967,11 @@ button.anchor {
 
 .dc__border-bottom-v2 {
     border-bottom: solid 1px var(--V200);
-} 
+}
+
+.dc__border-bottom-r2 {
+    border-bottom: 1px solid var(--R200);
+}
 
 .dc__border-bottom-imp {
     border-bottom: solid 1px var(--N200) !important;