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

package/assets/styles/base/_variables.scss

@@ -7,6 +7,7 @@ $max-width: 1440px !default;
 $min-width: 75% !default;
 $input-height: 61px;
 $unlabeled-input-height: 40px;
+$unlabaled-select-padding: 3px 0;
 
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;

package/assets/styles/global/_layout.scss

@@ -119,18 +119,27 @@ HEADER {
 }
 
 .localeSelector {
-  :deep(.popover-inner) {
+  :deep(.v-popper__inner) {
     padding: 50px 0;
   }
 
-  :deep(.popover-arrow) {
+  :deep(.v-popper__arrow-container) {
     display: none;
   }
 
-  :deep(.popover:focus) {
+  :deep(.v-popper:focus) {
     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/_select.scss

@@ -142,7 +142,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: 3px 0;
+  padding: $unlabaled-select-padding;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;

package/assets/styles/global/_tooltip.scss

@@ -1,4 +1,4 @@
-.tooltip {
+.v-popper__popper.v-popper--theme-tooltip {
   $triangle-size: 8px;
   $triangle-inner-size: $triangle-size - 1px;
   $center: calc(50% - #{$triangle-size});
@@ -7,130 +7,105 @@
   z-index: z-index('tooltip');
   max-width: 50vw;
 
-  .tooltip-inner {
+  .v-popper__inner {
     background: var(--tooltip-bg);
     color: var(--tooltip-text);
     border-radius: var(--border-radius);
     padding: 8px;
   }
 
-  .tooltip-arrow {
+  .v-popper__arrow-container {
     width: 0;
     height: 0;
     border: 0 solid transparent;
     position: absolute;
     z-index: 1;
 
-    &:after {
-      position: absolute;
+    .v-popper__arrow-inner {
       border: $triangle-inner-size solid transparent;
-      content: '';
     }
   }
 
-  &[x-placement^="top"] {
-    margin-bottom: $triangle-size;
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      bottom: -4px;
-    }
-
-    margin-bottom: $triangle-size;
-
-    .tooltip-arrow {
-      bottom: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-bottom-width: 0;
         border-top-color: var(--tooltip-bg);
-        bottom: 1px;
         left: -$triangle-inner-size;
       }
     }
   }
 
 
-  &[x-placement^="bottom"] {
-    margin-top: $triangle-size;
+  &[data-popper-placement^="bottom"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      top: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-top-width: 0;
         border-bottom-color: var(--tooltip-bg);
-        top: 1px;
         left: -$triangle-inner-size;
         background: transparent;
       }
     }
   }
 
-  &[x-placement^="right"] {
-    margin-left: $triangle-size;
-
-    .tooltip-arrow {
-      left: -$triangle-inner-size;
+  &[data-popper-placement^="right"] {
+    .v-popper__arrow-container {
 
-      &:after {
-        border-left-width: 0;
+      .v-popper__arrow-outer {
         border-right-color: var(--tooltip-bg);
-        left: 1px;
         top: -$triangle-inner-size;
+        border-left-width: 0;
       }
     }
   }
 
-  &[x-placement^="left"] {
-    margin-right: $triangle-size;
+  &[data-popper-placement^="left"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      right: -$triangle-inner-size;
-
-      &:after {
+      .v-popper__arrow-outer {
         border-right-width: 0;
         border-left-color: var(--tooltip-bg);
-        right: 1px;
         top: -$triangle-inner-size;
       }
     }
   }
 
   &.tooltip-warning {
-    .tooltip-inner {
+    .v-popper__inner {
       background: var(--tooltip-bg-warning);
       color: var(--tooltip-text-warning);
     }
 
-    &[x-placement^="top"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="top"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-top-color: var(--tooltip-bg-warning);
         }
       }
     }
 
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-bottom-color: var(--body-bg);
         }
       }
     }
 
-    &[x-placement^="right"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="right"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-right-color: var(--tooltip-bg-warning);
         }
       }
     }
 
-    &[x-placement^="left"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="left"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-left-color: var(--tooltip-bg-warning);
         }
       }
@@ -138,44 +113,47 @@
   }
 }
 
-.popover {
+.v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
   border-radius: var(--border-radius);
 
-  .popover-inner {
+  .v-popper__inner {
     background: $color;
     color: var(--popover-text);
     padding: 10px;
     border-radius: var(--border-radius);
-    box-shadow: 0 5px 20px var(--shadow);
+    border: none;
 
     a {
       color: var(--popover-text);
     }
   }
 
-  .popover-arrow {
+  .v-popper__arrow-container {
     border-color: transparent;
+    .v-popper__arrow-outer {
+      border-color: transparent;
+    }
   }
+}
 
-  &[x-placement^="bottom"] {
-    .popover-arrow {
-      &:after {
-        // border-bottom-color: var(--popover-bg);
-        border-bottom-width: 0;
-      }
+.v-popper__popper.v-popper--theme-dropdown {
+  z-index: z-index('tooltip');
+
+  &.containerLogsDropdown {
+    .v-popper__arrow-container {
+      display: none;
     }
   }
-
 }
 
-.v-popover {
+.v-popper {
   display: inline;
 }
 
-.tooltip,
-.popover {
+.v-popper__popper.v-popper--theme-tooltip,
+.v-popper {
   &[aria-hidden='true'] {
     // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
     // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.

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"
@@ -82,7 +82,7 @@ export default {
             Button <i class="icon icon-chevron-down" />
           </button>
         </slot>
-        <template #popover>
+        <template #popper>
           <slot name="popover-content" />
         </template>
       </v-dropdown>
@@ -123,7 +123,7 @@ export default {
   $sm-trigger-padding: 10px 10px 10px 10px;
   $lg-trigger-padding: 18px 10px 10px 10px;
 
-  .v-popover {
+  .v-popper {
     .text-right {
       margin-top: 5px;
     }
@@ -179,7 +179,7 @@ export default {
       &>.btn {
         padding: 15px 35px 15px 15px;
       }
-      .v-popover{
+      .v-popper{
         .trigger{
           position: absolute;
           top: 0px;
@@ -194,23 +194,19 @@ export default {
       }
     }
   }
-  .popover {
+  .v-popper__popper {
     border: none;
   }
-  .tooltip {
+  .v-popper__popper {
     margin-top: 0px;
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        border-bottom-color: var(--dropdown-border);
-
-        &:after {
-          border-bottom-color: var(--dropdown-bg);
-        }
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        display: none;
       }
     }
 
-    .tooltip-inner {
+    .v-popper__inner {
       color: var(--dropdown-text);
       background-color: var(--dropdown-bg);
       border: 1px solid var(--dropdown-border);

package/components/ActionMenu.vue

@@ -258,7 +258,7 @@ export default {
       <li
         v-for="(opt, i) in menuOptions"
         :key="i"
-        :disabled="opt.disabled"
+        :disabled="opt.disabled ? true : null"
         :class="{divider: opt.divider}"
         :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"

package/components/ButtonDropdown.vue

@@ -181,7 +181,7 @@ export default {
     :clearable="false"
     :close-on-select="closeOnSelect"
     :filterable="false"
-    :value="buttonLabel"
+    :modelValue="buttonLabel"
     :options="dropdownOptions"
     :map-keydown="mappedKeys"
     :get-option-key="
@@ -191,7 +191,7 @@ export default {
     :selectable="selectable"
     @search:blur="onBlur"
     @search:focus="onFocus"
-    @update:value="$emit('click-action', $event)"
+    @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
       <slot name="no-options" />
@@ -211,14 +211,15 @@ export default {
     <!-- Pass down templates provided by the caller -->
     <template
       v-for="(_, slot) of $slots"
+      #[slot]="scope"
       :key="slot"
-      v-slot:[slot]="scope"
     >
-      <slot
-        v-if="slot !== 'selected-option'"
-        :name="slot"
-        v-bind="scope"
-      />
+      <template v-if="slot !== 'selected-option' && typeof $slots[slot] === 'function'">
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
     </template>
   </v-select>
 </template>

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>