@rancher/shell 3.0.11 → 3.0.12-rc.1

package/assets/styles/base/_mixins.scss

@@ -161,3 +161,34 @@
   // we need to use !important because it needs to superseed other classes that might impact outlines
   outline: 2px solid var(--primary-keyboard-focus);
 }
+
+// -------------------------------------------------------------------------------------------------
+// Extension dialog styles
+
+@mixin extension-dialog {
+  padding: 8px 16px 16px 16px;
+
+  h4 {
+    font-weight: bold;
+  }
+
+  .dialog-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 96px;
+
+    .dialog-info {
+      flex: 1;
+    }
+  }
+
+  .dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+
+    > *:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}

package/assets/styles/base/_variables.scss

@@ -42,6 +42,8 @@ $z-indexes: (
 
   cruFooter: 19,
 
+  copyToClipboard: 20,
+
   loadingMain: 51,
 
   slide-in: 52,

package/assets/styles/themes/_modern.scss

@@ -74,6 +74,7 @@ $contrasted-light: $lightest !default;
 $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
+$body-bg  : $lightest;
 
 BODY, .theme-light {
 
@@ -418,7 +419,7 @@ BODY, .theme-light {
   }
 
 
-  --body-bg                    : #{$lightest};
+  --body-bg                    : #{$body-bg};
   --body-text                  : #{$darkest};
   --body-text-hover            : var(--body-text);
   --scrollbar-thumb            : #{$dark};
@@ -724,8 +725,8 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$lightest};
-  --rc-section-background-secondary: #{$lighter};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$grey-5};
   --rc-section-action-color: #{$gray009};
 
   --rc-image-bg: #{$lightest};
@@ -1072,8 +1073,8 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$gray007};
-  --rc-section-background-secondary: #{$gray008};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$darkest};
   --rc-section-action-color: #{$gray010};
 
   --rc-image-bg: #{$lightest};

package/assets/translations/en-us.yaml

@@ -2989,7 +2989,7 @@ fleet:
       add: Add Selector
     tolerations:
       label: Tolerations
-      description: "List of node taints to tolerate (requires Kubernetes >= 1.6)"
+      description: "List of node taints to tolerate."
       add: Add Toleration
     priorityClassName:
       label: Priority Class Name
@@ -5578,6 +5578,9 @@ plugins:
     prompt: "Are you sure that you want to install this extension?"
     version: Version
     warnNotCertified: Please ensure that you are aware of the risks of installing Extensions from untrusted authors
+    alreadyInstalledTitle: This extension is already installed from another source
+    alreadyInstalledPrompt: To install it from this source, you need to uninstall the existing version first and reload the page (required). Would you like to continue?
+    uninstallExisting: Uninstall existing version
   upgrade:
     label: Upgrade
     title: Upgrade extension {name}
@@ -6988,6 +6991,7 @@ tableHeaders:
   progress: Progress
   podImages: Image
   podRestarts: Restarts
+  podLastRestart: Last Restart
   pods: Pods
   pod-Selector: Pod-Selector
   providers: Providers
@@ -8045,10 +8049,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: A Prometheus server is a Prometheus deployment whose scrape configuration and rules are determined by selected ServiceMonitors, PodMonitors, and PrometheusRules and whose alerts will be sent to all selected Alertmanagers with the custom resource's configuration.
   monitoring.coreos.com.alertmanager: An alert manager is deployment whose configuration will be specified by a secret in the same namespace, which determines which alerts should go to which receiver.
   node: The base Kubernetes Node resource represents a virtual or physical machine which hosts deployments. To manage the machine lifecycle, if available, go to Cluster Management.
-  catalog.cattle.io.clusterrepo: 'A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster.'
-  catalog.cattle.io.clusterrepo.local: ' A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster. Cluster Templates are deployed via Helm charts.'
   catalog.cattle.io.operation: An operation is the list of recent Helm operations that have been applied to the cluster.
-  catalog.cattle.io.app: An installed application is a Helm 3 chart that was installed either via our charts or through the Helm CLI.
   logging.banzaicloud.io.clusterflow: Logs from the cluster will be collected and logged to the selected Cluster Output.
   logging.banzaicloud.io.clusteroutput: A cluster output defines which logging providers that logs can be sent to and is only effective when deployed in the namespace that the logging operator is in.
   logging.banzaicloud.io.flow: A flow defines which logs to collect and filter as well as which output to send the logs. The flow is a namespaced resource, which means logs will only be collected from the namespace that the flow is deployed in.

