@rancher/shell 0.3.15 → 0.3.16

package/assets/translations/en-us.yaml

@@ -4440,7 +4440,6 @@ rbac:
   members:
     label: Members
   roletemplate:
-    label: Roles
     newUserDefault:
       no: No
       tooltip: This does not affect any bindings to the role that already exist.
@@ -7324,6 +7323,7 @@ manager:
     label: Node Templates
 
 auth:
+  roleTemplate: Role Templates
   config:
     label: Auth Provider
 vncConsole:

package/assets/translations/zh-hans.yaml

@@ -117,6 +117,7 @@ locale:
   none: (None)
 
 nav:
+  harvesterDashboard: Harvester 仪表板
   backToRancher: Cluster Manager
   clusterTools: 集群工具
   kubeconfig:
@@ -179,6 +180,7 @@ nav:
     multiCluster: 全局应用
     legacy: 旧版应用
     configuration: 配置
+    hci: HCI
   search:
     placeholder: 输入关键词，搜索集群
     noResults: 没有匹配的集群
@@ -1282,9 +1284,6 @@ cluster:
         label: KubeconfigContent
       placeholder: '命名空间/名称'
       cluster: 导入的 Harvester 集群
-      affinity:
-        namespaces:
-          placeholder: 例如：default,system,base
       installGuestAgent: 安装访客代理
   description:
     label: 集群描述
@@ -4002,12 +4001,14 @@ plugins:
     builtin: 内置角色
     experimental: 实验功能
     third-party: 第三方
+    image: 镜像
     installing: 正在安装...
     uninstalling: 正在卸载...
   descriptions:
     experimental: 这是实验性扩展
     third-party: 此扩展由第三方提供
     built-in: 这是内置扩展
+    image: 已手动加载此扩展镜像
   error:
     title: 加载扩展时出错
     message: 无法加载扩展代码
@@ -4037,12 +4038,53 @@ plugins:
     available: 没有可用的扩展
     installed: 没有已安装的扩展
     updates: 没有可用于已安装扩展的更新
+    images: 未安装扩展镜像
   loadError: 加载此扩展的代码时出错
   helmError: "通过 Helm 安装扩展时出错"
   manageRepos: 管理仓库
+  manageCharts: 管理扩展 Chart
+  manageCatalog:
+    label: 管理扩展商店
+    title: 扩展
+    subtitle: 应用商店
+    imageLoad:
+      load: 导入扩展商店
+      prompt: 扩展商店包含了打包在镜像中的扩展资产，导入将获取该镜像，并托管一个 Helm 仓库来作为自定义构建扩展的商店。
+      fields:
+        image:
+          label: 商店镜像参考
+          placeholder: "例如：hub.docker.io/example-org/my-image:latest"
+        secrets:
+          banner: "如果托管目录镜像的仓库需要拉取 Secret，则必须在以下命名空间中创建它们：<pre>cattle-ui-plugin-system</pre>"
+      banner: 这将创建 Deployment、Service 和 Helm 仓库来服务扩展 Chart。
+      imageVersion:
+        title: 找不到镜像版本
+        message: 无法通过 {image} 确定镜像版本，默认为 latest
+      error:
+        exists:
+          deployment:
+            title: 部署冲突
+            message: 使用 {image} 镜像的容器已存在
+          service:
+            title: Service 冲突
+            message: 名称为 {svc} 的 Service 已存在
+          repo:
+            title: Helm 仓库冲突
+            message: 名称为 {repo} 的仓库已存在
+      success:
+        title: "导入的扩展商店来自：{name}"
+        message: 已成功导入扩展商店镜像
+    headers:
+      image:
+        name: 镜像
+        label: Deployment 镜像
+      cacheState:
+        name: cacheState
+        label: 缓存状态
   tabs:
     all: 全部
     available: 可用
+    images: 镜像
     installed: 已安装
     updates: 更新
   title: 扩展
@@ -4065,6 +4107,7 @@ plugins:
     label: 卸载
     title: "卸载扩展 {name}"
     prompt: "确定要卸载此扩展吗？"
+    custom: "确定要卸载此扩展镜像吗？此镜像提供的扩展也将被删除。"
   upgradeAvailable: 此扩展有可用的版本更新
   reload: 扩展已更改 - 需要重新加载
   safeMode:
@@ -4599,8 +4642,8 @@ resourceList:
     create: 创建
     createFromYaml: 使用 YAML 文件创建
     createResource: "创建 {resourceName}"
