[8.8] [SecuritySolution] Align no indices state with Kibana dashboard (…

…elastic#155990) (elastic#156456)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[SecuritySolution] Align no indices state with Kibana dashboard
(elastic#155990)](elastic#155990)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-05-02T22:46:35Z","message":"[SecuritySolution]
Align no indices state with Kibana dashboard (elastic#155990)\n\n##
Summary\r\n\r\nSteps to reproduce:\r\n1. Make sure you have some data in
Security Data View. Create a\r\ndashboard that consumes Security Data
View, save it and add a `Security\r\nSolution` tag.\r\n2. Delete the
non-empty indices in Security Data View\r\n3. Back to SecuritySolution >
Dashboards, select the dashboard you\r\nadded.\r\n4. This is the current
indices not found UI you'd see:\r\n<img width=\"2546\"
alt=\"dashboard_view_indices_notfound\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829440-842442e1-f09a-464e-a6c0-8761a3124791.png\">\r\n\r\n\r\nExpected:\r\n-
We should align the behaviour with Kibana dashboard when indices
not\r\nfound:\r\n\r\n<img width=\"2555\" alt=\"Screenshot 2023-04-27 at
10 48
26\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829379-251fb621-e7cd-4788-a682-8a2bce25312a.png\">\r\n\r\nAfter:\r\n<img
width=\"2542\" alt=\"Screenshot 2023-04-27 at 11 10
16\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234832003-95f5c7e5-57d9-4424-b591-f512f365cda2.png\">","sha":"12277ac0b3bf8eb14ed2260cf58d9018197cef06","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat
Hunting","Team:Threat Hunting:Explore","v8.8.0","Feature:Security
Dashboards","v8.9.0"],"number":155990,"url":"https://github.com/elastic/kibana/pull/155990","mergeCommit":{"message":"[SecuritySolution]
Align no indices state with Kibana dashboard (elastic#155990)\n\n##
Summary\r\n\r\nSteps to reproduce:\r\n1. Make sure you have some data in
Security Data View. Create a\r\ndashboard that consumes Security Data
View, save it and add a `Security\r\nSolution` tag.\r\n2. Delete the
non-empty indices in Security Data View\r\n3. Back to SecuritySolution >
Dashboards, select the dashboard you\r\nadded.\r\n4. This is the current
indices not found UI you'd see:\r\n<img width=\"2546\"
alt=\"dashboard_view_indices_notfound\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829440-842442e1-f09a-464e-a6c0-8761a3124791.png\">\r\n\r\n\r\nExpected:\r\n-
We should align the behaviour with Kibana dashboard when indices
not\r\nfound:\r\n\r\n<img width=\"2555\" alt=\"Screenshot 2023-04-27 at
10 48
26\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829379-251fb621-e7cd-4788-a682-8a2bce25312a.png\">\r\n\r\nAfter:\r\n<img
width=\"2542\" alt=\"Screenshot 2023-04-27 at 11 10
16\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234832003-95f5c7e5-57d9-4424-b591-f512f365cda2.png\">","sha":"12277ac0b3bf8eb14ed2260cf58d9018197cef06"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155990","number":155990,"mergeCommit":{"message":"[SecuritySolution]
Align no indices state with Kibana dashboard (elastic#155990)\n\n##
Summary\r\n\r\nSteps to reproduce:\r\n1. Make sure you have some data in
Security Data View. Create a\r\ndashboard that consumes Security Data
View, save it and add a `Security\r\nSolution` tag.\r\n2. Delete the
non-empty indices in Security Data View\r\n3. Back to SecuritySolution >
Dashboards, select the dashboard you\r\nadded.\r\n4. This is the current
indices not found UI you'd see:\r\n<img width=\"2546\"
alt=\"dashboard_view_indices_notfound\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829440-842442e1-f09a-464e-a6c0-8761a3124791.png\">\r\n\r\n\r\nExpected:\r\n-
We should align the behaviour with Kibana dashboard when indices
not\r\nfound:\r\n\r\n<img width=\"2555\" alt=\"Screenshot 2023-04-27 at
10 48
26\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234829379-251fb621-e7cd-4788-a682-8a2bce25312a.png\">\r\n\r\nAfter:\r\n<img
width=\"2542\" alt=\"Screenshot 2023-04-27 at 11 10
16\"\r\nsrc=\"https://user-images.githubusercontent.com/6295984/234832003-95f5c7e5-57d9-4424-b591-f512f365cda2.png\">","sha":"12277ac0b3bf8eb14ed2260cf58d9018197cef06"}}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <[email protected]>

x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_view_prompt_state.test.tsx

@@ -38,20 +38,4 @@ describe('useDashboardViewPromptState', () => {
       }
     `);
   });
-
-  it('returns IndicesNotFound state', () => {
-    const { result } = renderHook<
-      DashboardViewPromptState | null,
-      Partial<EuiEmptyPromptProps> | null
-    >(() => useDashboardViewPromptState(DashboardViewPromptState.IndicesNotFound));
-    expect(result.current).toMatchInlineSnapshot(`
-      Object {
-        "color": "danger",
-        "iconType": "error",
-        "title": <h2>
-          Indices not found
-        </h2>,
-      }
-    `);
-  });
 });

x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_view_prompt_state.tsx

@@ -11,7 +11,6 @@ import * as i18n from '../pages/details/translations';
 
 export enum DashboardViewPromptState {
   NoReadPermission = 'NoReadPermission',
-  IndicesNotFound = 'IndicesNotFound',
 }
 
 const dashboardViewPromptState: Record<DashboardViewPromptState, Partial<EuiEmptyPromptProps>> = {
@@ -21,11 +20,6 @@ const dashboardViewPromptState: Record<DashboardViewPromptState, Partial<EuiEmpt
     title: <h2>{i18n.DASHBOARD_NO_READ_PERMISSION_TITLE}</h2>,
     body: <p>{i18n.DASHBOARD_NO_READ_PERMISSION_DESCRIPTION}</p>,
   },
-  [DashboardViewPromptState.IndicesNotFound]: {
-    color: 'danger',
-    iconType: 'error',
-    title: <h2>{i18n.DASHBOARD_INDICES_NOT_FOUND_TITLE}</h2>,
-  },
 };
 
 export const useDashboardViewPromptState = (

x-pack/plugins/security_solution/public/dashboards/pages/details/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { LEGACY_DASHBOARD_APP_ID } from '@kbn/dashboard-plugin/public';
 import type { DashboardAPI } from '@kbn/dashboard-plugin/public';
 
@@ -49,8 +49,9 @@ const DashboardViewComponent: React.FC = () => {
 
   const { show: canReadDashboard, showWriteControls } =
     useCapabilities<DashboardCapabilities>(LEGACY_DASHBOARD_APP_ID);
-  const [currentState, setCurrentState] = useState<DashboardViewPromptState | null>(
-    canReadDashboard ? null : DashboardViewPromptState.NoReadPermission
+  const errorState = useMemo(
+    () => (canReadDashboard ? null : DashboardViewPromptState.NoReadPermission),
+    [canReadDashboard]
   );
   const [dashboardDetails, setDashboardDetails] = useState<DashboardDetails | undefined>();
   const onDashboardContainerLoaded = useCallback((dashboard: DashboardAPI) => {
@@ -67,12 +68,6 @@ const DashboardViewComponent: React.FC = () => {
   const dashboardExists = useMemo(() => dashboardDetails != null, [dashboardDetails]);
   const { detailName: savedObjectId } = useParams<{ detailName?: string }>();
 
-  useEffect(() => {
-    if (!indicesExist) {
-      setCurrentState(DashboardViewPromptState.IndicesNotFound);
-    }
-  }, [indicesExist]);
-
   return (
     <>
       {indicesExist && (
@@ -92,7 +87,7 @@ const DashboardViewComponent: React.FC = () => {
           )}
         </HeaderPage>
 
-        {indicesExist && (
+        {!errorState && (
           <DashboardRenderer
             query={query}
             filters={filters}
@@ -104,7 +99,7 @@ const DashboardViewComponent: React.FC = () => {
           />
         )}
 
-        <StatusPropmpt currentState={currentState} />
+        <StatusPropmpt currentState={errorState} />
         <SpyRoute
           pageName={SecurityPageName.dashboards}
           state={{ dashboardName: dashboardDetails?.title }}