feat: add semantic version validator and fix multi select styles

Author: AbhishekA1509

src/Common/Constants.ts

@@ -517,3 +517,5 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
     DD_MMM_YYYY: 'DD MMM YYYY',
 }
+
+export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'

src/Common/CustomInput/CustomInput.tsx

@@ -135,9 +135,9 @@ export const CustomInput = ({
 
             {getInputError()}
             {helperText && (
-                 <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7">
-                 <Info className="icon-dim-16" />
-                 <div>{helperText}</div>
+                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 pt-4">
+                    <Info className="icon-dim-16" />
+                    <div>{helperText}</div>
                 </div>
             )}
         </div>

src/Common/CustomInput/Types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -33,7 +33,7 @@ export interface CustomInputProps {
     autoFocus?: boolean
     rootClassName?: string
     error?: string[] | string
-    helperText?: string
+    helperText?: ReactNode
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean

src/Common/MultiSelectCustomization.tsx

@@ -17,6 +17,7 @@
 import React from 'react'
 import Select, { components } from 'react-select'
 import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
+import { ReactComponent as ICErrorCross } from '@Icons/ic-error-cross.svg'
 import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
 import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
 import { Checkbox } from './Checkbox'
@@ -62,8 +63,8 @@ export const SingleSelectOption = (props) => {
 }
 
 /**
- *  Multi value container 
-*/
+ *  Multi value container
+ */
 
 export const MultiValueContainer = (props) => {
     const { children, data, innerProps, selectProps } = props
@@ -76,7 +77,7 @@ export const MultiValueContainer = (props) => {
     )
 }
 /**
- * 
+ *
  * Multi value container with count
  */
 export const MultiValueContainerWithCount = (props: any) => {
@@ -119,10 +120,11 @@ export const MultiValueRemove = (props) => {
     } = props
     return (
         <components.MultiValueRemove {...props}>
-            <ClearIcon
+            <ICErrorCross
                 {...{ onClick, onMouseDown }}
                 onClick={(e) => onClick(data)}
-                style={{ height: '18px', width: '18px' }}
+                className="icon-n5"
+                style={{ height: '14px', width: '14px' }}
             />
         </components.MultiValueRemove>
     )
@@ -138,7 +140,7 @@ export const MultiValueChipContainer = ({ validator, isAllSelected = false, ...p
     return (
         <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
             <div className="flex left fs-12 pl-4 pr-4 dc__ellipsis-right">
-                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
+                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16 dc__no-shrink" />}
                 <div className={`dc__ellipsis-right ${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
             </div>
             {children[1]}

src/Shared/Components/EditImageFormField/EditImageFormField.tsx

@@ -85,7 +85,7 @@ const EditImageFormField = ({
 
             const blob = await response.blob()
             if (blob.size > DEFAULT_MAX_IMAGE_SIZE) {
-                throw new Error(`Please add an image smaller than ${DEFAULT_MAX_IMAGE_SIZE}`)
+                throw new Error(`Please add an image smaller than ${DEFAULT_MAX_IMAGE_SIZE} bytes`)
             }
 
             const src = URL.createObjectURL(blob)

src/Shared/Components/Plugin/types.ts

@@ -96,7 +96,7 @@ interface DetailedPluginVersionType
             DetailedPluginVersionDTO,
             'tags' | 'isLatest' | 'inputVariables' | 'outputVariables' | 'updatedBy' | 'docLink'
         >,
-        Pick<ParentPluginType, 'icon' | 'type'> {
+        Pick<ParentPluginType, 'icon' | 'type' | 'pluginIdentifier'> {
     parentPluginId: ParentPluginType['id']
 }
 

src/Shared/Components/Plugin/utils.tsx

@@ -70,6 +70,7 @@ export const parsePluginDetailsDTOIntoPluginStore = (pluginData: ParentPluginDTO
                 parentPluginId: plugin.id,
                 icon: plugin.icon || '',
                 type: plugin.type,
+                pluginIdentifier: plugin.pluginIdentifier || '',
             }
         })
     })

src/Shared/Components/SelectPicker/type.ts

@@ -40,6 +40,7 @@ export interface SelectPickerProps
             | 'isOptionDisabled'
             | 'placeholder'
             | 'autoFocus'
+            | 'onKeyDown'
         >,
         Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
     /**

src/Shared/validations.tsx

@@ -29,9 +29,14 @@ export const MESSAGES = {
     VALID_POSITIVE_NUMBER: 'This field should be a valid positive number',
     VALID_POSITIVE_INTEGER: 'This field should be a valid positive integer',
     MAX_SAFE_INTEGER: `Maximum allowed value is ${Number.MAX_SAFE_INTEGER}`,
+    INVALID_SEMANTIC_VERSION: 'Please follow semantic versioning',
 }
 
 const MAX_DESCRIPTION_LENGTH = 350
+const DISPLAY_NAME_CONSTRAINTS = {
+    MAX_LIMIT: 50,
+    MIN_LIMIT: 3,
+}
 
 export const requiredField = (value: string): ValidationResponseType => {
     if (!value) {
@@ -248,3 +253,30 @@ export const validateUniqueKeys = (keys: string[]) => {
         message: `Duplicate variable name: ${duplicateKeys.join(', ')}`,
     }
 }
+
+export const validateSematicVersioning = (version: string): ValidationResponseType => {
+    if (!/^.{0,128}$/.test(version)) {
+        return {
+            isValid: false,
+            message: MESSAGES.getMaxCharMessage(128),
+        }
+    }
+
+    if (
+        !/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/.test(
+            version,
+        )
+    ) {
+        return {
+            isValid: false,
+            message: MESSAGES.INVALID_SEMANTIC_VERSION,
+        }
+    }
+
+    return {
+        isValid: true,
+    }
+}
+
+export const validateDisplayName = (name: string): ValidationResponseType =>
+    validateStringLength(name, DISPLAY_NAME_CONSTRAINTS.MAX_LIMIT, DISPLAY_NAME_CONSTRAINTS.MIN_LIMIT)