@rancher/shell 0.1.0 → 0.1.1

package/components/Tabbed/index.vue

@@ -117,6 +117,9 @@ export default {
   },
 
   methods: {
+    hasIcon(tab) {
+      return tab.displayAlertIcon || (tab.error && !tab.active);
+    },
     hashChange() {
       if (!this.scrollOnChange) {
         const scrollable = document.getElementsByTagName('main')[0];
@@ -159,7 +162,7 @@ export default {
         tab.active = (tab.name === selected.name);
       }
 
-      this.$emit('changed', { tab: selected });
+      this.$emit('changed', { tab: selected, selectedName: selected.name });
       this.activeTabName = selected.name;
     },
 
@@ -220,7 +223,7 @@ export default {
         v-for="tab in sortedTabs"
         :id="tab.name"
         :key="tab.name"
-        :class="{tab: true, active: tab.active, disabled: tab.disabled}"
+        :class="{tab: true, active: tab.active, disabled: tab.disabled, error: (tab.error)}"
         role="presentation"
       >
         <a
@@ -230,7 +233,7 @@ export default {
           @click.prevent="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
-          <i v-if="tab.displayAlertIcon" class="conditions-alert-icon icon-error icon-lg" />
+          <i v-if="hasIcon(tab)" v-tooltip="t('validation.tab')" class="conditions-alert-icon icon-error icon-lg" />
         </a>
       </li>
       <li v-if="sideTabs && !sortedTabs.length" class="tab disabled">
@@ -255,165 +258,176 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .tabs {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+.tabs {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &.horizontal {
+    border: solid thin var(--border);
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
 
-    &.horizontal {
+    + .tab-container {
       border: solid thin var(--border);
-      border-bottom: 0;
-      display: flex;
-      flex-direction: row;
-
-      + .tab-container {
-        border: solid thin var(--border);
-      }
+    }
 
-      .tab.active {
-        border-bottom: solid 2px var(--primary);
-      }
+    .tab.active {
+      border-bottom: solid 2px var(--primary);
     }
+  }
 
-    &:focus {
-     outline:none;
+  &:focus {
+    outline: none;
 
-      & .tab.active a span {
-        text-decoration: underline;
-      }
+    & .tab.active a span {
+      text-decoration: underline;
     }
+  }
 
-    .tab {
-      position: relative;
-      float: left;
-      padding: 0 8px 0 0;
-      cursor: pointer;
+  .tab {
+    position: relative;
+    float: left;
+    padding: 0 8px 0 0;
+    cursor: pointer;
 
-      A {
-        display: flex;
-        align-items: center;
-        padding: 10px 15px;
+    A {
+      display: flex;
+      align-items: center;
+      padding: 10px 15px;
 
-        &:hover {
-          text-decoration: none;
-          span {
-            text-decoration: underline;
-          }
+      &:hover {
+        text-decoration: none;
+        span {
+          text-decoration: underline;
         }
       }
+    }
 
-      .conditions-alert-icon {
-        color: var(--error);
-        padding-left: 10px;
-      }
+    .conditions-alert-icon {
+      color: var(--error);
+      padding-left: 4px;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
 
-      &:last-child {
-        padding-right: 0;
+    &.active {
+      > A {
+        color: var(--primary);
+        text-decoration: none;
       }
+    }
 
-      &.active {
-        > A {
-          color: var(--primary);
-          text-decoration: none;
-        }
+    &.error {
+      & A > i {
+        color: var(--error);
       }
     }
   }
+}
+
+.tab-container {
+  padding: 20px;
+
+  &.no-content {
+    padding: 0 0 3px 0;
+  }
+}
+
+.side-tabs {
+  display: flex;
+  box-shadow: 0 0 20px var(--shadow);
+  border-radius: calc(var(--border-radius) * 2);
+  background-color: var(--tabbed-sidebar-bg);
 
   .tab-container {
     padding: 20px;
+  }
 
-    &.no-content {
-      padding: 0 0 3px 0;
-    }
+  // Tabbed component within a tabbed component
+  .tab-container & {
+    margin: -20px;
+    box-shadow: unset;
   }
 
-  .side-tabs {
+  & .tabs {
+    width: $sideways-tabs-width;
+    min-width: $sideways-tabs-width;
     display: flex;
-    box-shadow: 0 0 20px var(--shadow);
-    border-radius: calc(var(--border-radius) * 2);
-    background-color: var(--tabbed-sidebar-bg);
+    flex: 1 0;
+    flex-direction: column;
 
-    .tab-container {
-      padding: 20px;
-    }
+    // &.vertical {
+    //   .tab.active {
+    //     background-color: var(--tabbed-container-bg);
+    //   }
+    // }
 
-    & .tabs {
-      width: $sideways-tabs-width;
-      min-width: $sideways-tabs-width;
-      display: flex;
-      flex: 1 0;
-      flex-direction: column;
-
-      // &.vertical {
-      //   .tab.active {
-      //     background-color: var(--tabbed-container-bg);
-      //   }
-      // }
-
-      & .tab {
-        width: 100%;
-        border-left: solid 5px transparent;
+    & .tab {
+      width: 100%;
+      border-left: solid 5px transparent;
 
-        &.toggle A {
-          color: var(--primary);
-        }
+      &.toggle A {
+        color: var(--primary);
+      }
 
-        A {
-          color: var(--primary);
-        }
+      A {
+        color: var(--primary);
+      }
 
-        &.active {
-          background-color: var(--body-bg);
-          border-left: solid 5px var(--primary);
+      &.active {
+        background-color: var(--body-bg);
+        border-left: solid 5px var(--primary);
 
-          & A{
-            color: var(--input-label);
-          }
+        & A {
+          color: var(--input-label);
         }
+      }
 
-        &.disabled {
-          background-color: var(--disabled-bg);
+      &.disabled {
+        background-color: var(--disabled-bg);
 
-          & A {
-            color: var(--disabled-text);
-            text-decoration: none;
-          }
+        & A {
+          color: var(--disabled-text);
+          text-decoration: none;
         }
       }
-      .tab-list-footer {
-        list-style: none;
-        padding: 0;
-        margin-top: auto;
+    }
+    .tab-list-footer {
+      list-style: none;
+      padding: 0;
+      margin-top: auto;
 
-        li {
+      li {
+        display: flex;
+        flex: 1;
+
+        .btn {
+          flex: 1 1;
           display: flex;
-          flex: 1;
-
-          .btn {
-            flex: 1 1;
-            display: flex;
-            justify-content: center;
-          }
-
-          button:first-of-type {
-            border-top: solid 1px var(--border);
-            border-right: solid 1px var(--border);
-            border-top-right-radius: 0;
-          }
-          button:last-of-type {
-            border-top: solid 1px var(--border);
-            border-top-left-radius: 0;
-          }
+          justify-content: center;
+        }
 
+        button:first-of-type {
+          border-top: solid 1px var(--border);
+          border-right: solid 1px var(--border);
+          border-top-right-radius: 0;
+        }
+        button:last-of-type {
+          border-top: solid 1px var(--border);
+          border-top-left-radius: 0;
         }
       }
     }
+  }
 
-    & .tab-container{
-      width: calc(100% - #{$sideways-tabs-width});
-      flex-grow: 1;
-      background-color: var(--body-bg);
-    }
+  & .tab-container {
+    width: calc(100% - #{$sideways-tabs-width});
+    flex-grow: 1;
+    background-color: var(--body-bg);
   }
+}
 </style>

package/components/TypeDescription.vue

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
 import { addObject } from '@shell/utils/array';
 

package/components/VMConsoleBar.vue

@@ -1,7 +1,7 @@
 <script>
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import { mapGetters } from 'vuex';
-import { OFF } from '@shell/models/harvester/kubevirt.io.virtualmachine';
+import { OFF } from '../models/harvester/kubevirt.io.virtualmachine';
 
 export default {
   name: 'VMConsoleBar',

package/components/Wizard.vue

@@ -1,7 +1,7 @@
 <script>
 
 import AsyncButton from '@shell/components/AsyncButton';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
 
@@ -19,6 +19,8 @@ Wizard will emit these events:
 */
 
 export default {
+  name: 'Wizard',
+
   components: {
     AsyncButton,
     Banner,
@@ -258,7 +260,7 @@ export default {
       <div class="header">
         <div class="title">
           <div v-if="showBanner" class="top choice-banner">
-            <slot name="bannerTitle">
+            <slot v-if="!!bannerImage || !!bannerTitle" name="bannerTitle">
               <div v-show="initialTitle || activeStepIndex > 0" class="title">
                 <!-- Logo -->
                 <slot name="bannerTitleImage">
@@ -277,13 +279,12 @@ export default {
             </slot>
             <!-- Step number with subtext -->
             <div v-if="activeStep && showSteps" class="subtitle">
-              <h2>{{ t(`asyncButton.${headerMode || finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
+              <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
               <slot name="bannerSubtext">
                 <span v-if="activeStep.subtext !== null" class="subtext">{{ activeStep.subtext || activeStep.label }}</span>
               </slot>
             </div>
           </div>
-          </slot>
           <div class="step-sequence">
             <ul
               v-if="showSteps"
@@ -319,15 +320,30 @@ export default {
           </div>
         </div>
       </div>
-      <div class="step-container">
+      <slot
+        class="step-container"
+        name="stepContainer"
+        :activeStep="activeStep"
+      >
         <template v-for="step in steps">
           <div v-if="step.name === activeStep.name || step.hidden" :key="step.name" class="step-container__step" :class="{'hide': step.name !== activeStep.name && step.hidden}">
             <slot :step="step" :name="step.name" />
           </div>
         </template>
-      </div>
-
-      <div class="controls-container">
+      </slot>
+      <slot
+        name="controlsContainer"
+        :showPrevious="showPrevious"
+        :next="next"
+        :back="back"
+        :canNext="canNext"
+        :activeStepIndex="activeStepIndex"
+        :visibleSteps="visibleSteps"
+        :errorStrings="errorStrings"
+        :finish="finish"
+        :cancel="cancel"
+        :activeStep="activeStep"
+      >
         <div v-for="(err,idx) in errorStrings" :key="idx">
           <Banner color="error" :label="err" :closable="true" @close="errors.splice(idx, 1)" />
         </div>
@@ -337,10 +353,9 @@ export default {
               <t k="generic.cancel" />
             </button>
           </slot>
-
           <div class="controls-steps">
             <slot v-if="showPrevious" name="back" :back="back">
-              <button :disabled="!canPrevious" type="button" class="btn role-secondary" @click="back()">
+              <button :disabled="!canPrevious || (!editFirstStep && activeStepIndex===1)" type="button" class="btn role-secondary" @click="back()">
                 <t k="wizard.previous" />
               </button>
             </slot>
@@ -358,7 +373,7 @@ export default {
             </slot>
           </div>
         </div>
-      </div>
+      </slot>
     </div>
   </div>
 </template>
@@ -380,10 +395,9 @@ $spacer: 10px;
 
   border-bottom: var(--header-border-size) solid var(--header-border);
 
- $minHeight: 75px;
+ $minHeight: 60px;
   & > .title {
     flex: 1;
-    min-height: 75px;
     min-height: $minHeight;
     display: flex;
   }
@@ -426,10 +440,19 @@ $spacer: 10px;
           width: 40px;
           overflow: visible;
           padding-top: 15px;
+
+          .cru__content & {
+            padding-top: 0;
+
+          }
           & > span {
             padding-bottom: 5px;
             margin-bottom: 5px;
             white-space: nowrap;
+
+            .cru__content & {
+              padding-bottom: 3px;
+            }
           }
         }
 
@@ -457,6 +480,10 @@ $spacer: 10px;
         border-top: 1px solid var(--border);
         position: relative;
         top: 28px;
+
+        .cru__content & {
+          top: 13px;
+        }
       }
     }
   }
@@ -466,6 +493,7 @@ $spacer: 10px;
     flex-basis: 40%;
     display: flex;
     align-items: center;
+    margin-bottom: $spacer;
 
     &.selected{
       background-color: var(--accent-btn);
@@ -539,8 +567,14 @@ $spacer: 10px;
   }
 }
 
-.controls-container {
   .controls-row {
+
+    // Overrides outlet padding
+    margin-left: -$space-m;
+    margin-right: -$space-m;
+    margin-bottom: -$space-m;
+    padding: $space-s $space-m;
+
     display: flex;
     justify-content: space-between;
     padding-top: $spacer;
@@ -554,6 +588,11 @@ $spacer: 10px;
       }
     }
   }
+
+.wizard {
+  .header {
+    margin-bottom: 2*$spacer;
+  }
 }
 
 </style>

package/components/YamlEditor.vue

@@ -49,6 +49,15 @@ export default {
     hidePreviewButtons: {
       type:     Boolean,
       default:  false,
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'yaml-editor'
     }
   },
 
@@ -216,6 +225,7 @@ export default {
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
       :options="cmOptions"
+      :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"
       @onChanges="onChanges"

package/components/__tests__/CopyCode.test.ts

@@ -1,15 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
-import VTooltip from 'v-tooltip';
-
-const localVue = createLocalVue();
-
-localVue.use(VTooltip);
 
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
     const wrapper = mount(CopyCode, {
-      localVue,
       mocks: { $copyText: () => new Promise(() => undefined) },
       slots: { default: '<div></div>' }
     });

package/components/__tests__/CruResource.test.ts

@@ -1,16 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import VModal from 'vue-js-modal';
-
-const localVue = createLocalVue();
-
-localVue.use(VModal);
 
 describe('component: CruResource', () => {
   it('should hide Cancel button', () => {
     const wrapper = mount(CruResource, {
-      localVue,
       propsData: {
         canYaml:  false,
         mode:     _EDIT,
@@ -39,7 +33,6 @@ describe('component: CruResource', () => {
   it('should display errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      localVue,
       propsData: {
         canYaml:  false,
         mode:     _EDIT,

package/components/auth/AllowedPrincipals.vue

@@ -1,5 +1,5 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import ArrayList from '@shell/components/form/ArrayList';
 import Principal from '@shell/components/auth/Principal';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';

package/components/auth/AuthBanner.vue

@@ -1,6 +1,6 @@
 
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 
 export default {
@@ -41,6 +41,7 @@ export default {
       <div class="text">
         {{ t('authConfig.stateBanner.enabled', tArgs) }}
       </div>
+      <slot name="actions" />
       <button type="button" class="btn-sm role-primary" @click="edit">
         {{ t('action.edit') }}
       </button>

package/components/auth/AzureWarning.vue

@@ -0,0 +1,69 @@
+<script>
+// This component will become redundant in 2023, see https://docs.microsoft.com/en-us/graph/migrate-azure-ad-graph-overview
+import { NORMAN, MANAGEMENT } from '@shell/config/types';
+import { get } from '@shell/utils/object';
+import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
+
+export default {
+  async fetch() {
+    // Check for access to steve authConfigs because everyone can load the norman auth config schema
+    if (
+      this.$store.getters['isRancher'] &&
+      this.$store.getters['management/schemaFor'](MANAGEMENT.AUTH_CONFIG)
+    ) {
+      this.authConfig = await this.$store.dispatch('rancher/find', {
+        type: NORMAN.AUTH_CONFIG,
+        id:   'azuread',
+        opt:  { url: `/v3/${ NORMAN.AUTH_CONFIG }/azuread` }
+      });
+    }
+  },
+
+  data() {
+    return {
+      authConfig:      null,
+      authConfigRoute: {
+        name:   'c-cluster-auth-config-id',
+        params: { id: 'azuread' }
+      }
+    };
+  },
+
+  computed: {
+    showWarning() {
+      if (!this.authConfig) {
+        return false;
+      }
+
+      return (
+        get(this.authConfig, `annotations."${ AZURE_MIGRATED }"`) !== 'true' &&
+        this.authConfig.enabled
+      );
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="showWarning" id="azure-warn" class="banner">
+    <p>
+      {{ t('authConfig.azuread.updateEndpoint.banner.message') }}
+      <n-link :to="authConfigRoute">
+        {{ t('authConfig.azuread.updateEndpoint.banner.linkText') }}
+      </n-link>
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#azure-warn {
+  background-color: var(--warning);
+  color: var(--warning-text);
+  line-height: 2em;
+  width: 100%;
+
+  > p {
+    text-align: center;
+  }
+}
+</style>