feat: add EditImageFormField component

Author: AbhishekA1509

src/Shared/Components/EditImageFormField/EditImageFormField.scss

@@ -0,0 +1,20 @@
+.edit-image-form-field {
+    &__figure-container {
+        grid-template-columns: repeat(12, 1fr);
+        grid-template-rows: repeat(12, 1fr);
+
+        .base-image {
+            grid-column: 1 / span 12;
+            grid-row: 1 / span 12;
+        }
+
+        .edit-image-icon {
+            grid-column: 8 / span 4;
+            grid-row: 8 / span 4;
+        }
+    }
+
+    &__fallback-image {
+        background: rgba(57, 137, 217, 0.20);
+    }
+}

src/Shared/Components/EditImageFormField/EditImageFormField.tsx

@@ -0,0 +1,178 @@
+import { SyntheticEvent, useState } from 'react'
+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 } from './constants'
+import './EditImageFormField.scss'
+
+// NOTE: If want to make image dimensions configurable please change its dimensions as well for icon-dim-48.
+const FallbackImage = ({ showEditIcon, defaultIcon }: FallbackImageProps) => (
+    <div
+        className={`flex dc__align-self-start dc__no-shrink br-4 edit-image-form-field__fallback-image icon-dim-48 ${showEditIcon ? 'base-image' : ''}`}
+    >
+        {defaultIcon}
+    </div>
+)
+
+// NOTE: Have to replace component in UpsertTenantModal with EditImageFormField when prioritized.
+const EditImageFormField = ({
+    defaultIcon,
+    errorMessage,
+    handleError,
+    url,
+    handleURLChange,
+    ariaLabelPrefix,
+    dataTestIdPrefix,
+    altText,
+}: EditImageFormFieldProps) => {
+    const [lastPreviewedURL, setLastPreviewedURL] = useState<string>(url)
+    const [isEditing, setIsEditing] = useState<boolean>(false)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+
+    const handleEnableEditing = () => {
+        setIsEditing(true)
+    }
+
+    const handleLastPreviewedURLChange = (newURL: string) => {
+        setLastPreviewedURL(newURL)
+    }
+
+    const handleReset = (newURL?: string) => {
+        handleLastPreviewedURLChange(newURL ?? lastPreviewedURL)
+        handleError('')
+        setIsEditing(false)
+        setIsLoading(false)
+    }
+
+    const handleSuccess = () => {
+        handleReset(url)
+    }
+
+    const handleCancel = () => {
+        handleReset()
+    }
+
+    const handleChange = (event: SyntheticEvent) => {
+        const { value } = event.target as HTMLInputElement
+        handleURLChange(value)
+        handleError(validateURL(value, false).message)
+    }
+
+    const handlePreviewImage = async () => {
+        setIsLoading(true)
+        try {
+            const response = await fetch(url, { mode: 'cors' })
+            if (!response.ok) {
+                throw new Error('Invalid network response')
+            }
+
+            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}`)
+            }
+
+            const src = URL.createObjectURL(blob)
+            const imageValidation = await validateIfImageExist(src)
+            URL.revokeObjectURL(src)
+
+            if (!imageValidation.isValid) {
+                throw new Error(imageValidation.message)
+            }
+
+            handleSuccess()
+        } catch (error) {
+            handleError(error.message || 'Failed to load image')
+            showError(error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            await handlePreviewImage()
+        }
+    }
+
+    const renderImage = (showEditIcon: boolean, rootClassName?: string) => (
+        <ImageWithFallback
+            imageProps={{
+                alt: altText,
+                src: lastPreviewedURL,
+                height: DEFAULT_IMAGE_DIMENSIONS.height,
+                width: DEFAULT_IMAGE_DIMENSIONS.width,
+                className: `br-4 dc__no-shrink ${rootClassName || ''}`,
+            }}
+            fallbackImage={<FallbackImage defaultIcon={defaultIcon} showEditIcon={showEditIcon} />}
+        />
+    )
+
+    if (!isEditing) {
+        return (
+            <button
+                className="dc__no-background dc__no-border dc__outline-none-imp display-grid edit-image-form-field__figure-container p-0 icon-dim-72 dc__no-shrink"
+                type="button"
+                data-testid={`${dataTestIdPrefix}-button`}
+                aria-label={`${ariaLabelPrefix} image`}
+                onClick={handleEnableEditing}
+            >
+                {renderImage(true, 'base-image')}
+
+                <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">
+                    <ICPencil className="dc__no-shrink icon-dim-16" />
+                </div>
+            </button>
+        )
+    }
+
+    return (
+        <div className="flexbox dc__gap-20">
+            {renderImage(false)}
+
+            <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`}
+                        label="Image URL"
+                        labelClassName="m-0 dc__required-field fs-13 fw-4 lh-20 cn-7"
+                        placeholder="Enter image url"
+                        value={url}
+                        onChange={handleChange}
+                        error={errorMessage}
+                        inputWrapClassName="w-100"
+                        dataTestid={`${dataTestIdPrefix}-input`}
+                        onKeyDown={handleKeyDown}
+                    />
+                </div>
+
+                <div className="flexbox dc__gap-8">
+                    <ButtonWithLoader
+                        isLoading={isLoading}
+                        rootClassName="cta h-28 flex"
+                        type="button"
+                        disabled={isLoading}
+                        data-testid={`${dataTestIdPrefix}-preview`}
+                        onClick={handlePreviewImage}
+                    >
+                        Preview
+                    </ButtonWithLoader>
+
+                    <button
+                        className="cta secondary h-28 flex"
+                        data-testid={`${dataTestIdPrefix}-cancel`}
+                        type="button"
+                        disabled={isLoading}
+                        onClick={handleCancel}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default EditImageFormField

src/Shared/Components/EditImageFormField/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_MAX_IMAGE_SIZE = 2 * 1024 * 1024
+export const DEFAULT_IMAGE_DIMENSIONS = {
+    width: 72,
+    height: 72,
+} as const

src/Shared/Components/EditImageFormField/index.ts

@@ -0,0 +1 @@
+export { default as EditImageFormField } from './EditImageFormField'

src/Shared/Components/EditImageFormField/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+
+export interface EditImageFormFieldProps {
+    defaultIcon: ReactNode
+    errorMessage: string
+    handleError: (error: string) => void
+    url: string
+    handleURLChange: (url: string) => void
+    altText: string
+    ariaLabelPrefix: string
+    dataTestIdPrefix: string
+}
+
+export interface FallbackImageProps extends Pick<EditImageFormFieldProps, 'defaultIcon'> {
+    /**
+     * @default - false
+     */
+    showEditIcon?: boolean
+}

src/Shared/Components/index.ts

@@ -49,3 +49,4 @@ export * from './IframeContainer'
 export * from './Plugin'
 export * from './KeyValueTable'
 export * from './SelectPicker'
+export * from './EditImageFormField'