@rancher/shell 0.2.5 → 0.3.1

package/components/form/SelectOrCreateAuthSecret.vue

@@ -1,6 +1,5 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
-import Loading from '@shell/components/Loading';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
@@ -13,7 +12,6 @@ export default {
   name: 'SelectOrCreateAuthSecret',
 
   components: {
-    Loading,
     LabeledInput,
     LabeledSelect,
   },
@@ -131,8 +129,6 @@ export default {
       } else {
         this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
       }
-    } else {
-      this.allSecrets = [];
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
@@ -170,10 +166,10 @@ export default {
     this.update();
   },
 
-  data() {
+  data(props) {
     return {
-      allCloudCreds: null,
-      allSecrets:    null,
+      allCloudCreds: [],
+      allSecrets:    [],
       selected:      null,
 
       publicKey:  '',
@@ -279,11 +275,26 @@ export default {
           disabled: true
         });
       }
+      if ( this.allowNone ) {
+        out.unshift({
+          label: this.t('generic.none'),
+          value: AUTH_TYPE._NONE,
+        });
+      }
+
+      if (this.allowSsh || this.allowS3 || this.allowBasic) {
+        out.unshift({
+          label:    'divider',
+          disabled: true,
+          kind:     'divider'
+        });
+      }
 
       if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
+          kind:  'highlighted'
         });
       }
 
@@ -291,6 +302,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createS3'),
           value: AUTH_TYPE._S3,
+          kind:  'highlighted'
         });
       }
 
@@ -298,13 +310,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createBasic'),
           value: AUTH_TYPE._BASIC,
-        });
-      }
-
-      if ( this.allowNone ) {
-        out.unshift({
-          label: this.t('generic.none'),
-          value: AUTH_TYPE._NONE,
+          kind:  'highlighted'
         });
       }
 
@@ -455,9 +461,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <div
-    v-else
     class="select-or-create-auth-secret"
   >
     <div
@@ -469,21 +473,10 @@ export default {
           v-model="selected"
           :mode="mode"
           :label-key="labelKey"
+          :loading="$fetchState.pending"
           :options="options"
           :selectable="option => !option.disabled"
-        >
-          <template v-slot:option="opt">
-            <template v-if="opt.kind === 'divider'">
-              <hr>
-            </template>
-            <template v-else-if="opt.kind === 'title'">
-              {{ opt.label }}
-            </template>
-            <template v-else>
-              {{ opt.label }}
-            </template>
-          </template>
-        </LabeledSelect>
+        />
       </div>
       <template v-if="selected === _SSH">
         <div :class="moreCols">

package/components/form/ServicePorts.vue

@@ -136,6 +136,10 @@ export default {
         </span>
         <span class="port">
           <t k="servicePorts.rules.listening.label" />
+          <i
+            v-tooltip="t('servicesPage.listeningPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
         </span>
         <span
@@ -146,6 +150,10 @@ export default {
         </span>
         <span class="target-port">
           <t k="servicePorts.rules.target.label" />
+          <i
+            v-tooltip="t('servicesPage.targetPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
 
         </span>

package/components/form/SimpleSecretSelector.vue

@@ -67,7 +67,7 @@ export default {
       default: 'Key'
     },
     mode: {
-      type:     String,
+      type:    String,
       default: _EDIT
     },
   },

package/components/form/Taints.vue

@@ -5,7 +5,7 @@ import Select from '@shell/components/form/Select';
 
 const EFFECT_VALUES = {
   NO_SCHEDULE:        'NoSchedule',
-  PREFER_NO_SCHEDULE:  'PreferNoSchedule',
+  PREFER_NO_SCHEDULE: 'PreferNoSchedule',
   NO_EXECUTE:         'NoExecute',
 };
 

package/components/form/UnitInput.vue

@@ -86,12 +86,12 @@ export default {
     },
 
     label: {
-      type:     String,
+      type:    String,
       default: null
     },
 
     labelKey: {
-      type:     String,
+      type:    String,
       default: null
     },
 
@@ -101,7 +101,7 @@ export default {
     },
 
     tooltipKey: {
-      type:     String,
+      type:    String,
       default: null
     },
 
@@ -160,10 +160,10 @@ export default {
 
       if ( this.parsedValue || this.parsedValue === 0) {
         displayValue = formatSi(this.parsedValue, {
-          increment:        this.increment,
-          addSuffix:        false,
-          maxExponent:      this.inputExponent,
-          minExponent:      this.inputExponent,
+          increment:   this.increment,
+          addSuffix:   false,
+          maxExponent: this.inputExponent,
+          minExponent: this.inputExponent,
         });
       }
 

package/components/form/ValueFromResource.vue

@@ -11,7 +11,7 @@ export default {
     LabeledInput
   },
 
-  props:      {
+  props: {
     mode: {
       type:    String,
       default: 'create'

package/components/form/WorkloadPorts.vue

@@ -8,7 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {
@@ -17,7 +17,7 @@ export default {
     LabeledSelect,
   },
 
-  props:      {
+  props: {
     value: {
       type:    Array,
       default: null,
@@ -259,6 +259,12 @@ export default {
 
 <template>
   <div :style="{'width':'100%'}">
+    <p
+      v-if="rows.length > 0"
+      class="padded"
+    >
+      {{ t('workload.container.ports.detailedDescription') }}
+    </p>
     <div
       v-for="(row, idx) in rows"
       :key="idx"

package/components/form/__tests__/ArrayList.test.ts

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('the ArrayList', () => {
+  it('is empty', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="array-list-box"]');
+
+    expect(elements).toHaveLength(0);
+  });
+
+  it('shows an initial empty row', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value:           [],
+        mode:            _EDIT,
+        initialEmptyRow: true
+      },
+    });
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('expands when the add button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT,
+      },
+    });
+
+    const arrayListButton = wrapper.find('[data-testid="array-list-button"]').element as HTMLElement;
+
+    await arrayListButton.click();
+    await arrayListButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(2);
+  });
+
+  it('contracts when a delete button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['string 1', 'string 2'],
+        mode:  _EDIT,
+      },
+    });
+    const deleteButton = wrapper.get('[data-testid^="remove-item"]').element as HTMLElement;
+
+    await deleteButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('add button is hidden in read-only mode', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['read-only example'],
+        mode:  _VIEW,
+      },
+    });
+    const arrayListButtons = wrapper.findAll('[data-testid="array-list-button"]');
+
+    expect(arrayListButtons).toHaveLength(0);
+  });
+});

