@rancher/shell 2.0.1 → 3.0.0-rc.2

package/dialog/RollbackWorkloadDialog.vue

@@ -200,77 +200,74 @@ export default {
     class="prompt-rollback"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('promptRollback.modalTitle', { workloadName }, true) }}
-    </h4>
-    <div
-      slot="body"
-      class="pl-10 pr-10 "
-    >
-      <Banner
-        v-if="revisions.length === 1"
-        color="info"
-        :label="t('promptRollback.singleRevisionBanner')"
-      />
-      <form>
-        <LabeledSelect
-          v-model="selectedRevision"
-          class="provider"
-          :label="t('promptRollback.dropdownTitle')"
-          :placeholder="t('promptRollback.placeholder')"
-          :options="revisions"
-          :get-option-label="getOptionLabel"
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRollback.modalTitle', { workloadName }, true) }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10 ">
+        <Banner
+          v-if="revisions.length === 1"
+          color="info"
+          :label="t('promptRollback.singleRevisionBanner')"
         />
-      </form>
-      <Banner
-        v-for="(error, i) in errors"
-        :key="i"
-        class=""
-        color="error"
-        :label="error"
-      />
-      <YamlEditor
-        v-if="selectedRevision && showDiff"
-        :key="selectedRevisionId"
-        v-model="sanitizedSelectedRevision"
-        :initial-yaml-values="sanitizeYaml(currentRevision)"
-        class="mt-10 "
-        :editor-mode="editorMode"
-        :as-object="true"
-      />
-    </div>
-    <div
-      slot="actions"
-      class="buttons "
-    >
-      <div class="left">
-        <button
-          :disabled="!selectedRevision"
-          class="btn role-secondary diff"
-          @click="showDiff = !showDiff; sizeDialog()"
-        >
-          {{ showDiff ? t('resourceYaml.buttons.hideDiff') : t('resourceYaml.buttons.diff') }}
-        </button>
-      </div>
-      <div class="right">
-        <button
-          class="btn role-secondary mr-10"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          :action-label="t('asyncButton.rollback.action')"
-          :disabled="!selectedRevision"
-          get-option-label="getOptionLabel"
-          :right-align="true"
-          @click="save"
+        <form>
+          <LabeledSelect
+            v-model:value="selectedRevision"
+            class="provider"
+            :label="t('promptRollback.dropdownTitle')"
+            :placeholder="t('promptRollback.placeholder')"
+            :options="revisions"
+            :get-option-label="getOptionLabel"
+          />
+        </form>
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+          class=""
+          color="error"
+          :label="error"
+        />
+        <YamlEditor
+          v-if="selectedRevision && showDiff"
+          :key="selectedRevisionId"
+          v-model:value="sanitizedSelectedRevision"
+          :initial-yaml-values="sanitizeYaml(currentRevision)"
+          class="mt-10 "
+          :editor-mode="editorMode"
+          :as-object="true"
         />
       </div>
