fix: remove empty url preview for edit image form field

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -1,4 +1,5 @@
 import { 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'
@@ -62,17 +63,20 @@ const EditImageFormField = ({
     const handleChange = (event: SyntheticEvent) => {
         const { value } = event.target as HTMLInputElement
         handleURLChange(value)
-        handleError(validateURL(value, false).message)
+        if (value.trim()) {
+            handleError(validateURL(value, false).message)
+        }
     }
 
     const handlePreviewImage = async () => {
         if (!url) {
-            handleSuccess()
+            // Not setting the error since can save without image
+            toast.error('Please enter a valid image URL')
             return
         }
 
         if (errorMessage) {
-            showError(errorMessage)
+            toast.error(errorMessage)
             return
         }
 
@@ -151,7 +155,7 @@ const EditImageFormField = ({
                     <CustomInput
                         name={`${ariaLabelPrefix} url input`}
                         label="Image URL"
-                        labelClassName="m-0 dc__required-field fs-13 fw-4 lh-20 cn-7"
+                        labelClassName="m-0 fs-13 fw-4 lh-20 cn-7"
                         placeholder="Enter image url"
                         value={url}
                         onChange={handleChange}

src/Shared/Components/EditImageFormField/EditImageFormField.tsx

@@ -96,5 +96,33 @@ export const getAvailablePluginTags = async (appId: number): Promise<string[]> =
     }
 }
 
-export const getParentPluginList = async (appId?: number): Promise<ResponseType<MinParentPluginDTO[]>> =>
-    get<MinParentPluginDTO[]>(getUrlWithSearchParams(ROUTES.PLUGIN_LIST_MIN, { appId }))
+// TODO: Remove this mock data and implement the actual API call
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getParentPluginList = async (appId?: number): Promise<ResponseType<MinParentPluginDTO[]>> => {
+    // get<MinParentPluginDTO[]>(getUrlWithSearchParams(ROUTES.PLUGIN_LIST_MIN, { appId }))
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const mockData: MinParentPluginDTO[] = [
+        {
+            id: 1,
+            pluginName: 'Mock Plugin 1',
+            icon: 'https://via.placeholder.com/150',
+        },
+        {
+            id: 2,
+            pluginName: 'Mock Plugin 2',
+            icon: 'https://via.placeholder.com/150',
+        },
+        {
+            id: 3,
+            pluginName: 'Mock Plugin 3',
+            icon: 'https://via.placeholder.com/150',
+        },
+        {
+            id: 4,
+            pluginName: 'Mock Plugin 4',
+            icon: 'https://via.placeholder.com/150',
+        },
+    ]
+    return Promise.resolve({ result: mockData, status: 'OK', code: 200 })
+}