@rancher/shell 0.3.26 → 0.3.27

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -0,0 +1,120 @@
+import { mount, Wrapper } from '@vue/test-utils';
+import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
+
+// DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
+const defaultStore = {
+  'management/byId':         jest.fn(),
+  'management/schemaFor':    jest.fn(),
+  'i18n/t':                  jest.fn(),
+  'features/get':            jest.fn(),
+  'prefs/theme':             jest.fn(),
+  defaultClusterId:          jest.fn(),
+  clusterId:                 jest.fn(),
+  'type-map/activeProducts': [],
+};
+
+describe('topLevelMenu', () => {
+  it('should display clusters', () => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      mocks: {
+        $store: {
+          getters: {
+            'management/all': () => [{ name: 'whatever' }],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'nuxt-link']
+    });
+
+    const cluster = wrapper.find('[data-testid="top-level-menu-cluster-0"]');
+
+    expect(cluster.exists()).toBe(true);
+  });
+
+  describe('searching a term', () => {
+    describe('should displays a no results message if have clusters but', () => {
+      it('given no matching clusters', () => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: 'whatever' }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: 'something else' }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(noResults.exists()).toBe(true);
+      });
+
+      it('given no matched pinned clusters', () => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: 'whatever' }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: 'something else', pinned: true }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(noResults.exists()).toBe(true);
+      });
+    });
+
+    describe('should not displays a no results message', () => {
+      it('given matching clusters', () => {
+        const search = 'you found me';
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: search }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: search }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(wrapper.vm.clustersFiltered).toHaveLength(1);
+        expect(noResults.exists()).toBe(false);
+      });
+
+      it('given clusters with status pinned', () => {
+        const search = 'you found me';
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          data:  () => ({ clusterFilter: search }),
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': () => [{ nameDisplay: search, pinned: true }],
+                ...defaultStore
+              },
+            },
+          },
+          stubs: ['BrandImage', 'nuxt-link']
+        });
+
+        const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
+
+        expect(wrapper.vm.pinFiltered).toHaveLength(1);
+        expect(noResults.exists()).toBe(false);
+      });
+    });
+  });
+});

package/components/nav/__tests__/Type.test.ts

