@rancher/shell 3.0.4 → 3.0.5-rc.2

package/{components/AssignTo.vue → dialog/AssignToDialog.vue}

@@ -1,23 +1,30 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapGetters } from 'vuex';
 import { FLEET, NORMAN } from '@shell/config/types';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { set } from '@shell/utils/object';
 
 export default {
+  emits: ['close'],
+
   components: {
     Card,
     LabeledSelect,
     KeyValue,
     AsyncButton,
-    Banner,
-    AppModal
+    Banner
+  },
+
+  props: {
+    toAssign: {
+      type:    Array,
+      default: () => []
+    }
   },
 
   data() {
@@ -26,13 +33,18 @@ export default {
       labels:        {},
       moveTo:        this.workspace,
       loaded:        false,
-      allWorkspaces: [],
-      showModal:     false,
+      allWorkspaces: []
     };
   },
 
+  async fetch() {
+    await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
+    this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
+    this.moveTo = this.workspace;
+    this.loaded = true;
+  },
+
   computed: {
-    ...mapState('action-menu', ['showAssignTo', 'toAssign']),
     ...mapGetters({ t: 'i18n/t' }),
     ...mapGetters(['workspace']),
 
@@ -47,26 +59,12 @@ export default {
     }
   },
 
-  watch: {
-    async showAssignTo(show) {
-      if (show) {
-        await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
-        this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
-        this.moveTo = this.workspace;
-        this.loaded = true;
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    }
-  },
-
   methods: {
     close() {
       this.errors = [];
       this.labels = {};
       this.moveTo = this.workspace;
-      this.$store.commit('action-menu/toggleAssignTo');
+      this.$emit('close');
     },
 
     async apply(buttonDone) {
@@ -108,55 +106,46 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    class="assign-modal"
-    name="assignTo"
-    styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
-    height="auto"
-    :scrollable="true"
-    @close="close"
+  <Card
+    :show-highlight-border="false"
   >
-    <Card
-      v-if="loaded"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4
-          v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
-          class="text-default-text"
-        />
-      </template>
-      <template #body>
-        <div class="pl-10 pr-10">
-          <form>
-            <LabeledSelect
-              v-model:value="moveTo"
-              data-testid="workspace_options"
-              :label="t('assignTo.workspace')"
-              :options="workspaceOptions"
-              placement="bottom"
-            />
-
-            <KeyValue
-              key="labels"
-              v-model:value="labels"
-              class="mt-20"
-              :add-label="t('labels.addSetLabel')"
-              :read-allowed="false"
-            />
-
-            <Banner
-              v-for="(err, i) in errors"
-              :key="i"
-              color="error"
-              :label="err"
-            />
-          </form>
-        </div>
-      </template>
-
-      <template #actions>
+    <template #title>
+      <h4
+        v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
+        class="text-default-text"
+      />
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10">
+        <form>
+          <LabeledSelect
+            v-model:value="moveTo"
+            data-testid="workspace_options"
+            :label="t('assignTo.workspace')"
+            :options="workspaceOptions"
+            placement="bottom"
+          />
+
+          <KeyValue
+            key="labels"
+            v-model:value="labels"
+            class="mt-20"
+            :add-label="t('labels.addSetLabel')"
+            :read-allowed="false"
+          />
+
+          <Banner
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
+            :label="err"
+          />
+        </form>
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="actions-container">
         <button
           class="btn role-secondary"
           @click="close"
@@ -165,21 +154,23 @@ export default {
         </button>
 
         <AsyncButton
+          class="apply-btn"
           mode="apply"
           @click="apply"
         />
-      </template>
-    </Card>
-  </app-modal>
+      </div>
+    </template>
+  </Card>
 </template>
 
 <style lang='scss'>
-  .assign-modal {
-    border-radius: var(--border-radius);
-    overflow: scroll;
-    max-height: 100vh;
-    & ::-webkit-scrollbar-corner {
-      background: rgba(0,0,0,0);
+  .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      .apply-btn {
+        margin-left: 20px;
+      }
     }
-  }
 </style>

package/dialog/ChangePasswordDialog.vue

@@ -0,0 +1,106 @@
+<script>
+import { mapGetters } from 'vuex';
+import ChangePassword from '@shell/components/form/ChangePassword';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  emits:      ['close'],
+  components: {
+    Card, AsyncButton, ChangePassword
+  },
+  data() {
+    return { valid: false, password: '' };
+  },
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  methods:  {
+    closeModal() {
+      this.$emit('close');
+    },
+    async submit(buttonCb) {
+      try {
+        await this.$refs.changePassword.save();
+        this.closeModal();
+        buttonCb(true);
+      } catch (err) {
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-password"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t("changePassword.title") }}
+      </h4>
+    </template>
+
+    <template #body>
+      <form @submit.prevent>
+        <ChangePassword
+          ref="changePassword"
+          @valid="valid = $event"
+        />
+      </form>
+    </template>
+
+    <template #actions>
+      <!-- type reset is required by lastpass -->
+      <button
+        class="btn role-secondary"
+        role="button"
+        :aria-label="t('changePassword.cancel')"
+        type="reset"
+        @click="closeModal"
+      >
+        {{ t("changePassword.cancel") }}
+      </button>
+      <AsyncButton
+        type="submit"
+        mode="apply"
+        class="btn bg-error ml-10"
+        :disabled="!valid"
+        value="LOGIN"
+        @click="submit"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+  .prompt-password {
+    :deep() .card-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .card-body {
+        flex: 1;
+        justify-content: start;
+        & > div {
+          flex: 1;
+          display: flex;
+        }
+      }
+
+      .card-actions {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
+    }
+  }
+
+  .prompt-password {
+    flex: 1;
+    display: flex;
+    form {
+      flex: 1;
+    }
+  }
+</style>

package/dialog/DeactivateDriverDialog.vue

@@ -91,6 +91,7 @@ export default {
           :key="i"
           color="error"
           :label="err"
+          data-testid="deactivate-driver-error-banner"
         />
       </div>
     </template>

package/{pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue → dialog/DeveloperLoadExtensionDialog.vue}

@@ -1,30 +1,44 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
 import { UI_PLUGIN_CHART_ANNOTATIONS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 
 export default {
-  emits: ['closed'],
+  emits: ['close'],
 
   components: {
     AsyncButton,
     Checkbox,
-    LabeledInput,
-    AppModal,
+    LabeledInput
+  },
+  props: {
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
   },
 
   data() {
     return {
-      name:                '',
-      location:            '',
-      persist:             false,
-      canModifyName:       true,
-      canModifyLocation:   true,
-      showModal:           false,
-      returnFocusSelector: '[data-testid="extensions-page-menu"]'
+      name:              '',
+      location:          '',
+      persist:           false,
+      canModifyName:     true,
+      canModifyLocation: true
     };
   },
 
@@ -55,12 +69,9 @@ export default {
   },
 
   methods: {
-    showDialog() {
-      this.showModal = true;
-    },
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
+      this.$emit('close');
     },
 
     updateName(v) {
@@ -127,15 +138,17 @@ export default {
 
       this.$plugin.loadAsync(name, url).then(() => {
         this.closeDialog(true);
+
         this.$store.dispatch('growl/success', {
           title:   this.t('plugins.success.title', { name }),
           message: this.t('plugins.success.message'),
           timeout: 3000,
         }, { root: true });
+
         btnCb(true);
       }).catch((error) => {
         btnCb(false);
-        // this.closeDialog(false);
+
         const message = typeof error === 'object' ? this.t('plugins.error.message') : error;
 
         this.$store.dispatch('growl/error', {
@@ -150,63 +163,53 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="developerInstallPluginDialog"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    @close="closeDialog()"
-  >
-    <div class="plugin-install-dialog">
-      <h4>
-        {{ t('plugins.developer.title') }}
-      </h4>
-      <p>
-        {{ t('plugins.developer.prompt') }}
-      </p>
-      <div class="custom mt-10">
-        <div class="fields">
-          <LabeledInput
-            v-model:value="location"
-            v-focus
-            label-key="plugins.developer.fields.url"
-            @update:value="updateLocation"
-          />
-        </div>
+  <div class="plugin-install-dialog">
+    <h4>
+      {{ t('plugins.developer.title') }}
+    </h4>
+    <p>
+      {{ t('plugins.developer.prompt') }}
+    </p>
+    <div class="custom mt-10">
+      <div class="fields">
+        <LabeledInput
+          v-model:value="location"
+          v-focus
+          label-key="plugins.developer.fields.url"
+          @update:value="updateLocation"
+        />
+      </div>
+    </div>
+    <div class="custom mt-10">
+      <div class="fields">
+        <LabeledInput
+          v-model:value="name"
+          label-key="plugins.developer.fields.name"
+          @update:value="updateName"
+        />
+      </div>
+      <div class="fields mt-10">
+        <Checkbox
+          v-model:value="persist"
+          label-key="plugins.developer.fields.persist"
+        />
       </div>
-      <div class="custom mt-10">
-        <div class="fields">
-          <LabeledInput
-            v-model:value="name"
-            label-key="plugins.developer.fields.name"
-            @update:value="updateName"
-          />
-        </div>
-        <div class="fields mt-10">
-          <Checkbox
-            v-model:value="persist"
-            label-key="plugins.developer.fields.persist"
-          />
-        </div>
-        <div class="dialog-buttons mt-20">
-          <button
-            class="btn role-secondary"
-            data-testid="dev-install-ext-modal-cancel-btn"
-            @click="closeDialog()"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-          <AsyncButton
-            mode="load"
-            data-testid="dev-install-ext-modal-install-btn"
-            @click="loadPlugin"
-          />
-        </div>
+      <div class="dialog-buttons mt-20">
+        <button
+          class="btn role-secondary"
+          data-testid="dev-install-ext-modal-cancel-btn"
+          @click="closeDialog()"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="load"
+          data-testid="dev-install-ext-modal-install-btn"
+          @click="loadPlugin"
+        />
       </div>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/dialog/DisableAuthProviderDialog.vue

@@ -0,0 +1,101 @@
+<script>
+import { Card } from '@components/Card';
+
+export default {
+  name: 'PromptRemove',
+
+  emits: ['disable', 'close'],
+
+  components: { Card },
+  props:      {
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'disable-auth-provider'
+    },
+    disableCb: {
+      type:    Function,
+      default: () => {}
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    disable() {
+      this.disableCb();
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="disable-auth-provider"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRemove.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="mb-10">
+        <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <button
+        class="btn role-primary bg-error ml-10"
+        :data-testid="componentTestid + '-confirm-button'"
+        @click="disable"
+      >
+        {{ t('generic.disable') }}
+      </button>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss'>
+  .disable-auth-provider {
+    &.card-container {
+      box-shadow: none;
+    }
+    #confirm {
+      width: 90%;
+      margin-left: 3px;
+    }
+
+    .remove-modal {
+        border-radius: var(--border-radius);
+        overflow: scroll;
+        max-height: 100vh;
+        & ::-webkit-scrollbar-corner {
+          background: rgba(0,0,0,0);
+        }
+    }
+
+    .actions {
+      text-align: right;
+    }
+
+    .card-actions {
+      display: flex;
+
+      .spacer {
+        flex: 1;
+      }
+    }
+  }
+</style>

package/dialog/DrainNode.vue

@@ -137,7 +137,7 @@ export default {
           {{ t('drainNode.titleMultiple', { count: kubeNodes.length }) }}
         </template>
         <template v-else>
-          {{ t('drainNode.titleOne', { name: kubeNodes[0].name }, true) }}
+          {{ t('drainNode.titleOne', { name: kubeNodes[0]?.name }, true) }}
         </template>
       </h4>
     </template>