From 76e39b1c1ebe4663093da4e5735ac694d639e3a0 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Fri, 29 Nov 2024 16:14:17 -0500
Subject: [PATCH] [ui] Volumes and plugins navigation fixes, generally (#24542)

* Volumes and plugins navigation fixes, generally

* Mirage no longer has to take the csi/ string into account

* Volume adapter test fix
---
 .changelog/24542.txt                     |  3 +++
 ui/app/adapters/volume.js                |  8 ++++++++
 ui/app/controllers/csi/volumes/volume.js | 10 ++++------
 ui/app/helpers/lazy-click.js             |  2 +-
 ui/app/templates/csi/plugins/index.hbs   |  7 ++++++-
 ui/app/templates/csi/volumes/index.hbs   |  4 ++--
 ui/mirage/config.js                      |  8 ++------
 ui/tests/unit/adapters/volume-test.js    |  4 +---
 8 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 .changelog/24542.txt

diff --git a/.changelog/24542.txt b/.changelog/24542.txt
new file mode 100644
index 00000000000..48c451928d8
--- /dev/null
+++ b/.changelog/24542.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix an issue where volumes weren't navigable
+```
diff --git a/ui/app/adapters/volume.js b/ui/app/adapters/volume.js
index e8f2f59de8b..489967ed5d4 100644
--- a/ui/app/adapters/volume.js
+++ b/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',
diff --git a/ui/app/controllers/csi/volumes/volume.js b/ui/app/controllers/csi/volumes/volume.js
index 29a92cc61dd..74fb18ed9eb 100644
--- a/ui/app/controllers/csi/volumes/volume.js
+++ b/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,
diff --git a/ui/app/helpers/lazy-click.js b/ui/app/helpers/lazy-click.js
index 4e182620de7..1d55877d2b3 100644
--- a/ui/app/helpers/lazy-click.js
+++ b/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);
   }
 }
diff --git a/ui/app/templates/csi/plugins/index.hbs b/ui/app/templates/csi/plugins/index.hbs
index fcc1f836754..082b41a5133 100644
--- a/ui/app/templates/csi/plugins/index.hbs
+++ b/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>
diff --git a/ui/app/templates/csi/volumes/index.hbs b/ui/app/templates/csi/volumes/index.hbs
index 3d73ff0b431..bb50661d2a5 100644
--- a/ui/app/templates/csi/volumes/index.hbs
+++ b/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>
\ No newline at end of file
+</section>
diff --git a/ui/mirage/config.js b/ui/mirage/config.js
index 0e780ae612f..3d3a9f001b5 100644
--- a/ui/mirage/config.js
+++ b/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';
diff --git a/ui/tests/unit/adapters/volume-test.js b/ui/tests/unit/adapters/volume-test.js
index eaf2d32bb41..118a1a2b653 100644
--- a/ui/tests/unit/adapters/volume-test.js
+++ b/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}`,
     ]);
   });