fix: unique key value input error message updates (#860)

Author: m8vago

web/crux-ui/src/components/projects/versions/deployments/instances/use-instance-state.ts

@@ -29,7 +29,7 @@ export type InstanceState = {
 }
 
 export type InstanceActions = {
-  resetSection: (section: ImageConfigProperty) => InstanceContainerConfigData
+  resetSection: (section: ImageConfigProperty) => void
   onPatch: (newConfig: Partial<ContainerConfigData>) => void
   onParseError: (error: Error) => void
 }

web/crux-ui/src/pages/[teamSlug]/deployments/[deploymentId]/instances/[instanceId].tsx

@@ -5,6 +5,7 @@ import { Layout } from '@app/components/layout'
 import useInstanceState from '@app/components/projects/versions/deployments/instances/use-instance-state'
 import useDeploymentState from '@app/components/projects/versions/deployments/use-deployment-state'
 import CommonConfigSection from '@app/components/projects/versions/images/config/common-config-section'
+import configToFilters from '@app/components/projects/versions/images/config/config-to-filters'
 import CraneConfigSection from '@app/components/projects/versions/images/config/crane-config-section'
 import DagentConfigSection from '@app/components/projects/versions/images/config/dagent-config-section'
 import EditImageJson from '@app/components/projects/versions/images/edit-image-json'
@@ -34,13 +35,12 @@ import {
 } from '@app/models'
 import { TeamRoutes } from '@app/routes'
 import { withContextAuthorization } from '@app/utils'
-import { jsonErrorOf, getMergedContainerConfigFieldErrors, ContainerConfigValidationErrors } from '@app/validations'
+import { ContainerConfigValidationErrors, getMergedContainerConfigFieldErrors, jsonErrorOf } from '@app/validations'
 import { getCruxFromContext } from '@server/crux-api'
 import { NextPageContext } from 'next'
 import useTranslation from 'next-translate/useTranslation'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import configToFilters from '@app/components/projects/versions/images/config/config-to-filters'
 
 interface InstanceDetailsPageProps {
   deployment: DeploymentRoot
@@ -103,28 +103,21 @@ const InstanceDetailsPage = (props: InstanceDetailsPageProps) => {
     setFilters(current => configToFilters(current, state.config))
   }, [state.config])
 
-  const onChange = (newConfig: Partial<InstanceContainerConfigData>) => {
-    const applied: InstanceContainerConfigData = {
-      ...state.config,
-      ...newConfig,
-    }
-
-    const merged = mergeConfigs(instance.image.config, applied)
-    const errors = getMergedContainerConfigFieldErrors(merged, t)
-    setFieldErrors(errors)
-    setJsonError(jsonErrorOf(errors))
-
-    actions.onPatch(instance.id, newConfig)
-  }
+  const setErrorsForConfig = useCallback(
+    (imageConfig, instanceConfig) => {
+      const merged = mergeConfigs(imageConfig, instanceConfig)
+      const errors = getMergedContainerConfigFieldErrors(merged, t)
+      setFieldErrors(errors)
+      setJsonError(jsonErrorOf(errors))
+    },
+    [t],
+  )
 
-  const onResetSection = (section: ImageConfigProperty) => {
-    const newConfig = actions.resetSection(section)
+  useEffect(() => {
+    setErrorsForConfig(instance.image.config, instance.config)
+  }, [instance.image.config, instance.config, setErrorsForConfig])
 
-    const merged = mergeConfigs(instance.image.config, newConfig)
-    const errors = getMergedContainerConfigFieldErrors(merged, t)
-    setFieldErrors(errors)
-    setJsonError(jsonErrorOf(errors))
-  }
+  const onChange = (newConfig: Partial<InstanceContainerConfigData>) => actions.onPatch(instance.id, newConfig)
 
   const pageLink: BreadcrumbLink = {
     name: t('common:container'),
@@ -206,7 +199,7 @@ const InstanceDetailsPage = (props: InstanceDetailsPageProps) => {
             config={state.config}
             resetableConfig={state.resetableConfig}
             onChange={onChange}
-            onResetSection={onResetSection}
+            onResetSection={actions.resetSection}
             editorOptions={editorState}
             fieldErrors={fieldErrors}
             configType="instance"
@@ -221,7 +214,7 @@ const InstanceDetailsPage = (props: InstanceDetailsPageProps) => {
             config={state.config}
             resetableConfig={state.resetableConfig}
             onChange={onChange}
-            onResetSection={onResetSection}
+            onResetSection={actions.resetSection}
             editorOptions={editorState}
             fieldErrors={fieldErrors}
             configType="instance"
@@ -234,7 +227,7 @@ const InstanceDetailsPage = (props: InstanceDetailsPageProps) => {
             config={state.config}
             resetableConfig={state.resetableConfig}
             onChange={onChange}
-            onResetSection={onResetSection}
+            onResetSection={actions.resetSection}
             editorOptions={editorState}
             fieldErrors={fieldErrors}
             configType="instance"

web/crux-ui/src/pages/[teamSlug]/projects/[projectId]/versions/[versionId]/images/[imageId].tsx

@@ -3,6 +3,7 @@ import useEditorState from '@app/components/editor/use-editor-state'
 import useItemEditorState from '@app/components/editor/use-item-editor-state'
 import { Layout } from '@app/components/layout'
 import CommonConfigSection from '@app/components/projects/versions/images/config/common-config-section'
+import configToFilters from '@app/components/projects/versions/images/config/config-to-filters'
 import CraneConfigSection from '@app/components/projects/versions/images/config/crane-config-section'
 import DagentConfigSection from '@app/components/projects/versions/images/config/dagent-config-section'
 import EditImageJson from '@app/components/projects/versions/images/edit-image-json'
@@ -47,8 +48,7 @@ import { getCruxFromContext } from '@server/crux-api'
 import { NextPageContext } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
-import configToFilters from '@app/components/projects/versions/images/config/config-to-filters'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 interface ImageDetailsPageProps {
   project: ProjectDetails
@@ -106,15 +106,21 @@ const ImageDetailsPage = (props: ImageDetailsPageProps) => {
     setFilters(current => configToFilters(current, config))
   }, [config])
 
+  const setErrorsForConfig = useCallback(
+    newConfig => {
+      const errors = getContainerConfigFieldErrors(newConfig, t)
+      setFieldErrors(errors)
+      setJsonError(jsonErrorOf(errors))
+    },
+    [t],
+  )
+
   const onChange = (newConfig: Partial<ContainerConfigData>) => {
     setSaveState('saving')
 
     const value = { ...config, ...newConfig }
     setConfig(value)
-
-    const errors = getContainerConfigFieldErrors(value, t)
-    setFieldErrors(errors)
-    setJsonError(jsonErrorOf(errors))
+    setErrorsForConfig(value)
 
     const newPatch = {
       ...patch.current,
@@ -137,10 +143,7 @@ const ImageDetailsPage = (props: ImageDetailsPageProps) => {
     newConfig[section] = section === 'user' ? -1 : null
 
     setConfig(newConfig)
-
-    const errors = getContainerConfigFieldErrors(newConfig, t)
-    setFieldErrors(errors)
-    setJsonError(jsonErrorOf(errors))
+    setErrorsForConfig(newConfig)
 
     versionSock.send(WS_TYPE_PATCH_IMAGE, {
       id: image.id,
@@ -153,10 +156,13 @@ const ImageDetailsPage = (props: ImageDetailsPageProps) => {
       return
     }
 
-    setConfig({
+    const newConfig = {
       ...config,
       ...message.config,
-    })
+    }
+
+    setConfig(newConfig)
+    setErrorsForConfig(newConfig)
   })
 
   const onDelete = async () => {