@rancher/shell 0.1.0 → 0.1.1

package/components/GrowlManager.vue

@@ -82,21 +82,23 @@ export default {
   <div class="growl-container" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
     <div class="growl-list">
       <div v-for="growl in stack" :key="growl.id" :class="{'growl': true, ['bg-'+growl.color]: true}">
-        <i class="close hand icon icon-close" @click="close(growl)" />
-        <div class="growl-message">
+        <div class="growl-message" :class="{'growl-center': !growl.message}">
           <div class="icon-container">
             <i :class="{icon: true, ['icon-'+growl.icon]: true}" />
           </div>
           <div class="growl-text">
             <div>{{ growl.title }}</div>
-            <p>{{ growl.message }}</p>
+            <p v-if="growl.message">
+              {{ growl.message }}
+            </p>
           </div>
+          <i class="close hand icon icon-close" @click="close(growl)" />
         </div>
       </div>
     </div>
     <div v-if="stack.length > 1" class="text-right mr-10 mt-10">
       <button type="button" class="btn btn-sm role-primary" @click="closeAll">
-        Clear All Notifications
+        {{ t('growl.clearAll') }}
       </button>
     </div>
   </div>
@@ -127,25 +129,34 @@ export default {
     word-break: break-all;
 
     .close {
-      position: absolute;
-      top: 0;
-      right: 0;
       padding: 5px;
       font-size: 24px;
     }
 
+    .icon-container {
+      align-self: center;
+    }
+
     .growl-message {
       display: flex;
-      align-items: center;
+
+      &.growl-center {
+        align-items: center;
+      }
     }
 
     .growl-text {
       flex-basis: 90%;
       padding: 10px 10px 10px 0;
+      word-break: break-word;
+      white-space: normal;
 
       > div {
         font-size: 16px;
-        margin-bottom: 5px;
+      }
+
+      > P {
+        margin-top: 5px;
       }
     }
 

package/components/HarvesterServiceAddOnConfig.vue

@@ -1,7 +1,7 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import { _CREATE } from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';

package/components/Import.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
-import Card from '@shell/components/Card';
-import Banner from '@shell/components/Banner';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import YamlEditor from '@shell/components/YamlEditor';
 import FileSelector from '@shell/components/form/FileSelector';

package/components/LandingPagePreference.vue

@@ -1,8 +1,8 @@
 <script>
 import { mapPref, AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import RadioButton from '@shell/components/form/RadioButton';
+import { RadioGroup, RadioButton } from '@components/Form/Radio';
+
 import Select from '@shell/components/form/Select';
 import { MANAGEMENT } from '@shell/config/types';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';

package/components/Markdown.vue

@@ -21,7 +21,7 @@ export default {
 
   computed: {
     html() {
-      return this.marked(this.value, {
+      return this.marked.parse(this.value, {
         renderer: this.markedRenderer,
         breaks:   true
       });
@@ -33,7 +33,7 @@ export default {
   },
 
   async mounted() {
-    const marked = (await import(/* webpackChunkName: "markdown" */ 'marked')).default;
+    const marked = (await import(/* webpackChunkName: "markdown" */ 'marked'));
     const dompurify = (await import(/* webpackChunkName: "markdown" */ 'dompurify')).default;
 
     const renderer = new marked.Renderer();
@@ -79,18 +79,50 @@ export default {
   <Loading v-else />
 </template>
 
-<style lang="scss" scoped>
-  ::v-deep {
-    P {
-      font-size: initial;
-      line-height: initial;
-      font-weight: initial;
-      letter-spacing: initial;
-      font-style: normal;
-    }
+<style lang="scss">
+
+::v-deep {
+  P {
+    font-size: initial;
+    line-height: initial;
+    font-weight: initial;
+    letter-spacing: initial;
+    font-style: normal;
+  }
+}
 
+.markdown {
     TH {
       text-align: left;
     }
-  }
+
+    table tr th {
+      font-weight: bold;
+      text-align: left;
+      margin: 0;
+      padding: 6px 13px;
+    }
+
+    table tr th {
+      font-weight: bold;
+      text-align: left;
+      margin: 0;
+      padding: 6px 13px;
+    }
+
+    table tr td {
+      text-align: left;
+      margin: 0;
+      padding: 6px 13px;
+    }
+
+    table tr th :first-child, table tr td :first-child {
+      margin-top: 0;
+    }
+
+    table tr th :last-child, table tr td :last-child {
+      margin-bottom: 0;
+    }
+}
+
 </style>

package/components/ModalWithCard.vue

@@ -1,6 +1,6 @@
 <script>
-import Card from '@shell/components/Card';
-import Banner from '@shell/components/Banner';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 
 export default {

package/components/MoveModal.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-import Card from '@shell/components/Card';
+import { Card } from '@components/Card';
 import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { MANAGEMENT } from '@shell/config/types';

package/components/PercentageBar.vue

@@ -20,7 +20,7 @@ export default {
       type:      Number,
       required:  true,
       validator(value) {
-        return value >= 0 && value <= 100;
+        return value >= 0;
       }
     },
 

package/components/PromptChangePassword.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import ChangePassword from '@shell/components/form/ChangePassword';
-import Card from '@shell/components/Card';
+import { Card } from '@components/Card';
 import AsyncButton from '@shell/components/AsyncButton';
 
 export default {

package/components/PromptModal.vue

@@ -3,7 +3,13 @@ import { mapState } from 'vuex';
 import { isArray } from '@shell/utils/array';
 import { importDialog } from '@shell/utils/dynamic-importer';
 
+/**
+ * @name PromptModal
+ * @description Modal component.
+ */
 export default {
+  name: 'PromptModal',
+
   data() {
     return { opened: false, backgroundClosing: null };
   },
@@ -32,6 +38,11 @@ export default {
     cssProps() {
       // this computed property lets us generate a scss var that we can use in the style
       return `--prompt-modal-width: ${ this.modalWidth }`;
+    },
+    stickyProps() {
+      const isSticky = !!this.modalData?.modalSticky;
+
+      return !isSticky ? '' : 'display: flex; flex-direction: column; ';
     }
   },
 
@@ -72,7 +83,7 @@ export default {
   <modal
     class="promptModal-modal"
     name="promptModal"
-    :styles="`background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 95vh; ${cssProps}`"
+    :styles="`background-color: var(--nav-bg); border-radius: var(--border-radius); ${stickyProps} max-height: 95vh; ${cssProps}`"
     height="auto"
     :scrollable="true"
     @closed="close()"
@@ -92,7 +103,7 @@ export default {
     & .v--modal-box.v--modal {
       width: var(--prompt-modal-width) !important;
       left: unset !important;
-      margin: auto !important
+      margin: auto !important;
     }
   }
 </style>

package/components/PromptRemove.vue

@@ -1,18 +1,30 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
 import { get, isEmpty } from '@shell/utils/object';
-import Card from '@shell/components/Card';
-import Checkbox from '@shell/components/form/Checkbox';
+import { escapeHtml, resourceNames } from '@shell/utils/string';
+import { Card } from '@components/Card';
+import { Checkbox } from '@components/Form/Checkbox';
 import { alternateLabel } from '@shell/utils/platform';
 import { uniq } from '@shell/utils/array';
 import AsyncButton from '@shell/components/AsyncButton';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
-
 export default {
+  name: 'PromptRemove',
+
   components: {
     Card, Checkbox, AsyncButton
   },
+  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: 'prompt-remove'
+    }
+  },
   data() {
     const { resource } = this.$route.params;
 
@@ -139,22 +151,6 @@ export default {
 
     ...mapState('action-menu', ['showPromptRemove', 'toRemove']),
     ...mapGetters({ t: 'i18n/t' }),
-
-    resourceNames() {
-      return this.names.reduce((res, name, i) => {
-        if (i >= 5) {
-          return res;
-        }
-        res += `<b>${ name }</b>`;
-        if (i === this.names.length - 1) {
-          res += this.plusMore;
-        } else {
-          res += i === this.toRemove.length - 2 ? ' and ' : ', ';
-        }
-
-        return res;
-      }, '');
-    }
   },
 
   watch:    {
@@ -213,6 +209,8 @@ export default {
   },
 
   methods: {
+    resourceNames,
+    escapeHtml,
     close() {
       this.confirmName = '';
       this.error = '';
@@ -221,15 +219,33 @@ export default {
       this.$store.commit('action-menu/togglePromptRemove');
     },
 
-    remove(btnCB) {
+    async remove(btnCB) {
       if (this.doneLocation) {
         // doneLocation will recompute to undefined when delete request completes
         this.cachedDoneLocation = { ...this.doneLocation };
       }
       if (this.hasCustomRemove && this.$refs?.customPrompt?.remove) {
-        this.$refs.customPrompt.remove(btnCB);
+        let handled = this.$refs.customPrompt.remove(btnCB);
+
+        // If the response is a promise, then wait for the promise
+        if (handled && handled.then) {
+          try {
+            handled = await handled;
+          } catch (err) {
+            this.error = err;
+            btnCB(false);
+
+            return;
+          }
+        }
 
-        return;
+        // If the remove function for the custom dialog handled the request, it can return true or not return anything
+        // if it returned false, then it wants us to continue with the deletion logic below - this is useful
+        // where the custom dialog needs to delete additional resources - it handles those and retrurns false to get us
+        // to delete the main resource
+        if (handled === undefined || handled) {
+          return;
+        }
       }
       const serialRemove = this.toRemove.some(resource => resource.removeSerially);
 
@@ -239,7 +255,6 @@ export default {
         this.parallelRemove(btnCB);
       }
     },
-
     async serialRemove(btnCB) {
       try {
         const spoofedTypes = this.getSpoofedTypes(this.toRemove);
@@ -249,14 +264,12 @@ export default {
         }
 
         await this.refreshSpoofedTypes(spoofedTypes);
-
         this.done();
       } catch (err) {
         this.error = err;
         btnCB(false);
       }
     },
-
     async parallelRemove(btnCB) {
       try {
         const spoofedTypes = this.getSpoofedTypes(this.toRemove);
@@ -269,14 +282,12 @@ export default {
         btnCB(false);
       }
     },
-
     done() {
       if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
         this.currentRouter.push(this.cachedDoneLocation);
       }
       this.close();
     },
-
     getSpoofedTypes(resources) {
       const uniqueResourceTypes = uniq(this.toRemove.map(resource => resource.type));
 
@@ -313,7 +324,7 @@ export default {
   <modal
     class="remove-modal"
     name="promptRemove"
-    :width="350"
+    :width="400"
     height="auto"
     styles="max-height: 100vh;"
     @closed="close"
@@ -325,7 +336,9 @@ export default {
       <div slot="body">
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
-            {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-html="resourceNames"></span>
+            {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+              v-html="resourceNames(names, plusMore, t)"
+            ></span>
           </template>
 
           <template>
@@ -335,6 +348,7 @@ export default {
               ref="customPrompt"
               v-model="toRemove"
               v-bind="_data"
+              :close="close"
               :needs-confirm="needsConfirm"
               :value="toRemove"
               :names="names"
@@ -344,12 +358,18 @@ export default {
             />
             <div v-if="needsConfirm" class="mt-10">
               <span
-                v-html="t('promptRemove.confirmName', { nameToMatch }, true)"
+                v-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
               ></span>
             </div>
           </template>
         </div>
-        <input v-if="needsConfirm" id="confirm" v-model="confirmName" type="text" />
+        <input
+          v-if="needsConfirm"
+          id="confirm"
+          v-model="confirmName"
+          :data-testid="componentTestid + '-input'"
+          type="text"
+        />
         <div class="text-warning mb-10 mt-10">
           {{ warning }}
         </div>
@@ -365,7 +385,14 @@ export default {
         <button class="btn role-secondary" @click="close">
           {{ t('generic.cancel') }}
         </button>
-        <AsyncButton mode="delete" class="btn bg-error ml-10" :disabled="deleteDisabled" @click="remove" />
+        <div class="spacer"></div>
+        <AsyncButton
+          mode="delete"
+          class="btn bg-error ml-10"
+          :disabled="deleteDisabled"
+          :data-testid="componentTestid + '-confirm-button'"
+          @click="remove"
+        />
       </template>
     </Card>
   </modal>
@@ -393,9 +420,13 @@ export default {
     .actions {
       text-align: right;
     }
+
     .card-actions {
       display: flex;
-      justify-content: center;
+
+      .spacer {
+        flex: 1;
+      }
     }
   }
 </style>

package/components/PromptRestore.vue

@@ -1,10 +1,10 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
-import Card from '@shell/components/Card';
-import Banner from '@shell/components/Banner';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
 import Date from '@shell/components/formatter/Date.vue';
-import RadioGroup from '@shell/components/form/RadioGroup.vue';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';

package/components/Questions/Boolean.vue

@@ -1,5 +1,5 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import Question from './Question';
 
 export default {

package/components/Questions/Float.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 //  @TODO valid_chars, invalid_chars

package/components/Questions/Int.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 //  @TODO valid_chars, invalid_chars

package/components/Questions/Reference.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { filterBy } from '@shell/utils/array';
 import { PVC, STORAGE_CLASS } from '@shell/config/types';

package/components/Questions/String.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 //  @TODO valid_chars, invalid_chars

package/components/RelatedResources.vue

@@ -4,7 +4,7 @@ import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/reso
 import { NAME, NAMESPACE, STATE, TYPE } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 
 export default {
   components: { ResourceTable, BadgeState },

package/components/RelatedWorkloadsTable.vue

@@ -40,5 +40,7 @@ export default {
 </script>
 
 <template>
-  <ResourceTable :schema="schema" :rows="relatedWorkloadRows" :headers="relatedWorkloadHeaders" />
+  <div>
+    <ResourceTable :schema="schema" :rows="relatedWorkloadRows" :headers="relatedWorkloadHeaders" />
+  </div>
 </template>

package/components/ResourceDetail/Masthead.vue

@@ -2,13 +2,13 @@
 import { KUBERNETES, PROJECT } from '@shell/config/labels-annotations';
 import { FLEET, NAMESPACE, MANAGEMENT, HELM } from '@shell/config/types';
 import ButtonGroup from '@shell/components/ButtonGroup';
-import BadgeState from '@shell/components/BadgeState';
-import Banner from '@shell/components/Banner';
+import { BadgeState } from '@components/BadgeState';
+import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 import { HIDE_SENSITIVE } from '@shell/store/prefs';
 import {
-  AS, _DETAIL, _CONFIG, _YAML, MODE, _CREATE, _EDIT, _VIEW, _UNFLAG
+  AS, _DETAIL, _CONFIG, _YAML, MODE, _CREATE, _EDIT, _VIEW, _UNFLAG, _GRAPH
 } from '@shell/config/query-params';
 
 /**
@@ -46,6 +46,11 @@ export default {
       default: _YAML,
     },
 
+    hasGraph: {
+      type:    Boolean,
+      default: false
+    },
+
     hasDetail: {
       type:    Boolean,
       default: false
@@ -247,21 +252,28 @@ export default {
       if ( this.hasDetail ) {
         out.push({
           labelKey: 'resourceDetail.masthead.detail',
-          value:    'detail',
+          value:    _DETAIL,
         });
       }
 
       if ( this.hasEdit && this.parent?.showConfigView !== false) {
         out.push({
           labelKey: 'resourceDetail.masthead.config',
-          value:    'config',
+          value:    _CONFIG,
+        });
+      }
+
+      if ( this.hasGraph ) {
+        out.push({
+          labelKey: 'resourceDetail.masthead.graph',
+          value:    _GRAPH,
         });
       }
 
       if ( this.canViewYaml ) {
         out.push({
           labelKey: 'resourceDetail.masthead.yaml',
-          value:    'yaml',
+          value:    _YAML,
         });
       }
 
@@ -291,7 +303,13 @@ export default {
             [AS]:   _CONFIG,
           });
           break;
-        case 'yaml':
+        case _GRAPH:
+          this.$router.applyQuery({
+            [MODE]: _UNFLAG,
+            [AS]:   _GRAPH,
+          });
+          break;
+        case _YAML:
           this.$router.applyQuery({
             [MODE]: _UNFLAG,
             [AS]:   _YAML,
@@ -366,7 +384,7 @@ export default {
             </nuxt-link>
             <span v-else>{{ parent.displayName }}:</span>
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
-            <t v-else :k="'resourceDetail.header.' + realMode" :subtype="resourceSubtype" :name="displayName" />
+            <t v-else :k="'resourceDetail.header.' + realMode" :subtype="resourceSubtype" :name="displayName" :escapehtml="false" />
             <BadgeState v-if="!isCreate && parent.showState" class="masthead-state" :value="value" />
           </h1>
         </div>
@@ -374,7 +392,7 @@ export default {
           <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
           <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
           <span v-else-if="namespace && !hasMultipleNamespaces">{{ t("resourceDetail.masthead.namespace") }}: <nuxt-link :to="namespaceLocation">{{ namespace }}</nuxt-link></span>
-          <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate class="live-date" :value="get(value, 'metadata.creationTimestamp')" /></span>
+          <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate class="live-date" :value="value.creationTimestamp" /></span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
         </div>
       </div>