@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/fleet/__tests__/__snapshots__/ClusterSelectionFields.test.ts.snap

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: ClusterSelectionFields should match snapshot with appco variant 1`] = `
+<div
+  class="appco-select-clusters"
+>
+  <!-- Select by cluster name -->
+  <div>
+    <h4>
+      %fleet.clusterTargets.clusters.byName.title%
+    </h4>
+    <labeled-select-stub
+      appendtobody="true"
+      class=""
+      clearable="false"
+      closeonselect="false"
+      data-testid="fleet-target-cluster-name-selector"
+      disabled="false"
+      filterable="true"
+      hovertooltip="true"
+      instore="cluster"
+      label="%fleet.clusterTargets.clusters.byName.label%"
+      loading="false"
+      localizedlabel="false"
+      lockedoptions=""
+      mode="edit"
+      multiple="true"
+      nooptionslabelkey="labelSelect.noOptions.empty"
+      optionlabel="label"
+      options="[object Object]"
+      placeholder="%fleet.clusterTargets.clusters.byName.placeholder%"
+      reduce="[Function]"
+      required="false"
+      requiredirty="true"
+      rules=""
+      searchable="false"
+      selectable="[Function]"
+      taggable="true"
+      value="cluster-1"
+    />
+  </div>
+  <!-- Select by labels -->
+  <div
+    class=""
+  >
+    <h4
+      class=""
+    >
+      %fleet.clusterTargets.clusters.byLabel.title%
+    </h4>
+    
+    
+    <rc-button-stub
+      class="mmt-3"
+      ghost="false"
+      link="false"
+      multiaction="false"
+      primary="false"
+      secondary="false"
+      size="small"
+      small="false"
+      tertiary="false"
+      variant="secondary"
+    />
+  </div>
+  <!-- Select by cluster groups -->
+  <div
+    class=""
+  >
+    <h4
+      class=""
+    >
+      %fleet.clusterTargets.clusterGroups.title%
+    </h4>
+    <labeled-select-stub
+      appendtobody="true"
+      class=""
+      clearable="false"
+      closeonselect="false"
+      data-testid="fleet-target-cluster-group-selector"
+      disabled="false"
+      filterable="true"
+      hovertooltip="true"
+      instore="cluster"
+      label="%fleet.clusterTargets.clusterGroups.byName.label%"
+      loading="false"
+      localizedlabel="false"
+      lockedoptions=""
+      mode="edit"
+      multiple="true"
+      nooptionslabelkey="labelSelect.noOptions.empty"
+      optionlabel="label"
+      options=""
+      placeholder="%fleet.clusterTargets.clusterGroups.byName.placeholder%"
+      reduce="[Function]"
+      required="false"
+      requiredirty="true"
+      rules=""
+      searchable="false"
+      selectable="[Function]"
+      taggable="true"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`component: ClusterSelectionFields should match snapshot with default variant 1`] = `
+<div
+  class=""
+>
+  <!-- Select by cluster name -->
+  <div>
+    <!--v-if-->
+    <labeled-select-stub
+      appendtobody="true"
+      class="mmt-4"
+      clearable="false"
+      closeonselect="false"
+      data-testid="fleet-target-cluster-name-selector"
+      disabled="false"
+      filterable="true"
+      hovertooltip="true"
+      instore="cluster"
+      label="%fleet.clusterTargets.clusters.byName.label%"
+      loading="false"
+      localizedlabel="false"
+      lockedoptions=""
+      mode="edit"
+      multiple="true"
+      nooptionslabelkey="labelSelect.noOptions.empty"
+      optionlabel="label"
+      options="[object Object]"
+      placeholder="%fleet.clusterTargets.clusters.byName.placeholder%"
+      reduce="[Function]"
+      required="false"
+      requiredirty="true"
+      rules=""
+      searchable="false"
+      selectable="[Function]"
+      taggable="true"
+      value="cluster-1"
+    />
+  </div>
+  <!-- Select by labels -->
+  <div
+    class="mmt-6"
+  >
+    <h4
+      class="m-0"
+    >
+      %fleet.clusterTargets.clusters.byLabel.title%
+    </h4>
+    
+    
+    <rc-button-stub
+      class="mmt-4"
+      ghost="false"
+      link="false"
+      multiaction="false"
+      primary="false"
+      secondary="false"
+      size="small"
+      small="false"
+      tertiary="false"
+      variant="secondary"
+    />
+  </div>
+  <!-- Select by cluster groups -->
+  <div
+    class="mmt-8"
+  >
+    <h3
+      class="m-0"
+    >
+      %fleet.clusterTargets.clusterGroups.title%
+    </h3>
+    <labeled-select-stub
+      appendtobody="true"
+      class="mmt-4"
+      clearable="false"
+      closeonselect="false"
+      data-testid="fleet-target-cluster-group-selector"
+      disabled="false"
+      filterable="true"
+      hovertooltip="true"
+      instore="cluster"
+      label="%fleet.clusterTargets.clusterGroups.byName.label%"
+      loading="false"
+      localizedlabel="false"
+      lockedoptions=""
+      mode="edit"
+      multiple="true"
+      nooptionslabelkey="labelSelect.noOptions.empty"
+      optionlabel="label"
+      options=""
+      placeholder="%fleet.clusterTargets.clusterGroups.byName.placeholder%"
+      reduce="[Function]"
+      required="false"
+      requiredirty="true"
+      rules=""
+      searchable="false"
+      selectable="[Function]"
+      taggable="true"
+      value=""
+    />
+  </div>
+</div>
+`;

