fix error handling

src/components/flag/FlagRow.tsx → src/components/FlagRow.tsx

@@ -8,11 +8,11 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { Flag } from '../../../types';
-import DeleteModal from '../modals/DeleteModal';
-import SdkModal from '../modals/SdkModal';
+import { Flag } from '../../types';
+import DeleteModal from './modals/DeleteModal';
+import SdkModal from './modals/SdkModal';
 import { __ } from '@wordpress/i18n';
-import { checkIfFlagExists } from '../../utils';
+import { checkIfFlagExists } from '../utils';
 
 interface LineItemProps {
 	flags: Flag[];
@@ -57,16 +57,21 @@ const FlagRow = ({
 	};
 
 	const handleFlagEdit = (value: string, flagId: number) => {
-		//Flag alphanumeric validation
 		if (checkIfFlagExists(flags, value)) {
-			setErrorMessage('Flag name already exists.');
+			setErrorMessage(
+				__('Flag name already exists.', 'mr-feature-flags')
+			);
 			setDisableSave(true);
-		} else if (value.match(/^[a-zA-Z0-9\_-]*$/)) {
+		} //Alphanumeric,hypen and underscore validation
+		else if (value.match(/^[a-zA-Z0-9\_-]*$/)) {
 			setErrorMessage('');
 			setDisableSave(false);
 		} else {
 			setErrorMessage(
-				`Flag name should not contain spaces or special characters other than hypens(-) and underscores(_).`
+				__(
+					'Flag name should not contain spaces or special characters other than hypens(-) and underscores(_).',
+					'mr-feature-flags'
+				)
 			);
 			setDisableSave(true);
 		}
@@ -157,7 +162,11 @@ const FlagRow = ({
 					</FlexItem>
 				</Flex>
 
-				{errorMessage && <Text color="#cc1818">{errorMessage}</Text>}
+				{errorMessage && (
+					<Text color="#cc1818" data-test-id="flag-error-message">
+						{errorMessage}
+					</Text>
+				)}
 
 				<hr />
 			</div>

src/components/flag/Flags.tsx → src/components/Flags.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import FlagRow from './FlagRow';
-import { Flag } from '../../../types';
+import { Flag } from '../../types';
 import SubmitControls from './SubmitControls';
-import { getFlags, updateFlags } from '../../utils';
+import { getFlags, updateFlags } from '../utils';
 import Header from './Header';
 import { __ } from '@wordpress/i18n';
 import { dispatch } from '@wordpress/data';

src/components/flag/SubmitControls.tsx → src/components/SubmitControls.tsx

@@ -1,6 +1,6 @@
 import { Flex, FlexItem, Button } from '@wordpress/components';
-import { Flag } from '../../../types';
-import Notices from '../common/Snackbar';
+import { Flag } from '../../types';
+import Notices from './common/Snackbar';
 import { __ } from '@wordpress/i18n';
 
 interface SubmitControlsProps {

src/settings.tsx

@@ -1,4 +1,4 @@
 import { render } from '@wordpress/element';
-import Flags from './components/flag/Flags';
+import Flags from './components/Flags';
 import './styles/settings.scss';
 render(<Flags />, document.getElementById('mr_feature_flags_settings_screen'));

tests/e2e/feature-flags.spec.ts

@@ -41,15 +41,17 @@ test.describe('Feature flags', () => {
 		await page.getByRole('button', { name: 'Add Flag' }).click();
 		await page.getByRole('textbox').last().fill('hello');
 		expect(page.getByText('Flag name already exists')).toBeTruthy();
-		expect(await page.getByRole('button', { name: 'Save' })).toBeDisabled();
+		expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
-		//update flag name
+		//update flag name to be unique
 		await page.getByRole('textbox').last().fill('hello 2');
+
 		expect(
-			page.getByText(
+			await page.getByText(
 				'Flag name should not contain spaces. Allowed special characters are - and _'
 			)
 		).toBeTruthy();
+
 		expect(await page.getByRole('button', { name: 'Save' })).toBeDisabled();
 
 		await page