console: Fix access point list useEffect dependencies

cypress/e2e/console/gateways/managed/wifi-profiles.spec.js

@@ -178,6 +178,7 @@ describe('Managed Gateway WiFi profiles', () => {
       cy.findByRole('button', { name: 'Save changes' }).click()
       cy.get('#password-field-error').should('be.visible')
       cy.findByText('Other...').click()
+      cy.findByRole('button', { name: 'Save changes' }).click()
       cy.get('#ssid-field-error').should('be.visible')
     })
 
@@ -313,9 +314,7 @@ describe('Managed Gateway WiFi profiles', () => {
         `/api/v3/gcs/gateways/profiles/wifi/users/${userId}/${profiles[0].profile_id}`,
         {
           statusCode: 200,
-          body: {
-            profile: profiles[0],
-          },
+          body: profiles[0],
         },
       )
 
@@ -329,8 +328,6 @@ describe('Managed Gateway WiFi profiles', () => {
 
       const expectedRequest = {
         profile_name: 'Updated WiFi profile',
-        profile_id: '',
-        shared: true,
         ssid: 'AccessPoint2',
         password: 'ABCDefg123!',
       }

pkg/webui/components/form/field/index.js

@@ -114,7 +114,10 @@ const FormField = props => {
   // Extract field state.
   const errors = compact(at(formErrors, names))
   const touched = at(formTouched, names).some(Boolean)
-  const encodedValue = isCompositeField ? pick(values, names) : get(values, name)
+  const encodedValue = useMemo(
+    () => (isCompositeField ? pick(values, names) : get(values, name)),
+    [isCompositeField, name, names, values],
+  )
 
   // Register field(s) in formiks internal field registry.
   useEffect(() => {

pkg/webui/console/containers/access-point-list/index.js

@@ -112,7 +112,8 @@ const AccessPointList = ({ onChange, value, className, inputWidth, onBlur, ssid
   const accessPoints = useSelector(selectAccessPoints)
   const selectedGateway = useSelector(selectSelectedGateway)
   const { ids } = selectedGateway
-  const isFirstRender = useRef(true)
+  const isInitialLoading = useRef(true)
+  const didUpdateValue = useRef(false)
 
   const [isMounted, setIsMounted] = useState(true)
 
@@ -127,7 +128,15 @@ const AccessPointList = ({ onChange, value, className, inputWidth, onBlur, ssid
   // Trigger this useEffect only the first time component is rendered and has accessPoints loaded.
   // Change value only if ssid is provided. (if it's edit form)
   useEffect(() => {
-    if (!isFirstRender.current && ssid && !isLoading) {
+    // Skip the first effect when isLoading is false
+    if (isInitialLoading.current) {
+      if (isLoading) {
+        isInitialLoading.current = false
+      }
+      return
+    }
+
+    if (!isLoading && !didUpdateValue.current && Boolean(ssid)) {
       const accessPoint = accessPoints.find(ap => ap.ssid === ssid)
       const updatedAccessPoint = {
         ...accessPoint,
@@ -136,9 +145,8 @@ const AccessPointList = ({ onChange, value, className, inputWidth, onBlur, ssid
       }
       onChange(updatedAccessPoint, true)
     }
-    isFirstRender.current = false
-    /* eslint-disable */
-  }, [accessPoints, isLoading])
+    didUpdateValue.current = true
+  }, [accessPoints, isLoading, onChange, ssid])
 
   useEffect(() => {
     handleScanAccessPoints()

pkg/webui/console/containers/gateway-managed-gateway/shared/wifi-profiles-form-fields.js

@@ -54,6 +54,7 @@ const GatewayWifiProfilesFormFields = ({ namePrefix }) => {
     accessPoint => {
       if (Boolean(accessPoint.ssid) || !accessPoint.is_password_set) {
         setFieldValue(`${namePrefix}ssid`, accessPoint?.ssid)
+        setFieldTouched(`${namePrefix}ssid`, false)
         setFieldTouched(`${namePrefix}password`, false)
         setFieldValue(`${namePrefix}password`, '')
       }