fix: ResourceForm is stuck in loading state on extensibility views (#3874)

* fix: loading schemas gets stuck and inf loop

* fix: missing dep

Author: OliwiaGowor

src/components/App/resourceSchemas/resourceSchemas.worker.js

@@ -113,7 +113,7 @@ self.onmessage = $event => {
       );
       if (schemaCustomFormatsResolved) {
         self.postMessage({
-          type: `schemaComputed:${$event.data[1]}`,
+          type: `schemaComputed:${$event.data[1]}${$event.data[2]}`,
           schema: schemaCustomFormatsResolved,
         });
         return;

src/components/Extensibility/ExtensibilityCreate.js

@@ -100,6 +100,7 @@ export function ExtensibilityCreateCore({
     loading: loadingOpenAPISchema,
   } = useGetSchema({
     resource: api,
+    additionalId: 'Create',
   });
 
   const formRules = useMemo(() => {

src/components/Extensibility/ExtensibilityDetails.js

@@ -38,6 +38,7 @@ export const ExtensibilityDetailsCore = ({
 
   const { schema } = useGetSchema({
     resource,
+    additionalId: 'Details',
   });
 
   const jsonata = useJsonata({});

src/hooks/useGetSchema.js

@@ -9,7 +9,12 @@ import {
 import { useRecoilValue } from 'recoil';
 import { schemaWorkerStatusState } from 'state/schemaWorkerStatusAtom';
 
-export const useGetSchema = ({ schemaId, skip, resource }) => {
+export const useGetSchema = ({
+  schemaId,
+  skip,
+  resource,
+  additionalId = '',
+}) => {
   if (!schemaId && resource) {
     const { group, version, kind } = resource;
     if (!group) schemaId = `${version}/${kind}`;
@@ -37,13 +42,17 @@ export const useGetSchema = ({ schemaId, skip, resource }) => {
       return;
     }
     if (!areSchemasComputed) return;
-    sendWorkerMessage('getSchema', schemaId);
 
-    addWorkerListener(`schemaComputed:${schemaId}`, ({ schema }) => {
-      setSchema(schema);
-      setError(null);
-      setLoading(false);
-    });
+    sendWorkerMessage('getSchema', schemaId, additionalId);
+
+    addWorkerListener(
+      `schemaComputed:${schemaId}${additionalId}`,
+      ({ schema }) => {
+        setSchema(schema);
+        setError(null);
+        setLoading(false);
+      },
+    );
     addWorkerListener('customError', err => {
       setError(err);
       setLoading(false);
@@ -52,7 +61,15 @@ export const useGetSchema = ({ schemaId, skip, resource }) => {
       setError(err);
       setLoading(false);
     });
-  }, [areSchemasComputed, schemaId, setSchema, schema, skip, isWorkerOkay]);
+  }, [
+    areSchemasComputed,
+    schemaId,
+    setSchema,
+    schema,
+    skip,
+    isWorkerOkay,
+    additionalId,
+  ]);
 
   return { schema, error, loading };
 };

src/shared/ResourceForm/components/ResourceForm.js

@@ -82,11 +82,8 @@ export function ResourceForm({
     } else if (layoutState?.showEdit?.resource) {
       setResource(JSON.parse(JSON.stringify(layoutState.showEdit.resource)));
     }
-  }, [
-    layoutState?.showCreate?.resource,
-    layoutState?.showEdit?.resource,
-    setResource,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layoutState?.showCreate?.resource, layoutState?.showEdit?.resource]);
 
   // readonly schema ID, set only once
   const resourceSchemaId = useMemo(

src/shared/components/MonacoEditorESM/autocompletion/useAutocompleteWorker.js

@@ -43,7 +43,7 @@ export function useAutocompleteWorker({
     autocompletionDisabled = true;
   }
 
-  const { schemas: fetchedSchema, loading, error } = useGetSchema({
+  const { schema: fetchedSchema, loading, error } = useGetSchema({
     schemaId,
     skip: autocompletionDisabled || !!predefinedSchema,
   });