Improve Performance of many helm chart based pages

cypress/e2e/po/lists/chart-repositories.po.ts

@@ -19,4 +19,9 @@ export default class ChartRepositoriesListPo extends BaseResourceList {
   details(name: string, index: number) {
     return this.resourceTable().sortableTable().rowWithName(name).column(index);
   }
+
+  refreshRepo(repoName: string) {
+    return this.resourceTable().sortableTable().rowActionMenuOpen(repoName).getMenuItem('Refresh')
+      .click();
+  }
 }

cypress/e2e/po/pages/chart-repositories.po.ts

@@ -20,12 +20,22 @@ export default class ChartRepositoriesPagePo extends PagePo {
     super(ChartRepositoriesPagePo.createPath(clusterId, product));
   }
 
-  static navTo() {
+  static navTo(clusterId = '_', product: 'apps' | 'manager' = 'manager') {
     const sideNav = new ProductNavPo();
 
-    BurgerMenuPo.burgerMenuNavToMenubyLabel('Cluster Management');
-    sideNav.groups().contains('Advanced').click();
-    sideNav.navToSideMenuEntryByLabel('Repositories');
+    if (product === 'apps') {
+      const burgerMenu = new BurgerMenuPo();
+      const sideNav = new ProductNavPo();
+
+      BurgerMenuPo.toggle();
+      burgerMenu.clusters().contains(clusterId).click();
+      sideNav.navToSideMenuGroupByLabel('Apps');
+      sideNav.navToSideMenuEntryByLabel('Repositories');
+    } else {
+      BurgerMenuPo.burgerMenuNavToMenubyLabel('Cluster Management');
+      sideNav.groups().contains('Advanced').click();
+      sideNav.navToSideMenuEntryByLabel('Repositories');
+    }
   }
 
   createEditRepositories(repoName? : string): ChartRepositoriesCreateEditPo {

cypress/e2e/po/pages/explorer/charts/chart.po.ts

@@ -1,6 +1,6 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
 import AsyncButtonPo from '@/cypress/e2e/po/components/async-button.po';
-import { ChartsPage } from '~/cypress/e2e/po/pages/explorer/charts/charts.po';
+import { ChartsPage } from '@/cypress/e2e/po/pages/explorer/charts/charts.po';
 
 export class ChartPage extends PagePo {
   private static createPath(clusterId: string) {

cypress/e2e/po/pages/explorer/charts/charts.po.ts

@@ -47,7 +47,7 @@ export class ChartsPage extends PagePo {
   }
 
   selectChart(name: string) {
-    cy.get('.grid .name').contains(name).click();
+    return cy.get('.grid .name').contains(name).click();
   }
 
   bannerContent() {

cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts

@@ -1,58 +1,124 @@
 import ReposListPagePo from '@/cypress/e2e/po/pages/chart-repositories.po';
 import AppClusterRepoEditPo from '@/cypress/e2e/po/edit/catalog.cattle.io.clusterrepo.po';
+import { ChartPage } from '@/cypress/e2e/po/pages/explorer/charts/chart.po';
+import { ChartsPage } from '@/cypress/e2e/po/pages/explorer/charts/charts.po';
 
-describe('Apps/Repositories', { tags: ['@explorer', '@adminUser'] }, () => {
-  before(() => {
-    cy.login();
+describe('Apps', () => {
+  describe('Repositories', { tags: ['@explorer', '@adminUser'] }, () => {
+    describe('Add', () => {
+      before(() => {
+        cy.login();
 
-    const appRepoList = new ReposListPagePo('local', 'apps');
+        const appRepoList = new ReposListPagePo('local', 'apps');
 
-    appRepoList.goTo();
-    appRepoList.waitForPage();
-  });
+        appRepoList.goTo();
+        appRepoList.waitForPage();
+      });
+
+      it('Should reset input values when switching from Helm index URL to Git Repo and vice versa', () => {
+        const appRepoList = new ReposListPagePo('local', 'apps');
+
+        // create a new cluster repo
+        appRepoList.create();
+
+        const appRepoCreate = new AppClusterRepoEditPo('local', 'create');
+
+        appRepoCreate.waitForPage();
+
+        const helmIndexUrl = 'https://charts.rancher.io';
+        const gitRepoName = 'https://github.com/rancher/ui-plugin-examples';
+        const gitRepoBranchName = 'test-branch';
+
+        appRepoCreate.nameNsDescription().name().self().scrollIntoView()
+          .should('be.visible');
+        // fill the helm index url form
+        appRepoCreate.enterHelmIndexURL(helmIndexUrl);
+        // make sure the value is set
+        appRepoCreate.helmIndexUrl().should('eq', helmIndexUrl);
+        // select git repo option
+        appRepoCreate.selectRadioOptionGitRepo(1);
+        // switch back to helm index url option
+        appRepoCreate.selectRadioOptionGitRepo(0);
+        // test helm index value is empty
+        appRepoCreate.helmIndexUrl().should('be.empty');
+
+        // select Git repo option
+        appRepoCreate.selectRadioOptionGitRepo(1);
+        // fill the git repo form
+        appRepoCreate.enterGitRepoName(gitRepoName);
+        appRepoCreate.enterGitBranchName(gitRepoBranchName);
+        // make sure the values are set
+        appRepoCreate.gitRepoName().should('eq', gitRepoName);
+        appRepoCreate.gitRepoBranchName().should('eq', gitRepoBranchName);
+        // select helm index url option
+        appRepoCreate.selectRadioOptionGitRepo(0);
+        // switch back to git repo option
+        appRepoCreate.selectRadioOptionGitRepo(1);
+        // test git repo value is empty
+        appRepoCreate.gitRepoName().should('be.empty');
+        // test git repo branch value is empty
+        appRepoCreate.gitRepoBranchName().should('be.empty');
+      });
+    });
+
+    describe('Refresh', () => {
+      const chartPage = new ChartPage();
+      const clusterId = 'local';
+      const appRepoList = new ReposListPagePo(clusterId, 'apps');
+      const chartsPage = new ChartsPage(clusterId);
+
+      before(() => {
+        cy.login();
+
+        appRepoList.goTo();
+        appRepoList.waitForPage();
+      });
+
+      it('Repo Refresh results in correct api requests', () => {
+        // Root request to the Rancher helm chart repo
+        cy.intercept('GET', '/v1/catalog.cattle.io.clusterrepos/rancher-charts?*').as('rancherCharts1');
+
+        // Nav to a summary page for a specific chart
+        ChartsPage.navTo(clusterId);
+        chartsPage.chartsFilterReposSelect().toggle();
+        chartsPage.chartsFilterReposSelect().clickOptionWithLabelForChartReposFilter('All');
+
+        chartsPage.selectChart('Rancher Backups');
+        chartPage.waitForPage();
+
+        // The repo charts should have been fetched
+        cy.wait('@rancherCharts1').its('request.url').should('include', 'link=index');
+        // The specific version of the chart should be fetched
+        cy.wait('@rancherCharts1').its('request.url').should('include', 'version=');
+
+        // Nav to any other page
+        ReposListPagePo.navTo(clusterId, 'apps');
+        appRepoList.waitForPage();
+
+        // Nav back to the summary page for a specific chart
+        cy.intercept('GET', '/v1/catalog.cattle.io.clusterrepos/rancher-charts?*', cy.spy().as('rancherCharts2'));
+        ChartPage.navTo(clusterId, 'Rancher Backups');
+        chartPage.waitForPage('repo-type=cluster&repo=rancher-charts&chart=rancher-backup');
+        // The specific version of the chart (and any other) should NOT be fetched
+        cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.get('@rancherCharts2').should('not.have.been.called');
+
+        // Nav to the helm chart repo page
+        ReposListPagePo.navTo(clusterId, 'apps');
+        appRepoList.waitForPage();
+
+        // Refresh the Rancher repo (clears caches)
+        cy.intercept('GET', '/v1/catalog.cattle.io.clusterrepos/rancher-charts?*').as('rancherCharts3');
+        appRepoList.list().refreshRepo('Rancher');
+        // The charts should immediately update
+        cy.wait('@rancherCharts3').its('request.url').should('include', '?link=index');
 
-  it('Should reset input values when switching from Helm index URL to Git Repo and vice versa', () => {
-    const appRepoList = new ReposListPagePo('local', 'apps');
-
-    // create a new cluster repo
-    appRepoList.create();
-
-    const appRepoCreate = new AppClusterRepoEditPo('local', 'create');
-
-    appRepoCreate.waitForPage();
-
-    const helmIndexUrl = 'https://charts.rancher.io';
-    const gitRepoName = 'https://github.com/rancher/ui-plugin-examples';
-    const gitRepoBranchName = 'test-branch';
-
-    appRepoCreate.nameNsDescription().name().self().scrollIntoView()
-      .should('be.visible');
-    // fill the helm index url form
-    appRepoCreate.enterHelmIndexURL(helmIndexUrl);
-    // make sure the value is set
-    appRepoCreate.helmIndexUrl().should('eq', helmIndexUrl);
-    // select git repo option
-    appRepoCreate.selectRadioOptionGitRepo(1);
-    // switch back to helm index url option
-    appRepoCreate.selectRadioOptionGitRepo(0);
-    // test helm index value is empty
-    appRepoCreate.helmIndexUrl().should('be.empty');
-
-    // select Git repo option
-    appRepoCreate.selectRadioOptionGitRepo(1);
-    // fill the git repo form
-    appRepoCreate.enterGitRepoName(gitRepoName);
-    appRepoCreate.enterGitBranchName(gitRepoBranchName);
-    // make sure the values are set
-    appRepoCreate.gitRepoName().should('eq', gitRepoName);
-    appRepoCreate.gitRepoBranchName().should('eq', gitRepoBranchName);
-    // select helm index url option
-    appRepoCreate.selectRadioOptionGitRepo(0);
-    // switch back to git repo option
-    appRepoCreate.selectRadioOptionGitRepo(1);
-    // test git repo value is empty
-    appRepoCreate.gitRepoName().should('be.empty');
-    // test git repo branch value is empty
-    appRepoCreate.gitRepoBranchName().should('be.empty');
+        // Nav to the summary page for a specific chart
+        ChartPage.navTo(clusterId, 'Rancher Backups');
+        chartPage.waitForPage('repo-type=cluster&repo=rancher-charts&chart=rancher-backup');
+        // The specific version of the chart should be fetched (as the cache was cleared)
+        cy.wait('@rancherCharts3').its('request.url').should('include', 'version=');
+      });
+    });
   });
 });

shell/detail/catalog.cattle.io.app.vue

@@ -30,7 +30,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load', { force: true, reset: true });
+    await this.$store.dispatch('catalog/load');
 
     this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
   },

shell/mixins/chart.js

@@ -256,7 +256,7 @@ export default {
 
   methods: {
     async fetchChart() {
-      await this.$store.dispatch('catalog/load', { force: true, reset: true }); // not the problem
+      await this.$store.dispatch('catalog/load'); // not the problem
 
       if ( this.query.appNamespace && this.query.appName ) {
         // First check the URL query for an app name and namespace.

shell/pages/c/_cluster/apps/charts/index.vue

@@ -37,7 +37,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load', { force: true, reset: true });
+    await this.$store.dispatch('catalog/load');
 
     const query = this.$route.query;