@arquimedes.co/eureka-forms 3.0.63 → 3.0.64-fix-late-classifiers

package/dist/App/AppHooks.js

@@ -158,6 +158,14 @@ export const useSetupApp = (isEmbedded, props) => {
         idCurrentAgent,
         handleConfirmed,
     ]);
+    // The host may resolve the classifiers asynchronously (the admin fetches them while the form is
+    // already mounted). `loadData` only copies the prop it saw when it ran, so patch the form whenever a
+    // new dictionary arrives — without re-running the load, which would reset what the user typed.
+    useEffect(() => {
+        if (!classifiers || !form || form.classifiers === classifiers)
+            return;
+        setForm({ ...form, classifiers });
+    }, [classifiers, form]);
     const reload = useCallback(() => {
         if (!form)
             return;

package/dist/App/AppHooks.test.js

@@ -81,6 +81,14 @@ describe('AppHooks', function () {
             expect(result.current.organization).toBeNull();
             expect(result.current.branding).toBeUndefined();
         });
+        test('picks up classifiers that arrive after the first render', async () => {
+            const classifier = { _id: 'tipo', name: 'Tipo de solicitud', children: [] };
+            const { result, rerender } = renderHookWithProviders((props) => useSetupApp(false, { formData: BaseForm, internal: true, classifiers: props.classifiers }), { initialProps: { classifiers: {} } });
+            await waitFor(() => expect(result.current.form).toBeTruthy());
+            expect(result.current.form?.classifiers).toEqual({});
+            rerender({ classifiers: { tipo: classifier } });
+            await waitFor(() => expect(result.current.form?.classifiers?.tipo).toEqual(classifier));
+        });
         test('Apikey Default', async () => {
             mocks.get.mockImplementation((a) => {
                 if (a === '/organization') {

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { FormProvider, useForm } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import FormContext, { IdFormContext } from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ClassifierSelectorStep from './ClassifierSelectorStep';
+const ID_FORM = 'LATE_CLASSIFIERS_FORM';
+const step = {
+    id: 'tipo-step',
+    idSection: 'SECTION_1',
+    stepPath: ['tipo-step'],
+    type: FormStepTypes.CLASSIFIER_SELECTOR,
+    idClassifier: 'tipo',
+    label: 'Tipo de solicitud',
+    description: '',
+    searchable: true,
+    options: {},
+    required: false,
+    size: 2,
+};
+/** The project's classifiers, as the host resolves them (asynchronously) and passes them to the form. */
+const classifiers = {
+    tipo: { _id: 'tipo', name: 'Tipo de solicitud', children: ['bug', 'mejora'] },
+    bug: { _id: 'bug', name: 'Error / Bug', children: [] },
+    mejora: { _id: 'mejora', name: 'Propuesta de mejora', children: [] },
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: ['tipo-step'], nextSection: null },
+    },
+    steps: { 'tipo-step': step },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: { forms: { [ID_FORM]: { ...defaultRootState } } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ store, formClassifiers, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(IdFormContext.Provider, { value: ID_FORM, children: _jsx(FormContext.Provider, { value: { ...form, classifiers: formClassifiers }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(ClassifierSelectorStep, { step: step, editable: true }) }) }) }) }) }) }));
+}
+describe('ClassifierSelectorStep with classifiers that arrive after the first render', () => {
+    it('renders nothing while the classifiers are unknown, then the selector with its options', async () => {
+        const user = userEvent.setup();
+        const store = makeStore();
+        const { rerender } = render(_jsx(Harness, { store: store, formClassifiers: undefined }));
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        rerender(_jsx(Harness, { store: store, formClassifiers: classifiers }));
+        await user.click(await screen.findByRole('combobox'));
+        expect(await screen.findByRole('option', { name: 'Error / Bug' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'Propuesta de mejora' })).toBeInTheDocument();
+    });
+});

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -50,8 +50,10 @@ function ClassifierSelectorStep({ step, editable }) {
             };
         }) ?? []);
     }, 
+    // The classifiers dictionary can arrive after the first render (see useSetupApp), so the
+    // options must follow it, not only the dependency values.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dependenciesValues]);
+    [dependenciesValues, classifier, form.classifiers]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version": "3.0.63",
+  "version":"3.0.64-fix-late-classifiers",
   "scripts": {
     "watch": "node node_modules/@typescript/native/bin/tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",