[Security Solution][Timeline] Add Empty view to the Timelines page (#72576) (#72697)

Author: patrykkopycinski

x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx

@@ -21,6 +21,16 @@ jest.mock('react-router-dom', () => {
   };
 });
 jest.mock('../../overview/components/events_by_dataset');
+jest.mock('../../common/containers/source', () => {
+  const originalModule = jest.requireActual('../../common/containers/source');
+
+  return {
+    ...originalModule,
+    useWithSource: jest.fn().mockReturnValue({
+      indicesExist: true,
+    }),
+  };
+});
 jest.mock('../../common/lib/kibana', () => {
   const originalModule = jest.requireActual('../../common/lib/kibana');
 

x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx

@@ -15,6 +15,8 @@ import { WrapperPage } from '../../common/components/wrapper_page';
 import { useKibana } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { useApolloClient } from '../../common/utils/apollo_context';
+import { useWithSource } from '../../common/containers/source';
+import { OverviewEmpty } from '../../overview/components/overview_empty';
 
 import { StatefulOpenTimeline } from '../components/open_timeline';
 import { NEW_TEMPLATE_TIMELINE } from '../components/timeline/properties/translations';
@@ -36,61 +38,71 @@ export const TimelinesPageComponent: React.FC = () => {
   const onImportTimelineBtnClick = useCallback(() => {
     setImportDataModalToggle(true);
   }, [setImportDataModalToggle]);
+  const { indicesExist } = useWithSource();
 
   const apolloClient = useApolloClient();
-  const uiCapabilities = useKibana().services.application.capabilities;
-  const capabilitiesCanUserCRUD: boolean = !!uiCapabilities.siem.crud;
+  const capabilitiesCanUserCRUD: boolean = !!useKibana().services.application.capabilities.siem
+    .crud;
 
   return (
     <>
-      <WrapperPage>
-        <HeaderPage border title={i18n.PAGE_TITLE}>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
-            <EuiFlexItem>
-              {capabilitiesCanUserCRUD && (
-                <EuiButton
-                  iconType="indexOpen"
-                  onClick={onImportTimelineBtnClick}
-                  data-test-subj="open-import-data-modal-btn"
-                >
-                  {i18n.ALL_TIMELINES_IMPORT_TIMELINE_TITLE}
-                </EuiButton>
-              )}
-            </EuiFlexItem>
-            {tabName === TimelineType.default ? (
-              <EuiFlexItem>
-                {capabilitiesCanUserCRUD && (
-                  <NewTimeline
-                    timelineId="timeline-1"
-                    outline={true}
-                    data-test-subj="create-default-btn"
-                  />
+      {indicesExist ? (
+        <>
+          <WrapperPage>
+            <HeaderPage border title={i18n.PAGE_TITLE}>
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem>
+                  {capabilitiesCanUserCRUD && (
+                    <EuiButton
+                      iconType="indexOpen"
+                      onClick={onImportTimelineBtnClick}
+                      data-test-subj="open-import-data-modal-btn"
+                    >
+                      {i18n.ALL_TIMELINES_IMPORT_TIMELINE_TITLE}
+                    </EuiButton>
+                  )}
+                </EuiFlexItem>
+                {tabName === TimelineType.default ? (
+                  <EuiFlexItem>
+                    {capabilitiesCanUserCRUD && (
+                      <NewTimeline
+                        timelineId="timeline-1"
+                        outline={true}
+                        data-test-subj="create-default-btn"
+                      />
+                    )}
+                  </EuiFlexItem>
+                ) : (
+                  <EuiFlexItem>
+                    <NewTemplateTimeline
+                      outline={true}
+                      title={NEW_TEMPLATE_TIMELINE}
+                      data-test-subj="create-template-btn"
+                    />
+                  </EuiFlexItem>
                 )}
-              </EuiFlexItem>
-            ) : (
-              <EuiFlexItem>
-                <NewTemplateTimeline
-                  outline={true}
-                  title={NEW_TEMPLATE_TIMELINE}
-                  data-test-subj="create-template-btn"
-                />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </HeaderPage>
+              </EuiFlexGroup>
+            </HeaderPage>
 
-        <TimelinesContainer>
-          <StatefulOpenTimeline
-            apolloClient={apolloClient!}
-            defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-            isModal={false}
-            importDataModalToggle={importDataModalToggle && capabilitiesCanUserCRUD}
-            setImportDataModalToggle={setImportDataModalToggle}
-            title={i18n.ALL_TIMELINES_PANEL_TITLE}
-            data-test-subj="stateful-open-timeline"
-          />
-        </TimelinesContainer>
-      </WrapperPage>
+            <TimelinesContainer>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient!}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                isModal={false}
+                importDataModalToggle={importDataModalToggle && capabilitiesCanUserCRUD}
+                setImportDataModalToggle={setImportDataModalToggle}
+                title={i18n.ALL_TIMELINES_PANEL_TITLE}
+                data-test-subj="stateful-open-timeline"
+              />
+            </TimelinesContainer>
+          </WrapperPage>
+        </>
+      ) : (
+        <WrapperPage>
+          <HeaderPage border title={i18n.PAGE_TITLE} />
+          <OverviewEmpty />
+        </WrapperPage>
+      )}
 
       <SpyRoute pageName={SecurityPageName.timelines} />
     </>