package/components/form/__tests__/ArrayListGrouped.test.ts

@@ -4,7 +4,7 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 describe('component: ArrayListGrouped', () => {
   it('should display enabled add button', () => {
     const wrapper = mount(ArrayListGrouped);
-    const button = wrapper.find('[data-testid^="add-item"]').element as HTMLInputElement;
+    const button = wrapper.find('[data-testid="array-list-button"]').element as HTMLButtonElement;
 
     expect(button.disabled).toBe(false);
   });
@@ -14,7 +14,7 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
-    const button = wrapper.find('[data-testid^="add-item"]');
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
     await button.trigger('click');
     await button.trigger('click');
@@ -28,12 +28,14 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
-    await wrapper.find('[data-testid^="add-item"]').trigger('click');
+    await button.trigger('click');
+    await button.trigger('click');
     await wrapper.find('[data-testid^="remove-item"]').trigger('click');
 
     const elements = wrapper.findAll('#test');
 
-    expect(elements).toHaveLength(0);
+    expect(elements).toHaveLength(1);
   });
 });

package/components/formatter/AppSummaryGraph.vue

@@ -41,11 +41,11 @@ export default {
         } else {
           out[key] = {
             key,
-            label:     state,
-            color:     textColor.replace(/text-/, 'bg-'),
+            label: state,
+            color: textColor.replace(/text-/, 'bg-'),
             textColor,
-            value:     1,
-            sort:      stateSort(textColor, state),
+            value: 1,
+            sort:  stateSort(textColor, state),
           };
         }
       }

package/components/formatter/BadgeStateFormatter.vue