package/assets/translations/zh-hans.yaml

@@ -6339,10 +6339,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: Prometheus server 是一个 Prometheus deployment，其抓取的配置和规则由选定的 ServiceMonitor、PodMonitor 和 PrometheusRule 决定。它将其告警信息发送给所有选择的具有定制资源配置的 AlertManager。
   monitoring.coreos.com.alertmanager: Alertmanager 是一个 deployment。其配置由同一命名空间中的密文指定，该密文决定了告警的接收器。
   node: Kubernetes 节点资源展示了承载 Deployment 的虚拟机或物理机。请进入"集群管理"页面管理可用节点的生命周期。
-  catalog.cattle.io.clusterrepo: 'Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。'
-  catalog.cattle.io.clusterrepo.local: ' Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。集群模板是通过 Helm Chart 部署的。'
   catalog.cattle.io.operation: 最近的操作指的是最近应用于集群的一系列 Helm 操作。
-  catalog.cattle.io.app: 已安装的应用指的是通过我们的 Chart 或 Helm CLI 安装的 Helm 3 Chart。
   logging.banzaicloud.io.clusterflow: 集群日志将被收集并投递到选定的 ClusterOutput 中。
   logging.banzaicloud.io.clusteroutput: ClusterOutput 定义了日志可以发送到哪些日志提供程序。只有部署在 Logging operator 所在的命名空间中时，ClusterOutput 才生效。
   logging.banzaicloud.io.flow: Flow 定义了要收集和过滤的日志，以及日志的输出目标。Flow 是一个命名空间资源。换言之，只有部署了该 Flow 的命名空间日志才能被该 Flow 收集。

package/components/EmptyProductPage.vue

