Removing Routes.pluginRoute in favor of constant routes. (#24323)

* Replacing usages of `pluginRoute` with actual routes.

* Removing usages of `pluginRoute`.

* Removing `Routes.pluginRoute` altogether.

* Cleaning up.

* Cleaning up tests.

* Cleaning up route constants/functions.

* Fixing dashboard route helper.

* Adding key to link.

* Removing mocks for `routing/Routes`.

Author: dennisoelkers

graylog2-web-interface/src/components/entityCreatorBindings.ts

@@ -41,7 +41,7 @@ const entityCreatorBindings: PluginExports = {
     {
       id: 'Dashboard',
       title: 'Create dashboard',
-      path: Routes.DASHBOARD_NEW,
+      path: Routes.DASHBOARD.NEW,
       telemetryEvent: {
         type: TELEMETRY_EVENT_TYPE.DASHBOARD_ACTION.DASHBOARD_CREATE_CLICKED,
         section: 'dashboard',

graylog2-web-interface/src/components/permissions/types.ts

@@ -57,7 +57,7 @@ export type TableElement<T extends EntityBase> = {
     entityId: string;
     entityType: string;
   }>;
-  useCondition: () => true;
+  useCondition: () => boolean;
 };
 
 declare module 'graylog-web-plugin/plugin' {

graylog2-web-interface/src/components/welcome/EntityListItem.test.tsx

@@ -21,8 +21,6 @@ import { render, screen } from 'wrappedTestingLibrary';
 import EntityListItem from 'components/welcome/EntityListItem';
 import { createGRN } from 'logic/permissions/GRN';
 
-jest.mock('routing/Routes', () => ({ pluginRoute: (x) => x, dashboard_show: (x) => `/route/DASHBOARDS_VIEWID/${x}` }));
-
 const grn = createGRN('dashboard', '1');
 
 describe('EntityListItem', () => {
@@ -35,9 +33,8 @@ describe('EntityListItem', () => {
   it('Show correct link', async () => {
     render(<EntityListItem grn={grn} title="Title 1" />);
 
-    const title = await screen.findByText('Title 1');
-    const link = title.closest('a');
+    const link = await screen.findByText('Title 1');
 
-    expect(link).toHaveAttribute('href', '/route/DASHBOARDS_VIEWID/1');
+    expect(link).toHaveAttribute('href', '/dashboards/1');
   });
 });

graylog2-web-interface/src/components/welcome/FavoriteItemsList.tsx

@@ -45,8 +45,8 @@ const FavoriteItemsList = () => {
       <NoSearchResult>
         You do not have any favorite items yet.
         <br />
-        Make any <Link to={Routes.SEARCH}>Search</Link> or{' '}
-        <Link to={Routes.pluginRoute('DASHBOARDS_NEW')}>Dashboard</Link> favorite to show up here.
+        Make any <Link to={Routes.SEARCH}>Search</Link> or <Link to={Routes.DASHBOARD.NEW}>Dashboard</Link> favorite to
+        show up here.
       </NoSearchResult>
     );
   }

graylog2-web-interface/src/components/welcome/LastOpenList.tsx

@@ -39,7 +39,7 @@ const LastOpenList = () => {
         You have not opened any searches/dashboards yet.
         <br />
         From now on, whenever you open a saved search/dashboard, it will show up here. In the meantime, you can start a
-        new <Link to={Routes.SEARCH}>Search</Link> or <Link to={Routes.pluginRoute('DASHBOARDS_NEW')}>Dashboard</Link>.
+        new <Link to={Routes.SEARCH}>Search</Link> or <Link to={Routes.DASHBOARD.NEW}>Dashboard</Link>.
       </NoSearchResult>
     );
   }

graylog2-web-interface/src/components/welcome/Welcome.test.tsx

@@ -95,19 +95,6 @@ jest.mock('components/welcome/hooks/useRecentActivity', () =>
   })),
 );
 
-jest.mock('routing/Routes', () => ({
-  pluginRoute: (x: string) => x,
-  dashboard_show: (x: string) => `/route/DASHBOARDS_VIEWID/${x}`,
-  getPluginRoute: (x: string) => () => x,
-  SEARCH: '/search',
-  SYSTEM: {
-    USERS: {
-      edit: () => '/edit-profile-page',
-    },
-  },
-  show_saved_search: (id: string) => `/search/${id}`,
-}));
-
 jest.mock('hooks/useCurrentUser');
 
 describe('Welcome', () => {
@@ -124,7 +111,7 @@ describe('Welcome', () => {
       );
       const linkToEditProfile = await screen.findByText('edit profile');
 
-      expect(linkToEditProfile).toHaveAttribute('href', '/edit-profile-page');
+      expect(linkToEditProfile).toHaveAttribute('href', '/system/users/edit/admin-id');
     });
 
     it('Shows appropriate message without link for readOnly users', async () => {

graylog2-web-interface/src/pages/InputsPage.tsx

@@ -21,7 +21,6 @@ import { DocumentTitle, PageHeader } from 'components/common';
 import { InputsList } from 'components/inputs';
 import AppConfig from 'util/AppConfig';
 import { Link } from 'components/common/router';
-import Routes from 'routing/Routes';
 import useProductName from 'brand-customization/useProductName';
 
 const isCloud = AppConfig.isCloud();
@@ -50,7 +49,7 @@ const InputsPage = () => {
               </p>
               <p>
                 If you are missing an input type on this page&apos;s list of available inputs, you can start the input
-                on a <Link to={Routes.pluginRoute('SYSTEM_FORWARDERS')}>Forwarder</Link>.
+                on a <Link to="/system/forwarders">Forwarder</Link>.
               </p>
             </>
           ) : (

graylog2-web-interface/src/routing/Routes.ts

@@ -14,11 +14,17 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import { PluginStore } from 'graylog-web-plugin/plugin';
 import URI from 'urijs';
 
 import AppConfig from 'util/AppConfig';
-import { extendedSearchPath, viewsPath } from 'views/Constants';
+import {
+  extendedSearchPath,
+  viewsPath,
+  dashboardsTvPath,
+  showDashboardsPath,
+  newDashboardsPath,
+  dashboardsPath,
+} from 'views/Constants';
 import type { TimeRangeTypes } from 'views/logic/queries/Query';
 
 export const SECURITY_PATH = '/security';
@@ -49,6 +55,7 @@ const Routes = {
   STARTPAGE: '/',
   NOTFOUND: '/notfound',
   SEARCH: '/search',
+  SEARCH_SHOW: (id: string) => `/search/${id}`,
   STREAMS: '/streams',
   STREAM_NEW: '/streams/new',
   ALERTS: {
@@ -78,8 +85,12 @@ const Routes = {
     ACTIVITY: `${SECURITY_PATH}/activity`,
   },
   SOURCES: '/sources',
-  DASHBOARDS: '/dashboards',
-  DASHBOARD_NEW: '/dashboards/new',
+  DASHBOARDS: dashboardsPath,
+  DASHBOARD: {
+    NEW: newDashboardsPath,
+    SHOW: showDashboardsPath,
+    FULL_SCREEN: dashboardsTvPath,
+  },
   WELCOME: '/welcome',
   GLOBAL_API_BROWSER_URL: '/api/api-browser/global/index.html',
   SYSTEM: {
@@ -299,8 +310,6 @@ const Routes = {
     Routes._common_search_url(`${Routes.STREAMS}/${streamId}/search`, query, timeRange, resolution),
   stream_alerts: (streamId: string) => `/alerts/?stream_id=${streamId}`,
 
-  legacy_stream_search: (streamId: string) => `/streams/${streamId}/messages`,
-
   dashboard_show: (dashboardId: string) => `/dashboards/${dashboardId}`,
 
   show_saved_search: (searchId: string) => `/search/${searchId}`,
@@ -411,62 +420,9 @@ const qualifiedRoutes = qualifyUrls(Routes);
 
 const unqualified = Routes;
 
-/*
- * Global registry of plugin routes. Route names are generated automatically from the route path, by removing
- * any colons, replacing slashes with underscores, and making the string uppercase. Below there is an example of how
- * to access the routes.
- *
- * Plugin register example:
- * routes: [
- *           { path: '/system/pipelines', component: Foo },
- *           { path: '/system/pipelines/:pipelineId', component: Bar },
- * ]
- *
- * Using routes on plugin components:
- * <LinkContainer to={Routes.pluginRoutes('SYSTEM_PIPELINES')}>...</LinkContainer>
- * <LinkContainer to={Routes.pluginRoutes('SYSTEM_PIPELINES_PIPELINEID')(123)}>...</LinkContainer>
- *
- */
-const pluginRoute = (routeKey: string, throwError: boolean = true) => {
-  const pluginRoutes = {};
-
-  PluginStore.exports('routes').forEach((route) => {
-    const uri = new URI(route.path);
-    const segments = uri.segment();
-    const key = segments
-      .map((segment) => segment.replace(':', ''))
-      .join('_')
-      .toUpperCase();
-    const paramNames = segments.filter((segment) => segment.startsWith(':'));
-
-    if (paramNames.length > 0) {
-      pluginRoutes[key] = (...paramValues) => {
-        paramNames.forEach((param, idx) => {
-          const value = String(paramValues[idx]);
-
-          uri.segment(segments.indexOf(param), value);
-        });
-
-        return uri.pathname();
-      };
-
-      return;
-    }
-
-    pluginRoutes[key] = route.path;
-  });
-
-  const route = qualifyUrls(pluginRoutes)[routeKey];
-
-  if (!route && throwError) {
-    throw new Error(`Could not find plugin route '${routeKey}'.`);
-  }
-
-  return route;
+const defaultExport = {
+  ...qualifiedRoutes,
+  unqualified,
 };
 
-const getPluginRoute = (routeKey: string) => pluginRoute(routeKey, false);
-
-const defaultExport = Object.assign(qualifiedRoutes, { pluginRoute, getPluginRoute, unqualified });
-
 export default defaultExport;

graylog2-web-interface/src/views/Constants.ts

@@ -152,8 +152,8 @@ export const showSearchPath = `${searchPath}/:viewId`;
 
 export const dashboardsPath = '/dashboards';
 export const newDashboardsPath = `${dashboardsPath}/new`;
-export const dashboardsTvPath = `${dashboardsPath}/tv/:viewId`;
-export const showDashboardsPath = `${dashboardsPath}/:viewId`;
+export const dashboardsTvPath = (viewId: string = ':viewId') => `${dashboardsPath}/tv/${viewId}`;
+export const showDashboardsPath = (viewId: string = ':viewId') => `${dashboardsPath}/${viewId}`;
 
 export const extendedSearchPath = '/extendedsearch';
 

graylog2-web-interface/src/views/bindings.tsx

@@ -161,9 +161,9 @@ const exports: PluginExports = {
   },
   routes: [
     { path: newDashboardsPath, component: NewDashboardPage, parentComponent: App },
-    { path: dashboardsTvPath, component: ShowDashboardInBigDisplayMode, parentComponent: null },
+    { path: dashboardsTvPath(), component: ShowDashboardInBigDisplayMode, parentComponent: null },
     { path: dashboardsPath, component: DashboardsPage },
-    { path: showDashboardsPath, component: ShowViewPage, parentComponent: App },
+    { path: showDashboardsPath(), component: ShowViewPage, parentComponent: App },
 
     { path: newSearchPath, component: NewSearchRedirectPage, parentComponent: null },
     { path: showSearchPath, component: ShowViewPage, parentComponent: App },