[8.16] [ResponseOps][Rules] Add loading state to rule params data vie…

…ws selector (#203654) (#204422)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[ResponseOps][Rules] Add loading state to rule params data views
selector (#203654)](#203654)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Umberto
Pepato","email":"umbopepato@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-16T15:43:13Z","message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:ResponseOps","v9.0.0","backport:all-open"],"title":"[ResponseOps][Rules]
Add loading state to rule params data views
selector","number":203654,"url":"https://github.com/elastic/kibana/pull/203654","mergeCommit":{"message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/203654","number":203654,"mergeCommit":{"message":"[ResponseOps][Rules]
Add loading state to rule params data views selector (#203654)\n\n##
Summary\r\n\r\nIntroduces a loading state in the data views select
popover and renders\r\na loading indicator when DVs are not available
yet. This makes sure that\r\neven if the `savedObjectsClient.find` call
of the data views service\r\ntakes a long time, we don't show an empty
popover in the
meantime.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/5bbe0c68-3ceb-4d7f-91fd-357db4caa5c1\r\n\r\n##
References\r\n\r\nFixes #198502 \r\n\r\n## Release note\r\n\r\nFix race
condition in alerting rules data view
selector","sha":"713d4bbcb2d9f5e707d06c1d298287edd3e694d0"}}]}]
BACKPORT-->

Co-authored-by: Umberto Pepato <umbopepato@users.noreply.github.com>

x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx

@@ -17,6 +17,7 @@ import {
   EuiPopover,
   EuiPopoverFooter,
   EuiPopoverTitle,
+  EuiLoadingSpinner,
   EuiText,
   useEuiPaddingCSS,
 } from '@elastic/eui';
@@ -58,13 +59,14 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
   onSelectDataView,
   onChangeMetaData,
 }) => {
+  const [loadingDataViews, setLoadingDataViews] = useState(false);
   const [dataViewItems, setDataViewsItems] = useState<DataViewListItemEnhanced[]>([]);
   const [dataViewPopoverOpen, setDataViewPopoverOpen] = useState(false);
 
   const closeDataViewEditor = useRef<() => void | undefined>();
 
   const allDataViewItems = useMemo(
-    () => [...dataViewItems, ...metadata.adHocDataViewList.map(toDataViewListItem)],
+    () => [...(dataViewItems ?? []), ...metadata.adHocDataViewList.map(toDataViewListItem)],
     [dataViewItems, metadata.adHocDataViewList]
   );
 
@@ -80,10 +82,16 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
   );
 
   const loadPersistedDataViews = useCallback(async () => {
-    const ids = await dataViews.getIds();
-    const dataViewsList = await Promise.all(ids.map((id) => dataViews.get(id)));
-
-    setDataViewsItems(dataViewsList.map(toDataViewListItem));
+    setLoadingDataViews(true);
+    try {
+      // Calling getIds with refresh = true to make sure we don't get stale data
+      const ids = await dataViews.getIds(true);
+      const dataViewsList = await Promise.all(ids.map((id) => dataViews.get(id)));
+      setDataViewsItems(dataViewsList.map(toDataViewListItem));
+    } catch (e) {
+      // Error fetching data views
+    }
+    setLoadingDataViews(false);
   }, [dataViews]);
 
   const onAddAdHocDataView = useCallback(
@@ -146,8 +154,10 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
     [dataViews, onAddAdHocDataView, onChangeDataView]
   );
 
-  if (!allDataViewItems) {
-    return null;
+  if (loadingDataViews) {
+    // The loading indicator is to make sure we don't render an
+    // empty popover when the DV cache is initially loading
+    return <EuiLoadingSpinner />;
   }
 
   return (