Fix runtime errors and deprecation warnings - Add safety checks for undefined displayEntity in utils.js and FormStack.js - Fix deprecated onFilterDropdownVisibleChange to filterDropdownProps.onOpenChange in Table.js and Collection.js - Update Collapse component to use items prop instead of children in Form.js - Remove unused Panel import from Form.js - Fix all Ant Design v5 deprecation warnings - Prevent runtime errors when entities are not loaded yet

Author: Claudio Gonzalez

src/components/Form/Collection.js

@@ -270,10 +270,12 @@ const Collection = ({
             .toLowerCase()
             .includes(value.toLowerCase())
         : '',
-    onFilterDropdownVisibleChange: (visible) => {
-      if (visible) {
-        setTimeout(() => searchInputRef.current.select(), 100);
-      }
+    filterDropdownProps: {
+      onOpenChange: (visible) => {
+        if (visible) {
+          setTimeout(() => searchInputRef.current.select(), 100);
+        }
+      },
     },
   });
 

src/components/Form/Form.js

@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
 import { isDate } from './utils';
 import moment from 'moment';
 
-const { Panel } = Collapse;
+
 
 const Form = ({
   displayEntity = null,
@@ -67,20 +67,20 @@ const Form = ({
               {collectionFields.length > 0 && (
                 <Row>
                   <Col span={22}>
-                    <Collapse style={{ marginBottom: 20, marginLeft: 10 }}>
-                      {collectionFields.map((field, index) => {
+                    <Collapse 
+                      style={{ marginBottom: 20, marginLeft: 10 }}
+                      items={collectionFields.map((field, index) => {
                         let data = [];
                         if (initialValues) {
                           data = initialValues[field.name];
                         }
-                        return (
-                          <Panel
-                            header={intl.formatMessage({
-                              id: `entity.${displayEntity.name}.fields.${field.name}`,
-                              defaultMessage: field.name,
-                            })}
-                            key={index}
-                          >
+                        return {
+                          key: index,
+                          label: intl.formatMessage({
+                            id: `entity.${displayEntity.name}.fields.${field.name}`,
+                            defaultMessage: field.name,
+                          }),
+                          children: (
                             <Collection
                               key={field.name}
                               field={field}
@@ -94,10 +94,10 @@ const Form = ({
                               mode={mode}
                               openForResult={openForResultHandler}
                             />
-                          </Panel>
-                        );
+                          ),
+                        };
                       })}
-                    </Collapse>
+                    />
                   </Col>
                 </Row>
               )}

src/components/Form/FormStack.js

@@ -15,6 +15,12 @@ import { EntitiesContext } from '../entities-context';
 import { InstancesContext } from './InstancesContext';
 
 const FormStack = ({ displayEntity = null, onSuccess, mode, id }) => {
+  // Safety check for displayEntity
+  if (!displayEntity) {
+    console.warn('FormStack: displayEntity is null or undefined');
+    return null;
+  }
+
   const [entitiesStack, setEntitiesStack] = useState([
     {
       caller: undefined,
@@ -83,7 +89,7 @@ const FormStack = ({ displayEntity = null, onSuccess, mode, id }) => {
   );
 
   useEffect(() => {
-    if (mode === 'UPDATE') {
+    if (mode === 'UPDATE' && displayEntity) {
       const filtersForEntity = {};
       filtersForEntity.id = {
         value: id,

src/components/Table/Table.js

@@ -473,12 +473,14 @@ const Table = ({
         filterIcon: (filtered) => (
           <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
         ),
-        onFilterDropdownVisibleChange: (visible) => {
-          if (visible) {
-            setTimeout(() => searchInput?.current?.select(), 100);
-          } else {
-            setSelectValues(undefined);
-          }
+        filterDropdownProps: {
+          onOpenChange: (visible) => {
+            if (visible) {
+              setTimeout(() => searchInput?.current?.select(), 100);
+            } else {
+              setSelectValues(undefined);
+            }
+          },
         },
       };
     },

src/components/utils.js

@@ -218,6 +218,12 @@ export const requestEntity = async (
   sort,
   entities
 ) => {
+  // Safety check for undefined displayEntities
+  if (!displayEntities || !displayEntities.fields) {
+    console.warn('displayEntities is undefined or missing fields');
+    return null;
+  }
+  
   const entityName = displayEntities.queryAll;
   const fields = displayEntities.fields;
   let queryFields = [];