@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

package/components/ConfigMapSettings/index.vue

@@ -0,0 +1,354 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import jsyaml from 'js-yaml';
+import { merge } from 'lodash';
+import { set, get } from '@shell/utils/object';
+import YAML from 'yaml';
+import { CONFIG_MAP, MANAGEMENT } from '@shell/config/types';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { toSeconds } from '@shell/utils/duration';
+import Loading from '@shell/components/Loading.vue';
+import AsyncButton from '@shell/components/AsyncButton.vue';
+import { Banner } from '@components/Banner';
+import Settings from '@shell/components/ConfigMapSettings/Settings.vue';
+
+export type SettingType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+
+export type SettingHandler = 'Textarea' | 'KeyValue' | 'Taints' | 'UnitInput';
+
+export interface Item {
+  type: SettingType,
+  value: string
+}
+
+export interface Group {
+  name: string,
+  children: string[],
+  expanded?: boolean,
+  weight: number,
+}
+
+export interface Setting {
+  path: string,
+  type: SettingType,
+  handler?: SettingHandler,
+  items?: Item[],
+  default: object | string | boolean | number,
+  tooltip?: boolean,
+  info?: boolean,
+  placeholder?: boolean,
+  class?: string,
+  weight: number,
+  // validationRules,
+}
+
+interface DataType {
+  noPermissions: boolean,
+  configMap: object | null,
+  values: object,
+  errors: string[]
+  valuesErrors: string[],
+}
+
+export default {
+
+  name: 'ConfigMapSettings',
+
+  emits: ['done', 'errors'],
+
+  components: {
+    Loading,
+    AsyncButton,
+    Banner,
+    Settings,
+  },
+
+  props: {
+    /**
+     * A key-value object that defines a flat list of settings.
+     * Each entry describe the setting name and the path where to get/set in the ConfigMap data field
+     *
+     * example:
+     *
+     *  {
+     *    setting-name: {
+     *      weight:  0,
+     *      type:    'number',
+     *      path:    'the.path.to.nested.value',
+     *      default: '50',
+     *      tooltip: false,
+     *      info:    false,
+     *    },
+     *    ...
+     *  }
+     */
+    settings: {
+      type:     Object as PropType<Record<string, Setting>>,
+      required: true
+    },
+
+    /**
+     * Groups of Settings
+     */
+    groups: {
+      type:    Array as PropType<Group[]>,
+      default: () => [],
+    },
+
+    /**
+     * ConfigMap name
+     */
+    name: {
+      type:     String,
+      required: true
+    },
+
+    /**
+     * ConfigMap namespace
+     */
+    namespace: {
+      type:     String,
+      required: true
+    },
+
+    /**
+     * The key in ConfigMap.data where to save the settings values
+     */
+    dataKey: {
+      type:     String,
+      required: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    labelKeyPrefix: {
+      type:    String,
+      default: 'settings'
+    },
+
+    showDescription: {
+      type:    Boolean,
+      default: false
+    },
+
+    showInfo: {
+      type:    Boolean,
+      default: false
+    },
+  },
+
+  async fetch() {
+    if (this.$store.getters[`${ this.inStore }/schemaFor`](CONFIG_MAP)) {
+      try {
+        this.configMap = await this.$store.dispatch(`${ this.inStore }/find`, { type: CONFIG_MAP, id: `${ this.namespace }/${ this.name }` });
+      } catch (err) {
+      }
+
+      this.initValues();
+    } else {
+      this.noPermissions = true;
+    }
+  },
+
+  data(): DataType {
+    return {
+      noPermissions: false,
+      configMap:     null,
+      values:        {},
+      errors:        [],
+      valuesErrors:  []
+    };
+  },
+
+  computed: {
+    mode() {
+      if (this.valuesErrors.length) {
+        return _VIEW;
+      }
+
+      const settingsSchema = this.$store.getters[`${ this.inStore }/schemaFor`](MANAGEMENT.SETTING);
+      const configMapsSchema = this.$store.getters[`${ this.inStore }/schemaFor`](CONFIG_MAP);
+
+      if (settingsSchema?.resourceMethods?.includes('PUT') && configMapsSchema?.resourceMethods?.includes('PUT')) {
+        return _EDIT;
+      }
+
+      return _VIEW;
+    },
+
+    canEdit() {
+      return this.mode === _EDIT;
+    },
+
+    fetchState(): {pending: boolean} {
+      return (this as any).$fetchState;
+    },
+  },
+
+  methods: {
+    async save(btnCB: (arg: boolean) => void) {
+      const configMap = this.configMap || await this.$store.dispatch(`${ this.inStore }/create`, {
+        type:     CONFIG_MAP,
+        metadata: {
+          namespace: this.namespace,
+          name:      this.name
+        }
+      });
+
+      if (!configMap.data) {
+        configMap.data = {};
+      }
+
+      try {
+        const configMapValues = YAML.parse(configMap.data[this.dataKey] || '');
+
+        const currentValues = this.buildValues(this.values, this.encodeValue);
+
+        const values = merge(configMapValues, currentValues);
+
+        configMap.data[this.dataKey] = jsyaml.dump(values);
+
+        await configMap.save();
+
+        this.$emit('done', configMap);
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err as string);
+        this.$emit('errors', this.errors);
+        btnCB(false);
+      }
+    },
+
+    initValues() {
+      try {
+        const configMapValues = get(this.configMap || {}, `data.${ this.dataKey }`);
+        const currentValues = YAML.parse(configMapValues || '');
+
+        this.values = this.buildValues(currentValues, this.decodeValue);
+      } catch (err) {
+        const msg = this.t(`${ this.labelKeyPrefix }.parseError`, { id: `${ this.namespace }/${ this.name }`, path: `data.${ this.dataKey }` }, true);
+
+        this.valuesErrors.push(msg);
+      }
+    },
+
+    buildValues<T = object | string | boolean | number>(values: object, fn: (name: string, value: T) => T) {
+      return Object.keys(this.settings).reduce((acc, name) => {
+        const value = get(values, this.settings[name].path);
+
+        set(acc, this.settings[name].path, fn(name, value));
+
+        return acc;
+      }, {});
+    },
+
+    decodeValue<T = object | string | boolean | number>(name: string, value: T): T {
+      // use default value
+      if (value === undefined) {
+        value = this.settings[name].default as T;
+      }
+
+      // object types to json
+      if (this.settings[name].type === 'object' && this.settings[name].handler === 'Textarea') {
+        value = JSON.stringify(value || {}) as T;
+      }
+
+      // number in seconds
+      if (this.settings[name].type === 'number' && this.settings[name].handler === 'UnitInput') {
+        value = toSeconds(value) as T;
+      }
+
+      return value;
+    },
+
+    encodeValue<T = object | string | boolean | number>(name: string, value: T): T {
+      // object types from json
+      if (this.settings[name].type === 'object' && this.settings[name].handler === 'Textarea') {
+        value = YAML.parse(value as string);
+      }
+
+      // number to string with unit of measure
+      if (this.settings[name].type === 'number' && this.settings[name].handler === 'UnitInput') {
+        value = `${ value || 0 }s` as T;
+      }
+
+      return value;
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="fetchState.pending" />
+  <div v-else-if="noPermissions">
+    <slot name="no-permissions">
+      <span>
+        {{ t(`${ labelKeyPrefix }.noPermissions`) }}
+      </span>
+    </slot>
+  </div>
+  <div
+    v-else
+    data-testid="cm-settings"
+  >
+    <slot name="header">
+      <div class="header">
+        <h1>
+          {{ t(`${ labelKeyPrefix }.title`) }}
+        </h1>
+
+        <label
+          v-if="showDescription"
+          class="text-label"
+        >
+          {{ t(`${ labelKeyPrefix }.description`, {}, true) }}
+        </label>
+      </div>
+    </slot>
+
+    <slot name="info">
+      <Banner
+        v-if="showInfo"
+        color="info"
+        :label="t(`${ labelKeyPrefix }.info`, {}, true)"
+      />
+    </slot>
+
+    <slot name="errors">
+      <template
+        v-for="(err, j) in [ ...valuesErrors, ...errors ]"
+        :key="j"
+      >
+        <Banner
+          color="error"
+          data-testid="cm-settings-error"
+          :label="err"
+        />
+      </template>
+    </slot>
+
+    <Settings
+      class="mt-10"
+      :settings="settings"
+      :groups="groups"
+      :values="values"
+      :mode="mode"
+      :label-key-prefix="labelKeyPrefix"
+      @update:value="values=$event"
+    />
+
+    <div v-if="canEdit">
+      <AsyncButton
+        class="pull-right mt-30"
+        :action-label="t(`${ labelKeyPrefix }.apply`)"
+        @click="save"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+</style>

package/components/CruResource.vue

@@ -412,7 +412,6 @@ export default {
           newNamespace.applyDefaults();
           await newNamespace.save();
         } catch (e) {
-          // this.errors = exceptionToErrorsArray(e);
           this.$emit('error', exceptionToErrorsArray(e));
           throw new Error(`Could not create the new namespace. ${ e.message }`);
         }
@@ -836,7 +835,7 @@ export default {
           :offer-preview="isEdit"
           :done-route="doneRoute"
           :done-override="resource.doneOverride"
-          :errors="errors"
+          :show-errors="false"
           :apply-hooks="applyHooks"
           class="resource-container cru__content"
           @error="e=>$emit('error', e)"

package/components/DetailText.vue

@@ -22,7 +22,7 @@ export default {
 
     value: {
       type:    String,
-      default: null,
+      default: '',
     },
 
     maxLength: {
@@ -40,6 +40,12 @@ export default {
       default: false
     },
 
+    // Will manage it's own state around showing or hiding sensitive data
+    concealStandAlone: {
+      type:    Boolean,
+      default: false
+    },
+
     monospace: {
       type:    Boolean,
       default: true
@@ -54,7 +60,7 @@ export default {
   data() {
     const expanded = this.value.length <= this.maxLength;
 
-    return { expanded };
+    return { expanded, standAloneHide: true };
   },
 
   computed: {
@@ -127,6 +133,10 @@ export default {
     },
 
     hideSensitiveData() {
+      if (this.concealStandAlone) {
+        return this.standAloneHide;
+      }
+
       return this.$store.getters['prefs/get'](HIDE_SENSITIVE);
     },
 
@@ -134,6 +144,14 @@ export default {
       return this.conceal && this.hideSensitiveData && !this.isBinary;
     },
 
+    sensitiveIcon() {
+      return this.standAloneHide ? 'icon-show' : 'icon-hide';
+    },
+
+    sensitiveAria() {
+      return this.standAloneHide ? this.t('detailText.sensitive.show') : this.t('detailText.sensitive.hide');
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
   methods: {
@@ -169,6 +187,7 @@ export default {
       :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
       :value="jsonStr"
       :class="{'conceal': concealed}"
+      aria-live="polite"
     />
 
     <span
@@ -176,6 +195,7 @@ export default {
       v-clean-html="bodyHtml"
       data-testid="detail-top_html"
       :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+      aria-live="polite"
     />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">
@@ -185,13 +205,27 @@ export default {
       >{{ plusMore }}</a>
     </template>
 
-    <CopyToClipboard
-      v-if="copy && !isBinary"
-      :text="value"
-      class="role-tertiary"
-      action-color=""
-      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
-    />
+    <div class="action-group">
+      <button
+        v-if="conceal && concealStandAlone"
+        class="sensitive btn ready-for-action role-tertiary"
+        :aria-label="sensitiveAria"
+        @click="standAloneHide = !standAloneHide"
+      >
+        <i
+          class="icon icon-lg"
+          :class="sensitiveIcon"
+          :alt="sensitiveAria"
+        />
+      </button>
+      <CopyToClipboard
+        v-if="copy && !isBinary"
+        :text="value"
+        class="role-tertiary"
+        action-color=""
+        :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
+      />
+    </div>
   </div>
 </template>
 
@@ -205,11 +239,27 @@ export default {
   border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
 
-  > button {
+  .action-group {
     position: absolute;
     top: -1px;
     right: -1px;
-    border-radius: 0 0 0 var(--border-radius);
+    white-space-collapse:collapse;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    button{
+      border-radius: 0;
+
+      &:first-of-type {
+        border-radius: 0 0 0 var(--border-radius);
+      }
+
+      &.sensitive {
+        margin-right: -1px;
+        padding: 12px 16px;
+      }
+    }
   }
 }
 

package/components/Drawer/Chrome.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+export interface Props {
+  ariaTarget: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Props>();
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close', { target: props.ariaTarget }));
+
+</script>
+<template>
+  <div class="chrome">
+    <div class="header pp-4">
+      <slot name="header">
+        <div class="title">
+          <slot name="title" />
+        </div>
+        <div class="actions">
+          <button
+            class="btn role-link"
+            :aria-label="ariaLabel"
+            @click="emit('close')"
+          >
+            <i class="icon icon-close" />
+          </button>
+        </div>
+      </slot>
+    </div>
+    <div class="body pp-4">
+      <slot name="body" />
+    </div>
+    <div class="footer pp-4">
+      <slot name="footer">
+        <div class="actions">
+          <button
+            class="btn role-secondary"
+            :aria-label="ariaLabel"
+            @click="emit('close')"
+          >
+            {{ i18n.t('component.drawer.chrome.close') }}
+          </button>
+          <slot name="additional-actions" />
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.chrome {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+
+    display: flex;
+    flex-direction: column;
+
+    & >.header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      background-color: var(--body-bg);
+      border-bottom: 1px solid var(--border);
+      height: var(--header-height);
+
+      & > .title {
+        flex: 1;
+        font-size: 16px;
+      }
+
+      & > .actions {
+        button {
+          display: inline-flex;
+          $size: 24px;
+          width: $size;
+          height: $size;
+          color: var(--body-text);
+
+          justify-content: center;
+        }
+      }
+    }
+
+    .body {
+      background-color: var(--drawer-body-bg);
+      flex: 1;
+      overflow-y: scroll;
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        background-color: var(--body-bg);
+        border-top: 1px solid var(--border);
+        height: 72px;
+
+        .actions > * {
+            margin-left: 16px;
+        }
+    }
+}
+</style>

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { _VIEW } from '@shell/config/query-params';
+import { useStore } from 'vuex';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+
+export interface Props {
+  resource: any;
+  component: any;
+  resourceType: string;
+}
+</script>
+<script setup lang="ts">
+const props = defineProps<Props>();
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+<template>
+  <Tab
+    class="config-tab"
+    name="config-tab"
+    :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
+  >
+    <div class="container">
+      <component
+        :is="props.component"
+        :value="props.resource"
+        :liveValue="props.resource"
+        :resourceType="props.resourceType"
+        :mode="_VIEW"
+        :real-mode="_VIEW"
+        :initial-value="props.resource"
+        :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        as="config"
+      />
+    </div>
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.config-tab {
+  .container {
+    background-color: var(--body-bg);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    max-width: 100%;
+    width: 100%;
+    position: relative;
+  }
+
+  // Handle the loading indicator
+  :deep() .overlay-content-mode {
+    left: 0;
+    top: 0;
+  }
+
+  :deep() .cru-resource-footer {
+    display: none;
+  }
+}
+</style>