@@ -0,0 +1,76 @@
+<script>
+export default {
+  name:   'EmptyProductPage',
+  layout: 'plain',
+  data() {
+    const err = this.$route.meta?.pageError;
+
+    let msg;
+
+    switch (err) {
+    case 'no-nav':
+      msg = [
+        'When a component is not provided for a product, the layout with side navigation is used',
+        'No child items were specified, so this "Default" empty view has been added',
+        'Please add child items to this product'
+      ];
+      break;
+    default:
+      msg = ['No component defined for this extension product... Define a component or child pages so it can be rendered here.'];
+    }
+
+    return {
+      img: require('~shell/assets/images/generic-plugin.svg'),
+      msg,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="empty-product-page">
+    <img
+      :src="img"
+      alt="Extension Product Error"
+    >
+    <div class="err-messages">
+      <p
+        v-for="(m, index) in msg"
+        :key="index"
+      >
+        {{ m }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-product-page {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  opacity: 0.75;
+
+  > img {
+    width: 128px;
+    margin-bottom: 20px;
+  }
+
+  .err-messages {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+
+    > * {
+      margin-bottom: 8px;
+      font-size: 16px;
+
+      &:last-child {
+        font-weight: bold;
+        color: var(--error);
+      }
+    }
+  }
+}
+</style>

package/components/Resource/Detail/CopyToClipboard.vue

@@ -70,8 +70,7 @@ const onClick = (ev: MouseEvent) => {
         border-color: var(--success-border);
         color: var(--success-text);
 
-        transition: all 0.25s;
-        transition-timing-function: ease;
+        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
     }
 
     &:focus-visible {

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -77,12 +77,15 @@ const previewId = randomStr();
   position: relative;
   padding: 0;
 
+  $topShift: -6px;
+  $topShiftHidden: -100vh; //100% of the viewport
+
   .copy-to-clipboard {
     position: fixed;
 
     right: -20px;
-    top: -6px;
-    z-index: 20px;
+    top: $topShiftHidden;
+    z-index: z-index('copyToClipboard');
   }
 
   &, .btn, .rc-tag {
@@ -126,13 +129,16 @@ const previewId = randomStr();
       }
 
       & + .copy-to-clipboard {
+        // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
         position: absolute;
+        top: $topShift;
       }
     }
 
     .copy-to-clipboard:focus-visible, .copy-to-clipboard:hover {
+      // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
       position: absolute;
-
+      top: $topShift;
     }
 
     .btn:has(+ .copy-to-clipboard:focus-visible), .btn:has(+ .copy-to-clipboard:hover)  {

package/components/Resource/Detail/TitleBar/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: TitleBar/index should match the full component snapshot 1`] = `
+<div class="title-bar">
+  <div class="top">
+    <h1 class="title">
+      <!----><a class="resource-link">RESOURCE_TYPE_LABEL: </a><span class="resource-name masthead-resource-title">RESOURCE_NAME</span><span class="badge-state bg-success badge-state"><!--v-if--><span class="msg">Active</span></span>
+    </h1>
+    <div class="actions"><button role="button" class="rc-button btn variant-primary btn-medium">
+        <!--v-if-->Deploy
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-secondary btn-large">
+        <!--v-if-->Rollback
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-primary btn-large show-configuration" data-testid="show-configuration-cta" aria-label="component.resource.detail.titleBar.ariaLabel.showConfiguration-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+        <!--v-if--><i class="icon icon-document" aria-hidden="true"></i> component.resource.detail.titleBar.showConfiguration
+        <!--v-if-->
+      </button>
+      <div class="v-popper v-popper--theme-dropdown"><button role="button" class="rc-button btn variant-multi-action btn-medium" aria-haspopup="menu" aria-expanded="false" data-testid="masthead-action-menu" aria-label="component.resource.detail.titleBar.ariaLabel.actionMenu-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+          <!--v-if--><i class="icon icon-actions"></i>
+          <!--v-if-->
+        </button></div>
+      <div class="popperContainer">
+        <!--Empty container for mounting popper content-->
+      </div>
+    </div>
+  </div>
+  <div class="bottom description text-deemphasized">A test description</div>
+  <!--v-if-->
+</div>
+`;

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
-import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import TitleBar, { AdditionalActionButton } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
 import { defineComponent, h } from 'vue';
@@ -240,5 +240,49 @@ describe('component: TitleBar/index', () => {
       expect(wrapper.find('.slot-button').exists()).toBeTruthy();
       expect(wrapper.find('.slot-button').text()).toBe('Slot Button');
     });
+
+    it('should render the actions container correctly when additional-actions slot contains nested buttons', async() => {
+      const wrapper = mount(TitleBar, {
+        props:  { resourceTypeLabel, resourceName },
+        slots:  { 'additional-actions': '<div class="btn-group"><button class="nested-btn">A</button><button class="nested-btn">B</button></div>' },
+        global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+      });
+
+      const actions = wrapper.find('.actions');
+
+      expect(actions.find('.btn-group').exists()).toBeTruthy();
+      expect(actions.findAll('.btn-group .nested-btn')).toHaveLength(2);
+    });
+  });
+
+  it('should match the full component snapshot', () => {
+    const additionalActions: AdditionalActionButton[] = [
+      {
+        label: 'Deploy', variant: 'primary', onClick: jest.fn()
+      },
+      {
+        label: 'Rollback', variant: 'secondary', size: 'large', onClick: jest.fn()
+      },
+    ];
+
+    const wrapper = mount(TitleBar, {
+      props: {
+        resource:           {},
+        resourceTypeLabel,
+        resourceName,
+        resourceTo,
+        description:        'A test description',
+        badge:              { color: 'bg-success', label: 'Active' },
+        additionalActions,
+        actionMenuResource: { resource: 'test-menu' },
+        onShowConfiguration() {},
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub },
+        provide: { store }
+      }
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

package/components/Resource/Detail/TitleBar/index.vue

@@ -178,7 +178,7 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
     align-items: center;
   }
 
-  .show-configuration, &:deep() .actions button {
+  .show-configuration, &:deep() .actions > button {
     margin-left: 16px;
   }
 

package/components/Resource/Detail/ViewOptions/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: ViewOptions/index should match the snapshot 1`] = `
+<div class="btn-group"><button data-testid="button-group-child-0" type="button" class="btn bg-primary" role="button" aria-label="%resourceDetail.masthead.detail%" aria-pressed="true">
+    <!--v-if--><span k="resourceDetail.masthead.detail"></span>
+  </button><button data-testid="button-group-child-1" type="button" class="btn bg-disabled" role="button" aria-label="%resourceDetail.masthead.graph%" aria-pressed="false">
+    <!--v-if--><span k="resourceDetail.masthead.graph"></span>
+  </button></div>
+`;

package/components/Resource/Detail/ViewOptions/__tests__/index.test.ts

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils';
+import ViewOptions from '@shell/components/Resource/Detail/ViewOptions/index.vue';
+import ButtonGroup from '@shell/components/ButtonGroup.vue';
+import { _CONFIG, _GRAPH } from '@shell/config/query-params';
+
+const mockPush = jest.fn();
+const mockQuery = { view: _CONFIG };
+
+jest.mock('vue-router', () => ({
+  useRouter: () => ({ push: mockPush }),
+  useRoute:  () => ({ query: mockQuery }),
+}));
+
+describe('component: ViewOptions/index', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockQuery.view = _CONFIG;
+  });
+
+  const createWrapper = () => {
+    return mount(ViewOptions);
+  };
+
+  it('should render a ButtonGroup component', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.findComponent(ButtonGroup).exists()).toBeTruthy();
+  });
+
+  it('should provide two view options: detail and graph', () => {
+    const wrapper = createWrapper();
+    const buttonGroup = wrapper.findComponent(ButtonGroup);
+    const options = buttonGroup.props('options');
+
+    expect(options).toHaveLength(2);
+    expect(options[0].value).toStrictEqual(_CONFIG);
+    expect(options[1].value).toStrictEqual(_GRAPH);
+  });
+
+  it('should set the initial view from the route query', () => {
+    const wrapper = createWrapper();
+    const buttonGroup = wrapper.findComponent(ButtonGroup);
+
+    expect(buttonGroup.props('value')).toStrictEqual(_CONFIG);
+  });
+
+  it('should push to router when view changes', async() => {
+    const wrapper = createWrapper();
+    const buttons = wrapper.findAll('.btn-group button');
+    const graphButton = buttons[1];
+
+    await graphButton.trigger('click');
+
+    expect(mockPush).toHaveBeenCalledWith({ query: { view: _GRAPH } });
+  });
+
+  it('should match the snapshot', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/components/Resource/Detail/ViewOptions/index.vue

@@ -14,7 +14,8 @@ const view = ref(currentView.value);
 const viewOptions = computed(() => {
   return [
     {
-      labelKey: 'resourceDetail.masthead.config',
+      labelKey: 'resourceDetail.masthead.detail',
+      // _CONFIG is the default when there is no query on the router
       value:    _CONFIG,
     },
     {

package/components/ResourceList/Masthead.vue

@@ -85,7 +85,29 @@ export default {
   data() {
     const params = { ...this.$route.params };
 
-    const formRoute = { name: `${ this.$route.name }-create`, params };
+    // Determine if the current product has a topLevelProduct defined, and if so,
+    // use that for the formRoute instead of the current route's product.
+    // This allows resources from extensions (new product registration) to use the correct route for creation,
+    // which may be different from the route of the resource list.
+    let currPluginName = '';
+    let formRoute;
+    let overrideCreateLocationByExtension = false;
+    const plugins = this.$extension.getPlugins();
+
+    Object.keys(plugins).forEach((key) => {
+      if (plugins[key].productNames.includes(this.$store.getters['productId'])) {
+        currPluginName = key;
+      }
+    });
+
+    if (currPluginName && plugins[currPluginName]?.topLevelProduct) {
+      // override create route for extension resource lists
+      formRoute = { name: `${ this.$route.name }-create`, params: { ...params, product: this.$store.getters['productId'] } };
+      overrideCreateLocationByExtension = true;
+    } else {
+      // this was the original logic before the topLevelProduct override was added
+      formRoute = { name: `${ this.$route.name }-create`, params };
+    }
 
     const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
 
@@ -96,6 +118,7 @@ export default {
     };
 
     return {
+      overrideCreateLocationByExtension,
       formRoute,
       yamlRoute,
       hasEditComponent,
@@ -149,7 +172,7 @@ export default {
     },
 
     _createLocation() {
-      return this.createLocation || this.formRoute;
+      return this.overrideCreateLocationByExtension ? this.formRoute : this.createLocation || this.formRoute;
     },
 
     _yamlCreateLocation() {

package/components/SideNav.vue

@@ -229,6 +229,19 @@ export default {
 
       this.getExplorerGroups(out);
 
+      // If there's a root group, pull its children up to the top level
+      // so that we can order them alongside group items in the nav
+      const rootGroupIndex = out.findIndex((g) => g.name.toLowerCase() === 'root');
+      const rootGroup = out[rootGroupIndex];
+
+      if (rootGroup && rootGroup.children?.length) {
+        out.splice(rootGroupIndex, 1);
+
+        rootGroup.children.forEach((child) => {
+          addObject(out, { ...child, children: [] });
+        });
+      }
+
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
 
       this.gettingGroups = false;

package/components/__tests__/PromptModal.test.ts

@@ -24,6 +24,7 @@ import DeveloperLoadExtensionDialog from '@shell/dialog/DeveloperLoadExtensionDi
 import AddExtensionReposDialog from '@shell/dialog/AddExtensionReposDialog.vue';
 import InstallExtensionDialog from '@shell/dialog/InstallExtensionDialog.vue';
 import UninstallExtensionDialog from '@shell/dialog/UninstallExtensionDialog.vue';
+import UninstallExistingExtensionDialog from '@shell/dialog/UninstallExistingExtensionDialog.vue';
 import KnownHostsEditDialog from '@shell/dialog/KnownHostsEditDialog.vue';
 import ImportDialog from '@shell/dialog/ImportDialog.vue';
 import SearchDialog from '@shell/dialog/SearchDialog.vue';
@@ -110,6 +111,7 @@ describe('component: PromptModal', () => {
     ['AddExtensionReposDialog', AddExtensionReposDialog],
     ['InstallExtensionDialog', InstallExtensionDialog],
     ['UninstallExtensionDialog', UninstallExtensionDialog],
+    ['UninstallExistingExtensionDialog', UninstallExistingExtensionDialog],
     ['KnownHostsEditDialog', KnownHostsEditDialog],
     ['ImportDialog', ImportDialog],
     ['SearchDialog', SearchDialog],

package/components/fleet/FleetClusters.vue

@@ -107,6 +107,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :sub-rows="true"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :ignore-filter="ignoreFilter"

package/components/fleet/__tests__/FleetClusters.test.ts

@@ -573,4 +573,75 @@ describe('component: FleetClusters', () => {
       expect(additionalSubRow.exists()).toBe(false);
     });
   });
+
+  describe('labels visibility regardless of error state', () => {
+    it('should pass sub-rows prop as true to ResourceTable so labels always render', () => {
+      const wrapper = createWrapper();
+
+      // sub-rows=true ensures SortableTable.showSubRow() returns true,
+      // which makes the #additional-sub-row slot render regardless of stateDescription.
+      // Without this, labels only appear when there is an error (stateDescription).
+      const resourceTableStub = wrapper.findComponent('.resource-table') as any;
+
+      expect(resourceTableStub.props('subRows')).toBe(true);
+    });
+
+    it('should render labels when cluster has no stateDescription (no error)', () => {
+      const rows = [{
+        customLabels:        ['env:prod', 'team:backend'],
+        displayCustomLabels: false,
+        stateDescription:    undefined,
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0].text()).toBe('env:prod');
+      expect(tags[1].text()).toBe('team:backend');
+    });
+
+    it('should render labels when cluster has a stateDescription (error)', () => {
+      const rows = [{
+        customLabels:        ['env:prod', 'team:backend'],
+        displayCustomLabels: false,
+        stateDescription:    'Something went wrong',
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0].text()).toBe('env:prod');
+      expect(tags[1].text()).toBe('team:backend');
+    });
+
+    it('should render labels when stateDescription is empty string', () => {
+      const rows = [{
+        customLabels:        ['env:staging'],
+        displayCustomLabels: false,
+        stateDescription:    '',
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0].text()).toBe('env:staging');
+    });
+
+    it('should render labels when stateDescription is null', () => {
+      const rows = [{
+        customLabels:        ['region:eu-west'],
+        displayCustomLabels: false,
+        stateDescription:    null,
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0].text()).toBe('region:eu-west');
+    });
+  });
 });