EDM-3204: Do not allow invalid search values for name/alias fields

libs/i18n/locales/en/translation.json

@@ -1491,6 +1491,7 @@
   "Expand row": "Expand row",
   "{page} of <2>{totalPages}</2>": "{page} of <2>{totalPages}</2>",
   "{{ numberOfItems }} items": "{{ numberOfItems }} items",
+  "Search value cannot contain spaces": "Search value cannot contain spaces",
   "Waiting for terminal session to open...": "Waiting for terminal session to open...",
   "Architecture": "Architecture",
   "Agent version": "Agent version",

libs/ui-components/src/components/Device/DevicesPage/DecommissionedDevicesTable.tsx

@@ -103,6 +103,7 @@ const DecommissionedDevicesTable = ({
               <Switch
                 id="decommissioned-devices-switch"
                 label={<span className="fctl-switch__label">{t('Show decommissioned devices')}</span>}
+                aria-checked
                 isChecked
                 onChange={() => {
                   setOnlyDecommissioned(false);

libs/ui-components/src/components/Device/DevicesPage/EnrolledDevicesTable.tsx

@@ -172,6 +172,7 @@ const EnrolledDevicesTable = ({
             id="enrolled-devices-switch"
             label={<span className="fctl-switch__label">{t('Show decommissioned devices')}</span>}
             isChecked={false}
+            aria-checked={false}
             onChange={() => {
               clearAllFilters();
               setOnlyDecommissioned(true);

libs/ui-components/src/components/Table/TableTextSearch.tsx

@@ -1,22 +1,70 @@
 import * as React from 'react';
+import { HelperText, HelperTextItem, SearchInput, SearchInputProps, Stack, StackItem } from '@patternfly/react-core';
 
-import { SearchInput, SearchInputProps } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
 
-export type TableTextSearchProps = Omit<SearchInputProps, 'onChange' | 'aria-label'> & {
+export type TableTextSearchProps = Omit<SearchInputProps, 'onChange' | 'onClear' | 'aria-label'> & {
   setValue: (val: string) => void;
-  onClear?: VoidFunction;
 };
 
-const TableTextSearch: React.FC<TableTextSearchProps> = ({ value, setValue, placeholder, onClear, ...rest }) => {
+const TableTextSearch: React.FC<TableTextSearchProps> = ({ value, setValue, placeholder, ...rest }) => {
+  const { t } = useTranslation();
+  const [hasError, setHasError] = React.useState<boolean>(false);
+  const [actualValue, setActualValue] = React.useState<string>(value || '');
+
+  React.useEffect(() => {
+    // When the value is cleared externally, reset the component state
+    if (value === '') {
+      setActualValue('');
+      setHasError(false);
+    }
+  }, [value]);
+
+  const handleClear = React.useCallback(() => {
+    setActualValue('');
+    setValue('');
+    setHasError(false);
+  }, [setValue]);
+
+  const handleChange = React.useCallback(
+    (_event: React.FormEvent<HTMLInputElement>, newValue: string) => {
+      setActualValue(newValue);
+
+      if (newValue === '') {
+        handleClear();
+      } else {
+        const stripped = newValue.replace(/\s/g, '');
+        if (stripped === newValue) {
+          setValue(stripped);
+          setHasError(false);
+        } else {
+          setHasError(true);
+        }
+      }
+    },
+    [handleClear, setValue],
+  );
+
   return (
-    <SearchInput
-      aria-label={placeholder}
-      onChange={(_event, value) => (value === '' && onClear ? onClear() : setValue(value))}
-      value={value}
-      placeholder={placeholder}
-      onClear={() => (onClear ? onClear() : setValue(''))}
-      {...rest}
-    />
+    <Stack>
+      <StackItem>
+        <SearchInput
+          aria-label={placeholder}
+          onChange={handleChange}
+          value={actualValue}
+          placeholder={placeholder}
+          onClear={handleClear}
+          {...rest}
+        />
+      </StackItem>
+      {hasError && (
+        <StackItem className="pf-v6-u-mt-sm">
+          <HelperText>
+            <HelperTextItem variant="error">{t('Search value cannot contain spaces')}</HelperTextItem>
+          </HelperText>
+        </StackItem>
+      )}
+    </Stack>
   );
 };