/csi routes to /storage routes and a routeRedirector util

ui/app/components/global-search/control.js

@@ -202,7 +202,7 @@ export default class GlobalSearchControl extends Component {
         );
       });
     } else if (model.type === 'plugin') {
-      this.router.transitionTo('csi.plugins.plugin', model.id);
+      this.router.transitionTo('storage.plugins.plugin', model.id);
     } else if (model.type === 'allocation') {
       this.router.transitionTo('allocations.allocation', model.id);
     }

ui/app/controllers/csi/plugins/index.js → ui/app/controllers/storage/plugins/index.js

@@ -23,7 +23,7 @@ export default class IndexController extends Controller.extend(
   Searchable
 ) {
   @service userSettings;
-  @controller('csi/plugins') pluginsController;
+  @controller('storage/plugins') pluginsController;
 
   @alias('pluginsController.isForbidden') isForbidden;
 
@@ -65,7 +65,7 @@ export default class IndexController extends Controller.extend(
   @action
   gotoPlugin(plugin, event) {
     lazyClick([
-      () => this.transitionToRoute('csi.plugins.plugin', plugin.plainId),
+      () => this.transitionToRoute('storage.plugins.plugin', plugin.plainId),
       event,
     ]);
   }

ui/app/controllers/csi/plugins/plugin.js → ui/app/controllers/storage/plugins/plugin.js

@@ -15,11 +15,11 @@ export default class CsiPluginsPluginController extends Controller {
     return [
       {
         label: 'Plugins',
-        args: ['csi.plugins'],
+        args: ['storage.plugins'],
       },
       {
         label: plainId,
-        args: ['csi.plugins.plugin', plainId],
+        args: ['storage.plugins.plugin', plainId],
       },
     ];
   }

ui/app/controllers/csi/volumes/index.js → ui/app/controllers/storage/volumes/index.js

@@ -28,7 +28,7 @@ export default class IndexController extends Controller.extend(
   @service system;
   @service userSettings;
   @service keyboard;
-  @controller('csi/volumes') volumesController;
+  @controller('storage/volumes') volumesController;
 
   @alias('volumesController.isForbidden')
   isForbidden;
@@ -115,7 +115,7 @@ export default class IndexController extends Controller.extend(
     lazyClick([
       () =>
         this.transitionToRoute(
-          'csi.volumes.volume',
+          'storage.volumes.volume',
           volume.get('idWithNamespace')
         ),
       event,

ui/app/controllers/csi/volumes/volume.js → ui/app/controllers/storage/volumes/volume.js

@@ -31,12 +31,12 @@ export default class VolumeController extends Controller {
     return [
       {
         label: 'Volumes',
-        args: ['csi.volumes'],
+        args: ['storage.volumes'],
       },
       {
         label: volume.name,
         args: [
-          'csi.volumes.volume',
+          'storage.volumes.volume',
           volume.plainId,
           qpBuilder({
             volumeNamespace: volume.get('namespace.name') || 'default',

ui/app/router.js

@@ -60,7 +60,10 @@ Router.map(function () {
 
   this.route('topology');
 
-  this.route('csi', function () {
+  // Only serves as a redirect to storage
+  this.route('csi');
+
+  this.route('storage', function () {
     this.route('volumes', function () {
       this.route('volume', { path: '/:volume_name' });
     });

ui/app/routes/application.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+// @ts-check
+
 /* eslint-disable ember/no-controller-access-in-routes */
 import { inject as service } from '@ember/service';
 import { later, next } from '@ember/runloop';
@@ -11,6 +13,7 @@ import { AbortError } from '@ember-data/adapter/error';
 import RSVP from 'rsvp';
 import { action } from '@ember/object';
 import classic from 'ember-classic-decorator';
+import { handleRouteRedirects } from '../utils/route-redirector';
 
 @classic
 export default class ApplicationRoute extends Route {
@@ -33,6 +36,10 @@ export default class ApplicationRoute extends Route {
   }
 
   async beforeModel(transition) {
+    if (handleRouteRedirects(transition, this.router)) {
+      return;
+    }
+
     let promises;
 
     // service:router#transitionTo can cause this to rerun because of refreshModel on

ui/app/routes/csi/index.js → ui/app/routes/storage/index.js

@@ -7,6 +7,6 @@ import Route from '@ember/routing/route';
 
 export default class IndexRoute extends Route {
   redirect() {
-    this.transitionTo('csi.volumes');
+    this.transitionTo('storage.volumes');
   }
 }

ui/app/services/keyboard.js

@@ -105,7 +105,7 @@ export default class KeyboardService extends Service {
       },
       {
         label: 'Go to Storage',
-        action: () => this.router.transitionTo('csi.volumes'),
+        action: () => this.router.transitionTo('storage.volumes'),
         rebindable: true,
       },
       {

ui/app/templates/allocations/allocation/task/index.hbs

@@ -220,7 +220,7 @@
               <td data-test-volume-client-source>
                 {{#if row.model.isCSI}}
                   <LinkTo
-                    @route="csi.volumes.volume"
+                    @route="storage.volumes.volume"
                     @model={{concat
                     (format-volume-name
                       source=row.model.source

ui/app/templates/components/gutter-menu.hbs

@@ -68,7 +68,7 @@
         {{/if}}
         <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "r") }}>
           <LinkTo
-            @route="csi"
+            @route="storage"
             @activeClass="is-active"
             data-test-gutter-link="storage"
           >

ui/app/templates/components/plugin-subnav.hbs

@@ -5,7 +5,7 @@
 
 <div data-test-subnav="plugins" class="tabs is-subnav" {{did-insert this.keyboard.registerNav type="subnav"}} {{will-destroy this.keyboard.unregisterSubnav}}>
   <ul>
-    <li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{@plugin}} @activeClass="is-active">Overview</LinkTo></li>
-    <li data-test-tab="allocations"><LinkTo @route="csi.plugins.plugin.allocations" @model={{@plugin}} @activeClass="is-active">Allocations</LinkTo></li>
+    <li data-test-tab="overview"><LinkTo @route="storage.plugins.plugin.index" @model={{@plugin}} @activeClass="is-active">Overview</LinkTo></li>
+    <li data-test-tab="allocations"><LinkTo @route="storage.plugins.plugin.allocations" @model={{@plugin}} @activeClass="is-active">Allocations</LinkTo></li>
   </ul>
 </div>

ui/app/templates/components/storage-subnav.hbs

@@ -6,12 +6,12 @@
 <div class="tabs is-subnav" {{did-insert this.keyboard.registerNav type="subnav"}} {{will-destroy this.keyboard.unregisterSubnav}}>
   <ul>
     <li data-test-tab="volumes">
-      <LinkTo @route="csi.volumes.index" @activeClass="is-active">
+      <LinkTo @route="storage.volumes.index" @activeClass="is-active">
         Volumes
       </LinkTo>
     </li>
     <li data-test-tab="plugins">
-      <LinkTo @route="csi.plugins.index" @activeClass="is-active">
+      <LinkTo @route="storage.plugins.index" @activeClass="is-active">
         Plugins
       </LinkTo>
     </li>

ui/app/templates/components/task-row.hbs

@@ -47,7 +47,7 @@
         </strong>
         {{#if volume.isCSI}}
           <LinkTo
-            @route="csi.volumes.volume"
+            @route="storage.volumes.volume"
             @model={{concat
               (format-volume-name
                 source=volume.source
@@ -130,4 +130,4 @@
       </div>
     {{/if}}
   {{/if}}
-</td>
+</td>

ui/app/templates/jobs/job/task-group.hbs

@@ -332,10 +332,10 @@
                 {{#if row.model.isCSI}}
                   {{!-- if volume is per_alloc=true, there's no one specific volume. So, link to the volumes index with an active query --}}
                   {{#if row.model.perAlloc}}
-                    <LinkTo @route="csi.volumes.index" @query={{hash search=row.model.source}}>{{row.model.name}}</LinkTo>
+                    <LinkTo @route="storage.volumes.index" @query={{hash search=row.model.source}}>{{row.model.name}}</LinkTo>
                   {{else}}
                     <LinkTo
-                      @route="csi.volumes.volume"
+                      @route="storage.volumes.volume"
                       @model={{concat row.model.source "@" row.model.namespace.id}}
                     >
                       {{row.model.name}}

ui/app/templates/storage/plugins.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Breadcrumb @crumb={{hash label="Storage" args=(array "storage.index")}} />{{outlet}}

ui/app/templates/csi/plugins/index.hbs → ui/app/templates/storage/plugins/index.hbs

@@ -44,7 +44,7 @@
                   action=(action "gotoPlugin" row.model)
                 }}
               >
-                <LinkTo @route="csi.plugins.plugin" @model={{row.model.plainId}} class="is-primary">{{row.model.plainId}}</LinkTo>
+                <LinkTo @route="storage.plugins.plugin" @model={{row.model.plainId}} class="is-primary">{{row.model.plainId}}</LinkTo>
               </td>
               <td data-test-plugin-controller-health>
                 {{#if row.model.controllerRequired}}

ui/app/templates/csi/plugins/plugin/index.hbs → ui/app/templates/storage/plugins/plugin/index.hbs

@@ -129,7 +129,7 @@
         <div class="boxed-section-foot">
           <p class="pull-right">
           <LinkTo
-            @route="csi.plugins.plugin.allocations"
+            @route="storage.plugins.plugin.allocations"
             @model={{this.model}}
             @query={{hash qpType=(qp-serialize (array "controller"))}}
             data-test-go-to-controller-allocations>
@@ -180,7 +180,7 @@
       <div class="boxed-section-foot">
         <p class="pull-right">
         <LinkTo
-          @route="csi.plugins.plugin.allocations"
+          @route="storage.plugins.plugin.allocations"
           @model={{this.model}}
           @query={{hash qpType=(qp-serialize (array "node"))}}
           data-test-go-to-node-allocations>

ui/app/templates/storage/volumes.hbs

@@ -0,0 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Breadcrumb @crumb={{hash label="Storage" args=(array "storage.index")}} />{{outlet}}

ui/app/templates/csi/volumes/index.hbs → ui/app/templates/storage/volumes/index.hbs

@@ -84,7 +84,7 @@
             >
               <Tooltip @text={{row.model.plainId}}>
                 <LinkTo
-                  @route="csi.volumes.volume"
+                  @route="storage.volumes.volume"
                   @model={{row.model.idWithNamespace}}
                   class="is-primary"
                 >

ui/app/utils/route-redirector.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import routeRedirects from './route-redirects';
+
+export function handleRouteRedirects(transition, router) {
+  const currentPath = transition.intent.url || transition.targetName;
+
+  for (const redirect of routeRedirects) {
+    let shouldRedirect = false;
+    let targetPath =
+      typeof redirect.to === 'function'
+        ? redirect.to(currentPath)
+        : redirect.to;
+
+    switch (redirect.method) {
+      case 'startsWith':
+        shouldRedirect = currentPath.startsWith(redirect.from);
+        break;
+      case 'exact':
+        shouldRedirect = currentPath === redirect.from;
+        break;
+      case 'pattern':
+        if (redirect.pattern && redirect.pattern.test(currentPath)) {
+          shouldRedirect = true;
+        }
+        break;
+    }
+
+    if (shouldRedirect) {
+      console.warn(
+        `This URL has changed. Please update your bookmark from ${currentPath} to ${targetPath}`
+      );
+
+      router.replaceWith(targetPath, {
+        queryParams: transition.to.queryParams,
+      });
+      return true;
+    }
+  }
+}

ui/app/utils/route-redirects.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// This serves as a lit of routes in the UI that we change over time,
+// but still want to respect users' bookmarks and habits.
+
+/**
+ * @typedef {Object} RouteRedirect
+ * @property {string} from - The path to match against
+ * @property {(string|function(string): string)} to - Either a static path or a function to compute the new path
+ * @property {'startsWith'|'exact'|'pattern'} method - The matching strategy to use
+ * @property {RegExp} [pattern] - Optional regex pattern if method is 'pattern'
+ */
+export default [
+  {
+    from: '/csi/volumes/',
+    to: (path) => {
+      const volumeName = path.split('/csi/volumes/')[1];
+      return `/storage/volumes/${volumeName}`;
+    },
+    method: 'pattern',
+    pattern: /^\/csi\/volumes\/(.+)$/,
+  },
+  {
+    from: '/csi/volumes',
+    to: '/storage/volumes',
+    method: 'exact',
+  },
+  {
+    from: '/csi',
+    to: '/storage',
+    method: 'startsWith',
+  },
+];