Use Snackbar component instead of window.alert (#177)

src/edit.tsx

@@ -9,7 +9,7 @@ import type { Properties } from 'csstype';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	// @ts-ignore: has no exported member
@@ -26,6 +26,7 @@ import {
 	tableRowBefore,
 	tableRowDelete,
 } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
 import type { BlockEditProps } from '@wordpress/blocks';
 
 /**
@@ -77,6 +78,7 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 				.getOptions(),
 		[]
 	);
+	const { createWarningNotice } = useDispatch( noticesStore );
 
 	// Release cell selection.
 	useEffect( () => {
@@ -124,8 +126,13 @@ function TableEdit( props: BlockEditProps< BlockAttributes > ) {
 			vTable.body.length === 1 &&
 			( ! isEmptySection( vTable.head ) || ! isEmptySection( vTable.foot ) )
 		) {
-			// eslint-disable-next-line no-alert, no-undef
-			alert( __( 'The table body must have one or more rows.', 'flexible-table-block' ) );
+			createWarningNotice(
+				__( 'The table body must have one or more rows.', 'flexible-table-block' ),
+				{
+					id: 'flexible-table-block-body-row',
+					type: 'snackbar',
+				}
+			);
 			return;
 		}
 

src/elements/table.tsx

@@ -17,6 +17,8 @@ import {
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { plus, trash, chevronRight, chevronDown } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -90,6 +92,7 @@ export default function Table( {
 	useEffect( () => setIdReady( true ), [] );
 
 	const tableRef = useRef( null );
+	const { createWarningNotice } = useDispatch( noticesStore );
 
 	let isTabMove: boolean = false;
 
@@ -110,8 +113,13 @@ export default function Table( {
 			vTable.body.length === 1 &&
 			( ! isEmptySection( vTable.head ) || ! isEmptySection( vTable.foot ) )
 		) {
-			// eslint-disable-next-line no-alert, no-undef
-			alert( __( 'The table body must have one or more rows.', 'flexible-table-block' ) );
+			createWarningNotice(
+				__( 'The table body must have one or more rows.', 'flexible-table-block' ),
+				{
+					id: 'flexible-table-block-body-row',
+					type: 'snackbar',
+				}
+			);
 			return;
 		}
 
@@ -333,9 +341,12 @@ export default function Table( {
 				}
 
 				if ( fromCell.sectionName !== sectionName ) {
-					// eslint-disable-next-line no-alert, no-undef
-					alert(
-						__( 'Cannot select range cells from difference sections.', 'flexible-table-block' )
+					createWarningNotice(
+						__( 'Cannot select range cells from difference sections.', 'flexible-table-block' ),
+						{
+							id: 'flexible-table-block-range-sections',
+							type: 'snackbar',
+						}
 					);
 					return;
 				}
@@ -353,9 +364,12 @@ export default function Table( {
 			} );
 
 			if ( newSelectedCells.length && sectionName !== newSelectedCells[ 0 ].sectionName ) {
-				// eslint-disable-next-line no-alert, no-undef
-				alert(
-					__( 'Cannot select multi cells from difference sections.', 'flexible-table-block' )
+				createWarningNotice(
+					__( 'Cannot select multi cells from difference sections.', 'flexible-table-block' ),
+					{
+						id: 'flexible-table-block-multi-sections',
+						type: 'snackbar',
+					}
 				);
 				return;
 			}

test/e2e/specs/table.spec.ts

@@ -142,4 +142,54 @@ test.describe( 'Flexible table', () => {
 		await page.locator( 'role=button[name="Delete column"i]' ).click();
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test( 'disallows to select cells across sections', async ( { page, fsbUtils } ) => {
+		await fsbUtils.createFlexibleTableBlock( { header: true, footer: true } );
+
+		// Test range selection.
+		await page.locator( 'role=textbox[name="Body cell text"i] >> nth=0' ).click();
+		await page.keyboard.down( 'Shift' );
+		await page.locator( 'role=textbox[name="Header cell text"i] >> nth=0' ).click();
+		await expect(
+			page.locator(
+				'role=button[name="Dismiss this notice"i] >> text=Cannot select range cells from difference sections.'
+			)
+		).toBeVisible();
+
+		// Test multi selection.
+		await page.keyboard.up( 'Shift' );
+		await page.locator( 'role=textbox[name="Body cell text"i] >> nth=0' ).click();
+		await page.keyboard.down( 'Control' );
+		await page.locator( 'role=textbox[name="Header cell text"i] >> nth=0' ).click();
+		await expect(
+			page.locator(
+				'role=button[name="Dismiss this notice"i] >> text=Cannot select multi cells from difference sections.'
+			)
+		).toBeVisible();
+		await page.keyboard.up( 'Control' );
+	} );
+
+	test( 'disallows to delete the only row in the table body', async ( {
+		editor,
+		page,
+		fsbUtils,
+	} ) => {
+		await fsbUtils.createFlexibleTableBlock( { header: true, footer: true, row: 1 } );
+		await page.locator( 'role=button[name="Select row"i] >> nth=1' ).click();
+		await page.locator( 'role=button[name="Delete row"i]' ).click();
+		const snackbar = page.locator(
+			'role=button[name="Dismiss this notice"i] >> text=The table body must have one or more rows.'
+		);
+		await expect( snackbar ).toBeVisible();
+		snackbar.click();
+		await expect( snackbar ).toBeHidden();
+		await page.locator( 'role=textbox[name="Body cell text"i] >> nth=0' ).click();
+		await editor.clickBlockToolbarButton( 'Edit table' );
+		await page.click( 'role=menuitem[name="Delete row"i]' );
+		await expect(
+			page.locator(
+				'role=button[name="Dismiss this notice"i] >> text=The table body must have one or more rows.'
+			)
+		).toBeVisible();
+	} );
 } );