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

@@ -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();
+  }
 }

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:');
+  });
+});

cypress/e2e/tests/pages/explorer2/node-list.spec.ts → 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);

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'
       }]