Navigate to import_sample_data app when navGroupEnabled (#457)

Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Oct 21, 2024 · d01d2ff · d01d2ff
1 parent 017e1dc
commit d01d2ff
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -1,7 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Create index component Renders create index component 1`] = `
-<CreateIndex>
+<CreateIndex
+  application={
+    Object {
+      "navigateToApp": [MockFunction],
+    }
+  }
+  chrome={
+    Object {
+      "navGroup": Object {
+        "getNavGroupEnabled": [MockFunction] {
+          "calls": Array [
+            Array [],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": false,
+            },
+          ],
+        },
+      },
+    }
+  }
+>
   <Header>
     <EuiPanel
       borderRadius="none"
@@ -105,12 +128,14 @@ exports[`Create index component Renders create index component 1`] = `
             >
               Learn how to index your data
             </EuiLink>
-            , or 
+            , or
+             
             <EuiLink
               href="/app/home#/tutorial_directory"
             >
-              add sample data 
+              add sample data
             </EuiLink>
+             
             to OpenSearch Dashboards.
           </p>
         }
@@ -209,7 +234,8 @@ exports[`Create index component Renders create index component 1`] = `
                         </EuiScreenReaderOnly>
                       </a>
                     </EuiLink>
-                    , or 
+                    , or
+                     
                     <EuiLink
                       href="/app/home#/tutorial_directory"
                     >
@@ -218,9 +244,10 @@ exports[`Create index component Renders create index component 1`] = `
                         href="/app/home#/tutorial_directory"
                         rel="noreferrer"
                       >
-                        add sample data 
+                        add sample data
                       </a>
                     </EuiLink>
+                     
                     to OpenSearch Dashboards.
                   </p>
                 </div>

diff --git a/public/components/query_compare/__test__/create_index.test.tsx b/public/components/query_compare/__test__/create_index.test.tsx
@@ -6,19 +6,46 @@
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { CreateIndex } from '../create_index';
 
+const coreMockStart = {
+  chrome: {
+    navGroup: {
+      getNavGroupEnabled: jest.fn(() => false),
+    },
+  },
+  application: {
+    navigateToApp: jest.fn(),
+  },
+};
+
 describe('Create index component', () => {
   configure({ adapter: new Adapter() });
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('Renders create index component', async () => {
-    const wrapper = mount(<CreateIndex />);
+    const wrapper = mount(
+      <CreateIndex chrome={coreMockStart.chrome} application={coreMockStart.application} />
+    );
 
     wrapper.update();
 
     await waitFor(() => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+
+  it('should call application.navigateToApp', async () => {
+    coreMockStart.chrome.navGroup.getNavGroupEnabled.mockReturnValue(true);
+    const { getByText } = render(
+      <CreateIndex chrome={coreMockStart.chrome} application={coreMockStart.application} />
+    );
+
+    fireEvent.click(getByText('add sample data'));
+    expect(coreMockStart.application.navigateToApp).toHaveBeenLastCalledWith('import_sample_data');
+  });
 });
diff --git a/public/components/query_compare/create_index.tsx b/public/components/query_compare/create_index.tsx
@@ -7,8 +7,15 @@ import React from 'react';
 import { EuiPageBody, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 
 import { Header } from '../common/header';
+import { CoreStart } from '../../../../../src/core/public';
 
-export const CreateIndex = () => {
+interface CreateIndexProps {
+  chrome: CoreStart['chrome'];
+  application: CoreStart['application'];
+}
+
+export const CreateIndex = ({ chrome, application }: CreateIndexProps) => {
+  const navGroupEnabled = chrome.navGroup.getNavGroupEnabled();
   return (
     <>
       <Header />
@@ -24,8 +31,19 @@ export const CreateIndex = () => {
               >
                 Learn how to index your data
               </EuiLink>
-              , or <EuiLink href="/app/home#/tutorial_directory">add sample data </EuiLink>to
-              OpenSearch Dashboards.
+              , or{' '}
+              <EuiLink
+                {...(navGroupEnabled
+                  ? {
+                      onClick: () => {
+                        application.navigateToApp('import_sample_data');
+                      },
+                    }
+                  : { href: '/app/home#/tutorial_directory' })}
+              >
+                add sample data
+              </EuiLink>{' '}
+              to OpenSearch Dashboards.
             </p>
           }
         />

diff --git a/public/components/query_compare/home.tsx b/public/components/query_compare/home.tsx
@@ -32,7 +32,6 @@ import {
 } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
 import * as pluginManifest from '../../../opensearch_dashboards.json';
 import './home.scss';
-import { uiSettingsService } from '../common/utils';
 
 interface QueryExplorerProps {
   parentBreadCrumbs: ChromeBreadcrumb[];
@@ -155,7 +154,7 @@ export const Home = ({
     <>
       <div className="osdOverviewWrapper">
         {shouldShowCreateIndex ? (
-          <CreateIndex />
+          <CreateIndex application={application} chrome={chrome} />
         ) : (
           <SearchResult
             application={application}