@rancher/shell 0.1.0 → 0.1.1

package/promptRemove/management.cattle.io.project.vue

@@ -0,0 +1,128 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+import { PROJECT } from '@shell/config/labels-annotations';
+import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
+import { Checkbox } from '@components/Form/Checkbox';
+import { resourceNames } from '@shell/utils/string';
+
+export default {
+  name: 'ProjectAndNamespacesPromptRemove',
+
+  components: { Checkbox },
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    }
+  },
+
+  async fetch() {
+    this.allNamespaces = await this.$store.dispatch('cluster/findAll', { type: NAMESPACE });
+    this.allProjects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
+  },
+
+  data() {
+    return {
+      deleteProjectNamespaces: false,
+      allNamespaces:           [],
+      allProjects:             [],
+    };
+  },
+
+  computed:   {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters(['currentCluster']),
+
+    currentProject() {
+      if ( this.allProjects) {
+        return this.value[0];
+      }
+
+      return {};
+    },
+
+    filteredNamespaces() {
+      if (this.currentProject) {
+        return this.allNamespaces.filter(n => n.metadata.labels[PROJECT] === this.currentProject.metadata?.name);
+      }
+
+      return [];
+    },
+
+    plusMore() {
+      const remaining = this.filteredNamespaces.length > 5 ? this.filteredNamespaces.length - 5 : 0;
+
+      return this.t('promptRemove.andOthers', { count: remaining });
+    },
+
+    displayName() {
+      return this.currentProject?.spec?.displayName;
+    },
+
+    names() {
+      return this.filteredNamespaces.map(obj => obj.nameDisplay).slice(0, 5);
+    },
+    // Only admins and cluster owners can see namespaces outside of projects
+    canSeeProjectlessNamespaces() {
+      return this.currentCluster.canUpdate;
+    }
+  },
+  methods: {
+    resourceNames,
+    remove() {
+      // Delete all of thre namespaces and return false - this tells the prompt remove dialog to continue and delete the project
+      // Delete all namespaces if the user wouldn't be able to see them after deleting the project
+      if (this.deleteProjectNamespaces || !this.canSeeProjectlessNamespaces) {
+        return Promise.all(this.filteredNamespaces.map(n => n.remove())).then(() => false);
+      }
+
+      // Return false so that the main promptRemoval will continue to remove the project
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <div class="mb-10">
+        {{ t('promptRemove.attemptingToRemove', { type }) }} <span class="display-name">{{ `${displayName}.` }}</span>
+        <template v-if="!canSeeProjectlessNamespaces">
+          <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br />
+          <div class="mt-10" v-html="resourceNames(names, plusMore, t)"></div>
+        </template>
+      </div>
+      <div v-if="filteredNamespaces.length > 0 && canSeeProjectlessNamespaces" class="mt-20 remove-project-dialog">
+        <Checkbox v-model="deleteProjectNamespaces" :label="t('promptRemove.deleteAssociatedNamespaces')" />
+        <div class="mt-10 ml-20">
+          <span v-html="resourceNames(names, plusMore, t)"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.delete-warning{
+    color: var(--error)
+}
+.remove-project-dialog {
+  border: 1px solid var(--border);
+  padding: 10px;
+  border-radius: 5px;
+
+  .display-name {
+    font-weight: bold;
+  }
+}
+</style>

package/promptRemove/pod.vue

@@ -0,0 +1,131 @@
+<script>
+import { Banner } from '@components/Banner';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { mapGetters, mapState } from 'vuex';
+import { isEmpty } from 'lodash';
+
+export default {
+  name: 'PromptRemovePodDialog',
+
+  components: {
+    Banner,
+    Checkbox
+  },
+
+  props:      {
+    value: {
+      type:     Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    names: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      errors:      [],
+      forceDelete: false
+    };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    plusMore() {
+      const count = this.names.length - this.names.length;
+
+      return this.t('promptRemove.andOthers', { count });
+    },
+
+    podNames() {
+      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;
+      }, '');
+    },
+  },
+
+  methods: {
+    async remove(confirm) {
+      const parentComponent = this.$parent.$parent.$parent;
+
+      let goTo;
+
+      if (parentComponent.doneLocation) {
+        // doneLocation will recompute to undefined when delete request completes
+        goTo = { ...parentComponent.doneLocation };
+      }
+
+      try {
+        await Promise.all(this.value.map(resource => this.removePod(resource)));
+        if ( goTo && !isEmpty(goTo) ) {
+          parentComponent.currentRouter.push(goTo);
+        }
+        parentComponent.close();
+      } catch (err) {
+        parentComponent.error = err;
+        confirm(false);
+      }
+    },
+
+    removePod(pod) {
+      const opt = this.forceDelete ? {
+        data: {
+          gracePeriod: 0,
+          force:       true
+        }
+      } : undefined;
+
+      return pod.remove(opt);
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="mt-10">
+    <div class="mb-30">
+      {{ t('promptRemove.attemptingToRemove', { type }) }} <span class="machine-name" v-html="podNames" />
+    </div>
+    <div class="mb-30">
+      <Checkbox
+        v-model="forceDelete"
+        :label="t('promptForceRemove.forceDelete')"
+      />
+    </div>
+    <Banner color="warning" label-key="promptForceRemove.podRemoveWarning" />
+    <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .actions {
+    text-align: right;
+  }
+
+  .machine-name {
+    font-weight: 600;
+  }
+</style>

package/rancher-components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/{components → rancher-components/BadgeState}/BadgeState.vue

@@ -1,18 +1,24 @@
-<script>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
 
 /**
  * Badge state component.
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default {
+export default Vue.extend({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
      */
     value: {
-      type:    Object,
-      default: null,
+      type:    Object as PropType<Badge>,
+      default: null
     },
 
     /**
@@ -20,7 +26,7 @@ export default {
      */
     color: {
       type:    String,
-      default: null,
+      default: null
     },
 
     /**
@@ -36,20 +42,20 @@ export default {
      */
     label: {
       type:    String,
-      default: null,
-    },
+      default: null
+    }
   },
 
   computed: {
-    bg() {
+    bg(): string | null {
       return this.value?.stateBackground || this.color;
     },
 
-    msg() {
+    msg(): string | null {
       return this.value?.stateDisplay || this.label;
     }
   }
-};
+});
 </script>
 
 <template>
