@rancher/shell 0.3.15 → 0.3.17

package/utils/object.js

@@ -218,6 +218,33 @@ export function diff(from, to) {
   return out;
 }
 
+/**
+ * Super simple lodash isEqual equivalent.
+ *
+ * Only checks root properties for strict equality
+ */
+function isEqualBasic(from, to) {
+  const fromKeys = Object.keys(from || {});
+  const toKeys = Object.keys(to || {});
+
+  if (fromKeys.length !== toKeys.length) {
+    return false;
+  }
+
+  for (let i = 0; i < fromKeys.length; i++) {
+    const fromValue = from[fromKeys[i]];
+    const toValue = to[fromKeys[i]];
+
+    if (fromValue !== toValue) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export { isEqualBasic as isEqual };
+
 export function changeset(from, to, parentPath = []) {
   let out = {};
 

package/utils/settings.ts

@@ -1,7 +1,7 @@
 import { MANAGEMENT } from '@shell/config/types';
 import { Store } from 'vuex';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
-import { GC_PREFERENCES } from 'utils/gc/gc-types';
+import { GC_PREFERENCES } from '@shell/utils/gc/gc-types';
 
 export const fetchOrCreateSetting = async(store: Store<any>, id: string, val: string, save = true): Promise<any> => {
   let setting;
@@ -56,7 +56,7 @@ export const getPerformanceSetting = (rootGetters: Record<string, (arg0: string,
   manualRefresh: {};
   disableWebsocketNotification: boolean;
   garbageCollection: GC_PREFERENCES;
-  forceNsFilterV2: {};
+  forceNsFilterV2: any;
   advancedWorker: {};
 } => {
   const perfSettingResource = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);

package/vue.config.js

@@ -4,6 +4,7 @@ const serveStatic = require('serve-static');
 const webpack = require('webpack');
 const { generateDynamicTypeImport } = require('./pkg/auto-import');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const serverMiddlewares = require('./server/server-middleware.js');
 
 // Suppress info level logging messages from http-proxy-middleware
 // This hides all of the "[HPM Proxy created] ..." messages
@@ -218,8 +219,6 @@ module.exports = function(dir, _appConfig) {
   serverMiddleware.push({ path: `/pkg/`, handler: serveStatic(`${ dir }/dist-pkg/`) });
   // Endpoint to download and unpack a tgz from the local verdaccio rgistry (dev)
   serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'verdaccio-middleware'));
-  // Add the standard dashboard server middleware after the middleware added to serve up UI packages
-  serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'server-middleware'));
 
   // ===============================================================================================
   // Dashboard nuxt configuration
@@ -319,6 +318,8 @@ module.exports = function(dir, _appConfig) {
           process.exit(1);
         });
 
+        app.use(serverMiddlewares);
+
         Object.keys(proxy).forEach((p) => {
           const px = createProxyMiddleware({
             ...proxy[p],

package/pages/safeMode.vue

@@ -1,17 +0,0 @@
-<script>
-export default {
-  middleware({ redirect, store } ) {
-    const dashboardHome = { name: 'home' };
-    const t = store.getters['i18n/t'];
-
-    setTimeout(() => {
-      store.dispatch('growl/success', {
-        title:   t('plugins.safeMode.title'),
-        message: t('plugins.safeMode.message')
-      }, { root: true });
-    }, 1000);
-
-    return redirect(dashboardHome);
-  }
-};
-</script>

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

@@ -1,12 +0,0 @@
-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/rancher-components/components/BadgeState/BadgeState.vue

@@ -1,111 +0,0 @@
-<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 Vue.extend({
-  props: {
-    /**
-     * A value having the properties `stateBackground` and `stateDisplay`
-     */
-    value: {
-      type:    Object as PropType<Badge>,
-      default: null
-    },
-
-    /**
-     * Badge color. `stateBackground` of the value property takes precedence if supplied
-     */
-    color: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Optional icon to be shown before the label
-     */
-    icon: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
-     */
-    label: {
-      type:    String,
-      default: null
-    }
-  },
-
-  computed: {
-    bg(): string | null {
-      return this.value?.stateBackground || this.color;
-    },
-
-    msg(): string | null {
-      return this.value?.stateDisplay || this.label;
-    }
-  }
-});
-</script>
-
-<template>
-  <span :class="{'badge-state': true, [bg]: true}">
-    <i
-      v-if="icon"
-      class="icon"
-      :class="{[icon]: true, 'mr-5': !!msg}"
-    />{{ msg }}
-  </span>
-</template>
-
-<style lang="scss" scoped>
-  .badge-state {
-    align-items: center;
-    display: inline-flex;
-    padding: 2px 10px;
-    border: 1px solid transparent;
-    border-radius: 20px;
-
-    &.bg-info {
-      border-color: var(--primary);
-    }
-
-    &.bg-error {
-      border-color: var(--error);
-    }
-
-    &.bg-warning {
-      border-color: var(--warning);
-    }
-
-    // Successful states are de-emphasized by using [text-]color instead of background-color
-    &.bg-success {
-      color: var(--success);
-      background: transparent;
-      border-color: var(--success);
-    }
-  }
-</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;
-    max-width: 100%;
-    position: relative;
-    max-width: 110px;
-    font-size: .85em;
-    vertical-align: middle;
-  }
-</style>

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

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

package/rancher-components/components/Banner/Banner.test.ts

@@ -1,63 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { Banner } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
-describe('component: Banner', () => {
-  it('should display text based on label', () => {
-    const label = 'test';
-    const wrapper = mount(
-      Banner,
-      {
-        directives: { cleanHtmlDirective },
-        propsData:  { label }
-      });
-
-    const element = wrapper.find('span').element;
-
-    expect(element.textContent).toBe(label);
-  });
-
-  it('should display an icon', () => {
-    const icon = 'my-icon';
-    const wrapper = mount(Banner, { propsData: { icon } });
-
-    const element = wrapper.find(`.${ icon }`).element;
-
-    expect(element.classList).toContain(icon);
-  });
-
-  it('should not display an icon', () => {
-    const wrapper = mount(Banner);
-
-    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
-
-    expect(element).not.toBeDefined();
-  });
-
-  it('should emit close event', () => {
-    const wrapper = mount(Banner, { propsData: { closable: true } });
-    const element = wrapper.find(`[data-testid="banner-close"]`).element;
-
-    element.click();
-
-    expect(wrapper.emitted('close')).toHaveLength(1);
-  });
-
-  it('should add the right color', () => {
-    const color = 'red';
-    const wrapper = mount(Banner, { propsData: { color } });
-
-    const element = wrapper.element;
-
-    expect(element.classList).toContain(color);
-  });
-
-  it('should stack the banner messages', () => {
-    const stacked = true;
-    const wrapper = mount(Banner, { propsData: { stacked } });
-
-    const element = wrapper.find(`[data-testid="banner-content"]`).element;
-
-    expect(element.classList).toContain('stacked');
-  });
-});

package/rancher-components/components/Banner/Banner.vue

@@ -1,244 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-import { nlToBr } from '@shell/utils/string';
-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
-    },
-    /**
-     * The i18n key for the label to display as the banner's default content.
-     */
-    labelKey: {
-      type:    String,
-      default: null
-    },
-    /**
-     * Add icon for the banner
-     */
-    icon: {
-      type:    String,
-      default: null
-    },
-    /**
-     * Toggles the banner's close button.
-     */
-    closable: {
-      type:    Boolean,
-      default: false
-    },
-    /**
-     * Toggles the stacked class for the banner.
-     */
-    stacked: {
-      type:    Boolean,
-      default: false
-    }
-  },
-  computed: {
-    /**
-     * Return message text as label.
-     */
-    messageLabel(): string | void {
-      return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
-    }
-  },
-  methods: { nlToBr }
-});
-</script>
-<template>
-  <div
-    class="banner"
-    :class="{
-      [color]: true,
-    }"
-  >
-    <div
-      v-if="icon"
-      class="banner__icon"
-      data-testid="banner-icon"
-    >
-      <i
-        class="icon icon-2x"
-        :class="icon"
-      />
-    </div>
-    <div
-      class="banner__content"
-      data-testid="banner-content"
-      :class="{
-        closable,
-        stacked,
-        icon
-      }"
-    >
-      <slot>
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-          :raw="true"
-        />
-        <span v-else-if="messageLabel">{{ messageLabel }}</span>
-        <span
-          v-else
-          v-clean-html="nlToBr(label)"
-        />
-      </slot>
-      <div
-        v-if="closable"
-        class="banner__content__closer"
-        @click="$emit('close')"
-      >
-        <i
-          data-testid="banner-close"
-          class="icon icon-close closer-icon"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-$left-border-size: 4px;
-$icon-size: 24px;
-
-.banner {
-  display: flex;
-  margin: 15px 0;
-  position: relative;
-  width: 100%;
-  color: var(--body-text);
-
-  &__icon {
-    width: $icon-size * 2;
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: content-box;
-
-    .primary & {
-      background: var(--primary);
-    }
-
-    .secondary & {
-      background: var(--default);
-    }
-
-    .success & {
-      background: var(--success);
-    }
-
-    .info & {
-      background: var(--info);
-    }
-
-    .warning & {
-      background: var(--warning);
-    }
-
-    .error & {
-      background: var(--error);
-      color: var(--primary-text);
-    }
-  }
-
-  &__content {
-    padding: 10px;
-    transition: all 0.2s ease;
-    line-height: 20px;
-    width: 100%;
-    border-left: solid $left-border-size transparent;
-    display: flex;
-    gap: 3px;
-
-    .primary & {
-      background: var(--primary);
-      border-color: var(--primary);
-    }
-
-    .secondary & {
-      background: var(--default-banner-bg);
-      border-color: var(--default);
-    }
-
-    .success & {
-      background: var(--success-banner-bg);
-      border-color: var(--success);
-    }
-
-    .info & {
-      background: var(--info-banner-bg);
-      border-color: var(--info);
-    }
-
-    .warning & {
-      background: var(--warning-banner-bg);
-      border-color: var(--warning);
-    }
-
-    .error & {
-      background: var(--error-banner-bg);
-      border-color: var(--error);
-      color: var(--error);
-    }
-
-    &.stacked {
-      padding: 0 10px;
-      margin: 0;
-      transition: none;
-      &:first-child {
-        padding-top: 10px;
-      }
-      &:last-child {
-        padding-bottom: 10px;
-      }
-    }
-
-    &.closable {
-      padding-right: $icon-size * 2;
-    }
-
-    &__closer {
-      display: flex;
-      align-items: center;
-
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: $icon-size;
-      line-height: $icon-size;
-      text-align: center;
-
-      .closer-icon {
-        opacity: 0.7;
-
-        &:hover {
-          opacity: 1;
-          color: var(--link);
-        }
-      }
-    }
-
-    &.icon {
-      border-left: none;
-    }
-  }
-}
-</style>