-    </div>
+    </template>
+    <template #actions>
+      <div class="buttons ">
+        <div class="left">
+          <button
+            :disabled="!selectedRevision"
+            class="btn role-secondary diff"
+            @click="showDiff = !showDiff; sizeDialog()"
+          >
+            {{ showDiff ? t('resourceYaml.buttons.hideDiff') : t('resourceYaml.buttons.diff') }}
+          </button>
+        </div>
+        <div class="right">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            :action-label="t('asyncButton.rollback.action')"
+            :disabled="!selectedRevision"
+            get-option-label="getOptionLabel"
+            :right-align="true"
+            @click="save"
+          />
+        </div>
+      </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>
@@ -278,7 +275,7 @@ export default {
 .prompt-rollback {
   margin: 0;
 
-  & ::v-deep .card-actions {
+  & :deep() .card-actions {
     display: grid;
   }
 }
@@ -286,7 +283,7 @@ export default {
 .yaml-editor {
   max-height: 70vh;
 
-  & ::v-deep.root {
+  & :deep().root {
     max-height: 65vh;
   }
 }
@@ -301,7 +298,7 @@ export default {
   }
 }
 
-::v-deep .card-body {
+:deep() .card-body {
   max-height: calc(95vh - 135px);
   overflow: hidden;
 }

package/dialog/RotateCertificatesDialog.vue

@@ -141,7 +141,7 @@ export default {
       />
       <div class="options">
         <RadioGroup
-          v-model="rotateAllServices"
+          v-model:value="rotateAllServices"
           name="service-mode"
           :options="[
             {
@@ -155,29 +155,28 @@ export default {
           ]"
         />
         <Select
-          v-model="selectedService"
+          v-model:value="selectedService"
           :options="serviceOptions"
           class="service-select"
           :class="{'invisible': rotateAllServices}"
         />
       </div>
     </template>
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-20"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
-      <AsyncButton
-        mode="rotate"
-        :disabled="!rotateAllServices && !selectedService"
-        @click="rotate"
-      />
-    </div>
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-20"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="rotate"
+          :disabled="!rotateAllServices && !selectedService"
+          @click="rotate"
+        />
+      </div>
+    </template>
   </Card>
 </template>
 

package/dialog/RotateEncryptionKeyDialog.vue

@@ -122,60 +122,59 @@ export default {
     class="prompt-rotate"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      v-clean-html="t('promptRotateEncryptionKey.title')"
-      class="text-default-text"
-    />
-
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <Banner
-        color="warning"
-        label-key="promptRotateEncryptionKey.warning"
+    <template #title>
+      <h4
+        v-clean-html="t('promptRotateEncryptionKey.title')"
+        class="text-default-text"
       />
+    </template>
 
-      <div v-if="!$fetchState.pending">
-        <p
-          v-if="latestBackup"
-          class="pt-10 pb-10"
+    <template #body>
+      <div class="pl-10 pr-10">
+        <Banner
+          color="warning"
+          label-key="promptRotateEncryptionKey.warning"
+        />
+
+        <div v-if="!$fetchState.pending">
+          <p
+            v-if="latestBackup"
+            class="pt-10 pb-10"
+          >
+            {{ t('promptRotateEncryptionKey.description', latestBackup, true) }}
+          </p>
+          <Banner
+            v-else
+            color="error"
+            label-key="promptRotateEncryptionKey.error"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
         >
-          {{ t('promptRotateEncryptionKey.description', latestBackup, true) }}
-        </p>
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="rotate"
+          :disabled="$fetchState.pending || !latestBackup"
+          @click="apply"
+        />
+
         <Banner
-          v-else
+          v-for="(err, i) in errors"
+          :key="i"
           color="error"
-          label-key="promptRotateEncryptionKey.error"
+          :label="err"
         />
       </div>
-    </div>
-
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
-
-      <AsyncButton
-        mode="rotate"
-        :disabled="$fetchState.pending || !latestBackup"
-        @click="apply"
-      />
-
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
-    </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>

package/dialog/SaveAsRKETemplateDialog.vue

@@ -72,58 +72,57 @@ export default {
     class="prompt-restore"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      v-clean-html="t('promptSaveAsRKETemplate.title', { cluster: cluster.displayName }, true)"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('promptSaveAsRKETemplate.title', { cluster: cluster.displayName }, true)"
+        class="text-default-text"
+      />
+    </template>
 
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <form>
-        <p class="pt-10 pb-10">
-          {{ t('promptSaveAsRKETemplate.description') }}
-        </p>
-        <Banner
-          color="warning"
-          label-key="promptSaveAsRKETemplate.warning"
-        />
+    <template #body>
+      <div class="pl-10 pr-10">
+        <form>
+          <p class="pt-10 pb-10">
+            {{ t('promptSaveAsRKETemplate.description') }}
+          </p>
+          <Banner
+            color="warning"
+            label-key="promptSaveAsRKETemplate.warning"
+          />
 
-        <LabeledInput
-          ref="templateName"
-          v-model="name"
-          :label="t('promptSaveAsRKETemplate.name')"
-          :required="true"
-        />
-      </form>
-    </div>
+          <LabeledInput
+            ref="templateName"
+            v-model:value="name"
+            :label="t('promptSaveAsRKETemplate.name')"
+            :required="true"
+          />
+        </form>
+      </div>
+    </template>
 
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
 
-      <AsyncButton
-        mode="create"
-        :disabled="name.length <= 0"
-        @click="apply"
-      />
+        <AsyncButton
+          mode="create"
+          :disabled="name.length <= 0"
+          @click="apply"
+        />
 
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
-    </div>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+      </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>

package/dialog/ScaleMachineDownDialog.vue

@@ -117,7 +117,7 @@ export default {
     v-bind="config"
     @close="$emit('close')"
   >
-    <template slot="body">
+    <template #body>
       <div class="pl-10 pr-10 mt-20 mb-20 body">
         <div v-if="allToDelete.length === 1">
           {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ safeMachinesToDelete[0].nameDisplay }}</b>
@@ -131,8 +131,8 @@ export default {
         >
           <span class="mb-20">{{ t('promptScaleMachineDown.retainedMachine1') }}</span>
           <span
-            v-for="i in ignored"
-            :key="i.nameDisplay"
+            v-for="(i) in ignored"
+            :key="i"
             v-clean-html="t('promptScaleMachineDown.retainedMachine2', { name: i.nameDisplay }, true)"
           />
         </div>

package/dialog/ScalePoolDownDialog.vue

@@ -71,31 +71,29 @@ export default {
     class="prompt-remove"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('promptForceRemove.modalTitle') }}
-    </h4>
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <div>
-        {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ machinenName }}</b>
-      </div>
-      <div>
-        <Checkbox
-          v-model="promptConfirmation"
-          :label="t('promptRemove.promptConfirmation')"
-          class="mt-10"
-          @input="update()"
-        />
-      </div>
-      <div class="text-info mt-20">
-        {{ protip }}
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptForceRemove.modalTitle') }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10">
+        <div>
+          {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ machinenName }}</b>
+        </div>
+        <div>
+          <Checkbox
+            v-model:value="promptConfirmation"
+            :label="t('promptRemove.promptConfirmation')"
+            class="mt-10"
+            @update:value="update()"
+          />
+        </div>
+        <div class="text-info mt-20">
+          {{ protip }}
+        </div>
       </div>
-    </div>
+    </template>
     <template #actions>
       <button
         class="btn role-secondary mr-10"

package/dialog/SloDialog.vue

@@ -0,0 +1,95 @@
+<script>
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+import { IS_SSO, LOGGED_OUT } from '@shell/config/query-params';
+
+export default {
+  components: { Card, AsyncButton },
+
+  props: {
+    authProvider: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  computed: {
+    name() {
+      return this.authProvider?.nameDisplay;
+    }
+  },
+
+  methods: {
+    async doLogout(logoutAll = false) {
+      const options = { force: true, provider: this.authProvider };
+
+      if (logoutAll) {
+        // SLO - Single Log Out
+        options.slo = true;
+        options.provider = this.authProvider;
+
+        await this.$store.dispatch('auth/logout', options, { root: true });
+
+        this.$emit('close');
+      } else {
+        // Rancher Log Out (ensure we show the logging out page as per standard log out)
+        this.$router.replace({ name: 'auth-logout', query: { [LOGGED_OUT]: true, [IS_SSO]: true } });
+      }
+    },
+
+    cancel() {
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-remove"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptSlo.title', { name }) }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10 mt-20 mb-20">
+        {{ t('promptSlo.text', { name }) }}
+      </div>
+    </template>
+    <template #actions>
+      <div class="btn-block">
+        <button
+          class="btn role-secondary"
+          @click="cancel()"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <div class="spacer" />
+        <button
+          class="btn role-secondary"
+          @click="doLogout()"
+        >
+          {{ t('promptSlo.rancher.active') }}
+        </button>
+        <AsyncButton
+          class="ml-10"
+          :action-label="t('promptSlo.all.active', { name })"
+          :waiting-label="t('promptSlo.all.waiting')"
+          @click="doLogout(true)"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .btn-block {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+  }
+</style>

package/directives/clean-html.js

@@ -1,13 +1,13 @@
 import { purifyHTML } from '@shell/plugins/clean-html';
 
 const cleanHtmlDirective = {
-  inserted(el, binding) {
+  mounted(el, binding) {
     el.innerHTML = purifyHTML(binding.value);
   },
-  componentUpdated(el, binding) {
+  updated(el, binding) {
     el.innerHTML = purifyHTML(binding.value);
   },
-  unbind(el) {
+  unmounted(el) {
     el.innerHTML = '';
   }
 };

package/directives/clean-tooltip.js

@@ -1,4 +1,4 @@
-import { VTooltip } from 'v-tooltip';
+import { VTooltip } from 'floating-vue';
 import { purifyHTML } from '@shell/plugins/clean-html';
 
 function purifyContent(value) {