fix(crud): use noNewButton name and fix form visibility (#3326) (CP…

…: 24.7) (#3327)
vaadin · Mar 6, 2025 · 8a814d6 · 8a814d6
1 parent 7060df1
commit 8a814d6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/packages/ts/react-crud/src/autocrud.tsx b/packages/ts/react-crud/src/autocrud.tsx
@@ -77,14 +77,15 @@ export type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = Compon
      */
     itemIdProperty?: string;
     /**
-     * Determines whether to display the "New" button in the toolbar. By default,
-     * this is set to `true`, meaning the button will be shown.
+     * Determines whether to hide the "New" button in the toolbar.
      *
      * NOTE: This setting only hides the button; it does not prevent new items
      * from being sent to the service. Ensure your backend Java service is
      * properly secured to prevent unauthorized creation of new items.
+     *
+     * @defaultValue `false` meaning the button will be shown.
      */
-    newButton?: boolean;
+    noNewButton?: boolean;
     /**
      * Props to pass to the form. See the `AutoForm` component for details.
      */
@@ -119,7 +120,7 @@ export function AutoCrud<TModel extends AbstractModel>({
   service,
   model,
   itemIdProperty,
-  newButton,
+  noNewButton,
   formProps,
   gridProps,
   style,
@@ -162,7 +163,7 @@ export function AutoCrud<TModel extends AbstractModel>({
       ></AutoGrid>
       {/* As the toolbar only contains the "New" button at the moment, and as an empty toolbar
           renders as a half-height bar, let's hide it completely when the button is hidden */}
-      {newButton !== false && (
+      {!noNewButton && (
         <div className="auto-crud-toolbar">
           <Button theme="primary" onClick={() => setItem(emptyItem)}>
             + New
@@ -197,24 +198,30 @@ export function AutoCrud<TModel extends AbstractModel>({
     />
   );
 
-  return (
-    <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>
-      {fullScreen ? (
-        <>
-          {mainSection}
-          <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>
-            {autoForm}
-          </AutoCrudDialog>
-        </>
-      ) : (
-        <SplitLayout theme="small">
-          {mainSection}
-          <div className="auto-crud-form">
-            <div className="auto-crud-form-header">{formHeader}</div>
-            {autoForm}
-          </div>
-        </SplitLayout>
-      )}
-    </div>
-  );
+  // If the "New" button is visible, the form is always shown.
+  // Otherwise, the form is only shown when an item is being edited.
+  if (!noNewButton || (item && item !== emptyItem)) {
+    return (
+      <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>
+        {fullScreen ? (
+          <>
+            {mainSection}
+            <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>
+              {autoForm}
+            </AutoCrudDialog>
+          </>
+        ) : (
+          <SplitLayout theme="small">
+            {mainSection}
+            <div className="auto-crud-form">
+              <div className="auto-crud-form-header">{formHeader}</div>
+              {autoForm}
+            </div>
+          </SplitLayout>
+        )}
+      </div>
+    );
+  }
+
+  return mainSection;
 }
diff --git a/packages/ts/react-crud/test/autocrud.spec.tsx b/packages/ts/react-crud/test/autocrud.spec.tsx
@@ -109,9 +109,9 @@ describe('@vaadin/hilla-react-crud', () => {
     it('can hide new button', async () => {
       const { rerender } = render(<AutoCrud service={personService()} model={PersonModel} />);
       await waitFor(() => expect(screen.queryByText('+ New')).to.exist);
-      rerender(<AutoCrud service={personService()} model={PersonModel} newButton={true} />);
+      rerender(<AutoCrud service={personService()} model={PersonModel} noNewButton={false} />);
       await waitFor(() => expect(screen.queryByText('+ New')).to.exist);
-      rerender(<AutoCrud service={personService()} model={PersonModel} newButton={false} />);
+      rerender(<AutoCrud service={personService()} model={PersonModel} noNewButton />);
       await waitFor(() => expect(screen.queryByText('+ New')).to.be.null);
     });
 
@@ -300,6 +300,19 @@ describe('@vaadin/hilla-react-crud', () => {
       await expect(result.findByRole('heading', { name: 'Edit person' })).to.eventually.exist;
     });
 
+    it('does not show the form if the New button is hidden', () => {
+      const result = render(<TestAutoCrud noNewButton />);
+      const hiddenForm = result.queryByTestId('auto-form');
+      expect(hiddenForm).to.not.exist;
+    });
+
+    it('shows the form if the New button is hidden, but an item is selected', async () => {
+      const grid = await GridController.init(render(<TestAutoCrud noNewButton />), user);
+      await grid.toggleRowSelected(1);
+      const form = await FormController.init(user);
+      expect(form.instance).to.exist;
+    });
+
     describe('mobile layout', () => {
       let saveSpy: sinon.SinonSpy;
       let service: ReturnType<typeof personService>;