@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

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

@@ -0,0 +1,300 @@
+import { mount } from '@vue/test-utils';
+import flushPromises from 'flush-promises';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
+
+const requiredSetup = () => {
+  return { global: { mocks: { $store: { getters: { namespaces: () => ['fleet-default', 'fleet-local'] } } } } };
+};
+
+const allConfigMaps = [
+  {
+    id:       'fleet-local/configmap-1',
+    name:     'configmap-1',
+    metadata: {
+      namespace: 'fleet-local',
+      name:      'configmap-1'
+    },
+    data: { foo0: 'bar0' }
+  },
+  {
+    id:       'fleet-default/configmap-2',
+    name:     'configmap-2',
+    metadata: {
+      namespace: 'fleet-default',
+      name:      'configmap-2'
+    },
+    data: { foo1: 'bar1' }
+  }
+];
+
+const allSecrets = [
+  {
+    id:       'fleet-local/secret-1',
+    name:     'secret-1',
+    metadata: {
+      namespace: 'fleet-local',
+      name:      'secret-1'
+    },
+    data: { foo2: 'bar2' }
+  },
+  {
+    id:       'fleet-default/secret-2',
+    name:     'secret-2',
+    metadata: {
+      namespace: 'fleet-default',
+      name:      'secret-2'
+    },
+    data: { foo3: 'bar3' }
+  }
+];
+
+describe('component: FleetValuesFrom', () => {
+  describe.each([
+    _CREATE,
+    _EDIT
+  ])('mode: %p', (mode) => {
+    it('should show loading label when secrets or configMaps are empty', async() => {
+      const wrapper = mount(FleetValuesFrom, {
+        ...requiredSetup(),
+        props: {
+          value:     [],
+          namespace: 'fleet-default',
+          mode,
+        },
+      });
+
+      await flushPromises();
+
+      const loading = wrapper.find('[data-testid="fleet-values-from-loading"]');
+      const itemsContainer = wrapper.find('[data-testid="fleet-values-from-list"]');
+
+      expect(itemsContainer.exists()).toBe(false);
+      expect(loading.exists()).toBe(true);
+    });
+
+    it('should decode spec.helm.valuesFrom to build UI form', async() => {
+      const wrapper = mount(FleetValuesFrom, {
+        ...requiredSetup(),
+        props: {
+          value: [
+            {
+              configMapKeyRef: {
+                key:       'foo0',
+                name:      'configmap-2',
+                namespace: 'fleet-default'
+              }
+            },
+            {
+              secretKeyRef: {
+                key:       'foo3',
+                name:      'secret-2',
+                namespace: 'fleet-default'
+              }
+            }
+          ],
+          namespace: 'fleet-default',
+          mode,
+        },
+        data: () => ({
+          allSecrets,
+          allConfigMaps
+        })
+      });
+
+      await flushPromises();
+
+      const configMapRef = wrapper.find('[data-testid="fleet-values-from-item-0"]').element;
+      const secretRef = wrapper.find('[data-testid="fleet-values-from-item-1"]').element;
+
+      expect(configMapRef.textContent).toContain('configMapKeyRef'); // Type column
+      expect(configMapRef.textContent).toContain('configmap-2'); // ConfigMap column
+      expect(configMapRef.textContent).toContain('foo0'); // Key column
+
+      expect(secretRef.textContent).toContain('secretKeyRef'); // Type column
+      expect(secretRef.textContent).toContain('secret-2'); // Secret column
+      expect(secretRef.textContent).toContain('foo3'); // Key column
+    });
+
+    it.each([
+      'fleet-default',
+      'fleet-local'
+    ])('should encode UI rows to spec.helm.valuesFrom having namespace %p', async(namespace) => {
+      const wrapper = mount(FleetValuesFrom, {
+        ...requiredSetup(),
+        props: {
+          value: [],
+          namespace,
+          mode,
+        },
+      });
+
+      wrapper.setData({
+        valuesFrom: [
+          {
+            id:        0,
+            valueFrom: {
+              configMapKeyRef: {
+                key:  'foo0',
+                name: 'configmap-2'
+              }
+            }
+          },
+          {
+            id:        1,
+            valueFrom: {
+              secretKeyRef: {
+                key:  'foo2',
+                name: 'secret-2'
+              }
+            }
+          }
+        ]
+      });
+
+      wrapper.vm.update();
+
+      await flushPromises();
+
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual([{
+        configMapKeyRef: {
+          key: 'foo0', name: 'configmap-2', namespace,
+        }
+      }, {
+        secretKeyRef: {
+          key: 'foo2', name: 'secret-2', namespace,
+        }
+      }]);
+    });
+
+    it('should reset ConfigMap/Secret and Key columns on Type change', async() => {
+      const wrapper = mount(FleetValuesFrom, {
+        ...requiredSetup(),
+        props: {
+          value: [
+            {
+              configMapKeyRef: {
+                key:       'foo0',
+                name:      'configmap-2',
+                namespace: 'fleet-default'
+              }
+            },
+            {
+              secretKeyRef: {
+                key:       'foo3',
+                name:      'secret-2',
+                namespace: 'fleet-default'
+              }
+            }
+          ],
+          namespace: 'fleet-default',
+          mode,
+        },
+        data: () => ({
+          allSecrets,
+          allConfigMaps
+        })
+      });
+
+      await flushPromises();
+
+      // Change Type from ConfigMap Key to Secret Key
+      wrapper.vm.updateValueFrom(0, {
+        name:      'configmap-2',
+        valueFrom: {
+          secretKeyRef: {
+            key:      'foo0',
+            name:     'configmap-2',
+            optional: false
+          }
+        }
+      } as any);
+
+      await flushPromises();
+
+      const exConfigMapRef = wrapper.find('[data-testid="fleet-values-from-item-0"]').element;
+
+      // Type column is changed to Secret
+      expect(exConfigMapRef.textContent).toContain('secretKeyRef'); // Type column
+
+      // Config Map and Key fields are deleted from row 1
+      expect(exConfigMapRef.textContent).not.toContain('configmap-2'); // ConfigMap column
+      expect(exConfigMapRef.textContent).not.toContain('foo0'); // Key column
+
+      // excluding row 1 from emit
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual([{
+        secretKeyRef: {
+          key: 'foo3', name: 'secret-2', namespace: 'fleet-default'
+        }
+      }]);
+    });
+
+    it('should reset Key column on Ref change', async() => {
+      const wrapper = mount(FleetValuesFrom, {
+        ...requiredSetup(),
+        props: {
+          value: [
+            {
+              configMapKeyRef: {
+                key:       'foo0',
+                name:      'configmap-2',
+                namespace: 'fleet-default'
+              }
+            },
+            {
+              secretKeyRef: {
+                key:       'foo3',
+                name:      'secret-2',
+                namespace: 'fleet-default'
+              }
+            }
+          ],
+          namespace: 'fleet-default',
+          mode,
+        },
+        data: () => ({
+          allSecrets,
+          allConfigMaps
+        })
+      });
+
+      await flushPromises();
+
+      // Change Config Map ref
+      wrapper.vm.updateValueFrom(0, {
+        name:      'configmap-3',
+        valueFrom: {
+          configMapKeyRef: {
+            key:      'foo4',
+            name:     'configmap-3',
+            optional: false
+          }
+        }
+      } as any);
+
+      await flushPromises();
+
+      const configMapRef = wrapper.find('[data-testid="fleet-values-from-item-0"]').element;
+
+      // Type column is not changed
+      expect(configMapRef.textContent).toContain('configMapKeyRef'); // Type column
+
+      // Config Map column is now configmap-3
+      expect(configMapRef.textContent).toContain('configmap-3'); // ConfigMap column
+
+      // Key column is empty
+      expect(configMapRef.textContent).toContain('workload.container.command.fromResource.key.label%Loading'); // Key column
+
+      // Emit empty Key
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual([{
+        configMapKeyRef: {
+          key: '', name: 'configmap-3', namespace: 'fleet-default'
+        }
+      }, {
+        secretKeyRef: {
+          key: 'foo3', name: 'secret-2', namespace: 'fleet-default'
+        }
+      }]);
+    });
+  });
+});