@@ -87,6 +93,8 @@ export default {
   }
 </style>
 <style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
   .sortable-table TD .badge-state {
     @include clip;
     display: inline-block;

package/rancher-components/BadgeState/index.ts

@@ -0,0 +1 @@
+export { default as BadgeState } from './BadgeState.vue';

package/{components/__tests__ → rancher-components/Banner}/Banner.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Banner from '@shell/components/Banner.vue';
+import { Banner } from './index';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {

package/{components → rancher-components/Banner}/Banner.vue

@@ -5,36 +5,52 @@ import { stringify } from '@shell/utils/error';
 
 export default Vue.extend({
   props: {
+    /**
+     * A color class that represents the color of the banner.
+     * @values primary, secondary, success, warning, error, info
+     */
     color: {
       type:    String,
       default: 'secondary'
     },
+    /**
+     * The label to display as the banner's default content.
+     */
     label: {
       type:    [String, Error, Object],
-      default: null,
+      default: null
     },
+    /**
+     * The i18n key for the label to display as the banner's default content.
+     */
     labelKey: {
       type:    String,
-      default: null,
+      default: null
     },
+    /**
+     * Toggles the banner's close button.
+     */
     closable: {
       type:    Boolean,
-      default: false,
+      default: false
     },
+    /**
+     * Toggles the stacked class for the banner.
+     */
     stacked: {
       type:    Boolean,
-      default: false,
+      default: false
     }
   },
   computed: {
     /**
-     * Return message text as label
+     * Return message text as label.
      */
     messageLabel(): string | void {
       return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
     }
   },
-  methods: { nlToBr },
+  methods: { nlToBr }
 });
 </script>
 <template>
@@ -72,7 +88,6 @@ export default Vue.extend({
       padding: 0 10px;
       margin: 0;
       transition: none;
-
       &:first-child {
         padding-top: 10px;
       }

package/rancher-components/Banner/index.ts

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.vue';

package/{components → rancher-components/Card}/Card.vue

@@ -1,36 +1,61 @@
-<script>
-export default {
-  props:      {
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:  'Card',
+  props: {
+    /**
+     * The card's title.
+     */
     title: {
-      type:     String,
+      type:    String,
       default: ''
     },
+    /**
+     * The text content for the card's body.
+     */
     content: {
       type:    String,
       default: ''
     },
+    /**
+     * The function to invoke when the default action button is clicked.
+     */
     buttonAction: {
       type:    Function,
-      default: () => {}
+      default: (): void => { }
     },
+    /**
+     * The text for the default action button.
+     */
     buttonText: {
       type:    String,
       default: 'go'
     },
+    /**
+     * Toggles the card's highlight-border class.
+     */
     showHighlightBorder: {
       type:    Boolean,
       default: true
     },
+    /**
+     * Toggles the card's Actions section.
+     */
     showActions: {
       type:    Boolean,
       default: true
-    }
+    },
+    sticky: {
+      type:    Boolean,
+      default: false,
+    },    
   }
-};
+});
 </script>
 
 <template>
-  <div class="card-container" :class="{'highlight-border': showHighlightBorder}">
+  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
     <div class="card-wrap">
       <div class="card-title">
         <slot name="title">
@@ -56,11 +81,9 @@ export default {
 
 <style lang='scss'>
  .card-container {
-
   &.highlight-border {
     border-left: 5px solid var(--primary);
   }
-
   border-radius: var(--border-radius);
   display: flex;
   flex-basis: 40%;
@@ -87,12 +110,10 @@ export default {
      display: flex;
      padding-top: 20px;
    }
-
    & .card-title {
     align-items: center;
     display: flex;
     width: 100%;
-
      h5 {
        margin: 0;
      }
@@ -100,5 +121,30 @@ export default {
       margin-left: auto;
     }
    }
+
+  // Sticky mode will stick header and footer to top and bottom with content in the middle scrolling
+   &.card-sticky {
+      // display: flex;
+      // flex-direction: column;
+      overflow: hidden;
+
+    .card-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .card-body {
+        justify-content: flex-start;
+        overflow: scroll;
+      }
+
+      > * {
+        flex: 0;
+      }
+
+      .card-body {
+        flex: 1;
+      }
+    }
+   }
  }
 </style>

package/rancher-components/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card.vue';