@rancher/shell 0.3.29 → 0.5.0

package/components/fleet/FleetSummary.vue

@@ -1,5 +1,4 @@
 <script>
-import capitalize from 'lodash/capitalize';
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
@@ -85,7 +84,7 @@ export default {
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.metadata.name.startsWith(`${ this.repoName }-`));
+      const resources = this.bundles.filter((item) => item.repoName === this.repoName);
 
       if (!resources.length) {
         return [];
@@ -179,7 +178,6 @@ export default {
 
   },
 
-  methods: { capitalize },
 };
 </script>
 
@@ -190,11 +188,13 @@ export default {
       title="Bundles"
       :values="bundleCounts"
       value-key="count"
+      data-testid="gitrepo-bundle-summary"
     />
     <FleetStatus
       title="Resources"
       :values="resourceCounts"
       value-key="count"
+      data-testid="gitrepo-deployment-summary"
     />
   </div>
 </template>

package/components/fleet/__tests__/FleetSummary.test.ts

@@ -0,0 +1,316 @@
+import { mount } from '@vue/test-utils';
+import FleetSummary from '@shell/components/fleet/FleetSummary.vue';
+
+const REPO_NAME = 'testrepo';
+
+const REPO_NAME_VARIANT = 'testrepo-again';
+
+const CLUSTER_NAME = 'testcluster';
+
+const mockedBundlesInRepo = [{
+  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME
+    },
+
+    name:      `${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: configmap-test\n  annotations:\n    {}\n#    key: string\n  labels:\n    {}\n#    key: string\ndata:\n  key1: val1\n  key2: val2\n  key3: val3',
+        name:    'test-configmap.yaml'
+      }
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+},
+{
+  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME
+    },
+
+    name:      `${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: nginx-cluster0\n  labels:\n    app: nginx\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      app: nginx\n  template:\n    metadata:\n      labels:\n        app: nginx\n    spec:\n      containers:\n      - name: nginx\n        image: nginx:latest\n        ports:\n        - containerPort: 80',
+        name:    'nginx.yml'
+      },
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+}];
+
+const mockedBundlesOutOfRepo = [{
+  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME_VARIANT,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
+    },
+
+    name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: configmap-test\n  annotations:\n    {}\n#    key: string\n  labels:\n    {}\n#    key: string\ndata:\n  key1: val1\n  key2: val2\n  key3: val3',
+        name:    'test-configmap.yaml'
+      }
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+},
+{
+  id:         `fleet-default/${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME_VARIANT,
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
+    },
+
+    name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: nginx-cluster0\n  labels:\n    app: nginx\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      app: nginx\n  template:\n    metadata:\n      labels:\n        app: nginx\n    spec:\n      containers:\n      - name: nginx\n        image: nginx:latest\n        ports:\n        - containerPort: 80',
+        name:    'nginx.yml'
+      },
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+}];
+
+const mockRepo = {
+  id:         `fleet-default/${ REPO_NAME }`,
+  type:       'fleet.cattle.io.gitrepo',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'GitRepo',
+  metadata:   {
+
+    name:      `${ REPO_NAME }`,
+    namespace: 'fleet-default',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    branch:                'main',
+    correctDrift:          { enabled: false },
+    forceSyncGeneration:   2,
+    insecureSkipTLSVerify: false,
+    paths:                 [
+      './cluster0'
+    ],
+    repo:            'https://github.com/testuser/testrepo.git',
+    targetNamespace: 'custom-namespace-name',
+    targets:         [
+      { clusterName: `${ CLUSTER_NAME }` }
+    ]
+  },
+  status: {
+    commit:     '3640888439d1b7b6a53dbeee291a533eea2632ab',
+    conditions: [
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:06:27Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Ready'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T20:35:07Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Accepted'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:05:09Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'ImageSynced'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:06:22Z',
+        status:         'False',
+        transitioning:  false,
+        type:           'Reconciling'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T18:05:09Z',
+        status:         'False',
+        transitioning:  false,
+        type:           'Stalled'
+      },
+      {
+        error:          false,
+        lastUpdateTime: '2023-10-05T20:35:07Z',
+        status:         'True',
+        transitioning:  false,
+        type:           'Synced'
+      }
+    ],
+    desiredReadyClusters:    1,
+    display:                 { readyBundleDeployments: '2/2' },
+    gitJobStatus:            'Current',
+    lastSyncedImageScanTime: null,
+    observedGeneration:      2,
+    readyClusters:           1,
+    resourceCounts:          {
+      desiredReady: 2,
+      missing:      0,
+      modified:     0,
+      notReady:     0,
+      orphaned:     0,
+      ready:        2,
+      unknown:      0,
+      waitApplied:  0
+    },
+    resources: [
+      {
+        apiVersion: 'apps/v1',
+        id:         'custom-namespace-name/nginx-cluster0',
+        kind:       'Deployment',
+        name:       'nginx-cluster0',
+        namespace:  'custom-namespace-name',
+        state:      'Ready',
+        type:       'apps.deployment'
+      },
+      {
+        apiVersion: 'v1',
+        id:         'custom-namespace-name/configmap-test',
+        kind:       'ConfigMap',
+        name:       'configmap-test',
+        namespace:  'custom-namespace-name',
+        state:      'Ready',
+        type:       'configmap'
+      }
+    ],
+    summary: {
+      desiredReady: 1,
+      ready:        1
+    }
+  }
+};
+
+const mockStore = { getters: { 'i18n/withFallback': (key, opt, fallback) => fallback } };
+
+describe('component: FleetSummary', () => {
+  it.each([
+    [[...mockedBundlesInRepo, ...mockedBundlesOutOfRepo], '2'],
+    [mockedBundlesInRepo, '2'],
+  ])('displays the number of bundles associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
+    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+
+    const bundleCountEl = wrapper.find('[data-testid="gitrepo-bundle-summary"] .count');
+
+    expect(bundleCountEl.text()).toBe(bundleCount);
+  });
+
+  it.each([
+    [[...mockedBundlesInRepo, ...mockedBundlesOutOfRepo], '2'],
+    [mockedBundlesInRepo, '2'],
+
+  ])('displays the number of deployments associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
+    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+
+    const bundleCountEl = wrapper.find('[data-testid="gitrepo-deployment-summary"] .count');
+
+    expect(bundleCountEl.text()).toBe(bundleCount);
+  });
+});

package/components/form/ArrayListSelect.vue

@@ -24,6 +24,10 @@ export default {
     loading: {
       type:    Boolean,
       default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: true
     }
   },
   computed: {
@@ -34,6 +38,10 @@ export default {
 
     addAllowed() {
       return this.filteredOptions.length > 0;
+    },
+
+    defaultAddValue() {
+      return this.options[0]?.value;
     }
   },
 
@@ -62,6 +70,8 @@ export default {
     class="array-list-select"
     :add-allowed="addAllowed || loading"
     :loading="loading"
+    :defaultAddValue="defaultAddValue"
+    :disabled="disabled"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">

package/components/form/Error.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import Banner from '@components/Banner/Banner.vue';
 
-type Rule = (v?: string) => undefined | string;
+type Rule = (v?: string | number | Record<string, any> | unknown[]) => undefined | string;
 
-export default Vue.extend<any, any, any, any>({
+export default defineComponent({
   components: { Banner },
   props:      {
     value: {

package/components/form/Footer.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
-export default Vue.extend({
+export default defineComponent({
   components: { AsyncButton, Banner },
 
   props: {

package/components/form/GitPicker.vue

@@ -1,12 +1,13 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, inject } from 'vue';
 import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { GitUtils } from '../../utils/git';
+import { GitUtils, Commit } from '@shell/utils/git';
+import type { DebouncedFunc } from 'lodash';
 
 interface commit {
   [key: string]: any,
@@ -17,21 +18,45 @@ interface Data {
     repo: boolean,
     branch: boolean,
     commits: boolean,
+    branches?: unknown,
   },
 
   repos: object[],
   branches: object[],
   commits: commit[],
 
-  selectedAccOrOrg: string| null,
-  selectedRepo: object| null,
-  selectedBranch: object| null,
-  selectedCommit: object | null,
+  selectedAccOrOrg: string | undefined,
+  selectedRepo: object | undefined,
+  selectedBranch: object | undefined,
+  selectedCommit: Commit | null,
 }
 
-const debounceTime = 1000;
+interface CommitHeader {
+  name: string;
+  label: string;
+  width?: number;
+  formatter?: string;
+  formatterOpts?: { [key: string]: any };
+  value?: string | string[];
+  sort?: string | string[];
+  defaultSort?: boolean;
+}
+
+interface NonReactiveProps {
+  onSearchRepo: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  onSearchBranch: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  debounceTime: number;
+}
+
+const debounceTime = 1_000;
 
-export default Vue.extend<Data, any, any, any>({
+const provideProps: NonReactiveProps = {
+  onSearchRepo:   undefined,
+  onSearchBranch: undefined,
+  debounceTime,
+};
+
+export default defineComponent({
 
   components: {
     LabeledSelect,
@@ -52,10 +77,20 @@ export default Vue.extend<Data, any, any, any>({
     }
   },
 
-  data() {
+  setup() {
+    const onSearchRepo = inject('onSearchRepo', provideProps.onSearchRepo);
+    const onSearchBranch = inject('onSearchBranch', provideProps.onSearchBranch);
+    const debounceTime = inject('debounceTime', provideProps.debounceTime);
+
     return {
+      onSearchRepo,
+      onSearchBranch,
       debounceTime,
+    };
+  },
 
+  data(): Data {
+    return {
       hasError: {
         repo:    false,
         branch:  false,
@@ -66,10 +101,10 @@ export default Vue.extend<Data, any, any, any>({
       branches: [],
       commits:  [] as commit[],
 
-      selectedAccOrOrg: null,
-      selectedRepo:     null,
-      selectedBranch:   null,
-      selectedCommit:   {},
+      selectedAccOrOrg: undefined,
+      selectedRepo:     undefined,
+      selectedBranch:   undefined,
+      selectedCommit:   null,
     };
   },
 
@@ -95,13 +130,14 @@ export default Vue.extend<Data, any, any, any>({
   },
 
   computed: {
-    commitHeaders() {
+    commitHeaders(): CommitHeader[] {
       return [
         {
           name:  'index',
           label: this.t(`gitPicker.${ this.type }.tableHeaders.choose.label`),
           width: 60,
-        }, {
+        },
+        {
           name:          'sha',
           label:         this.t(`gitPicker.${ this.type }.tableHeaders.sha.label`),
           width:         90,
@@ -134,17 +170,20 @@ export default Vue.extend<Data, any, any, any>({
       ];
     },
 
-    preparedRepos() {
+    preparedRepos(): unknown {
       return this.normalizeArray(this.repos, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedBranches() {
+    preparedBranches(): unknown {
       return this.normalizeArray(this.branches, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedCommits() {
-      return this.normalizeArray(this.commits, (c: any) => GitUtils[this.type].normalize.commit(c));
+    preparedCommits(): Commit[] {
+      return this.normalizeArray(this.commits, (c) => GitUtils[this.type].normalize.commit(c));
     },
+    selectedCommitId(): string | undefined {
+      return this.selectedCommit?.commitId;
+    }
   },
 
   methods: {
@@ -164,10 +203,10 @@ export default Vue.extend<Data, any, any, any>({
 
     reset() {
       this.repos = [];
-      this.selectedAccOrOrg = null;
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedAccOrOrg = undefined;
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
     },
@@ -217,13 +256,13 @@ export default Vue.extend<Data, any, any, any>({
 
     async fetchRepos() {
       this.repos = [];
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
-      if (this.selectedAccOrOrg.length) {
+      if (this.selectedAccOrOrg?.length) {
         try {
           const res = await this.$store.dispatch(`${ this.type }/fetchRecentRepos`, { username: this.selectedAccOrOrg });
 
@@ -237,8 +276,8 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchBranches() {
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -253,7 +292,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchCommits() {
-      this.selectedCommit = {};
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -279,7 +318,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     final(commitId: string) {
-      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId);
+      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId) || null;
 
       if (this.selectedAccOrOrg && this.selectedRepo && this.selectedCommit?.commitId) {
         this.$emit('change', {
@@ -337,7 +376,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     status(value: boolean) {
-      return value ? 'error' : null;
+      return value ? 'error' : undefined;
     },
 
     reposRules() {
@@ -355,11 +394,17 @@ export default Vue.extend<Data, any, any, any>({
       const commitId = this.$route.query?.commit;
 
       if (commitId) {
-        const table = this.$refs.commitsTable;
-        const page = table.getPageByRow(commitId, ({ commitId }: commit) => commitId);
+        const table = this.$refs.commitsTable as unknown as {
+          getPageByRow: (id: string | (string | null)[], callback: (commit: any) => any) => any;
+          setPage: (page: any) => void;
+        };
+        const page = table?.getPageByRow(commitId, ({ commitId }: commit) => commitId);
 
-        table.setPage(page);
+        table?.setPage(page);
       }
+    },
+    selectReduction(e: unknown) {
+      return e;
     }
   },
 });
@@ -393,7 +438,7 @@ export default Vue.extend<Data, any, any, any>({
           :options="preparedRepos"
           :clearable="true"
           :searchable="true"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :rules="[reposRules]"
           :status="status(hasError.repo)"
           :option-label="'name'"
@@ -412,7 +457,7 @@ export default Vue.extend<Data, any, any, any>({
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
           :clearable="false"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :searchable="true"
           :rules="[branchesRules]"
           :status="status(hasError.branch)"
@@ -441,7 +486,7 @@ export default Vue.extend<Data, any, any, any>({
         >
           <template #cell:index="{row}">
             <RadioButton
-              :value="selectedCommit.commitId"
+              :value="selectedCommitId"
               :val="row.commitId"
               @input="final($event)"
             />