@rancher/shell 1.2.3 → 2.0.1

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -334,6 +334,9 @@ export default {
     // set watcher for the chart data
     this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, function(newValue) {
       this.watcherFunction(newValue);
+    }, {
+      deep:      true,
+      immediate: true
     });
   },
   unmounted() {
@@ -344,7 +347,10 @@ export default {
 
 <template>
   <div>
-    <div class="chart-container">
+    <div
+      class="chart-container"
+      data-testid="gitrepo_graph"
+    >
       <!-- loading status container -->
       <div
         v-if="!isChartFirstRenderAnimationFinished"
@@ -377,11 +383,11 @@ export default {
               <!-- title template -->
               <td v-if="item.type === 'title-link'">
                 <span v-if="item.valueObj.detailLocation">
-                  <n-link
+                  <router-link
                     :to="item.valueObj.detailLocation"
                   >
                     {{ item.valueObj.id }}
-                  </n-link>
+                  </router-link>
                 </span>
                 <span v-else>{{ item.valueObj.id }}</span>
               </td>

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/ArrayList.vue

@@ -47,10 +47,8 @@ export default {
       default: false,
     },
     addLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.add');
-      },
+      type:    String,
+      default: '',
     },
     addAllowed: {
       type:    Boolean,
@@ -61,10 +59,8 @@ export default {
       default: false,
     },
     removeLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.remove');
-      },
+      type:    String,
+      default: '',
     },
     removeAllowed: {
       type:    Boolean,
@@ -105,6 +101,13 @@ export default {
     return { rows, lastUpdateWasFromValue: false };
   },
   computed: {
+    _addLabel() {
+      return this.addLabel || this.t('generic.add');
+    },
+    _removeLabel() {
+      return this.removeLabel || this.t('generic.remove');
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -318,24 +321,25 @@ export default {
               :data-testid="`remove-item-${idx}`"
               @click="remove(row, idx)"
             >
-              {{ removeLabel }}
+              {{ _removeLabel }}
             </button>
           </slot>
         </div>
       </div>
     </template>
-    <div
-      v-else-if="mode==='view'"
-      class="text-muted"
-    >
-      &mdash;
-    </div>
     <div v-else>
-      <slot name="empty" />
+      <slot name="empty">
+        <div
+          v-if="mode==='view'"
+          class="text-muted"
+        >
+          &mdash;
+        </div>
+      </slot>
     </div>
     <div
       v-if="showAdd && !isView"
-      class="footer"
+      class="footer mt-20"
     >
       <slot
         v-if="showAdd"
@@ -353,7 +357,7 @@ export default {
             v-if="loading"
             class="mr-5 icon icon-spinner icon-spin icon-lg"
           />
-          {{ addLabel }}
+          {{ _addLabel }}
         </button>
       </slot>
     </div>

package/components/form/ArrayListSelect.vue

@@ -24,6 +24,10 @@ export default {
     loading: {
       type:    Boolean,
       default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: true
     }
   },
   computed: {
@@ -71,6 +75,7 @@ export default {
     :add-allowed="addAllowed || loading"
     :loading="loading"
     :defaultAddValue="defaultAddValue"
+    :disabled="disabled"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">

package/components/form/BannerSettings.vue

@@ -143,6 +143,7 @@ export default ({
           <RadioGroup
             v-model="value[bannerType].textAlignment"
             name="bannerAlignment"
+            :data-testid="`banner_alignment_radio_options${bannerType}`"
             :label="t('banner.bannerAlignment.label')"
             :options="radioOptions.options"
             :labels="radioOptions.labels"
@@ -160,6 +161,7 @@ export default ({
             <Checkbox
               v-model="value[bannerType][o.style]"
               name="bannerDecoration"
+              :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
               class="banner-decoration-checkbox"
               :mode="mode"
               :label="o.label"
@@ -169,6 +171,7 @@ export default ({
         <div class="col span-2">
           <LabeledSelect
             v-model="value[bannerType].fontSize"
+            :data-testid="`banner_font_size_options${bannerType}`"
             :disabled="isUiDisabled"
             :label="t('banner.bannerFontSize.label')"
             :options="uiBannerFontSizeOptions"

package/components/form/ClusterAppearance.vue

@@ -0,0 +1,132 @@
+
+<script>
+import ClusterIconMenu from '@shell/components/ClusterIconMenu';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { CLUSTER_BADGE } from '@shell/config/labels-annotations';
+export default {
+  title:      'ClusterAppearance',
+  components: { ClusterIconMenu },
+  props:      {
+    name:           { type: String, default: '' },
+    mode:           { type: String, default: _CREATE },
+    currentCluster: { type: Object, default: null }
+  },
+  created() {
+    this.$store.dispatch('customisation/setDefaultPreviewCluster');
+  },
+
+  computed: {
+    disable() {
+      if (this.mode === _VIEW) {
+        return true;
+      }
+
+      return this.name.length <= 1;
+    },
+    clusterPreview() {
+      if (this.mode !== _CREATE) {
+        return {
+          ...this.currentCluster,
+          badge: {
+            iconText: this.currentCluster.metadata.annotations[CLUSTER_BADGE.ICON_TEXT],
+            color:    this.currentCluster.metadata.annotations[CLUSTER_BADGE.COLOR],
+            text:     this.currentCluster.metadata.annotations[CLUSTER_BADGE.TEXT]
+          }
+        };
+      }
+
+      const obj = {
+        ...this.$store.getters['customisation/getPreviewCluster'],
+        label: this.name
+      };
+
+      return obj || {
+        label: this.name,
+        badge: { iconText: null }
+      };
+    },
+  },
+
+  methods: {
+    customBadgeDialog() {
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'AddCustomBadgeDialog',
+        componentProps: {
+          isCreate:        this.mode === _CREATE,
+          mode:            this.mode,
+          clusterName:     this.name,
+          clusterExplorer: this.clusterPreview
+        },
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="cluster-appearance">
+    <label for="name">
+      {{ t('clusterBadge.setClusterAppearance') }}
+    </label>
+    <div class="cluster-appearance-preview">
+      <span>
+        <ClusterIconMenu :cluster="clusterPreview" />
+      </span>
+      <button
+        :disabled="disable"
+        @click="customBadgeDialog"
+      >
+        <i class="icon icon-brush-icon" />
+        <span>
+          {{ t('clusterBadge.customize') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .cluster-appearance {
+    display: flex;
+    flex-direction: column;
+    margin: 3px 35px 0px 0px;
+
+    label {
+      margin: 6px 0 0;
+    }
+
+    &-preview {
+      display: flex;
+      justify-content: center;
+      align-self: start;
+      gap: 10px;
+      justify-content: space-between;
+
+      span {
+        display: flex;
+        align-self: center;
+        height: auto;
+      }
+
+      button {
+        display: flex;
+        align-self: center;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        top: 0;
+        color: var(--link);
+        background: transparent;
+
+        i {
+          margin-right: 2px;
+        }
+
+        &:disabled {
+          color: var(--disabled-text);
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+</style>

package/components/form/ColorInput.vue

@@ -76,6 +76,7 @@ export default {
       :raw="true"
     />{{ label }}</label>
     <div
+      :data-testid="componentTestid + '-color-input_preview-container'"
       class="preview-container"
       @click.stop="$refs.input.click($event)"
     >

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/FileSelector.vue

@@ -148,6 +148,7 @@ export default {
     :disabled="disabled"
     type="button"
     class="file-selector btn"
+    data-testid="file-selector__uploader-button"
     @click="selectFile"
   >
     <span>{{ label }}</span>

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: {