package/components/fleet/dashboard/Empty.vue

@@ -0,0 +1,73 @@
+
+<script>
+export default {
+  name: 'FleetDashboardEmpty',
+
+  props: {
+    permissions: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { getStartedLink: { name: 'c-cluster-fleet-application-create' } };
+  }
+};
+</script>
+<template>
+  <div
+    class="fleet-empty-dashboard"
+    aria-hidden="true"
+    :data-testid="'fleet-empty-dashboard'"
+  >
+    <i class="icon-fleet mb-30" />
+    <h1>{{ t('fleet.dashboard.welcome') }}</h1>
+    <p class="mb-30">
+      <span>{{ t('fleet.dashboard.gitOpsScale') }}</span>
+      <a
+        :href="t('fleet.dashboard.learnMoreLink')"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        {{ t('fleet.dashboard.learnMore') }} <i class="icon icon-external-link" />
+      </a>
+      <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+    </p>
+    <template v-if="permissions.gitRepos || permissions.helmOps">
+      <h3 class="mb-30">
+        {{ t('fleet.dashboard.noApplications', null, true) }}
+      </h3>
+      <router-link
+        :to="getStartedLink"
+        class="btn role-secondary"
+      >
+        {{ t('fleet.dashboard.getStarted') }}
+      </router-link>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .fleet-empty-dashboard {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 100%;
+
+    .icon-fleet {
+      font-size: 100px;
+      color: var(--disabled-text);
+    }
+
+    > p > span {
+      color: var(--disabled-text);
+    }
+
+    .sr-only {
+      visibility: hidden;
+    }
+  }
+</style>