package/rancher-components/components/Banner/index.ts

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

package/rancher-components/components/Card/Card.vue

@@ -1,167 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-  name:  'Card',
-  props: {
-    /**
-     * The card's title.
-     */
-    title: {
-      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: (): 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, 'card-sticky': sticky}"
-    data-testid="card"
-  >
-    <div class="card-wrap">
-      <div
-        class="card-title"
-        data-testid="card-title-slot"
-      >
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <hr>
-      <div
-        class="card-body"
-        data-testid="card-body-slot"
-      >
-        <slot name="body">
-          {{ content }}
-        </slot>
-      </div>
-      <div
-        v-if="showActions"
-        class="card-actions"
-        data-testid="card-actions-slot"
-      >
-        <slot name="actions">
-          <button
-            class="btn role-primary"
-            @click="buttonAction"
-          >
-            {{ buttonText }}
-          </button>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
- .card-container {
-  &.highlight-border {
-    border-left: 5px solid var(--primary);
-  }
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-basis: 40%;
-  margin: 10px;
-  min-height: 100px;
-  padding: 10px;
-  box-shadow: 0 0 20px var(--shadow);
-  &:not(.top) {
-    align-items: top;
-    flex-direction: row;
-    justify-content: start;
-  }
-  .card-wrap {
-    width: 100%;
-  }
-   & .card-body {
-    color: var(--input-label);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-   }
-   & .card-actions {
-     align-self: end;
-     display: flex;
-     padding-top: 20px;
-   }
-   & .card-title {
-    align-items: center;
-    display: flex;
-    width: 100%;
-     h5 {
-       margin: 0;
-     }
-    .flex-right {
-      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/components/Card/index.ts

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