Add a loader when selecting form definitions

src/openapi.yaml

@@ -1133,6 +1133,7 @@ paths:
         required: true
       tags:
       - forms
+      - form-definitions
       security:
       - tokenAuth: []
       - cookieAuth: []

src/openforms/forms/api/filters.py

@@ -1,3 +1,5 @@
+import warnings
+
 from django.db.models import Q
 from django.utils.translation import gettext_lazy as _
 
@@ -56,5 +58,9 @@ def filter_queryset(self, queryset):
             _or |= q_expr
 
         if _or:
+            warnings.warn(
+                "Using OR filters is deprecated and will be removed starting with Open Forms 3.0",
+                DeprecationWarning,
+            )
             queryset = queryset.filter(_or)
         return super().filter_queryset(queryset)

src/openforms/forms/api/viewsets.py

@@ -44,7 +44,6 @@
 from .serializers import (
     FormAdminMessageSerializer,
     FormDefinitionDetailSerializer,
-    FormDefinitionPreviewSerializer,
     FormDefinitionSerializer,
     FormImportSerializer,
     FormLogicSerializer,

src/openforms/forms/tests/test_api_formdefinition.py

@@ -39,29 +39,6 @@ def test_list(self):
 
         self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)
 
-    def test_list_pagination(self):
-        user = StaffUserFactory.create(user_permissions=["change_form"])
-        self.client.force_authenticate(user=user)
-
-        FormDefinitionFactory.create_batch(100)
-
-        url = reverse("api:formdefinition-list")
-
-        with self.subTest("no pagination"):
-            response = self.client.get(url, {"page_size": "0"}, format="json")
-            self.assertEqual(response.status_code, status.HTTP_200_OK)
-            self.assertEqual(len(response.json()["results"]), 100)
-
-        with self.subTest("default pagination"):
-            response = self.client.get(url, format="json")
-            self.assertEqual(response.status_code, status.HTTP_200_OK)
-            self.assertEqual(len(response.json()["results"]), 25)
-
-        with self.subTest("explicit pagination"):
-            response = self.client.get(url, {"page_size": "30"}, format="json")
-            self.assertEqual(response.status_code, status.HTTP_200_OK)
-            self.assertEqual(len(response.json()["results"]), 30)
-
     def test_user_without_permission_cant_update(self):
         user = UserFactory.create()
         self.client.force_authenticate(user=user)

src/openforms/js/components/admin/form_design/Context.js

@@ -11,6 +11,7 @@ const FormContext = React.createContext({
   components: {},
   formSteps: [],
   formDefinitions: [],
+  reusableFormDefinitionsLoaded: false,
   formVariables: {},
   registrationBackends: [],
   plugins: {},

src/openforms/js/components/admin/form_design/NewStepFormDefinitionPicker.js

@@ -3,6 +3,7 @@ import React, {useContext, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import FAIcon from 'components/admin/FAIcon';
+import Loader from 'components/admin/Loader';
 import {SubmitAction} from 'components/admin/forms/ActionButton';
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
@@ -109,37 +110,43 @@ const NewStepFormDefinitionPicker = ({onReplace}) => {
           />
         }
       >
-        <FormRow>
-          <Field
-            name="form-definition"
-            label={
-              <FormattedMessage
-                description="Form definition select label"
-                defaultMessage="Select form definition"
-              />
-            }
-            errors={validationErrors}
-            required
-          >
-            <Select
-              name="form-definition"
-              choices={formDefinitionChoices}
-              value={selectedFormDefinition}
-              onChange={onSelectChange}
-              allowBlank
-            />
-          </Field>
-        </FormRow>
+        {formContext.reusableFormDefinitionsLoaded ? (
+          <>
+            <FormRow>
+              <Field
+                name="form-definition"
+                label={
+                  <FormattedMessage
+                    description="Form definition select label"
+                    defaultMessage="Select form definition"
+                  />
+                }
+                errors={validationErrors}
+                required
+              >
+                <Select
+                  name="form-definition"
+                  choices={formDefinitionChoices}
+                  value={selectedFormDefinition}
+                  onChange={onSelectChange}
+                  allowBlank
+                />
+              </Field>
+            </FormRow>
 
-        <SubmitRow isDefault>
-          <SubmitAction
-            text={intl.formatMessage({
-              description: 'Form definition select confirm button',
-              defaultMessage: 'Confirm',
-            })}
-            onClick={onFormDefinitionConfirmed}
-          />
-        </SubmitRow>
+            <SubmitRow isDefault>
+              <SubmitAction
+                text={intl.formatMessage({
+                  description: 'Form definition select confirm button',
+                  defaultMessage: 'Confirm',
+                })}
+                onClick={onFormDefinitionConfirmed}
+              />
+            </SubmitRow>
+          </>
+        ) : (
+          <Loader />
+        )}
       </FormModal>
     </div>
   );

src/openforms/js/components/admin/form_design/form-creation-form.js

@@ -115,6 +115,7 @@ const initialFormState = {
   formSteps: [],
   errors: {},
   formDefinitions: [],
+  reusableFormDefinitionsLoaded: false,
   availableRegistrationBackends: [],
   availableAuthPlugins: [],
   availablePrefillPlugins: [],
@@ -253,6 +254,7 @@ function reducer(draft, action) {
         ...draft.formDefinitions,
         ...reusableFormDefinitions.filter(fd => !formDefinitionsIds.includes(fd.uuid)),
       ];
+      draft.reusableFormDefinitionsLoaded = true;
       break;
     }
     case 'ADD_REGISTRATION': {
@@ -977,7 +979,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
       endpoint: FORM_DEFINITIONS_ENDPOINT,
       query: {used_in: formUuid},
       stateVar: 'formDefinitions',
-    })
+    });
   }
 
   const {loading} = useAsync(async () => {
@@ -996,14 +998,18 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
   }, []);
 
   useAsync(async () => {
-    const reusableFormDefinitions = await loadFromBackend([
-      {endpoint: FORM_DEFINITIONS_ENDPOINT, query: {is_reusable: true}},
-    ]);
-    dispatch({
-      type: 'REUSABLE_FORM_DEFINITIONS_LOADED',
-      payload: reusableFormDefinitions[0],
-    })
-  })
+    // Waiting for the last dispatch to be done to avoid state race conditions.
+    if (!loading) {
+      const responses = await loadFromBackend([
+        {endpoint: FORM_DEFINITIONS_ENDPOINT, query: {is_reusable: true}},
+      ]);
+      const [reusableFormDefinitions] = responses;
+      dispatch({
+        type: 'REUSABLE_FORM_DEFINITIONS_LOADED',
+        payload: reusableFormDefinitions,
+      });
+    }
+  }, [loading]);
 
   /**
    * Functions for handling events
@@ -1206,6 +1212,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl}) => {
           components: availableComponents,
           formSteps: state.formSteps,
           formDefinitions: state.formDefinitions,
+          reusableFormDefinitionsLoaded: state.reusableFormDefinitionsLoaded,
           formVariables: state.formVariables,
           staticVariables: state.staticVariables,
           plugins: {