-  nsFiltering: "{resource} 太多。<br>请通过选择上面的命名空间进行过滤。"
-  nsFilterToolTip: "资源太多，过滤仅限于单一 {mode}。"
+  nsFiltering: "请使用上面的过滤器选择一个或多个命名空间或项目。"
+  nsFilterToolTip: "仅限于过滤项目和命名空间"
 resourceLoadingIndicator:
   loading: 正在加载
 
@@ -4811,20 +4854,13 @@ servicesPage:
     title: 附加配置
     ipam:
       label: IPAM
-    healthCheckPort:
-      label: 健康检查端口
-    healthCheckSuccessThreshold:
-      label: 健康检查成功阙值
-      description: 如果探针连续检测到某个地址的成功次数达到成功阈值，后端服务器就可以开始转发流量。
-    healthCheckFailureThreshold:
-      label: 健康检查失败阈值
-      description: 如果健康检查失败的数量达到失败阈值，后端服务器将停止转发流量。
-    healthCheckPeriod:
-      label: 健康检查周期
-    healthCheckTimeout:
-      label: 健康检查超时
-    healthCheckEnabled:
-      label: 健康检查
+    useShareIP:
+      label: 使用共享 IP
+    useIpam:
+      label: 使用 IPAM
+    shareIP:
+      label: 共享 IP LB
+
   ips:
     define: 服务端口
     clusterIpHelpText: 集群 IP 地址必须在为 API server 配置的 CIDR 范围内。
@@ -6035,7 +6071,7 @@ workload:
         noExecute: 不执行
         noSchedule: "不调度"
         preferNoSchedule: 倾向于不调度
-      labelKey: 标签键
+      labelKey: 键
       operator: 运算符
       operatorOptions:
         equal: =
@@ -6373,6 +6409,11 @@ typeLabel:
       one { 集群成员 }
       other { 集群成员 }
     }
