[SharedUX][A11y] Fix tag selector missing error text (#241443)

Closes #237856

## Summary

- Added differentiated error messages for the `TagSelector` for the
following use cases:
  - Tag doesn't exist:
    - If user has permissions, prompt to create it
    - If they don't, prompt to select one from the list
  - Tag exists, prompt to select it
  - Tag exists and it is already selected
- This change should fix all occurrences of the missing error message
for the `TagSelector`.
- For the Settings flyout, instead of directly using the `TagSelector`
we are now using the wrapper containing this validation logic, there
should be no other changes.

### Testing

Flyout Settings:

https://github.com/user-attachments/assets/461772cc-40d5-43c2-8c7d-e0571d9f93f8

Dashboard Details:

https://github.com/user-attachments/assets/3005cd63-9775-484a-804f-de9bcb2c381f

Error announcement on VO:

<img width="642" height="673" alt="Screenshot 2025-10-31 at 12 04 46"
src="https://github.com/user-attachments/assets/7e387d5e-2df2-4968-8fd1-10daf03db6fd"
/>

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit 9eb3ad3)

# Conflicts:
#	src/platform/plugins/shared/dashboard/public/dashboard_renderer/settings/settings_flyout.tsx

Author: angeles-mb

src/platform/plugins/shared/dashboard/public/dashboard_renderer/settings/settings_flyout.tsx

@@ -126,19 +126,10 @@ export const DashboardSettingsFlyout = ({ onClose, ariaLabelledBy }: DashboardSe
     if (!savedObjectsTaggingApi) return;
 
     return (
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="dashboard.embeddableApi.showSettings.flyout.form.tagsFormRowLabel"
-            defaultMessage="Tags"
-          />
-        }
-      >
-        <savedObjectsTaggingApi.ui.components.TagSelector
-          selected={localSettings.tags}
-          onTagsSelected={(selectedTags) => updateDashboardSetting({ tags: selectedTags })}
-        />
-      </EuiFormRow>
+      <savedObjectsTaggingApi.ui.components.SavedObjectSaveModalTagSelector
+        initialSelection={localSettings.tags}
+        onTagsSelected={(selectedTags) => updateDashboardSetting({ tags: selectedTags })}
+      />
     );
   };
 

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -1474,7 +1474,6 @@
     "dashboard.embeddableApi.showSettings.flyout.form.syncColorsBetweenPanelsSwitchLabel": "Farbpaletten zwischen den Bedienfeldern synchronisieren",
     "dashboard.embeddableApi.showSettings.flyout.form.syncCursorBetweenPanelsSwitchLabel": "Cursor über alle Felder hinweg synchronisieren",
     "dashboard.embeddableApi.showSettings.flyout.form.syncTooltipsBetweenPanelsSwitchLabel": "Synchrone Tooltips für alle Bedienfelder",
-    "dashboard.embeddableApi.showSettings.flyout.form.tagsFormRowLabel": "Tags",
     "dashboard.embeddableApi.showSettings.flyout.form.useMarginsBetweenPanelsSwitchLabel": "Verwenden Sie Abstände zwischen den Panels",
     "dashboard.embeddableApi.showSettings.flyout.formRow.syncAcrossPanelsLabel": "Über alle Felder hinweg synchronisieren",
     "dashboard.embeddableApi.showSettings.flyout.title": "Dashboard-Einstellungen",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -1491,7 +1491,6 @@
     "dashboard.embeddableApi.showSettings.flyout.form.syncColorsBetweenPanelsSwitchLabel": "Synchroniser les palettes de couleur de tous les panneaux",
     "dashboard.embeddableApi.showSettings.flyout.form.syncCursorBetweenPanelsSwitchLabel": "Synchroniser le curseur de tous les panneaux",
     "dashboard.embeddableApi.showSettings.flyout.form.syncTooltipsBetweenPanelsSwitchLabel": "Synchroniser les infobulles de tous les panneaux",
-    "dashboard.embeddableApi.showSettings.flyout.form.tagsFormRowLabel": "Balises",
     "dashboard.embeddableApi.showSettings.flyout.form.useMarginsBetweenPanelsSwitchLabel": "Utiliser des marges entre les panneaux",
     "dashboard.embeddableApi.showSettings.flyout.formRow.syncAcrossPanelsLabel": "Synchroniser sur tous les panneaux",
     "dashboard.embeddableApi.showSettings.flyout.title": "Paramètres du tableau de bord",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -1494,7 +1494,6 @@
     "dashboard.embeddableApi.showSettings.flyout.form.syncColorsBetweenPanelsSwitchLabel": "パネル全体でカラーパレットを同期",
     "dashboard.embeddableApi.showSettings.flyout.form.syncCursorBetweenPanelsSwitchLabel": "パネル全体でカーソルを同期",
     "dashboard.embeddableApi.showSettings.flyout.form.syncTooltipsBetweenPanelsSwitchLabel": "パネル間でツールチップを同期",
-    "dashboard.embeddableApi.showSettings.flyout.form.tagsFormRowLabel": "タグ",
     "dashboard.embeddableApi.showSettings.flyout.form.useMarginsBetweenPanelsSwitchLabel": "パネルの間に余白を使用",
     "dashboard.embeddableApi.showSettings.flyout.formRow.syncAcrossPanelsLabel": "パネル全体で同期",
     "dashboard.embeddableApi.showSettings.flyout.title": "ダッシュボード設定",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -1488,7 +1488,6 @@
     "dashboard.embeddableApi.showSettings.flyout.form.syncColorsBetweenPanelsSwitchLabel": "在面板之间同步调色板",
     "dashboard.embeddableApi.showSettings.flyout.form.syncCursorBetweenPanelsSwitchLabel": "在面板之间同步光标",
     "dashboard.embeddableApi.showSettings.flyout.form.syncTooltipsBetweenPanelsSwitchLabel": "在面板之间同步工具提示",
