From dce0e8efba99d3fa4905c7dc9a6bf8c25ad5b0ab Mon Sep 17 00:00:00 2001 From: Mo Mesgin Date: Mon, 4 Nov 2024 15:37:06 -0800 Subject: [PATCH 1/2] add formatting to cluster repos branch names --- .../formatter/ClusterRepoBranch.vue | 29 +++++++++++++++++++ .../__tests__/ClusterRepoBranch.test.ts | 24 +++++++++++++++ shell/config/product/apps.js | 11 ++++++- 3 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 shell/components/formatter/ClusterRepoBranch.vue create mode 100644 shell/components/formatter/__tests__/ClusterRepoBranch.test.ts diff --git a/shell/components/formatter/ClusterRepoBranch.vue b/shell/components/formatter/ClusterRepoBranch.vue new file mode 100644 index 00000000000..67560fceb22 --- /dev/null +++ b/shell/components/formatter/ClusterRepoBranch.vue @@ -0,0 +1,29 @@ + + + diff --git a/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts b/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts new file mode 100644 index 00000000000..0e61f9da542 --- /dev/null +++ b/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts @@ -0,0 +1,24 @@ +import { mount } from '@vue/test-utils'; +import ClusterRepoBranch from '@shell/components/formatter/ClusterRepoBranch.vue'; + +const notApplicableTranslationKey = '%generic.na%'; + +describe('component: ClusterRepoBranch', () => { + it.each([ + [{ isOciType: false, spec: { url: 'https://git.rancher.io/charts', gitBranch: 'dev-v2.10' } }, 'dev-v2.10'], + [{ isOciType: false, spec: { url: 'https://git.rancher.io/charts', gitBranch: 'main' } }, 'main'], + [{ isOciType: false, spec: { url: '', gitBranch: 'main' } }, 'main'], + [{ isOciType: false, spec: { url: '', gitBranch: '' } }, '—'], + [{ isOciType: false, spec: { url: '' } }, '—'], + [{ isOciType: true, spec: { url: 'oci://' } }, notApplicableTranslationKey], + [{ isOciType: true, spec: { url: 'oci://', gitBranch: 'main' } }, notApplicableTranslationKey], + [{ isOciType: true, spec: { url: '' } }, notApplicableTranslationKey], + [{ }, '—'], + [undefined, '—'], + ])('should display correct branch', async(clusterRepo, expectedBranchTextToShow) => { + const wrapper = await mount(ClusterRepoBranch, { props: { value: clusterRepo, col: { dashIfEmpty: true } } }); + const element = wrapper.find('span'); + + expect(element.text()).toBe(expectedBranchTextToShow); + }); +}); diff --git a/shell/config/product/apps.js b/shell/config/product/apps.js index 5aa56a13650..92e75be4240 100644 --- a/shell/config/product/apps.js +++ b/shell/config/product/apps.js @@ -75,9 +75,18 @@ export function init(store) { dashIfEmpty: true, }; + const clusterRepoBranch = { + name: 'branch', + labelKey: 'tableHeaders.branch', + sort: 'spec.gitBranch', + getValue: (row) => row, + formatter: 'ClusterRepoBranch', + dashIfEmpty: true, + }; + headers(CATALOG.APP, [STATE, NAME_COL, NAMESPACE, CHART, CHART_UPGRADE, APP_SUMMARY, AGE]); headers(CATALOG.REPO, [STATE, NAME_COL, NAMESPACE, repoType, repoUrl, repoBranch, AGE]); - headers(CATALOG.CLUSTER_REPO, [STATE, NAME_COL, repoType, repoUrl, repoBranch, AGE]); + headers(CATALOG.CLUSTER_REPO, [STATE, NAME_COL, repoType, repoUrl, clusterRepoBranch, AGE]); headers(CATALOG.OPERATION, [ STATE, NAME_COL, From a7d09a2aa87baca82a5b1b266ab259764d2f1944 Mon Sep 17 00:00:00 2001 From: Mo Mesgin Date: Fri, 15 Nov 2024 10:02:37 -0800 Subject: [PATCH 2/2] replace formatter with a condition inside getValue --- .../tests/pages/manager/repositories.spec.ts | 4 +++ .../formatter/ClusterRepoBranch.vue | 29 ------------------- .../__tests__/ClusterRepoBranch.test.ts | 24 --------------- shell/config/product/apps.js | 3 +- 4 files changed, 5 insertions(+), 55 deletions(-) delete mode 100644 shell/components/formatter/ClusterRepoBranch.vue delete mode 100644 shell/components/formatter/__tests__/ClusterRepoBranch.test.ts diff --git a/cypress/e2e/tests/pages/manager/repositories.spec.ts b/cypress/e2e/tests/pages/manager/repositories.spec.ts index 5ef408325aa..614e92efe56 100644 --- a/cypress/e2e/tests/pages/manager/repositories.spec.ts +++ b/cypress/e2e/tests/pages/manager/repositories.spec.ts @@ -237,6 +237,10 @@ describe('Cluster Management Helm Repositories', { testIsolation: 'off', tags: [ // check list details repositoriesPage.list().details(this.repoName, 2).should('be.visible'); + // check branch column to display 'n/a' for OCI type + repositoriesPage.list().details(this.repoName, 5).then((el) => { + expect(el.text()).to.equal('n/a'); + }); repositoriesPage.list().actionMenu(this.repoName).getMenuItem('Delete').click(); diff --git a/shell/components/formatter/ClusterRepoBranch.vue b/shell/components/formatter/ClusterRepoBranch.vue deleted file mode 100644 index 67560fceb22..00000000000 --- a/shell/components/formatter/ClusterRepoBranch.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts b/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts deleted file mode 100644 index 0e61f9da542..00000000000 --- a/shell/components/formatter/__tests__/ClusterRepoBranch.test.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { mount } from '@vue/test-utils'; -import ClusterRepoBranch from '@shell/components/formatter/ClusterRepoBranch.vue'; - -const notApplicableTranslationKey = '%generic.na%'; - -describe('component: ClusterRepoBranch', () => { - it.each([ - [{ isOciType: false, spec: { url: 'https://git.rancher.io/charts', gitBranch: 'dev-v2.10' } }, 'dev-v2.10'], - [{ isOciType: false, spec: { url: 'https://git.rancher.io/charts', gitBranch: 'main' } }, 'main'], - [{ isOciType: false, spec: { url: '', gitBranch: 'main' } }, 'main'], - [{ isOciType: false, spec: { url: '', gitBranch: '' } }, '—'], - [{ isOciType: false, spec: { url: '' } }, '—'], - [{ isOciType: true, spec: { url: 'oci://' } }, notApplicableTranslationKey], - [{ isOciType: true, spec: { url: 'oci://', gitBranch: 'main' } }, notApplicableTranslationKey], - [{ isOciType: true, spec: { url: '' } }, notApplicableTranslationKey], - [{ }, '—'], - [undefined, '—'], - ])('should display correct branch', async(clusterRepo, expectedBranchTextToShow) => { - const wrapper = await mount(ClusterRepoBranch, { props: { value: clusterRepo, col: { dashIfEmpty: true } } }); - const element = wrapper.find('span'); - - expect(element.text()).toBe(expectedBranchTextToShow); - }); -}); diff --git a/shell/config/product/apps.js b/shell/config/product/apps.js index 92e75be4240..77493ed5f24 100644 --- a/shell/config/product/apps.js +++ b/shell/config/product/apps.js @@ -79,8 +79,7 @@ export function init(store) { name: 'branch', labelKey: 'tableHeaders.branch', sort: 'spec.gitBranch', - getValue: (row) => row, - formatter: 'ClusterRepoBranch', + getValue: (row) => row?.isOciType ? store.getters['i18n/t']('generic.na') : row?.spec?.gitBranch || undefined, dashIfEmpty: true, };