@rancher/shell 3.0.0-rc.2 → 3.0.0-rc.3

package/assets/styles/global/_layout.scss

@@ -131,6 +131,15 @@ HEADER {
     outline: 0;
   }
 
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
+      .v-popper__arrow-inner {
+        top: 0;
+        border-color: var(--tooltip-bg);
+      }
+    }
+  }
+
   li {
     padding: 8px 20px;
 

package/assets/styles/global/_tooltip.scss

@@ -123,7 +123,6 @@
     color: var(--popover-text);
     padding: 10px;
     border-radius: var(--border-radius);
-    box-shadow: 0 5px 20px var(--shadow);
     border: none;
 
     a {
@@ -133,6 +132,19 @@
 
   .v-popper__arrow-container {
     border-color: transparent;
+    .v-popper__arrow-outer {
+      border-color: transparent;
+    }
+  }
+}
+
+.v-popper__popper.v-popper--theme-dropdown {
+  z-index: z-index('tooltip');
+
+  &.containerLogsDropdown {
+    .v-popper__arrow-container {
+      display: none;
+    }
   }
 }
 

package/assets/translations/en-us.yaml

@@ -6287,6 +6287,7 @@ workload:
     workload: Workload
     pods: Pods by State
     runs: Runs
+  error: Pod { name } Security Policy Violation { policy }
   gaugeStates:
     succeeded: Successful
     running: Running

package/components/ActionDropdown.vue

@@ -66,7 +66,7 @@ export default {
         placement="bottom"
         :container="false"
         :disabled="disableButton"
-        :popper-options="{modifiers: { flip: { enabled: false } } }"
+        :flip="false"
       >
         <slot
           name="button-content"

package/components/CodeMirror.vue

@@ -57,7 +57,7 @@ export default {
         theme:                   `base16-${ theme }`,
         lineNumbers:             true,
         line:                    true,
-        styleActiveLine:         true,
+        styleActiveLine:         false,
         lineWrapping:            true,
         foldGutter:              true,
         styleSelectedText:       true,
@@ -66,6 +66,7 @@ export default {
 
       if (this.asTextArea) {
         out.lineNumbers = false;
+        out.foldGutter = false;
         out.tabSize = 0;
         out.extraKeys = { Tab: false };
       }
@@ -178,6 +179,7 @@ export default {
         :value="value"
         :options="combinedOptions"
         :disabled="isDisabled"
+        :original-style="true"
         @ready="onReady"
         @input="onInput"
         @changes="onChanges"
@@ -194,72 +196,8 @@ export default {
 <style lang="scss">
   $code-mirror-animation-time: 0.1s;
 
-  .codemirror-container {
-    z-index: 0;
-
-    // Keyboard mapping overlap
-    .keymap.overlay {
-      position: absolute;
-      display: flex;
-      top: 7px;
-      right: 7px;
-      z-index: 1;
-      cursor: pointer;
-
-      .keymap-indicator {
-        width: 48px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid transparent;
-        color: var(--darker);
-        background-color: var(--overlay-bg);
-        font-size: 12px;
-
-        .close-indicator {
-          width: 0;
-
-          .icon-close {
-            color: var(--primary);
-            opacity: 0;
-          }
-        }
-
-        .keymap-icon {
-          font-size: 24px;
-          opacity: 0.8;
-          transition: margin-right $code-mirror-animation-time ease-in-out;
-        }
-
-        &:hover {
-          border: 1px solid var(--primary);
-          border-radius: var(--border-radius);;
-
-          .close-indicator {
-            margin-left: -6px;
-            width: auto;
-
-            .icon-close {
-              opacity: 1;
-              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
-            }
-          }
-
-          .keymap-icon {
-            opacity: 0.6;
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-
-    .vue-codemirror .CodeMirror {
-      height: initial;
-      background: none
-    }
-
-    &.as-text-area {
+  .code-mirror {
+    &.as-text-area .codemirror-container{
       min-height: 40px;
       position: relative;
       display: block;
@@ -345,6 +283,83 @@ export default {
         color: var(--primary-text);
         background-color: var(--primary);
       }
+
+      .CodeMirror-gutters .CodeMirror-foldgutter:empty {
+        display: none;
+      }
+    }
+  }
+
+  .code-mirror .codemirror-container {
+    z-index: 0;
+    font-size: inherit !important;
+
+    // Keyboard mapping overlap
+    .keymap.overlay {
+      position: absolute;
+      display: flex;
+      top: 7px;
+      right: 7px;
+      z-index: 1;
+      cursor: pointer;
+
+      .keymap-indicator {
+        width: 48px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
+        color: var(--darker);
+        background-color: var(--overlay-bg);
+        font-size: 12px;
+
+        .close-indicator {
+          width: 0;
+
+          .icon-close {
+            color: var(--primary);
+            opacity: 0;
+          }
+        }
+
+        .keymap-icon {
+          font-size: 24px;
+          opacity: 0.8;
+          transition: margin-right $code-mirror-animation-time ease-in-out;
+        }
+
+        &:hover {
+          border: 1px solid var(--primary);
+          border-radius: var(--border-radius);;
+
+          .close-indicator {
+            margin-left: -6px;
+            width: auto;
+
+            .icon-close {
+              opacity: 1;
+              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
+            }
+          }
+
+          .keymap-icon {
+            opacity: 0.6;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    //rm no longer extant selector
+    .CodeMirror {
+      height: initial;
+      background: none
+    }
+
+    .CodeMirror-gutters {
+      background: inherit;
     }
+
   }
 </style>

package/components/CruResource.vue

@@ -587,76 +587,74 @@ export default {
               </template>
             </template>
             <template #controlsContainer="{showPrevious, next, back, activeStep, canNext, activeStepIndex, visibleSteps}">
-              <template name="form-footer">
-                <CruResourceFooter
-                  class="cru__footer"
-                  :mode="mode"
-                  :is-form="showAsForm"
-                  :show-cancel="showCancel"
-                  @cancel-confirmed="confirmCancel"
+              <CruResourceFooter
+                class="cru__footer"
+                :mode="mode"
+                :is-form="showAsForm"
+                :show-cancel="showCancel"
+                @cancel-confirmed="confirmCancel"
+              >
+                <!-- Pass down templates provided by the caller -->
+                <template
+                  v-for="(_, slot) of $slots"
+                  #[slot]="scope"
+                  :key="slot"
                 >
-                  <!-- Pass down templates provided by the caller -->
+                  <template v-if="shouldProvideSlot(slot)">
+                    <slot
+                      :name="slot"
+                      v-bind="scope"
+                    />
+                  </template>
+                </template>
+                <div class="controls-steps">
+                  <button
+                    v-if="showYaml"
+                    type="button"
+                    class="btn role-secondary"
+                    @click="showPreviewYaml"
+                  >
+                    <t k="cruResource.previewYaml" />
+                  </button>
                   <template
-                    v-for="(_, slot) of $slots"
-                    #[slot]="scope"
-                    :key="slot"
+                    v-if="showPrevious"
+                    name="back"
                   >
-                    <template v-if="shouldProvideSlot(slot)">
-                      <slot
-                        :name="slot"
-                        v-bind="scope"
-                      />
-                    </template>
-                  </template>
-                  <div class="controls-steps">
                     <button
-                      v-if="showYaml"
                       type="button"
                       class="btn role-secondary"
-                      @click="showPreviewYaml"
+                      @click="back()"
                     >
-                      <t k="cruResource.previewYaml" />
+                      <t k="wizard.previous" />
                     </button>
-                    <template
-                      v-if="showPrevious"
-                      name="back"
-                    >
-                      <button
-                        type="button"
-                        class="btn role-secondary"
-                        @click="back()"
-                      >
-                        <t k="wizard.previous" />
-                      </button>
-                    </template>
-                    <template
-                      v-if="activeStepIndex === visibleSteps.length-1"
-                      name="finish"
-                    >
-                      <AsyncButton
-                        v-if="!showSubtypeSelection && !isView"
-                        ref="save"
-                        :disabled="!activeStep.ready"
-                        :mode="finishButtonMode || mode"
-                        @click="$emit('finish', $event)"
-                      />
-                    </template>
-                    <template
-                      v-else
-                      name="next"
+                  </template>
+                  <template
+                    v-if="activeStepIndex === visibleSteps.length-1"
+                    name="finish"
+                  >
+                    <AsyncButton
+                      v-if="!showSubtypeSelection && !isView"
+                      ref="save"
+                      :disabled="!activeStep.ready"
+                      :mode="finishButtonMode || mode"
+                      @click="$emit('finish', $event)"
+                    />
+                  </template>
+                  <template
+                    v-else
+                    name="next"
+                  >
+                    <button
+                      :disabled="!canNext"
+                      type="button"
+                      class="btn role-primary"
+                      @click="next()"
                     >
-                      <button
-                        :disabled="!canNext"
-                        type="button"
-                        class="btn role-primary"
-                        @click="next()"
-                      >
-                        <t k="wizard.next" />
-                      </button>
-                    </template>
-                  </div>
-                </CruResourceFooter>
-              </template>
+                      <t k="wizard.next" />
+                    </button>
+                  </template>
+                </div>
+              </CruResourceFooter>
             </template>
           </Wizard>
         </div>

package/components/Import.vue

@@ -140,7 +140,6 @@ export default {
             <div class="col span-6">
               <LabeledSelect
                 :value="defaultNamespace"
-                class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"

package/components/LocaleSelector.vue

@@ -52,9 +52,11 @@ export default {
     <div v-if="mode === 'login'">
       <div v-if="showLocale">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          distance="8"
+          skidding="12"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"

package/components/SortableTable/index.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import { defineAsyncComponent } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -682,7 +683,7 @@ export default {
                 const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
-                  component = pluginFormatter;
+                  component = defineAsyncComponent(pluginFormatter);
                   needRef = true;
                 }
               }

package/components/Wizard.vue

@@ -4,6 +4,7 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
+import LazyImage from '@shell/components/LazyImage';
 
 /*
 Wizard accepts an array of steps (see props), and creates named slots for each step.
@@ -26,6 +27,7 @@ export default {
     AsyncButton,
     Banner,
     Loading,
+    LazyImage,
   },
 
   props: {

package/components/YamlEditor.vue

@@ -103,7 +103,7 @@ export default {
         mode:            'yaml',
         lint:            !readOnly,
         lineNumbers:     !readOnly,
-        styleActiveLine: true,
+        styleActiveLine: false,
         tabSize:         2,
         indentWithTabs:  false,
         cursorBlinkRate: ( readOnly ? -1 : 530 ),

package/components/__tests__/ContainerResourceLimit.test.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import ContainerResourceLimit from '@shell/components/ContainerResourceLimit.vue';
+
+describe('component: ContainerResourceLimit', () => {
+  it.each([
+    ['limitsCpu', 'cpu-limit', '111m', '111'],
+    ['limitsMemory', 'memory-limit', '111Mi', '111'],
+    ['requestsCpu', 'cpu-reservation', '111m', '111'],
+    ['requestsMemory', 'memory-reservation', '111Mi', '111'],
+    // ['limitsGpu', 'gpu-limit', 1000], // Input does not work atm
+  ])('given value prop key %p as %p should display value %p', (key, id, value, expectation) => {
+    const wrapper = mount(ContainerResourceLimit, { propsData: { value: { [key]: value } } });
+
+    const element = wrapper.find(`[data-testid="${ id }"]`).element as HTMLInputElement;
+
+    expect(element.value).toBe(expectation);
+  });
+
+  describe.each([
+    'cpu-reservation',
+    'memory-reservation',
+    'cpu-limit',
+    'memory-limit',
+  ])('given input %p', (id) => {
+    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+      const wrapper = mount(ContainerResourceLimit);
+      const input = wrapper.find(`[data-testid="${ id }"]`);
+
+      await input.setValue('123');
+      await input.trigger(trigger);
+
+      expect((input.element as HTMLInputElement).value).toBe('123');
+    });
+  });
+});

package/components/auth/SelectPrincipal.vue

@@ -178,7 +178,7 @@ export default {
     v-clean-tooltip="{
       content: tooltipContent,
       placement: 'bottom',
-      classes: ['select-principal-tooltip']
+      popperClass: ['select-principal-tooltip']
     }"
     :mode="mode"
     :label="label"

package/components/fleet/FleetStatus.vue

@@ -160,9 +160,9 @@ function toPercent(value, min, max) {
             ref="popover"
             placement="bottom-end"
             offset="-10"
-            trigger="manual"
+            :triggers="[]"
             :delay="{show: 0, hide: 0}"
-            :popper-options="{modifiers: { flip: { enabled: false } } }"
+            :flip="false"
             :container="false"
           >
             <div class="meta-title">

package/components/form/Labels.vue

@@ -97,19 +97,17 @@ export default {
             name="labels"
             :toggler="toggler"
           >
-            <template>
-              <KeyValue
-                key="labels"
-                :value="value.labels"
-                :protected-keys="value.systemLabels || []"
-                :toggle-filter="toggler"
-                :add-label="t('labels.addLabel')"
-                :mode="mode"
-                :read-allowed="false"
-                :value-can-be-empty="true"
-                @update:value="value.setLabels($event)"
-              />
-            </template>
+            <KeyValue
+              key="labels"
+              :value="value.labels"
+              :protected-keys="value.systemLabels || []"
+              :toggle-filter="toggler"
+              :add-label="t('labels.addLabel')"
+              :mode="mode"
+              :read-allowed="false"
+              :value-can-be-empty="true"
+              @update:value="value.setLabels($event)"
+            />
           </slot>
         </div>
       </div>

package/components/form/UnitInput.vue

@@ -6,6 +6,8 @@ import { _EDIT } from '@shell/config/query-params';
 export default {
   components: { LabeledInput },
 
+  emits: ['update:value'],
+
   props: {
     /**
      * Convert output to string

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

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { UNITS } from '@shell/utils/units';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { defineComponent } from 'vue';
 
 describe('component: UnitInput', () => {
   it('should renders', () => {
@@ -184,4 +185,71 @@ describe('component: UnitInput', () => {
     expect(wrapper.emitted('update:value')).toBeTruthy();
     expect(wrapper.emitted('update:value')[4][0]).toBe(value);
   });
+
+  describe.each([
+    ['123m', -1, 1000, 'CPUs', true],
+    // ['123Mi', 2, 1024, '', true],
+  ])('given real use case with value %p, exponent %p, increment %p, baseUnit %p, modifier %p', (value, inputExponent, increment, baseUnit, outputModifier) => {
+    it('should display input value 123', () => {
+      const wrapper = mount(UnitInput, {
+        props: {
+          value,
+          inputExponent,
+          increment,
+          outputModifier,
+          baseUnit
+        }
+      });
+
+      const inputElement = wrapper.find('input').element as HTMLInputElement;
+
+      expect(inputElement.value).toBe('123');
+    });
+
+    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+      const wrapper = mount(UnitInput, {
+        props: {
+          value: '0',
+          inputExponent,
+          increment,
+          outputModifier,
+          baseUnit
+        }
+      });
+      const input = wrapper.find('input');
+
+      await input.setValue('123');
+      await input.trigger(trigger);
+
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      expect(input.element.value).toBe('123');
+    });
+
+    it('should keep parent value to 123 on input', async() => {
+      const ParentComponent = defineComponent({
+        components: { UnitInput },
+        template:   `
+          <UnitInput
+            :value="value"
+            :input-exponent="inputExponent"
+            :output-modifier="outputModifier"
+            :base-unit="baseUnit"
+            @update:value="event => value = event.target.value"
+          />
+        `,
+        data() {
+          return {
+            value, inputExponent, outputModifier, baseUnit
+          };
+        }
+      });
+      const wrapper = mount(ParentComponent);
+      const input = wrapper.find('input');
+
+      await input.trigger('update:value');
+      await input.trigger('input');
+
+      expect(input.element.value).toBe('123');
+    });
+  });
 });

package/components/formatter/AppSummaryGraph.vue

@@ -89,8 +89,8 @@ export default {
     v-if="show"
     class="text-center hand"
     placement="top"
-    :open-group="row.id"
-    :trigger="show ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="show ? ['click'] : []"
     offset="1"
   >
     <ProgressBarMulti

package/components/formatter/FleetSummaryGraph.vue

@@ -63,8 +63,8 @@ export default {
     v-if="show"
     class="text-center hand"
     placement="top"
-    :open-group="row.id"
-    :trigger="show ? 'click' : 'manual'"
+    :show-group="row.id"
+    :triggers="show ? ['click'] : []"
     offset="1"
   >
     <ProgressBarMulti