backport of commit 76e39b1 (#24569)

Co-authored-by: Phil Renaud <[email protected]>

.changelog/24542.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix an issue where volumes weren't navigable
+```

ui/app/adapters/volume.js

@@ -8,6 +8,14 @@ import classic from 'ember-classic-decorator';
 
 @classic
 export default class VolumeAdapter extends WatchableNamespaceIDs {
+  // Over in serializers/volume.js, we prepend csi/ as part of the hash ID for request resolution reasons.
+  // However, this is not part of the actual ID stored in the database and we should treat it like a regular, unescaped
+  // path segment.
+  urlForFindRecord() {
+    let url = super.urlForFindRecord(...arguments);
+    return url.replace('csi%2F', 'csi/');
+  }
+
   queryParamsToAttrs = {
     type: 'type',
     plugin_id: 'plugin.id',

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

@@ -25,15 +25,13 @@ export default class VolumeController extends Controller {
 
   get breadcrumbs() {
     const volume = this.volume;
+    if (!volume) {
+      return [];
+    }
     return [
       {
         label: 'Volumes',
-        args: [
-          'csi.volumes',
-          qpBuilder({
-            volumeNamespace: volume.get('namespace.name') || 'default',
-          }),
-        ],
+        args: ['csi.volumes'],
       },
       {
         label: volume.name,

ui/app/helpers/lazy-click.js

@@ -14,7 +14,7 @@ import Helper from '@ember/component/helper';
  * that should be handled instead.
  */
 export function lazyClick([onClick, event]) {
-  if (!['a', 'button'].includes(event?.target.tagName.toLowerCase())) {
+  if (!['a', 'button'].includes(event?.target?.tagName.toLowerCase())) {
     onClick(event);
   }
 }

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

@@ -38,7 +38,12 @@
           </t.head>
           <t.body @key="model.id" as |row|>
             <tr class="is-interactive" data-test-plugin-row {{on "click" (action "gotoPlugin" row.model)}}>
-              <td data-test-plugin-id>
+              <td data-test-plugin-id
+                {{keyboard-shortcut
+                  enumerated=true
+                  action=(action "gotoPlugin" row.model)
+                }}
+              >
                 <LinkTo @route="csi.plugins.plugin" @model={{row.model.plainId}} class="is-primary">{{row.model.plainId}}</LinkTo>
               </td>
               <td data-test-plugin-controller-health>

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

@@ -77,7 +77,7 @@
             {{on "click" (action "gotoVolume" row.model)}}
           >
             <td data-test-volume-name
-              {{keyboard-shortcut 
+              {{keyboard-shortcut
                 enumerated=true
                 action=(action "gotoVolume" row.model)
               }}
@@ -180,4 +180,4 @@
       {{/if}}
     </div>
   {{/if}}
-</section>
+</section>

ui/mirage/config.js

@@ -667,13 +667,9 @@ export default function () {
   );
 
   this.get(
-    '/volume/:id',
+    '/volume/csi/:id',
     withBlockingSupport(function ({ csiVolumes }, { params, queryParams }) {
-      if (!params.id.startsWith('csi/')) {
-        return new Response(404, {}, null);
-      }
-
-      const id = params.id.replace(/^csi\//, '');
+      const { id } = params;
       const volume = csiVolumes.all().models.find((volume) => {
         const volumeIsDefault =
           !volume.namespaceId || volume.namespaceId === 'default';

ui/tests/unit/adapters/volume-test.js

@@ -87,9 +87,7 @@ module('Unit | Adapter | Volume', function (hooks) {
     await settled();
 
     assert.deepEqual(pretender.handledRequests.mapBy('url'), [
-      `/v1/volume/${encodeURIComponent(
-        volumeName
-      )}?namespace=${volumeNamespace}`,
+      `/v1/volume/${volumeName}?namespace=${volumeNamespace}`,
     ]);
   });