package/components/fleet/dashboard/ResourceCard.vue

@@ -0,0 +1,184 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { clone } from '@shell/utils/object';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { RcItemCard } from '@components/RcItemCard';
+import ResourceCardSummary from '@shell/components/fleet/dashboard/ResourceCardSummary.vue';
+import FleetUtils from '@shell/utils/fleet';
+import { FleetDashboardState, FleetResourceState } from '@shell/types/fleet';
+
+export default {
+
+  name: 'FleetDashboardResourceCard',
+
+  emits: ['click'],
+
+  components: {
+    ActionMenu,
+    RcItemCard,
+    ResourceCardSummary,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    statePanel: {
+      type:     Object as PropType<FleetDashboardState>,
+      required: true
+    },
+  },
+
+  data() {
+    let resourcesDefaultStates: FleetResourceState | object = {};
+
+    try {
+      resourcesDefaultStates = FleetUtils.getResourcesDefaultState(this.$store.getters['i18n/withFallback'], 'fleet.fleetSummary.state');
+    } catch (error) {
+    }
+
+    return { resourcesDefaultStates };
+  },
+
+  computed: {
+    statuses() {
+      const state = this.statePanel;
+
+      if (state.id === 'success') {
+        if (this.noClusters) {
+          return [{
+            id:          state.id,
+            icon:        'icon-warning',
+            customColor: '#DAC342',
+            tooltip:     {},
+            handleClick: () => {},
+          }];
+        }
+
+        return [];
+      }
+
+      return [{
+        id:          state.id,
+        icon:        state.icon,
+        color:       '',
+        customColor: state.color,
+        tooltip:     {},
+        handleClick: () => {},
+      }];
+    },
+
+    /**
+     * Returns the count of the status for each resource in the GitRepo
+     */
+    resourceCounts() {
+      const out: Record<string, FleetResourceState> = clone(this.resourcesDefaultStates);
+
+      const resourceStatuses: Record<string, number> = this.value.allResourceStatuses;
+
+      Object.entries(resourceStatuses.states)
+        .filter(([_, count]) => count > 0)
+        .forEach(([state, count]) => {
+          const k = state?.toLowerCase();
+
+          if (out[k]) {
+            out[k].count += count;
+          } else {
+            out.unknown.count += count;
+          }
+        });
+
+      return Object.values(out).reduce((acc, { label, count }) => {
+        if (count > 0) {
+          return [...acc, { label, count }];
+        }
+
+        return acc;
+      }, [] as FleetResourceState[]).reverse();
+    },
+
+    resourcesTooltip() {
+      return this.resourceCounts.reduce((acc, state, i) => `${ acc }${ i > 0 ? '<br>' : '' }${ state.label }: ${ state.count }`, '');
+    },
+
+    noClusters() {
+      return !this.value.status?.desiredReadyClusters;
+    },
+
+    nameTooltip() {
+      if (this.value.nameDisplay?.length >= 15) {
+        return this.value.nameDisplay;
+      }
+
+      return null;
+    }
+  },
+
+  methods: {
+    select(value: PointerEvent) {
+      const elem = value?.target as HTMLElement;
+
+      if (elem?.tagName === 'A' || elem?.tagName === 'BUTTON' || elem?.className.includes('icon icon-actions')) {
+        return;
+      }
+
+      this.$emit('click');
+    },
+  }
+};
+</script>
+
+<template>
+  <RcItemCard
+    :id="`${ value.metadata.namespace }-${ value.type }-${ value.id }`"
+    class="dashboard-resource-card"
+    variant="small"
+    :header="{
+      title: { text: value.nameDisplay },
+      statuses,
+    }"
+    :content="{}"
+    :value="value"
+    @click="select"
+    @keydown.self.enter.stop.prevent="select"
+    @keydown.self.space.stop.prevent="$router.push(value.detailLocation)"
+  >
+    <template #item-card-image>
+      <i
+        class="icon-lg"
+        :class="value.dashboardIcon"
+      />
+    </template>
+    <template #item-card-actions>
+      <ActionMenu
+        :resource="value"
+        :button-aria-label="t('sortableTable.tableActionsLabel', { resource: value?.id || '' })"
+      />
+    </template>
+    <template #item-card-content>
+      <ResourceCardSummary
+        v-clean-tooltip="{content: resourcesTooltip, triggers: ['hover']}"
+        :value="value"
+        :no-clusters="noClusters"
+      />
+    </template>
+  </RcItemCard>
+</template>
+
+<style lang="scss" scoped>
+  .dashboard-resource-card {
+    margin: 1px;
+    height: 100%;
+  }
+
+  .icon-lg {
+    font-size: 25px;
+    margin-right: 8px;
+  }
+
+  // .item-card-body {
+  //   width: -webkit-fill-available;
+  // }
+</style>