fix: review comments

Author: AbhishekA1509

src/Common/Api.ts

@@ -114,10 +114,10 @@ async function handleServerError(contentType, response) {
     throw serverError
 }
 
-async function fetchAPI(
+async function fetchAPI<K = object>(
     url: string,
     type: string,
-    data: object,
+    data: K,
     signal: AbortSignal,
     preventAutoLogout = false,
     isMultipartRequest?: boolean,
@@ -185,10 +185,10 @@ async function fetchAPI(
     )
 }
 
-function fetchInTime(
+function fetchInTime<T = object>(
     url: string,
     type: string,
-    data: object,
+    data: T,
     options?: APIOptions,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
@@ -227,23 +227,24 @@ function fetchInTime(
     })
 }
 
-export const post = <T = any>(
+export const post = <T = any, K = object>(
     url: string,
-    data: object,
+    data: K,
     options?: APIOptions,
     isMultipartRequest?: boolean,
-): Promise<ResponseType<T>> => fetchInTime(url, 'POST', data, options, isMultipartRequest)
+): Promise<ResponseType<T>> => fetchInTime<K>(url, 'POST', data, options, isMultipartRequest)
 
-export const put = <T = any>(url: string, data: object, options?: APIOptions): Promise<ResponseType<T>> =>
-    fetchInTime(url, 'PUT', data, options)
+export const put = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PUT', data, options)
 
-export const patch = <T = any>(url: string, data: object, options?: APIOptions): Promise<ResponseType<T>> =>
-    fetchInTime(url, 'PATCH', data, options)
+export const patch = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PATCH', data, options)
 
-export const get = <T = any>(url: string, options?: APIOptions): Promise<ResponseType<T>> => fetchInTime(url, 'GET', null, options)
+export const get = <T = any>(url: string, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime(url, 'GET', null, options)
 
-export const trash = <T = any>(url: string, data?: object, options?: APIOptions): Promise<ResponseType<T>> =>
-    fetchInTime(url, 'DELETE', data, options)
+export const trash = <T = any, K = object>(url: string, data?: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'DELETE', data, options)
 
 /**
  * Aborts the previous request before triggering next request
@@ -263,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')

src/Common/Toggle/Toggle.scss

@@ -93,7 +93,7 @@ input:focus + .toggle__slider {
     box-shadow: 0 0 1px var(--color);
 }
 
-.square-toggle {
+.dc__toggle-square-toggle {
     .toggle__slider {
         border-color: var(--color);
         background-color: var(--color) !important;

src/Shared/Components/EditImageFormField/EditImageFormField.scss

@@ -3,12 +3,12 @@
         grid-template-columns: repeat(12, 1fr);
         grid-template-rows: repeat(12, 1fr);
 
-        .base-image {
+        & &--base-image {
             grid-column: 1 / span 12;
             grid-row: 1 / span 12;
         }
 
-        .edit-image-icon {
+        & &--edit-image-icon {
             grid-column: 8 / span 4;
             grid-row: 8 / span 4;
         }

src/Shared/Components/EditImageFormField/EditImageFormField.tsx

@@ -1,17 +1,22 @@
-import { SyntheticEvent, useState } from 'react'
+import { KeyboardEvent, SyntheticEvent, useState } from 'react'
 import { toast } from 'react-toastify'
 import { showError } from '@Common/Helper'
 import { CustomInput } from '@Common/CustomInput'
 import { ButtonWithLoader, ImageWithFallback } from '@Shared/Components'
 import { validateIfImageExist, validateURL } from '@Shared/validations'
 import { ReactComponent as ICPencil } from '@Icons/ic-pencil.svg'
 import { EditImageFormFieldProps, FallbackImageProps } from './types'
-import { DEFAULT_IMAGE_DIMENSIONS, DEFAULT_MAX_IMAGE_SIZE, EMPTY_PREVIEW_URL_ERROR_MESSAGE } from './constants'
+import {
+    BASE_IMAGE_CLASS,
+    DEFAULT_IMAGE_DIMENSIONS,
+    DEFAULT_MAX_IMAGE_SIZE,
+    EMPTY_PREVIEW_URL_ERROR_MESSAGE,
+} from './constants'
 import './EditImageFormField.scss'
 
 const FallbackImage = ({ showEditIcon, defaultIcon }: FallbackImageProps) => (
     <div
-        className={`flex dc__align-self-start dc__no-shrink br-4 edit-image-form-field__fallback-image p-12 ${showEditIcon ? 'base-image' : ''}`}
+        className={`flex dc__align-self-start dc__no-shrink br-4 edit-image-form-field__fallback-image p-12 ${showEditIcon ? BASE_IMAGE_CLASS : ''}`}
         // Adding inline style to make sure it is configurable through constants
         style={{
             height: DEFAULT_IMAGE_DIMENSIONS.height,
@@ -62,7 +67,7 @@ const EditImageFormField = ({
         setLastPreviewedURL(newURL)
     }
 
-    const handleReset = (newURL?: string) => {
+    const handleResetToInitialState = (newURL?: string) => {
         const targetURL = newURL ?? lastPreviewedURL
         handleLastPreviewedURLChange(targetURL)
         handleURLChange(targetURL)
@@ -73,11 +78,11 @@ const EditImageFormField = ({
     }
 
     const handleSuccess = () => {
-        handleReset(url)
+        handleResetToInitialState(url)
     }
 
     const handleCancel = () => {
-        handleReset()
+        handleResetToInitialState()
     }
 
     const handleChange = (event: SyntheticEvent) => {
@@ -88,6 +93,7 @@ const EditImageFormField = ({
             return
         }
         setEmptyPreviewURLErrorMessage('')
+        // TODO: Can also restrict to http/s protocol
         handleError(validateURL(value, false).message)
     }
 
@@ -133,8 +139,9 @@ const EditImageFormField = ({
         }
     }
 
-    const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = async (event: KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
+            event.preventDefault()
             await handlePreviewImage()
         }
     }
@@ -161,9 +168,9 @@ const EditImageFormField = ({
                 aria-label={`${ariaLabelPrefix} image`}
                 onClick={handleEnableEditing}
             >
-                {renderImage(true, 'base-image')}
+                {renderImage(true, BASE_IMAGE_CLASS)}
 
-                <div className="flex p-4 br-4 bcn-0 dc__border edit-image-icon dc__zi-1 bcn-0 dc__hover-n50 icon-dim-24">
+                <div className="flex p-4 br-4 bcn-0 dc__border edit-image-form-field__figure-container--edit-image-icon dc__zi-1 bcn-0 dc__hover-n50 icon-dim-24">
                     <ICPencil className="dc__no-shrink icon-dim-16" />
                 </div>
             </button>
@@ -177,7 +184,7 @@ const EditImageFormField = ({
             <div className="flexbox-col dc__gap-16 flex-grow-1">
                 <div className="flexbox-col dc__gap-6 w-100 dc__align-start">
                     <CustomInput
-                        name={`${ariaLabelPrefix} url input`}
+                        name={`${ariaLabelPrefix}-url-input`}
                         label="Image URL"
                         labelClassName="m-0 fs-13 fw-4 lh-20 cn-7"
                         placeholder="Enter image url"

src/Shared/Components/EditImageFormField/constants.ts

@@ -4,3 +4,4 @@ export const DEFAULT_IMAGE_DIMENSIONS = {
     height: 72,
 } as const
 export const EMPTY_PREVIEW_URL_ERROR_MESSAGE = 'Please provide image URL to preview'
+export const BASE_IMAGE_CLASS = 'edit-image-form-field__figure-container--base-image'

src/Shared/Components/EditImageFormField/types.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react'
+import { ReactElement } from 'react'
 
 export interface EditImageFormFieldProps {
     /**
      * Fallback icon to be shown when image is not available
      */
-    defaultIcon: ReactNode
+    defaultIcon: ReactElement
     /**
      * Would be shown below input, there are two types of error messages:
      * External - Error message handled from state above and would propagate to parent through handleError

src/Shared/Components/SelectPicker/type.ts

@@ -94,8 +94,9 @@ export interface SelectPickerProps
      * @default 'ComponentSizeType.small'
      */
     menuSize?: ComponentSizeType
+    // TODO: Can make generic typing when adding multi select
     /**
-     * If true, would show generic section error state as no options message
+     * If truthy, would show generic section error state as no options message
      */
     optionListError?: ServerErrors
     /**

src/Shared/validations.tsx

@@ -254,6 +254,11 @@ export const validateUniqueKeys = (keys: string[]) => {
     }
 }
 
+/**
+ * Rules for valid semantic version:
+ * 1. version.length < 128 and not empty
+ * 2. version should follow semantic versioning regex from https://semver.org/
+ */
 export const validateSemanticVersioning = (version: string): ValidationResponseType => {
     if (!version) {
         return {
@@ -285,5 +290,8 @@ export const validateSemanticVersioning = (version: string): ValidationResponseT
     }
 }
 
+/**
+ * A valid display name should be between 3 and 50 characters
+ */
 export const validateDisplayName = (name: string): ValidationResponseType =>
     validateStringLength(name, DISPLAY_NAME_CONSTRAINTS.MAX_LIMIT, DISPLAY_NAME_CONSTRAINTS.MIN_LIMIT)