[Workspace] Redirect "Sample data" link to the page in the same workspace

changelogs/fragments/8330.yml

@@ -0,0 +1,2 @@
+fix:
+- Redirect sample data link to the page in the same workspace ([#8330](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8330))

src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx

@@ -5,7 +5,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@osd/i18n';
-import { useMount } from 'react-use';
+import { useMount, useObservable } from 'react-use';
+import { of } from 'rxjs';
 import { useLocation } from 'react-router-dom';
 import {
   useOpenSearchDashboards,
@@ -35,9 +36,12 @@ export const DashboardListing = () => {
       data: { query },
       osdUrlStateStorage,
       navigation,
+      http,
+      workspaces,
     },
   } = useOpenSearchDashboards<DashboardServices>();
 
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
   const location = useLocation();
   const queryParameters = useMemo(() => new URLSearchParams(location.search), [location]);
   const initialFiltersFromURL = queryParameters.get('filter');
@@ -107,8 +111,8 @@ export const DashboardListing = () => {
   }, [history]);
 
   const noItemsFragment = useMemo(
-    () => getNoItemsMessage(hideWriteControls, createItem, application),
-    [hideWriteControls, createItem, application]
+    () => getNoItemsMessage(hideWriteControls, createItem, http.basePath, currentWorkspace?.id),
+    [hideWriteControls, createItem, http.basePath, currentWorkspace?.id]
   );
 
   const dashboardProvidersForListing = dashboardProviders() || {};

src/plugins/dashboard/public/application/utils/get_no_items_message.test.tsx

@@ -3,34 +3,38 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import React from 'react';
 import { getNoItemsMessage } from './get_no_items_message';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { ApplicationStart, Capabilities, PublicAppInfo } from 'opensearch-dashboards/public';
-import { EuiLink } from '@elastic/eui';
-import { RecursiveReadonly } from '@osd/utility-types';
-import { Observable } from 'rxjs';
+import { httpServiceMock } from '../../../../../core/public/mocks';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
+const mockBasePath = httpServiceMock.createSetupContract({ basePath: '/test' }).basePath;
+const mockUseNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockUseNavigate,
+}));
 
 describe('dashboard listing table with no item', () => {
   test('and no write controls', () => {
-    const component = mountWithIntl(getNoItemsMessage(true, jest.fn(), {} as ApplicationStart));
+    const component = mountWithIntl(getNoItemsMessage(true, jest.fn(), mockBasePath, 'wk1'));
 
     expect(component).toMatchSnapshot();
   });
 
-  test('and with write controls', () => {
-    const application = {
-      capabilities: {} as RecursiveReadonly<Capabilities>,
-      applications$: {} as Observable<ReadonlyMap<string, PublicAppInfo>>,
-      navigateToApp: jest.fn(),
-      navigateToUrl: jest.fn(),
-      getUrlForApp: jest.fn(),
-      registerMountContext: jest.fn(),
-      currentAppId$: {} as Observable<string | undefined>,
-    };
-    const component = mountWithIntl(getNoItemsMessage(false, jest.fn(), application));
+  test('and with write controls', async () => {
+    const basePath = 'wk1';
+    const component = mountWithIntl(getNoItemsMessage(false, jest.fn(), mockBasePath, basePath));
+    const { getByText } = render(<Router>{component}</Router>);
 
     expect(component).toMatchSnapshot();
-    component.find(EuiLink).simulate('click');
-    expect(application.navigateToApp).toHaveBeenCalledTimes(1);
+    fireEvent.click(getByText('Install some sample data'));
+
+    waitFor(() => {
+      expect(mockUseNavigate).toHaveBeenCalled();
+    });
+    mockUseNavigate.mockClear();
   });
 });

src/plugins/dashboard/public/application/utils/get_no_items_message.tsx

@@ -6,12 +6,14 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { EuiSmallButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
-import { ApplicationStart } from 'opensearch-dashboards/public';
+import { HttpStart } from 'opensearch-dashboards/public';
+import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 
 export const getNoItemsMessage = (
   hideWriteControls: boolean,
   createItem: () => void,
-  application: ApplicationStart
+  basePath: HttpStart['basePath'],
+  workspaceId: string | undefined
 ) => {
   if (hideWriteControls) {
     return (
@@ -60,11 +62,9 @@ export const getNoItemsMessage = (
                 values={{
                   sampleDataInstallLink: (
                     <EuiLink
-                      onClick={() =>
-                        application.navigateToApp('home', {
-                          path: '#/tutorial_directory/sampleData',
-                        })
-                      }
+                      href={basePath.prepend(
+                        formatUrlWithWorkspaceId('import_sample_data', workspaceId || '', basePath)
+                      )}
                     >
                       <FormattedMessage
                         id="dashboard.listing.createNewDashboard.sampleDataInstallLinkText"