package/components/fleet/__tests__/__snapshots__/HelmOpTargetOptionsSection.test.ts.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: HelmOpTargetOptionsSection should match snapshot in compact mode 1`] = `
+<div
+  class="col gap-md"
+  data-testid="helmop-target-options-section"
+>
+  <p>
+    %fleet.helmOp.target.clusterDeploymentDescription%
+    <br />
+     %generic.learnMoreAbout% 
+    <a
+      href="https://fleet.rancher.io/reference/ref-crds#_bundledeploymentoptions"
+      rel="noopener noreferrer nofollow"
+      target="_blank"
+    >
+      %fleet.helmOp.target.clusterDeploymentLink% 
+      <rc-icon-stub
+        ariahidden="true"
+        size="small"
+        status="inherit"
+        type="external-link"
+      />
+    </a>
+  </p>
+  <div
+    class="col span-6 cluster-deployment-settings-input"
+  >
+    <labeled-input-stub
+      arialabel=""
+      class=""
+      data-testid="helmop-target-options-service-account"
+      delay="0"
+      disabled="false"
+      hidearrows="false"
+      hovertooltip="true"
+      ignorepasswordmanagers="false"
+      labelkey="fleet.helmOp.serviceAccount.label"
+      mode="edit"
+      placeholder=""
+      placeholderkey="fleet.helmOp.serviceAccount.compactPlaceholder"
+      required="false"
+      requiredirty="true"
+      rules=""
+      type="text"
+      value="sa-1"
+    />
+    <p
+      class="sub-description"
+    >
+      %fleet.helmOp.serviceAccount.compactDescription%
+    </p>
+  </div>
+  <div
+    class="col span-6 cluster-deployment-settings-input"
+  >
+    <labeled-input-stub
+      arialabel=""
+      class=""
+      data-testid="helmop-target-options-namespace"
+      delay="0"
+      disabled="false"
+      hidearrows="false"
+      hovertooltip="true"
+      ignorepasswordmanagers="false"
+      labelkey="fleet.helmOp.targetNamespace.label"
+      mode="edit"
+      placeholder=""
+      placeholderkey="fleet.helmOp.targetNamespace.compactPlaceholder"
+      required="false"
+      requiredirty="true"
+      rules=""
+      type="text"
+      value="ns-1"
+    />
+    <p
+      class="sub-description"
+    >
+      %fleet.helmOp.targetNamespace.compactDescription%
+    </p>
+  </div>
+</div>
+`;
+
+exports[`component: HelmOpTargetOptionsSection should match snapshot with default props 1`] = `
+<div
+  class="row"
+  data-testid="helmop-target-options-section"
+>
+  <!--v-if-->
+  <div
+    class="col span-6 cluster-deployment-settings-input"
+  >
+    <labeled-input-stub
+      arialabel=""
+      class=""
+      data-testid="helmop-target-options-service-account"
+      delay="0"
+      disabled="false"
+      hidearrows="false"
+      hovertooltip="true"
+      ignorepasswordmanagers="false"
+      labelkey="fleet.helmOp.serviceAccount.label"
+      mode="edit"
+      placeholder=""
+      placeholderkey="fleet.helmOp.serviceAccount.placeholder"
+      required="false"
+      requiredirty="true"
+      rules=""
+      type="text"
+      value="sa-1"
+    />
+    <!--v-if-->
+  </div>
+  <div
+    class="col span-6 cluster-deployment-settings-input"
+  >
+    <labeled-input-stub
+      arialabel=""
+      class=""
+      data-testid="helmop-target-options-namespace"
+      delay="0"
+      disabled="false"
+      hidearrows="false"
+      hovertooltip="true"
+      ignorepasswordmanagers="false"
+      labelkey="fleet.helmOp.targetNamespace.label"
+      mode="edit"
+      placeholder=""
+      placeholderkey="fleet.helmOp.targetNamespace.placeholder"
+      required="false"
+      requiredirty="true"
+      rules=""
+      type="text"
+      value="ns-1"
+    />
+    <!--v-if-->
+  </div>
+</div>
+`;

package/components/fleet/dashboard/Empty.vue

@@ -1,8 +1,11 @@
-
 <script>
+import { RcButton } from '@components/RcButton';
+
 export default {
   name: 'FleetDashboardEmpty',
 
+  components: { RcButton },
+
   props: {
     permissions: {
       type:     Object,
@@ -38,12 +41,13 @@ export default {
       <h3 class="mb-30">
         {{ t('fleet.dashboard.noApplications', null, true) }}
       </h3>
-      <router-link
+      <rc-button
+        size="large"
+        variant="secondary"
         :to="getStartedLink"
-        class="btn role-secondary"
       >
         {{ t('fleet.dashboard.getStarted') }}
-      </router-link>
+      </rc-button>
     </template>
   </div>
 </template>

package/components/fleet/dashboard/ResourceCard.vue

@@ -6,6 +6,8 @@ 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';
+import suseAppCoLogo from '@shell/assets/images/content/suse.svg';
+import suseAppCoLogoDark from '@shell/assets/images/content/dark/suse.svg';
 
 export default {
 
@@ -107,6 +109,18 @@ export default {
       return !this.value.status?.desiredReadyClusters;
     },
 
+    /**
+     * SUSE Application Collection bundles use the SUSE AppCo logo instead of the
+     * default resource icon font glyph.
+     */
+    isSuseAppCollection() {
+      return !!this.value.isSuseAppCollectionFromUI;
+    },
+
+    suseAppCoIcon() {
+      return this.$store.getters['prefs/theme'] === 'dark' ? suseAppCoLogoDark : suseAppCoLogo;
+    },
+
     nameTooltip() {
       if (this.value.nameDisplay?.length >= 15) {
         return this.value.nameDisplay;
@@ -146,7 +160,14 @@ export default {
     @keydown.self.space.stop.prevent="$router.push(value.detailLocation)"
   >
     <template #item-card-image>
+      <img
+        v-if="isSuseAppCollection"
+        class="suse-appco-icon"
+        :src="suseAppCoIcon"
+        :alt="value.nameDisplay"
+      >
       <i
+        v-else
         class="icon-lg"
         :class="value.dashboardIcon"
       />
@@ -178,6 +199,13 @@ export default {
     margin-right: 8px;
   }
 
+  .suse-appco-icon {
+    height: 30px;
+    width: 30px;
+    margin-right: 8px;
+    object-fit: contain;
+  }
+
   // .item-card-body {
   //   width: -webkit-fill-available;
   // }

package/components/fleet/dashboard/ResourceDetails.vue

@@ -9,6 +9,8 @@ import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import Drawer from '@shell/components/Drawer/Chrome.vue';
 import DrawerCard from '@shell/components/Drawer/DrawerCard.vue';
+import suseAppCoLogo from '@shell/assets/images/content/suse.svg';
+import suseAppCoLogoDark from '@shell/assets/images/content/dark/suse.svg';
 
 export default {
   name: 'FleetDashboardResourceDetails',
@@ -62,6 +64,18 @@ export default {
 
     clusterSchema() {
       return this.$store.getters['management/schemaFor'](FLEET.CLUSTER);
+    },
+
+    /**
+     * SUSE Application Collection bundles use the SUSE AppCo logo instead of the
+     * default resource icon font glyph.
+     */
+    isSuseAppCollection() {
+      return !!this.value.isSuseAppCollectionFromUI;
+    },
+
+    suseAppCoIcon() {
+      return this.$store.getters['prefs/theme'] === 'dark' ? suseAppCoLogoDark : suseAppCoLogo;
     }
 
   },
@@ -84,7 +98,14 @@ export default {
       #title
       :data-testid="'fleet-dashboard-resource-details-header'"
     >
+      <img
+        v-if="isSuseAppCollection"
+        class="suse-appco-icon mmr-3"
+        :src="suseAppCoIcon"
+        :alt="value.nameDisplay"
+      >
       <i
+        v-else
         class="icon-lg mmr-3"
         :class="value.dashboardIcon"
       />
@@ -164,4 +185,11 @@ export default {
   .icon-lg {
     font-size: 24px;
   }
+
+  .suse-appco-icon {
+    height: 30px;
+    width: 30px;
+    object-fit: contain;
+    vertical-align: middle;
+  }
 </style>

package/components/fleet/dashboard/__tests__/ResourceCard.test.ts

@@ -0,0 +1,87 @@
+import { shallowMount } from '@vue/test-utils';
+import ResourceCard from '@shell/components/fleet/dashboard/ResourceCard.vue';
+import suseAppCoLogo from '@shell/assets/images/content/suse.svg';
+import suseAppCoLogoDark from '@shell/assets/images/content/dark/suse.svg';
+
+const statePanel = {
+  index: 2,
+  id:    'success',
+  label: 'Active',
+  color: '#5D995D',
+  icon:  'icon icon-checkmark',
+};
+
+const baseValue = {
+  type:                'fleet.cattle.io.helmop',
+  id:                  'helm-op',
+  nameDisplay:         'helm-op',
+  metadata:            { namespace: 'fleet-default' },
+  dashboardIcon:       'icon icon-helm',
+  status:              { desiredReadyClusters: 1 },
+  allResourceStatuses: { states: {} },
+};
+
+const mountCard = (value: Record<string, unknown>, theme = 'light') => {
+  return shallowMount(ResourceCard as any, {
+    props:  { value, statePanel },
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/withFallback': () => '',
+            'prefs/theme':       theme,
+          }
+        }
+      },
+      stubs: {
+        // Render the image slot so we can assert what icon is displayed
+        RcItemCard: { template: '<div><slot name="item-card-image" /></div>' },
+      },
+      directives: { 'clean-tooltip': {} },
+    },
+  });
+};
+
+describe('component: FleetDashboardResourceCard', () => {
+  describe('SUSE Application Collection bundles', () => {
+    it('renders the SUSE AppCo logo instead of the resource icon glyph', () => {
+      const wrapper = mountCard({ ...baseValue, isSuseAppCollectionFromUI: true });
+
+      const img = wrapper.find('img.suse-appco-icon');
+
+      expect(img.exists()).toBe(true);
+      expect(wrapper.find('i.icon-lg').exists()).toBe(false);
+    });
+
+    it('uses the light logo variant by default', () => {
+      const wrapper = mountCard({ ...baseValue, isSuseAppCollectionFromUI: true });
+
+      expect((wrapper.vm as any).suseAppCoIcon).toBe(suseAppCoLogo);
+    });
+
+    it('uses the dark logo variant when the dark theme is active', () => {
+      const wrapper = mountCard({ ...baseValue, isSuseAppCollectionFromUI: true }, 'dark');
+
+      expect((wrapper.vm as any).suseAppCoIcon).toBe(suseAppCoLogoDark);
+    });
+  });
+
+  describe('non SUSE Application Collection resources', () => {
+    it('renders the default resource icon glyph', () => {
+      const wrapper = mountCard({ ...baseValue, isSuseAppCollectionFromUI: false });
+
+      const icon = wrapper.find('i.icon-lg');
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.classes()).toContain('icon-helm');
+      expect(wrapper.find('img.suse-appco-icon').exists()).toBe(false);
+    });
+
+    it('treats a missing isSuseAppCollectionFromUI flag as a non-AppCo resource', () => {
+      const wrapper = mountCard({ ...baseValue });
+
+      expect((wrapper.vm as any).isSuseAppCollection).toBe(false);
+      expect(wrapper.find('i.icon-lg').exists()).toBe(true);
+    });
+  });
+});