From 1a2373d0b0c0fb6c90cec62af6db43e4d50d28d9 Mon Sep 17 00:00:00 2001
From: Nancy <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Fri, 20 Sep 2024 08:03:27 -0700
Subject: [PATCH] vue3 - fix detail page routing  (#11976)

* remove optional modifier from the cluster/product/resource/namespace/id route

* add e2e test for node detail page refresh
---
 cypress/e2e/po/pages/explorer/nodes.po.ts     |  7 ++++
 .../pages/explorer2/nodes/node-detail.spec.ts | 36 +++++++++++++++++++
 .../explorer2/{ => nodes}/node-list.spec.ts   |  2 +-
 shell/config/router/routes.js                 |  2 +-
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 cypress/e2e/tests/pages/explorer2/nodes/node-detail.spec.ts
 rename cypress/e2e/tests/pages/explorer2/{ => nodes}/node-list.spec.ts (98%)

diff --git a/cypress/e2e/po/pages/explorer/nodes.po.ts b/cypress/e2e/po/pages/explorer/nodes.po.ts
index e7b34fa7177..7ded3073a14 100644
--- a/cypress/e2e/po/pages/explorer/nodes.po.ts
+++ b/cypress/e2e/po/pages/explorer/nodes.po.ts
@@ -1,5 +1,6 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
 import NodesListPo from '@/cypress/e2e/po/lists/nodes-list.po';
+import ResourceTablePo from '@/cypress/e2e/po/components/resource-table.po';
 
 export class NodesPagePo extends PagePo {
   private static createPath(clusterId: string) {
@@ -17,4 +18,10 @@ export class NodesPagePo extends PagePo {
   nodesList(): NodesListPo {
     return new NodesListPo('[data-testid="sortable-table-list-container"]');
   }
+
+  goToDetailsPage(elemName: string) {
+    const resourceTable = new ResourceTablePo(this.self());
+
+    return resourceTable.sortableTable().detailsPageLinkWithName(elemName).click();
+  }
 }
diff --git a/cypress/e2e/tests/pages/explorer2/nodes/node-detail.spec.ts b/cypress/e2e/tests/pages/explorer2/nodes/node-detail.spec.ts
new file mode 100644
index 00000000000..18b7ecfc306
--- /dev/null
+++ b/cypress/e2e/tests/pages/explorer2/nodes/node-detail.spec.ts
@@ -0,0 +1,36 @@
+import ResourceTable from '@/cypress/e2e/po//components/resource-table.po';
+import ClusterDashboardPagePo from '@/cypress/e2e/po/pages/explorer/cluster-dashboard.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
+import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
+
+describe('Node detail', { tags: ['@explorer2', '@adminUser'], testIsolation: 'off' }, () => {
+  before(() => {
+    cy.login();
+    HomePagePo.goTo();
+  });
+
+  it('should still show the node detail view when the page is refreshed', () => {
+    ClusterDashboardPagePo.navTo();
+
+    const nav = new ProductNavPo();
+
+    nav.navToSideMenuEntryByLabel('Nodes');
+
+    cy.contains('.title > h1', 'Nodes').should('be.visible');
+
+    const nodeList = new ResourceTable('[data-testid="cluster-node-list"]');
+
+    nodeList.sortableTable().checkVisible();
+
+    // Wait for loading indicator to go
+    nodeList.sortableTable().checkLoadingIndicatorNotVisible();
+
+    nodeList.sortableTable().rowElementLink(0, 2).click();
+    cy.get('.title .primaryheader h1').should('be.visible');
+    cy.get('.title .primaryheader h1').invoke('text').should('contain', 'Node:');
+    cy.reload();
+    // check that the page rendered is a detail view
+    cy.get('.title .primaryheader h1').should('be.visible');
+    cy.get('.title .primaryheader h1').invoke('text').should('contain', 'Node:');
+  });
+});
diff --git a/cypress/e2e/tests/pages/explorer2/node-list.spec.ts b/cypress/e2e/tests/pages/explorer2/nodes/node-list.spec.ts
similarity index 98%
rename from cypress/e2e/tests/pages/explorer2/node-list.spec.ts
rename to cypress/e2e/tests/pages/explorer2/nodes/node-list.spec.ts
index d00bf2c8c0c..d770da8b360 100644
--- a/cypress/e2e/tests/pages/explorer2/node-list.spec.ts
+++ b/cypress/e2e/tests/pages/explorer2/nodes/node-list.spec.ts
@@ -38,7 +38,7 @@ describe('Nodes list', { tags: ['@explorer2', '@adminUser'], testIsolation: 'off
     // Wait for loading indicator to go
     nodeList.sortableTable().checkLoadingIndicatorNotVisible();
 
-    // Check table has 2 tows
+    // Check table has 2 rows
     cy.get<number>('@count').then((count) => {
       nodeList.sortableTable().rowElements({ timeout: 2500 }).should((rows: any) => {
         expect(rows).not.to.equal(undefined);
diff --git a/shell/config/router/routes.js b/shell/config/router/routes.js
index b7c9eb422dd..853d9255319 100644
--- a/shell/config/router/routes.js
+++ b/shell/config/router/routes.js
@@ -498,7 +498,7 @@ export default [
         component: () => interopDefault(import('@shell/pages/c/_cluster/_product/_resource/_id.vue')),
         name:      'c-cluster-product-resource-id'
       }, {
-        path:      '/c/:cluster/:product/:resource/:namespace/:id?',
+        path:      '/c/:cluster/:product/:resource/:namespace/:id',
         component: () => interopDefault(import('@shell/pages/c/_cluster/_product/_resource/_namespace/_id.vue')),
         name:      'c-cluster-product-resource-namespace-id'
       }]