feat: add yaml validator util

package.json

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

src/Common/Constants.ts

@@ -74,6 +74,7 @@ export const URLS = {
     DEPLOYMENT_HISTORY_CONFIGURATIONS: '/configuration',
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
+    GLOBAL_CONFIG_DEPLOYMENT_CHARTS_UPLOAD_CHART: '/global-config/deployment-charts/upload-chart',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
     RESOURCE_BROWSER: '/resource-browser',
     COMPARE_CLUSTERS: '/compare-clusters',

src/Common/TippyCustomized.tsx

@@ -21,6 +21,7 @@ import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
 import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg'
 import { ReactComponent as ICOpenInNew } from '../Assets/Icon/ic-open-in-new.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
+import 'tippy.js/animations/shift-toward.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
 import { not, stopPropagation } from './Helper'
 

src/Pages/GlobalConfigurations/DeploymentCharts/types.ts

@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-export type DeploymentChartListDTO = Array<{
+interface DeploymentChartInfo {
     id: number
     chartDescription?: string
     isUserUploaded: boolean
     name: string
     version: string
-}>
+    uploadedBy: string
+}
 
-interface DeploymentChartVersionsType {
-    id: number
-    version: string
+export type DeploymentChartListDTO = DeploymentChartInfo[]
+
+export interface DeploymentChartVersionsType
+    extends Pick<DeploymentChartInfo, 'id' | 'version' | 'uploadedBy' | 'isUserUploaded'> {
     description: string
 }
 
-export interface DeploymentChartType {
-    name: string
-    isUserUploaded: boolean
+export interface DeploymentChartType extends Pick<DeploymentChartInfo, 'name'> {
     versions: DeploymentChartVersionsType[]
 }
 

src/Pages/GlobalConfigurations/DeploymentCharts/utils.ts

@@ -15,30 +15,37 @@
  */
 
 import { versionComparatorBySortOrder } from '@Shared/Helpers'
-import { DeploymentChartListDTO, DeploymentChartType, DEVTRON_DEPLOYMENT_CHART_NAMES } from './types'
+import {
+    DeploymentChartListDTO,
+    DeploymentChartType,
+    DeploymentChartVersionsType,
+    DEVTRON_DEPLOYMENT_CHART_NAMES,
+} from './types'
 import fallbackGuiSchema from './basicViewSchema.json'
 
 export const convertDeploymentChartListToChartType = (data: DeploymentChartListDTO): DeploymentChartType[] => {
     if (!data) {
         return []
     }
-    const chartMap = data.reduce(
-        (acc, { id, version, chartDescription: description = '', name, isUserUploaded = true }) => {
+    const chartMap = data.reduce<Record<string, DeploymentChartType>>(
+        (acc, { id, version, chartDescription, name, isUserUploaded, uploadedBy }) => {
             if (!name || !id || !version) {
                 return acc
             }
+            const currVersionDetail: DeploymentChartVersionsType = {
+                id,
+                version,
+                description: chartDescription || '',
+                uploadedBy: isUserUploaded ? uploadedBy || '' : 'Devtron',
+                isUserUploaded,
+            }
             const detail = acc[name]
             if (detail) {
-                detail.versions.push({
-                    id,
-                    version,
-                    description,
-                })
+                detail.versions.push(currVersionDetail)
             } else {
                 acc[name] = {
                     name,
-                    isUserUploaded,
-                    versions: [{ id, version, description }],
+                    versions: [currVersionDetail],
                 }
             }
             return acc

src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx

@@ -47,6 +47,8 @@ const InfoIconTippy = ({
         documentationLink={documentationLink}
         documentationLinkText={documentationLinkText}
         additionalContent={additionalContent}
+        animation="shift-toward"
+        duration={400}
     >
         {children || (
             <button

src/Shared/types.ts

@@ -1012,3 +1012,8 @@ export interface BorderConfigType {
      */
     left?: boolean
 }
+
+export interface AppEnvIdType {
+    appId: number
+    envId: number
+}

src/Shared/validations.tsx

@@ -17,6 +17,7 @@
 import { getSanitizedIframe } from '@Common/Helper'
 import { customizeValidator } from '@rjsf/validator-ajv8'
 import { PATTERNS } from '@Common/Constants'
+import { parse } from 'yaml'
 import { URLProtocolType } from './types'
 import { SKIP_LABEL_KEY_VALIDATION_PREFIX } from './constants'
 
@@ -472,3 +473,23 @@ export const validateCMVolumeMountPath = (value: string): { isValid: boolean; me
     }
     return { isValid: true, message: '' }
 }
+
+export const validateYAML = (yamlString: string, isRequired?: boolean): ValidationResponseType => {
+    try {
+        if (!yamlString && isRequired) {
+            return {
+                isValid: false,
+                message: 'This field is required',
+            }
+        }
+        parse(yamlString)
+        return {
+            isValid: true,
+        }
+    } catch (err) {
+        return {
+            isValid: false,
+            message: err.message,
+        }
+    }
+}

src/index.ts

@@ -46,7 +46,6 @@ export interface customEnv {
     CENTRAL_API_ENDPOINT?: string
     HIDE_GITOPS_OR_HELM_OPTION?: boolean
     CONFIGURABLE_TIMEOUT?: string
-    HIDE_APPLICATION_GROUPS?: boolean
     K8S_CLIENT?: boolean
     CLUSTER_TERMINAL_CONNECTION_POLLING_INTERVAL?: number
     CLUSTER_TERMINAL_CONNECTION_RETRY_COUNT?: number