@@ -5,7 +5,7 @@ export default {
   components: { BadgeState },
   props:      {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {
@@ -13,7 +13,7 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
 

package/components/formatter/Checked.vue

@@ -1,7 +1,7 @@
 <script>
 
 export default {
-  props:      {
+  props: {
     value: {
       type:    Boolean,
       default: true
@@ -12,7 +12,7 @@ export default {
 
 <template>
   <span v-if="value">
-    <i class="icon icon-lg icon-checkmark" />
+    <i class="icon icon-checkmark" />
   </span>
   <span
     v-else

package/components/formatter/ClusterLink.vue

@@ -2,9 +2,9 @@
 import { get } from '@shell/utils/object';
 
 export default {
-  props:      {
+  props: {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {
@@ -16,7 +16,7 @@ export default {
       default: null,
     }
   },
-  computed:   {
+  computed: {
     to() {
       if ( this.row && this.reference ) {
         return get(this.row, this.reference);
@@ -62,6 +62,11 @@ export default {
       {{ value }}
     </n-link>
     <span v-else>{{ value }}</span>
+    <i
+      v-if="row.unavailableMachines"
+      v-tooltip="row.unavailableMachines"
+      class="conditions-alert-icon icon-alert icon"
+    />
     <i
       v-if="row.rkeTemplateUpgrade"
       v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"

package/components/formatter/Date.vue

@@ -11,7 +11,7 @@ export default {
     },
 
     value: {
-      type:     [String, Date],
+      type:    [String, Date],
       default: ''
     },
 

package/components/formatter/DelayedValue.vue

@@ -21,7 +21,7 @@ export default {
     }
   },
 
-  methods:  {
+  methods: {
     startDelayedLoading() {
       this.loading = false;
     }

package/components/formatter/Endpoints.vue

@@ -4,7 +4,7 @@ import { NODE } from '@shell/config/types';
 export default {
   props: {
     value: {
-      type:     [Array, String],
+      type:    [Array, String],
       default: null,
     },
     row: {

package/components/formatter/FleetSummaryGraph.vue

@@ -30,11 +30,11 @@ export default {
         const textColor = colorForState(key);
 
         return {
-          label:     ucFirst(key),
-          color:     textColor.replace(/text-/, 'bg-'),
+          label: ucFirst(key),
+          color: textColor.replace(/text-/, 'bg-'),
           textColor,
-          value:     this.summary[key],
-          sort:      stateSort(textColor, key),
+          value: this.summary[key],
+          sort:  stateSort(textColor, key),
         };
       }).filter(x => x.value > 0);
 

package/components/formatter/IconIsDefault.vue

@@ -13,7 +13,7 @@ export default {
      * KV Pair containing the key to reference in the row
      */
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },
@@ -23,12 +23,12 @@ export default {
 <template>
   <span v-if="row[col.value]">
     <span>
-      <i class="icon icon-2x icon-checkmark" />
+      <i class="icon icon-checkmark" />
     </span>
   </span>
   <span v-else>
     <span>
-      <i class="icon icon-2x icon-x" />
+      <i class="icon icon-x" />
     </span>
   </span>
 </template>

package/components/formatter/IconText.vue

@@ -2,14 +2,14 @@
 import { get } from '@shell/utils/object';
 
 export default {
-  props:      {
+  props: {
     row: {
-      type:     Object,
-      default:  null,
+      type:    Object,
+      default: null,
     },
 
     value: {
-      type:     String,
+      type:    String,
       default: '',
     },
 

package/components/formatter/ImagePercentageBar.vue

@@ -3,17 +3,17 @@ import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 export default {
   components: { ProgressBarMulti },
 
-  props:      {
+  props: {
     value: {
-      type:     [String, Number],
+      type:    [String, Number],
       default: 0
     },
     row: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },

package/components/formatter/IngressFullPath.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  props:  {
+  props: {
     row: {
       type:    Object,
       default: () => {

package/components/formatter/InternalExternalIP.vue

@@ -11,8 +11,8 @@ export default {
     },
   },
   computed: {
-    showBoth() {
-      return this.row.internalIp !== this.row.externalIp;
+    internalSameAsExternal() {
+      return this.row.internalIp === this.row.externalIp;
     },
     ...mapGetters({ t: 'i18n/t' })
   },
@@ -35,12 +35,15 @@ export default {
       />
     </template>
     <template v-else>
-      {{ t('generic.none') }}
+      -
     </template>
-
-    <template v-if="showBoth">
-      <template v-if="isIp(row.internalIp)">
-        / {{ row.internalIp }} <CopyToClipboard
+    /
+    <template>
+      <template v-if="internalSameAsExternal && isIp(row.internalIp)">
+        {{ t('tableHeaders.internalIpSameAsExternal') }}
+      </template>
+      <template v-else-if="isIp(row.internalIp)">
+        {{ row.internalIp }}<CopyToClipboard
           label-as="tooltip"
           :text="row.internalIp"
           class="icon-btn"
@@ -48,7 +51,7 @@ export default {
         />
       </template>
       <template v-else>
-        {{ t('generic.none') }}
+        -
       </template>
     </template>
   </span>

package/components/formatter/LinkDetail.vue

@@ -4,7 +4,7 @@ import { get } from '@shell/utils/object';
 export default {
   props: {
     value: {
-      type:     String,
+      type:    String,
       default: ''
     },
     row: {
@@ -12,8 +12,8 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
-      default:  () => {}
+      type:    Object,
+      default: () => {}
     },
     reference: {
       type:    String,

package/components/formatter/List.vue

@@ -2,7 +2,7 @@
 export default {
   props: {
     value: {
-      type:     Array,
+      type:    Array,
       default: () => []
     }
   },

package/components/formatter/ListLink.vue

@@ -9,7 +9,7 @@ export default {
       required: true,
     },
     value: {
-      type:     Array,
+      type:    Array,
       default: () => []
     },
     options: {

package/components/formatter/ListLinkDetail.vue

@@ -5,7 +5,7 @@ export default {
   components: { LinkDetail },
   props:      {
     value: {
-      type:     Array,
+      type:    Array,
       default: () => []
     },
     row: {

package/components/formatter/LiveDate.vue

@@ -7,7 +7,7 @@ import { diffFrom } from '@shell/utils/time';
 export default {
   props: {
     value: {
-      type:     String,
+      type:    [String, Number],
       default: ''
     },
 
@@ -109,10 +109,10 @@ export default {
 
       let label = diff.label;
 
-      if ( diff === 0 ) {
+      if ( diff.diff === 0 ) {
         label = 'Just now';
       } else {
-        label += ` ${ prefix } ${ this.t(diff.unitsKey, { count: diff.label }) }`;
+        label += ` ${ prefix }${ this.t(diff.unitsKey, { count: diff.label }) }`;
         label = label.trim();
       }