@@ -0,0 +1,139 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import Type from '@shell/components/nav/Type.vue';
+
+// Mandatory to mock vue-router in this test
+jest.mock('vue-router');
+
+// Configuration text
+const className = 'nuxt-link-active';
+
+describe('component: Type', () => {
+  describe('should not use highlight class', () => {
+    it('given no hash', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'something else' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route:  { path: 'whatever' },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given no path', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'something else' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route:  { hash: 'whatever' },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given no matching values', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: {} },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'hash',
+            path: 'path',
+          },
+          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it('given navigation path is bigger than current page route path', () => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: 'whatever',
+          },
+          $router: { resolve: () => ({ route: { path: 'many/parts' } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+
+    it.each([
+      // URL with fragments like anchors
+      [
+        '/c/c-m-hzqf4tqt/explorer/members#project-membership',
+        '/c/c-m-hzqf4tqt/explorer/members'
+      ],
+      // Similar paths
+      [
+        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping',
+        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle'
+      ],
+      // paths with same parts, e.g. parents
+      [
+        '/c/c-m-hzqf4tqt/fleet',
+        '/c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace'
+      ],
+    ])('given different current path %p and menu path %p', (currentPath, menuPath) => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: currentPath,
+          },
+          $router: { resolve: () => ({ route: { path: menuPath } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(false);
+    });
+  });
+
+  describe('should use highlight class', () => {
+    it.each([
+      [
+        'same',
+        'same'
+      ],
+    ])('given same current path %p and menu path %p (on first load)', (currentPath, menuPath) => {
+      const wrapper = mount(Type, {
+        propsData: { type: { route: 'not empty' } },
+        stubs:     { nLink: RouterLinkStub },
+        mocks:     {
+          $route: {
+            hash: 'not empty',
+            path: currentPath,
+          },
+          $router: { resolve: () => ({ route: { path: menuPath } }) },
+        },
+      });
+
+      const highlight = wrapper.find(`.${ className }`);
+
+      expect(highlight.exists()).toBe(true);
+    });
+  });
+});
+
+jest.restoreAllMocks();

package/config/private-label.js

@@ -3,7 +3,7 @@ import { SETTING } from './settings';
 export const ANY = 0;
 export const STANDARD = 1;
 export const CUSTOM = 2;
-export const DOCS_BASE = 'https://rancher.com/docs/rancher/v2.7/en';
+export const DOCS_BASE = 'https://ranchermanager.docs.rancher.com/v2.8';
 
 const STANDARD_VENDOR = 'Rancher';
 const STANDARD_PRODUCT = 'Explorer';

package/config/settings.ts

@@ -42,7 +42,6 @@ export const SETTING = {
   HIDE_LOCAL_CLUSTER:                   'hide-local-cluster',
   AUTH_TOKEN_MAX_TTL_MINUTES:           'auth-token-max-ttl-minutes',
   KUBECONFIG_GENERATE_TOKEN:            'kubeconfig-generate-token',
-  KUBECONFIG_TOKEN_TTL_MINUTES:         'kubeconfig-token-ttl-minutes',
   KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES: 'kubeconfig-default-token-ttl-minutes',
   ENGINE_URL:                           'engine-install-url',
   ENGINE_ISO_URL:                       'engine-iso-url',
@@ -127,7 +126,6 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
   [SETTING.AUTH_USER_SESSION_TTL_MINUTES]:        {},
   [SETTING.AUTH_TOKEN_MAX_TTL_MINUTES]:           {},
   [SETTING.KUBECONFIG_GENERATE_TOKEN]:            { kind: 'boolean' },
-  [SETTING.KUBECONFIG_TOKEN_TTL_MINUTES]:         {},
   [SETTING.KUBECONFIG_DEFAULT_TOKEN_TTL_MINUTES]: { kind: 'integer' },
   [SETTING.AUTH_USER_INFO_RESYNC_CRON]:           {},
   [SETTING.SERVER_URL]:                           { kind: 'url', canReset: true },

package/core/types.ts

@@ -323,6 +323,11 @@ export interface ConfigureTypeOptions {
    */
   isRemovable?: boolean;
 
+  /**
+   * Resources of this type can be edited
+   */
+  isEditable?: boolean;
+
   /**
    * This type should be grouped by namespaces when displayed in a table
    */
@@ -343,16 +348,18 @@ export interface ConfigureTypeOptions {
    */
   showState?: boolean;
 
+  /**
+   * Define where this type/page should navigate to (menu entry routing)
+   */
+  customRoute?: Object;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
   // alias
-  // customRoute
-  // customRoute
   // depaginate
   // graphConfig
   // hasGraph
-  // isEditable
   // limit
   // listGroups
   // localOnly
@@ -379,7 +386,7 @@ export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
   /**
    * The route that this type should correspond to {@link PluginRouteConfig} {@link RouteConfig}
    */
-  route: PluginRouteConfig | RouteConfig;
+  route: PluginRouteConfig | RouteConfig | Object;
 }
 
 export interface DSLReturnType {

package/edit/provisioning.cattle.io.cluster/Basics.vue

@@ -377,6 +377,13 @@ export default {
       const canNotEdit = this.clusterIsAlreadyCreated && !this.unsupportedCloudProvider;
 
       return canNotEdit;
+    },
+
+    /**
+     * Display warning about additional configuration needed for cloud provider Amazon if kube >= 1.27
+     */
+    showCloudProviderAmazonAdditionalConfigWarning() {
+      return !!semver.gte(this.value.spec.kubernetesVersion, 'v1.27.0') && this.agentConfig['cloud-provider-name'] === 'aws';
     }
   },
 
@@ -413,6 +420,12 @@ export default {
         v-clean-html="t('cluster.harvester.warning.cloudProvider.incompatible', null, true)"
       />
     </Banner>
+    <Banner
+      v-if="showCloudProviderAmazonAdditionalConfigWarning"
+      color="warning"
+    >
+      <span v-clean-html="t('cluster.banner.cloudProviderAddConfig', {}, true)" />
+    </Banner>
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledSelect

package/edit/provisioning.cattle.io.cluster/CustomCommand.vue

@@ -55,7 +55,7 @@ export default {
       this.controlPlane && out.push('--controlplane');
       this.worker && out.push('--worker');
       this.address && out.push(`--address ${ sanitizeIP(this.address) }`);
-      this.internalAddress && out.push(`--internal-address ${ sanitizeValue(this.internalAddress) }`);
+      this.internalAddress && out.push(`--internal-address ${ sanitizeIP(this.internalAddress) }`);
       this.nodeName && out.push(`--node-name ${ sanitizeValue(this.nodeName) }`);
 
       for ( const key in this.labels ) {

package/edit/workload/mixins/workload.js

@@ -146,10 +146,20 @@ export default {
 
   async fetch() {
     // TODO Should remove these lines
-    await allHash({
-      rancherClusters:  this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-      harvesterConfigs: this.$store.dispatch('management/findAll', { type: HCI.HARVESTER_CONFIG }),
-    });
+    // ? The results aren't stored, so don't know why we fetch?
+
+    // User might not have access to these resources - so check before trying to fetch
+    const fetches = {};
+
+    if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
+      fetches.rancherClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    }
+
+    if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
+      fetches.harvesterConfigs = this.$store.dispatch('management/findAll', { type: HCI.HARVESTER_CONFIG });
+    }
+
+    await allHash(fetches);
 
     // don't block UI for these resources
     this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);

package/models/fleet.cattle.io.cluster.js

@@ -5,6 +5,7 @@ import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
 import { insertAt } from '@shell/utils/array';
 import jsyaml from 'js-yaml';
+import { FLEET_WORKSPACE_BACK } from '@shell/store/features';
 
 export default class FleetCluster extends SteveModel {
   get _availableActions() {
@@ -80,7 +81,16 @@ export default class FleetCluster extends SteveModel {
   }
 
   get canChangeWorkspace() {
-    return !this.isRke2 && !this.isLocal;
+    // https://github.com/rancher/dashboard/issues/7745
+    if (this.isLocal) {
+      return false;
+    }
+    // https://github.com/rancher/dashboard/issues/9730
+    if (this.isRke2) {
+      return this.$rootGetters['features/get'](FLEET_WORKSPACE_BACK);
+    }
+
+    return true;
   }
 
   get isLocal() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

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

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { MANAGEMENT } from '@shell/config/types';
@@ -7,6 +8,7 @@ import Loading from '@shell/components/Loading';
 import { SUBTYPE_MAPPING, CREATE_VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import { NAME } from '@shell/config/product/auth';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { Banner } from '@components/Banner';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -31,7 +33,7 @@ export default {
   name: 'Roles',
 
   components: {
-    Tab, Tabbed, ResourceTable, Loading
+    Tab, Tabbed, ResourceTable, Loading, Banner
   },
 
   async asyncData({ store }) {
@@ -100,6 +102,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['releaseNotesUrl']),
+
     globalResources() {
       return this.globalRoles;
     },
@@ -181,6 +185,12 @@ export default {
         :weight="tabs[GLOBAL].weight"
         :label-key="tabs[GLOBAL].labelKey"
       >
+        <Banner
+          color="warning"
+          class="mb-20"
+        >
+          <span v-clean-html="t('rbac.globalRoles.role.restricted-admin.deprecation', { releaseNotesUrl }, true)" />
+        </Banner>
         <ResourceTable
           :schema="tabs[GLOBAL].schema"
           :rows="globalResources"

package/pages/c/_cluster/explorer/index.vue

@@ -28,7 +28,7 @@ import {
 } from '@shell/config/table-headers';
 
 import { mapPref, PSP_DEPRECATION_BANNER } from '@shell/store/prefs';
-import { haveV1Monitoring, monitoringStatus } from '@shell/utils/monitoring';
+import { haveV1Monitoring, monitoringStatus, canViewGrafanaLink } from '@shell/utils/monitoring';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import { allDashboardsExist } from '@shell/utils/grafana';
@@ -103,6 +103,10 @@ export default {
         `Determine etcd metrics`
       );
 
+      // It's not enough to check that the grafana links are working for the current user; embedded cluster-level dashboards should only be shown if the user can view the grafana endpoint
+      // https://github.com/rancher/dashboard/issues/9792
+      setPromiseResult(canViewGrafanaLink(this.$store), this, 'canViewMetrics', 'Determine Grafana Permission');
+
       if (this.currentCluster.isLocal && this.$store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
         this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
       }
@@ -125,6 +129,7 @@ export default {
       showClusterMetrics: false,
       showK8sMetrics:     false,
       showEtcdMetrics:    false,
+      canViewMetrics:     false,
       CLUSTER_METRICS_DETAIL_URL,
       CLUSTER_METRICS_SUMMARY_URL,
       K8S_METRICS_DETAIL_URL,
@@ -346,7 +351,7 @@ export default {
     },
 
     hasMetricsTabs() {
-      return this.showClusterMetrics || this.showK8sMetrics || this.showEtcdMetrics;
+      return this.canViewMetrics && ( this.showClusterMetrics || this.showK8sMetrics || this.showEtcdMetrics);
     },
 
     hasBadge() {

package/pages/c/_cluster/monitoring/index.vue

@@ -4,16 +4,14 @@ import isEmpty from 'lodash/isEmpty';
 import InstallRedirect from '@shell/utils/install-redirect';
 import AlertTable from '@shell/components/AlertTable';
 import { NAME, CHART_NAME } from '@shell/config/product/monitoring';
-import { CATALOG, ENDPOINTS, MONITORING } from '@shell/config/types';
+import { CATALOG, MONITORING } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 import { getClusterPrefix } from '@shell/utils/grafana';
 import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
-import { haveV1MonitoringWorkloads } from '@shell/utils/monitoring';
-
-const CATTLE_MONITORING_NAMESPACE = 'cattle-monitoring-system';
+import { haveV1MonitoringWorkloads, canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
 
 export default {
   components: {
@@ -96,52 +94,41 @@ export default {
       const { $store, externalLinks } = this;
 
       this.v1Installed = await haveV1MonitoringWorkloads($store);
-      const hash = await allHash({
-        apps:      $store.dispatch('cluster/findAll', { type: CATALOG.APP }),
-        endpoints: $store.dispatch('cluster/findAll', { type: ENDPOINTS }),
-      });
+      const hash = {};
+
+      if ($store.getters['cluster/canList'](CATALOG.APP)) {
+        hash.apps = $store.dispatch('cluster/findAll', { type: CATALOG.APP });
+      }
+      const res = await allHash(hash);
+
+      const canViewAlertManager = await canViewAlertManagerLink(this.$store);
+      const canViewGrafana = await canViewGrafanaLink(this.$store);
+      const canViewPrometheus = await canViewPrometheusLink(this.$store);
 
-      if (!isEmpty(hash.endpoints)) {
+      if (canViewAlertManager) {
         const amMatch = findBy(externalLinks, 'group', 'alertmanager');
-        const grafanaMatch = findBy(externalLinks, 'group', 'grafana');
-        const promeMatch = externalLinks.filter(
-          (el) => el.group === 'prometheus'
-        );
 
+        amMatch.enabled = true;
+      }
+      if (canViewGrafana) {
+        const grafanaMatch = findBy(externalLinks, 'group', 'grafana');
         // Generate Grafana link
         const currentCluster = this.$store.getters['currentCluster'];
-        const rancherMonitoring = !isEmpty(hash.apps) ? findBy(hash.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
+        const rancherMonitoring = !isEmpty(res.apps) ? findBy(res.apps, 'id', 'cattle-monitoring-system/rancher-monitoring') : '';
         const clusterPrefix = getClusterPrefix(rancherMonitoring?.currentVersion || '', currentCluster.id);
 
         grafanaMatch.link = `${ clusterPrefix }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/`;
+        grafanaMatch.enabled = true;
+      }
 
-        const alertmanager = findBy(
-          hash.endpoints,
-          'id',
-          `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-alertmanager`
-        );
-        const grafana = findBy(
-          hash.endpoints,
-          'id',
-          `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-grafana`
-        );
-        const prometheus = findBy(
-          hash.endpoints,
-          'id',
-          `${ CATTLE_MONITORING_NAMESPACE }/rancher-monitoring-prometheus`
+      if (canViewPrometheus) {
+        const promeMatch = externalLinks.filter(
+          (el) => el.group === 'prometheus'
         );
 
-        if (!isEmpty(alertmanager) && !isEmpty(alertmanager.subsets)) {
-          amMatch.enabled = true;
-        }
-        if (!isEmpty(grafana) && !isEmpty(grafana.subsets)) {
-          grafanaMatch.enabled = true;
-        }
-        if (!isEmpty(prometheus) && !isEmpty(prometheus.subsets)) {
-          promeMatch.forEach((match) => {
-            match.enabled = true;
-          });
-        }
+        promeMatch.forEach((match) => {
+          match.enabled = true;
+        });
       }
     },
   },

package/pages/support/index.vue

@@ -8,7 +8,6 @@ import { SETTING } from '@shell/config/settings';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
 import { hasCspAdapter } from 'mixins/brand';
-import { generateSupportLink } from '@shell/utils/version';
 
 export default {
   layout: 'home',
@@ -112,12 +111,6 @@ export default {
 
     sccLink() {
       return this.hasAWSSupport ? addParam('https://scc.suse.com', 'from_marketplace', '1') : 'https://scc.suse.com';
-    },
-
-    supportLink() {
-      const version = this.settings?.find((s) => s.id === SETTING.VERSION_RANCHER)?.value;
-
-      return generateSupportLink(version);
     }
   },
 
@@ -139,7 +132,7 @@ export default {
               <div class="support-link">
                 <a
                   class="support-link"
-                  :href="supportLink"
+                  href="https://www.rancher.com/support"
                   target="_blank"
                   rel="noopener noreferrer nofollow"
                 >{{ t('support.community.learnMore') }}</a>