Add URL support

Signed-off-by: Derek Ho <[email protected]>
derek-ho · Apr 5, 2024 · a63592e · a63592e
1 parent f1c3a38
commit a63592e
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 6 deletions.
diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
@@ -41,6 +41,7 @@ import { Action, RouteItem, SubAction } from './types';
 import { ResourceType } from '../../../common';
 import { buildHashUrl, buildUrl } from './utils/url-builder';
 import { CrossPageToast } from './cross-page-toast';
+import { getDataSourceIdFromUrl } from '../../utils/datasource-utils';
 
 const LANDING_PAGE_URL = '/getstarted';
 
@@ -155,7 +156,11 @@ export const DataSourceContext = createContext<DataSourceContextType | null>(nul
 
 export function AppRouter(props: AppDependencies) {
   const setGlobalBreadcrumbs = flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs);
-  const [dataSource, setDataSource] = useState<DataSourceOption>(LocalCluster);
+  const dataSourceId = getDataSourceIdFromUrl();
+  console.log(dataSourceId);
+  const [dataSource, setDataSource] = useState<DataSourceOption>(
+    dataSourceId ? { id: dataSourceId } : LocalCluster
+  );
 
   return (
     <DataSourceContext.Provider value={{ dataSource, setDataSource }}>

diff --git a/public/apps/configuration/top-nav-menu.tsx b/public/apps/configuration/top-nav-menu.tsx
@@ -17,6 +17,7 @@ import React from 'react';
 import { DataSourceSelectableConfig } from 'src/plugins/data_source_management/public';
 import { DataSourceOption } from 'src/plugins/data_source_management/public/components/data_source_menu/types';
 import { AppDependencies } from '../types';
+import { setDataSourceIdInUrl } from '../../utils/datasource-utils';
 
 export interface TopNavMenuProps extends AppDependencies {
   dataSourcePickerReadOnly: boolean;
@@ -54,6 +55,11 @@ export const SecurityPluginTopNavMenu = (props: TopNavMenuProps) => {
 
   const dataSourceEnabled = !!depsStart.dataSource?.dataSourceEnabled;
 
+  const wrapSetDataSourceWithUpdateUrl = (dataSources: DataSourceOption[]) => {
+    setDataSourceIdInUrl(dataSources[0].id);
+    setDataSource(dataSources[0]);
+  };
+
   return dataSourceEnabled ? (
     <DataSourceMenu
       setMenuMountPoint={setHeaderActionMenu}
@@ -63,10 +69,7 @@ export const SecurityPluginTopNavMenu = (props: TopNavMenuProps) => {
         notifications: coreStart.notifications,
         activeOption: [selectedDataSource],
         dataSourceFilter: (ds) => compatibleVersion.has(ds.attributes.version),
-        onSelectedDataSources: (dataSources) => {
-          // single select for now
-          setDataSource(dataSources[0]);
-        },
+        onSelectedDataSources: wrapSetDataSourceWithUpdateUrl,
         fullWidth: true,
       }}
     />

diff --git a/public/utils/datasource-utils.ts b/public/utils/datasource-utils.ts
@@ -19,9 +19,21 @@ export function createDataSourceQuery(dataSourceId: string) {
   return { dataSourceId };
 }
 
+const DATASOURCEURLKEY = 'dataSourceId';
+
 export function getClusterInfoIfEnabled(dataSourceEnabled: boolean, cluster: DataSourceOption) {
   if (dataSourceEnabled) {
     return `for ${cluster.label || 'Local cluster'}`;
   }
   return '';
 }
+
+export function getDataSourceIdFromUrl(): string {
+  return new URLSearchParams(window.location.search).get(DATASOURCEURLKEY) || '';
+}
+
+export function setDataSourceIdInUrl(dataSourceId: string) {
+  const url = new URL(window.location.href);
+  url.searchParams.set(DATASOURCEURLKEY, dataSourceId);
+  window.history.replaceState({}, '', url.toString());
+}
diff --git a/public/utils/test/datasource-utils.test.ts b/public/utils/test/datasource-utils.test.ts
@@ -13,7 +13,12 @@
  *   permissions and limitations under the License.
  */
 
-import { createDataSourceQuery, getClusterInfoIfEnabled } from '../datasource-utils';
+import {
+  createDataSourceQuery,
+  getClusterInfoIfEnabled,
+  getDataSourceIdFromUrl,
+  setDataSourceIdInUrl,
+} from '../datasource-utils';
 
 describe('Tests datasource utils', () => {
   it('Tests the GetClusterDescription helper function', () => {
@@ -25,4 +30,44 @@ describe('Tests datasource utils', () => {
   it('Tests the create DataSource query helper function', () => {
     expect(createDataSourceQuery('test')).toStrictEqual({ dataSourceId: 'test' });
   });
+
+  it('Tests getting the datasource from the url', () => {
+    const mockSearchNoDataSourceId = '?foo=bar&baz=qux';
+    Object.defineProperty(window, 'location', {
+      value: { search: mockSearchNoDataSourceId },
+      writable: true,
+    });
+    expect(getDataSourceIdFromUrl()).toBe('');
+    const mockSearchDataSourceIdNotfirst = '?foo=bar&baz=qux&dataSourceId=test';
+    Object.defineProperty(window, 'location', {
+      value: { search: mockSearchDataSourceIdNotfirst },
+      writable: true,
+    });
+    expect(getDataSourceIdFromUrl()).toBe('test');
+    const mockSearchDataSourceIdFirst = '?dataSourceId=test';
+    Object.defineProperty(window, 'location', {
+      value: { search: mockSearchDataSourceIdFirst },
+      writable: true,
+    });
+    expect(getDataSourceIdFromUrl()).toBe('test');
+  });
+
+  it('Tests setting the datasource in the url', () => {
+    const replaceState = jest.fn();
+    const mockUrl = 'http://localhost:5601/app/security-dashboards-plugin#/auth';
+    Object.defineProperty(window, 'location', {
+      value: { href: mockUrl },
+      writable: true,
+    });
+    Object.defineProperty(window, 'history', {
+      value: { replaceState },
+      writable: true,
+    });
+    setDataSourceIdInUrl('test');
+    expect(replaceState).toBeCalledWith(
+      {},
+      '',
+      'http://localhost:5601/app/security-dashboards-plugin?dataSourceId=test#/auth'
+    );
+  });
 });