-    "dashboard.embeddableApi.showSettings.flyout.form.tagsFormRowLabel": "标签",
     "dashboard.embeddableApi.showSettings.flyout.form.useMarginsBetweenPanelsSwitchLabel": "在面板间使用边距",
     "dashboard.embeddableApi.showSettings.flyout.formRow.syncAcrossPanelsLabel": "跨面板同步",
     "dashboard.embeddableApi.showSettings.flyout.title": "仪表板设置",

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/base/tag_selector.tsx

@@ -113,7 +113,7 @@ export const TagSelector: FC<TagSelectorProps> = ({
   allowCreate,
   openCreateModal,
   fullWidth = true,
-  ...otherProps
+  ...comboBoxProps
 }) => {
   const [currentSearch, setCurrentSearch] = useState('');
 
@@ -175,16 +175,26 @@ export const TagSelector: FC<TagSelectorProps> = ({
     [selected, onTagsSelected, openCreateModal, currentSearch]
   );
 
+  const { onSearchChange: onSearchChangeProp, ...restProps } = comboBoxProps;
+
+  const handleOnSearchChange = useCallback(
+    (searchValue: string) => {
+      setCurrentSearch(searchValue);
+      onSearchChangeProp?.(searchValue);
+    },
+    [onSearchChangeProp]
+  );
+
   return (
     <EuiComboBox<Tag | CreateOption>
       placeholder={''}
       options={options}
       selectedOptions={selectedOptions}
-      onSearchChange={setCurrentSearch}
+      onSearchChange={handleOnSearchChange}
       onChange={onChange}
       renderOption={renderOption}
       fullWidth={fullWidth}
-      {...otherProps}
+      {...restProps}
     />
   );
 };

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/connected/saved_object_save_modal_tag_selector.tsx

@@ -11,6 +11,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { EuiFormRow, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { SavedObjectSaveModalTagSelectorComponentProps } from '@kbn/saved-objects-tagging-oss-plugin/public';
+import { i18n } from '@kbn/i18n';
 import type { TagsCapabilities } from '../../../common';
 import { TagSelector } from '../base';
 import type { ITagsCache } from '../../services';
@@ -35,6 +36,44 @@ export const getConnectedSavedObjectModalTagSelectorComponent = ({
   }: SavedObjectSaveModalTagSelectorComponentProps) => {
     const tags = useObservable(cache.getState$(), cache.getState());
     const [selected, setSelected] = useState<string[]>(initialSelection);
+    const [searchValue, setSearchValue] = useState('');
+    const [touched, setTouched] = useState(false);
+
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    const exactTagMatch = !!normalizedSearchValue
+      ? tags.find((tag) => tag.name.toLowerCase() === normalizedSearchValue)
+      : undefined;
+
+    const isTagAlreadyCreated = !!exactTagMatch;
+    const isTagAlreadySelected = isTagAlreadyCreated && selected.includes(exactTagMatch.id);
+    const noMatchingTag = !!normalizedSearchValue && !isTagAlreadyCreated;
+    const isInvalid = touched && (noMatchingTag || isTagAlreadyCreated || isTagAlreadySelected);
+
+    const getErrorMessage = () => {
+      if (isTagAlreadySelected) {
+        return i18n.translate('xpack.savedObjectsTagging.uiApi.saveModal.alreadySelectedHint', {
+          defaultMessage: 'Tag "{searchValue}" is already selected.',
+          values: { searchValue },
+        });
+      }
+      if (isTagAlreadyCreated) {
+        return i18n.translate('xpack.savedObjectsTagging.uiApi.saveModal.exactTagMatchHint', {
+          defaultMessage: 'Tag "{searchValue}" already exists. Select it from the existing tags.',
+          values: { searchValue },
+        });
+      }
+      return capabilities.create
+        ? i18n.translate('xpack.savedObjectsTagging.uiApi.saveModal.noMatchingTagCreateHint', {
+            defaultMessage:
+              'No tags match "{searchValue}". Select an existing tag or create a new one.',
+            values: { searchValue },
+          })
+        : i18n.translate('xpack.savedObjectsTagging.uiApi.saveModal.noMatchingTagHint', {
+            defaultMessage: 'No tags match "{searchValue}".',
+            values: { searchValue },
+          });
+    };
 
     const setSelectedInternal = useCallback(
       (newSelection: string[]) => {
@@ -63,6 +102,8 @@ export const getConnectedSavedObjectModalTagSelectorComponent = ({
             </EuiText>
           )
         }
+        isInvalid={isInvalid}
+        error={isInvalid ? getErrorMessage() : undefined}
       >
         <TagSelector
           selected={selected}
@@ -71,6 +112,9 @@ export const getConnectedSavedObjectModalTagSelectorComponent = ({
           data-test-subj="savedObjectTagSelector"
           allowCreate={capabilities.create}
           openCreateModal={openCreateModal}
+          onSearchChange={setSearchValue}
+          onBlur={() => setTouched(true)}
+          isInvalid={isInvalid}
           {...rest}
         />
       </EuiFormRow>