+  projectroletemplatebinding: |-
+    {count, plural,
+      one { 项目成员 }
+      other { 项目成员 }
+    }
   management.cattle.io.feature: |-
     {count, plural,
       one { 功能开关 }
@@ -7012,6 +7053,7 @@ performance:
       启用后，资源会更快出现，但可能需要更长的时间来加载整个资源集。此设置仅适用于来自 Kubernetes API 的资源
     checkboxLabel: 启用增量加载
     inputLabel: 资源阈值
+    incompatibleDescription: "增量加载与命名空间/项目过滤不兼容，无法同时启用。"
   manualRefresh:
     label: 手动刷新
     setting: 你可以配置一个阈值，高于该阈值时则启用手动刷新。
@@ -7020,6 +7062,7 @@ performance:
       启用后，列表数据不会自动更新，用户必须手动刷新列表视图。此设置仅适用于来自 Kubernetes API 的资源
     checkboxLabel: 启用列表数据的手动刷新
     inputLabel: 资源阈值
+    incompatibleDescription: "手动刷新与命名空间/项目过滤不兼容，无法同时启用。"
   websocketNotification:
     label: WebSocket 通知
     description: |-
@@ -7047,12 +7090,10 @@ performance:
         description: 资源必须超过此数量才能考虑进行垃圾回收。
         inputLabel: 资源数量
   nsFiltering:
-    label: 命名空间过滤
-    description: 当列表无法显示太多资源时，用户需要选择一个命名空间并仅提取该命名空间中的资源。
-    checkboxLabel: 启用命名空间过滤
-    count:
-      inputLabel: 资源阈值
-      description: 需要按命名空间过滤的阈值
+    label: 要求命名空间/项目过滤
+    description: 用户需要选择命名空间和/或项目。这将限制查看列表时获取的资源数量，有助于在具有大量资源的系统中提高 UI 的响应速度。
+    checkboxLabel: 启用要求命名空间/项目过滤
+    incompatibleDescription: "\"要求命名空间/项目过滤\"与手动刷新和增量加载不兼容，无法同时启用。"
   advancedWorker:
     label: Websocket Web Worker
     description: 推送到 UI 的资源更新来自 WebSocket，并在 UI 线程中处理。启用此选项可在单独的线程中处理 Web Worker 中的集群 WebSocket 更新。这有助于提高 UI 在资源经常变化的系统中的响应能力。
@@ -7147,6 +7188,7 @@ resourceQuota:
     resourceType: 资源类型
   helpText: 配置整个命名空间可用的资源量。
   helpTextDetail: 整个命名空间可以使用的资源量。
+  helpTextHarvester: VM 需要预留额外的内存。
   configMaps: ConfigMaps
   limitsCpu: CPU 限制
   limitsMemory: 内存限制

package/cloud-credential/generic.vue

@@ -33,7 +33,7 @@ export default {
     for ( const k of keyOptions ) {
       const sk = simplify(k);
 
-      if ( normanSchema || likelyFields.includes(sk) || iffyFields.includes(sk) ) {
+      if ( normanSchema?.resourceFields || likelyFields.includes(sk) || iffyFields.includes(sk) ) {
         keys.push(k);
       }
     }

package/components/BannerGraphic.vue

@@ -53,6 +53,7 @@ export default {
     <div
       v-if="pref"
       class="close-button"
+      data-testid="graphic-banner-close"
       @click="hide()"
     >
       <i class="icon icon-close" />

package/components/CruResource.vue

@@ -288,7 +288,7 @@ export default {
     closeError(index) {
       const errors = this.errors.filter((_, i) => i !== index);
 
-      this.$emit('error', errors);
+      this.$emit('error', errors, this.errors[index]);
     },
 
     emitOrRoute() {

package/components/EmberPage.vue

@@ -252,6 +252,7 @@ export default {
       if (iframeEl === null) {
         iframeEl = document.createElement('iframe');
         iframeEl.setAttribute('id', EMBER_FRAME);
+        iframeEl.setAttribute('data-testid', EMBER_FRAME);
         iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
 
         if (this.inline) {

package/components/GrafanaDashboard.vue

@@ -259,10 +259,16 @@ export default {
       v-if="!loading && !error"
       class="external-link"
     >
+      <!-- https://github.com/harvester/harvester-installer/pull/512/files -->
+      <!-- It is necessary to include the parameter referer when accessing the Grafana page. -->
+      <!-- This parameter is required by the backend to identify the origin of the request from which cluster -->
+      <!-- The matching mechanism as follows: -->
+      <!-- ~.*/k8s/clusters/(c-m-.+)/.* -->
+      <!-- ~.*/dashboard/harvester/c/(c-m-.+)/.* -->
       <a
         :href="grafanaUrl"
         target="_blank"
-        rel="noopener noreferrer nofollow"
+        rel="noopener nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
     </div>
   </div>

package/components/SimpleBox.vue

@@ -31,6 +31,7 @@ export default {
   <div
     v-if="shown"
     class="simple-box"
+    data-testid="simple-box-container"
     v-on="$listeners"
   >
     <div

package/components/SortableTable/index.vue

@@ -903,7 +903,10 @@ export default {
 </script>
 
 <template>
-  <div ref="container">
+  <div
+    ref="container"
+    data-testid="cluster-list-container"
+  >
     <div
       :class="{'titled': $slots.title && $slots.title.length}"
       class="sortable-table-header"
@@ -1001,6 +1004,7 @@ export default {
         <div
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || ($slots['header-right'] && $slots['header-right'].length)"
           class="search row"
+          data-testid="search-box-filter-row"
         >
           <ul
             v-if="hasAdvancedFiltering"

package/components/form/GitPicker.vue

@@ -357,7 +357,7 @@ export default Vue.extend<Data, any, any, any>({
       <div class="spacer">
         <LabeledInput
           v-model="selectedAccOrOrg"
-          data-testid="epinio_app-source_git-username"
+          data-testid="git_picker-username-or-org"
           :tooltip="t(`gitPicker.${ type }.username.tooltip`)"
           :label="t(`gitPicker.${ type }.username.inputLabel`)"
           :required="true"

package/components/form/PodAffinity.vue

@@ -340,6 +340,11 @@ export default {
       this.queueUpdate();
     },
 
+    updateLabelSelector(e, props) {
+      this.set(props.row.value, 'labelSelector.matchExpressions', e);
+      this.queueUpdate();
+    },
+
     isEmpty,
     get,
     set
@@ -431,7 +436,7 @@ export default {
             :value="get(props.row.value, 'labelSelector.matchExpressions')"
             :show-remove="false"
             :data-testid="`pod-affinity-expressions-index${props.i}`"
-            @input="e=>set(props.row.value, 'labelSelector.matchExpressions', e)"
+            @input="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
             <div class="col span-9">

package/config/product/auth.js

@@ -144,7 +144,7 @@ export function init(store) {
   weightType(NORMAN.SPOOFED.GROUP_PRINCIPAL, 101, true);
 
   virtualType({
-    labelKey:   'rbac.roletemplate.label',
+    labelKey:   'auth.roleTemplate',
     icon:       'user',
     namespaced: false,
     name:       ROLES_VIRTUAL_TYPE,

package/config/router.js

@@ -17,11 +17,6 @@ export const routerOptions = {
   scrollBehavior,
 
   routes: [{
-    path:     '/verify-auth',
-    redirect: (to) => {
-      return 'auth/verify';
-    },
-  }, {
     path:      '/about',
     component: () => interopDefault(import('../pages/about.vue' /* webpackChunkName: "pages/about" */)),
     name:      'about'

package/creators/pkg/package-lock.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rancher/create-pkg",
+  "version": "0.1.37",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    }
+  }
+}

package/detail/catalog.cattle.io.clusterrepo.vue

@@ -19,10 +19,17 @@ export default {
     </div>
     <div
       v-if="value.isGit"
-      class="span-6"
+      class="span-3"
     >
       <h3>{{ t('tableHeaders.branch') }}</h3>
       <span>{{ value.branchDisplay }}</span>
     </div>
+    <div
+      v-if="value.isGit"
+      class="span-3"
+    >
+      <h3>{{ t('tableHeaders.commit') }}</h3>
+      <span>{{ value.status.commit }}</span>
+    </div>
   </div>
 </template>

package/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import FormValidation from '@shell/mixins/form-validation';
+import Monitoring from '@shell/edit/monitoring.coreos.com.prometheusrule/index.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+
+describe('edit: management.cattle.io.setting should', () => {
+  const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
+  const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
+  const requiredSetup = () => ({
+    // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  jest.fn(),
+          'i18n/exists':             jest.fn(),
+          namespaces:                () => ({})
+        }
+      },
+      $route:  { query: { AS: '' }, name: '' },
+      $router: { applyQuery: jest.fn() }
+    }
+  });
+
+  it('should close error banners', async() => {
+    jest.spyOn(FormValidation.computed, 'fvUnreportedValidationErrors').mockReturnValue(MOCKED_ERRORS);
+
+    const wrapper = mount(Monitoring, {
+      propsData: {
+        canYaml:  false,
+        mode:     _EDIT,
+        resource: {},
+        value:    { value: 'anything' },
+        name:     ''
+      },
+      directives: { cleanHtmlDirective },
+      ...requiredSetup()
+    });
+
+    const errorBanners = wrapper.findAll(ERROR_BANNER_SELECTOR);
+
+    // Assert that all the error banners are rendered
+    expect(errorBanners).toHaveLength(MOCKED_ERRORS.length);
+
+    for (let i = 0; i < MOCKED_ERRORS.length; i++) {
+      await errorBanners.at(0).trigger('click');
+      const resultErrorBanners = wrapper.findAll(ERROR_BANNER_SELECTOR);
+
+      // Assert that an error banner is closed until the last one
+      expect(resultErrorBanners).toHaveLength(MOCKED_ERRORS.length - 1 - i);
+    }
+  });
+});

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -42,7 +42,10 @@ export default {
   },
 
   data() {
-    return { fvFormRuleSets: [{ path: 'metadata.name', rules: ['dnsLabel'] }] };
+    return {
+      fvFormRuleSets:      [{ path: 'metadata.name', rules: ['dnsLabel'] }],
+      closedErrorMessages: []
+    };
   },
 
   computed: {
@@ -54,7 +57,7 @@ export default {
         return [this.t('validation.prometheusRule.noEdit')];
       }
 
-      return this.fvUnreportedValidationErrors;
+      return this.fvUnreportedValidationErrors.filter((e) => !this.closedErrorMessages.includes(e));
     }
   },
 
@@ -102,6 +105,8 @@ export default {
         }
       });
 
+      this.closedErrorMessages = [];
+
       return true;
     },
 
@@ -125,7 +130,7 @@ export default {
     :mode="mode"
     :resource="value"
     :validation-passed="fvFormIsValid"
-    @error="(e) => (errors = e)"
+    @error="(_, closedError) => closedErrorMessages.push(closedError)"
     @finish="save"
   >
     <div class="row">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -106,7 +106,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.14",
+    "rancher-icons": "rancher/icons#v2.0.16",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",

package/pages/auth/login.vue

@@ -542,6 +542,16 @@ export default {
     }
   }
 
+  .gutless {
+    height: 100vh;
+    .span-6 {
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      place-content: center;
+    }
+  }
   .locale-elector {
     position: absolute;
     bottom: 30px;

package/pages/auth/setup.vue

@@ -478,6 +478,10 @@ export default {
     .form-col {
       display: flex;
       flex-direction: column;
+      overflow-y: auto;
+      position: relative;
+      height: 100vh;
+
       & > div:first-of-type {
         flex:3;
       }

package/pages/c/_cluster/auth/roles/index.vue

@@ -159,7 +159,7 @@ export default {
     <header>
       <div class="title">
         <h1 class="m-0">
-          {{ t('rbac.roletemplate.label') }}
+          {{ t('auth.roleTemplate') }}
         </h1>
       </div>
       <div class="actions-container">

package/pages/home.vue

@@ -306,6 +306,7 @@ export default {
       :title="t('landing.welcomeToRancher', {vendor})"
       :pref="HIDE_HOME_PAGE_CARDS"
       pref-key="welcomeBanner"
+      data-testid="home-banner-graphic"
     />
     <IndentedPanel class="mt-20 mb-20">
       <div
@@ -337,6 +338,7 @@ export default {
             <div class="col span-12">
               <Banner
                 color="set-login-page mt-0"
+                data-testid="set-login-page-banner"
                 :closable="true"
                 @close="closeSetLoginBanner()"
               >
@@ -384,6 +386,7 @@ export default {
                       v-if="canManageClusters"
                       :to="manageLocation"
                       class="btn btn-sm role-secondary"
+                      data-testid="cluster-management-manage-button"
                     >
                       {{ t('cluster.manageAction') }}
                     </n-link>
@@ -391,6 +394,7 @@ export default {
                       v-if="canCreateCluster"
                       :to="importLocation"
                       class="btn btn-sm role-primary"
+                      data-testid="cluster-create-import-button"
                     >
                       {{ t('cluster.importAction') }}
                     </n-link>
@@ -398,6 +402,7 @@ export default {
                       v-if="canCreateCluster"
                       :to="createLocation"
                       class="btn btn-sm role-primary"
+                      data-testid="cluster-create-button"
                     >
                       {{ t('generic.create') }}
                     </n-link>

package/plugins/steve/actions.js

@@ -128,6 +128,10 @@ export default {
 
         finishDeferred(key, 'resolve', out);
 
+        if (opt.method === 'post' || opt.method === 'put') {
+          handleValidationWarnings(res);
+        }
+
         return out;
       });
     }
@@ -192,6 +196,24 @@ export default {
 
       return Promise.reject(out);
     }
+
+    function handleValidationWarnings(res) {
+      const warnings = (res.headers?.warning || '').split(',');
+
+      if (!warnings.length || !warnings[0]) {
+        return;
+      }
+
+      const message = warnings.reduce((message, warning) => {
+        return `${ message }\n${ warning.trim() }`;
+      }, `Validation Warnings for ${ opt.url }\n`);
+
+      if (process.env.dev) {
+        console.warn(`${ message }\n\n`, res.data); // eslint-disable-line no-console
+      } else {
+        console.debug(message); // eslint-disable-line no-console
+      }
+    }
   },
 
   promptMove({ commit, state }, resources) {

package/rancher-components/StringList/StringList.vue

@@ -87,7 +87,7 @@ export default Vue.extend({
     return {
       value:             null as string | null,
       selected:          null as string | null,
-      isEditItem:        null as string | null,
+      editedItem:        null as string | null,
       isCreateItem:      false,
       errors:            { duplicate: false } as Record<Error, boolean>
     };
@@ -100,7 +100,7 @@ export default Vue.extend({
      */
     errorMessagesArray(): string[] {
       return (Object.keys(this.errors) as Error[])
-        .filter(f => !!(this.errors)[f])
+        .filter(f => this.errors[f] && this.errorMessages[f])
         .map(k => this.errorMessages[k]);
     },
   },
@@ -113,23 +113,32 @@ export default Vue.extend({
       this.toggleEditMode(false);
       this.toggleCreateMode(false);
     },
+    errors: {
+      handler(val) {
+        this.$emit('errors', val);
+      },
+      deep: true
+    }
   },
 
   methods: {
     onChange(value: string) {
       this.value = value;
-      /**
-       * Remove duplicate error when a new value is typed
-       */
+
+      const items = [
+        ...this.items,
+        this.value
+      ];
+
       this.toggleError(
         'duplicate',
-        false,
-        this.isCreateItem ? INPUT.create : INPUT.edit,
+        hasDuplicatedStrings(items, this.caseSensitive),
+        this.isCreateItem ? INPUT.create : INPUT.edit
       );
     },
 
     onSelect(item: string) {
-      if (this.isCreateItem || this.isEditItem === item) {
+      if (this.readonly || this.isCreateItem || this.editedItem === item) {
         return;
       }
       this.selected = item;
@@ -160,7 +169,7 @@ export default Vue.extend({
     },
 
     onClickEmptyBody() {
-      if (!this.isCreateItem && !this.isEditItem) {
+      if (!this.isCreateItem && !this.editedItem) {
         this.toggleCreateMode(true);
       }
     },
@@ -176,7 +185,7 @@ export default Vue.extend({
 
         return;
       }
-      if (this.isEditItem) {
+      if (this.editedItem) {
         this.toggleEditMode(false);
 
         return;
@@ -229,6 +238,7 @@ export default Vue.extend({
      */
     toggleError(type: Error, val: boolean, refId?: string) {
       this.errors[type] = val;
+
       if (refId) {
         this.toggleErrorClass(refId, val);
       }
@@ -250,7 +260,11 @@ export default Vue.extend({
      * Show/Hide the input line to create new item
      */
     toggleCreateMode(show: boolean) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
+        this.toggleEditMode(false);
         this.value = '';
 
         this.isCreateItem = true;
@@ -268,18 +282,21 @@ export default Vue.extend({
      * Show/Hide the in-line editing to edit an existing item
      */
     toggleEditMode(show: boolean, item?: string) {
+      if (this.readonly) {
+        return;
+      }
       if (show) {
         this.toggleCreateMode(false);
-        this.value = this.isEditItem;
+        this.value = this.editedItem;
 
-        this.isEditItem = item || '';
+        this.editedItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
         this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.isEditItem = null;
+        this.editedItem = null;
       }
     },
 
@@ -292,7 +309,7 @@ export default Vue.extend({
     /**
      * Create a new item and insert in the items list
      */
-    saveItem() {
+    saveItem(closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -301,21 +318,20 @@ export default Vue.extend({
           value,
         ];
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.create);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleCreateMode(false);
       }
-      this.toggleCreateMode(false);
     },
 
     /**
      * Update an existing item in the items list
      */
-    updateItem(item: string) {
+    updateItem(item: string, closeInput = true) {
       const value = this.value?.trim();
 
       if (value) {
@@ -326,15 +342,14 @@ export default Vue.extend({
           items[index] = value;
         }
 
-        if (hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.toggleError('duplicate', true, INPUT.edit);
-
-          return;
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
         }
+      }
 
-        this.updateItems(items);
+      if (closeInput) {
+        this.toggleEditMode(false);
       }
-      this.toggleEditMode(false);
     },
 
     /**
@@ -387,19 +402,19 @@ export default Vue.extend({
         @blur="onSelectLeave(item)"
       >
         <span
-          v-if="!isEditItem || isEditItem !== item"
+          v-if="!editedItem || editedItem !== item"
           class="label static"
         >
           {{ item }}
         </span>
         <LabeledInput
-          v-if="isEditItem && isEditItem === item"
+          v-if="editedItem && editedItem === item"
           ref="item-edit"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
-          @blur.prevent="toggleEditMode(false)"
-          @keydown.native.enter="updateItem(item)"
+          @blur.prevent="updateItem(item)"
+          @keydown.native.enter="updateItem(item, !errors.duplicate)"
         />
       </div>
       <div
@@ -413,7 +428,8 @@ export default Vue.extend({
           :value="value"
           :placeholder="placeholder"
           @input="onChange($event)"
-          @keydown.native.enter="saveItem"
+          @blur.prevent="saveItem"
+          @keydown.native.enter="saveItem(!errors.duplicate)"
         />
       </div>
     </div>
@@ -428,14 +444,14 @@ export default Vue.extend({
       >
         <button
           class="btn btn-sm role-tertiary remove-button"
-          :disabled="!selected && !isCreateItem && !isEditItem"
+          :disabled="!selected && !isCreateItem && !editedItem"
           @mousedown.prevent="onClickMinusButton"
         >
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem"
+          :disabled="isCreateItem || editedItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />

package/types/shell/index.d.ts

@@ -1923,7 +1923,7 @@ export default _default;
 // @shell/mixins/create-edit-view
 
 declare module '@shell/mixins/create-edit-view' {
-declare var _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, {
+declare var _default: import("vue/types/vue").ExtendedVue<Vue, {
     errors: any[];
 }, {
     done(): any;
@@ -1949,7 +1949,7 @@ declare var _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any
     initialValue: any;
     liveValue: any;
     doneEvent: boolean;
-}, {}, any, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+}>;
 export default _default;
 import Vue from "vue";
 }
@@ -2846,35 +2846,35 @@ export namespace KEY {
 }
 }
 
-// @shell/utils/poller
+// @shell/utils/poller-sequential
 
-declare module '@shell/utils/poller' {
-export default class Poller {
+declare module '@shell/utils/poller-sequential' {
+export default class PollerSequential {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    intervalId: any;
+    timeoutId: any;
     tryCount: number;
     start(): void;
     stop(): void;
+    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }
 
-// @shell/utils/poller-sequential
+// @shell/utils/poller
 
-declare module '@shell/utils/poller-sequential' {
-export default class PollerSequential {
+declare module '@shell/utils/poller' {
+export default class Poller {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    timeoutId: any;
+    intervalId: any;
     tryCount: number;
     start(): void;
     stop(): void;
-    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }

package/yarn-error.log

@@ -0,0 +1,196 @@
+Arguments: 
+  /Users/aalves/.nvm/versions/node/v16.16.0/bin/node /Users/aalves/.nvm/versions/node/v16.16.0/bin/yarn publish . --new-version 0.3.3 --no-git-tag-version --access public
+
+PATH: 
+  /Users/aalves/.nvm/versions/node/v16.16.0/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.16.0
+
+Platform: 
+  darwin arm64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/-/user/org.couchdb.user:aalves08: failed to authenticate: Could not authenticate aalves08: bad password
+      at Request.params.callback [as _callback] (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:66145:18)
+      at Request.self.callback (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:140890:22)
+      at Request.emit (node:events:527:28)
+      at Request.<anonymous> (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:141862:10)
+      at Request.emit (node:events:527:28)
+      at IncomingMessage.<anonymous> (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:141784:12)
+      at Object.onceWrapper (node:events:641:28)
+      at IncomingMessage.emit (node:events:539:35)
+      at endReadableNT (node:internal/streams/readable:1345:12)
+      at processTicksAndRejections (node:internal/process/task_queues:83:21)
+
+npm manifest: 
+  {
+    "name": "@rancher/shell",
+    "version": "0.3.3",
+    "description": "Rancher Dashboard Shell",
+    "repository": "https://github.com/rancherlabs/dashboard",
+    "license": "Apache-2.0",
+    "author": "SUSE",
+    "private": false,
+    "engines": {
+      "node": ">=12"
+    },
+    "files": [
+      "**/*"
+    ],
+    "scripts": {
+      "clean": "./scripts/clean",
+      "lint": "./node_modules/.bin/eslint --max-warnings 0 --ext .ts,.js,.vue .",
+      "test": "./node_modules/.bin/nyc ava --serial --verbose",
+      "nuxt": "./node_modules/.bin/nuxt",
+      "dev": "./node_modules/.bin/nuxt dev",
+      "mem-dev": "node --max-old-space-size=8192 ./node_modules/.bin/nuxt dev",
+      "docker-dev": "docker run --rm --name dashboard-dev -p 8005:8005 -e API=$API -v $(pwd):/src -v dashboard_node:/src/node_modules rancher/dashboard:dev",
+      "build": "./node_modules/.bin/nuxt build --devtools",
+      "analyze": "./node_modules/.bin/nuxt build --analyze",
+      "start": "./node_modules/.bin/nuxt start",
+      "generate": "./node_modules/.bin/nuxt generate",
+      "dev-debug": "node --inspect ./node_modules/.bin/nuxt",
+      "cy:run": "cypress run",
+      "cy:open": "cypress open",
+      "e2e:pre": "NODE_ENV=dev yarn build",
+      "e2e:run": "NODE_ENV=dev START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start  https://localhost:8005/ cy:run",
+      "e2e:dev": "start-server-and-test dev https://localhost:8005 cy:open"
+    },
+    "dependencies": {
+      "@aws-sdk/client-ec2": "3.1.0",
+      "@aws-sdk/client-eks": "3.1.0",
+      "@aws-sdk/client-kms": "3.8.1",
+      "@babel/plugin-proposal-optional-chaining": "7.14.5",
+      "@babel/plugin-proposal-private-property-in-object": "7.14.5",
+      "@babel/preset-typescript": "7.16.7",
+      "@innologica/vue-dropdown-menu": "0.1.3",
+      "@novnc/novnc": "1.2.0",
+      "@nuxt/types": "2.14.6",
+      "@nuxt/typescript-build": "2.1.0",
+      "@nuxtjs/axios": "5.12.0",
+      "@nuxtjs/eslint-config-typescript": "6.0.1",
+      "@nuxtjs/eslint-module": "1.2.0",
+      "@nuxtjs/proxy": "1.3.3",
+      "@nuxtjs/style-resources": "1.2.1",
+      "@nuxtjs/webpack-profile": "0.1.0",
+      "@popperjs/core": "2.4.4",
+      "@types/node": "16.4.3",
+      "@typescript-eslint/eslint-plugin": "4.33.0",
+      "@typescript-eslint/parser": "4.33.0",
+      "@vue/cli-plugin-babel": "4.5.15",
+      "@vue/cli-plugin-typescript": "4.5.15",
+      "@vue/cli-service": "4.5.15",
+      "@vue/test-utils": "1.2.1",
+      "@vue/vue2-jest": "27.0.0",
+      "add": "2.0.6",
+      "ansi_up": "5.0.0",
+      "babel-eslint": "10.1.0",
+      "babel-plugin-module-resolver": "4.0.0",
+      "babel-preset-vue": "2.0.2",
+      "browser-env": "3.3.0",
+      "cookie": "0.5.0",
+      "cookie-universal-nuxt": "2.1.4",
+      "core-js": "3.21.1",
+      "cron-validator": "1.2.0",
+      "cronstrue": "1.95.0",
+      "cross-env": "6.0.3",
+      "css-loader": "4.3.0",
+      "csv-loader": "3.0.3",
+      "cypress": "10.3.1",
+      "d3": "7.3.0",
+      "d3-selection": "1.4.1",
+      "dagre-d3": "0.6.4",
+      "dayjs": "1.8.29",
+      "diff2html": "2.11.2",
+      "dompurify": "2.0.12",
+      "eslint": "7.32.0",
+      "eslint-config-standard": "16.0.3",
+      "eslint-import-resolver-node": "0.3.4",
+      "eslint-module-utils": "2.6.1",
+      "eslint-plugin-cypress": "2.12.1",
+      "eslint-plugin-import": "2.23.4",
+      "eslint-plugin-jest": "24.4.0",
+      "eslint-plugin-n": "15.2.0",
+      "eslint-plugin-vue": "7.14.0",
+      "event-target-shim": "5.0.1",
+      "express": "4.17.1",
+      "file-saver": "2.0.2",
+      "frontmatter-markdown-loader": "3.7.0",
+      "identicon.js": "2.3.3",
+      "intl-messageformat": "7.8.4",
+      "is-url": "1.2.4",
+      "jest": "27.5.1",
+      "jest-serializer-vue": "2.0.2",
+      "jexl": "2.2.2",
+      "jquery": "3.5.1",
+      "js-cookie": "2.2.1",
+      "js-yaml": "4.1.0",
+      "js-yaml-loader": "1.2.2",
+      "jsdiff": "1.1.1",
+      "jsdom-global": "3.0.2",
+      "jsonpath-plus": "6.0.1",
+      "jsrsasign": "10.2.0",
+      "jszip": "3.7.0",
+      "lodash": "4.17.21",
+      "marked": "4.0.17",
+      "nodemon": "2.0.4",
+      "nuxt": "2.15.8",
+      "nyc": "15.1.0",
+      "papaparse": "5.3.0",
+      "portal-vue": "2.1.7",
+      "rancher-icons": "rancher/icons#v2.0.13",
+      "require-extension-hooks": "0.3.3",
+      "require-extension-hooks-babel": "1.0.0",
+      "require-extension-hooks-vue": "3.0.0",
+      "sass": "1.51.0",
+      "sass-loader": "10.2.1",
+      "serve-static": "1.14.1",
+      "set-cookie-parser": "2.4.6",
+      "shell-quote": "1.7.3",
+      "sinon": "8.1.1",
+      "start-server-and-test": "1.13.1",
+      "style-loader": "1.2.1",
+      "ts-node": "8.10.2",
+      "typescript": "4.1.6",
+      "url-parse": "1.5.10",
+      "v-tooltip": "2.0.3",
+      "vue": "2.6.14",
+      "vue-clipboard2": "0.3.1",
+      "vue-codemirror": "4.0.6",
+      "vue-js-modal": "1.3.35",
+      "vue-resize": "0.4.5",
+      "vue-select": "3.18.3",
+      "vue-server-renderer": "2.6.14",
+      "vue-shortkey": "3.1.7",
+      "vue-template-compiler": "2.6.14",
+      "vue-virtual-scroll-list": "^2.3.4",
+      "vue2-transitions": "0.3.0",
+      "vuedraggable": "2.24.3",
+      "vuex": "3.6.2",
+      "webpack-bundle-analyzer": "4.5.0",
+      "webpack-virtual-modules": "0.4.3",
+      "xterm": "5.0.0",
+      "xterm-addon-fit": "0.6.0",
+      "xterm-addon-search": "0.10.0",
+      "xterm-addon-web-links": "0.7.0",
+      "xterm-addon-webgl": "0.13.0",
+      "worker-loader": "3.0.8",
+      "yarn": "1.22.18"
+    },
+    "nyc": {
+      "extension": [
+        ".js",
+        ".vue"
+      ]
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile