@rancher/shell 0.3.4 → 0.3.6

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

@@ -103,7 +103,7 @@ export default class ProvCluster extends SteveModel {
     const clusterTemplatesSchema = this.$getters['schemaFor']('management.cattle.io.clustertemplate');
     let canUpdateClusterTemplate = false;
 
-    if (clusterTemplatesSchema && (clusterTemplatesSchema.resourceMethods.includes('blocked-PUT') || clusterTemplatesSchema.resourceMethods.includes('PUT'))) {
+    if (clusterTemplatesSchema && (clusterTemplatesSchema.resourceMethods?.includes('blocked-PUT') || clusterTemplatesSchema.resourceMethods?.includes('PUT'))) {
       canUpdateClusterTemplate = true;
     }
 
@@ -272,7 +272,7 @@ export default class ProvCluster extends SteveModel {
   }
 
   get mgmtClusterId() {
-    return this.mgmt?.id || this.id.replace(`${ this.metadata.namespace }/`, '');
+    return this.mgmt?.id || this.id?.replace(`${ this.metadata.namespace }/`, '');
   }
 
   get mgmt() {
@@ -291,8 +291,10 @@ export default class ProvCluster extends SteveModel {
     return !!this.mgmt?.isReady;
   }
 
+  // nodeGroups can be undefined for an EKS cluster that has just been created and has not
+  // had any node groups added to it
   get eksNodeGroups() {
-    return this.mgmt?.spec?.eksConfig?.nodeGroups;
+    return this.mgmt?.spec?.eksConfig?.nodeGroups || [];
   }
 
   waitForProvisioner(timeout, interval) {
@@ -457,9 +459,9 @@ export default class ProvCluster extends SteveModel {
         return names.join('<br>');
       } else {
         const names = this.machines.filter((machine) => {
-          return machine.status.conditions.find(c => c.error && c.type === 'NodeHealthy');
+          return machine.status?.conditions?.find(c => c.error && c.type === 'NodeHealthy');
         }).map((machine) => {
-          if (machine.status.nodeRef?.name) {
+          if (machine.status?.nodeRef?.name) {
             return this.t('cluster.availabilityWarnings.node', { name: machine.status.nodeRef.name });
           }
 

package/models/rbac.authorization.k8s.io.clusterrolebinding.js

@@ -0,0 +1,16 @@
+import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { GROUP, SERVICE_ACCOUNT, USER } from '@shell/config/types';
+
+export default class ClusterRoleBinding extends HybridModel {
+  get users() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === USER);
+  }
+
+  get serviceAccounts() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === SERVICE_ACCOUNT);
+  }
+
+  get groups() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === GROUP);
+  }
+}

package/models/rbac.authorization.k8s.io.rolebinding.js

@@ -0,0 +1,16 @@
+import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { GROUP, SERVICE_ACCOUNT, USER } from '@shell/config/types';
+
+export default class RoleBinding extends HybridModel {
+  get users() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === USER);
+  }
+
+  get serviceAccounts() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === SERVICE_ACCOUNT);
+  }
+
+  get groups() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === GROUP);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -16,15 +16,11 @@
     "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",
+    "dev": "./node_modules/.bin/vue-cli-service 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",
+    "build": "./node_modules/.bin/vue-cli-service build",
+    "analyze": "./node_modules/.bin/vue-cli-service build --report",
+    "start": "./node_modules/.bin/vue-cli-service start",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "e2e:pre": "NODE_ENV=dev yarn build",
@@ -40,21 +36,17 @@
     "@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/cli-plugin-babel": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18",
+    "@vue/cli-service": "4.5.18",
     "@vue/test-utils": "1.2.1",
     "@vue/vue2-jest": "27.0.0",
     "add": "2.0.6",
@@ -86,7 +78,7 @@
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
-    "eslint-plugin-vue": "7.14.0",
+    "eslint-plugin-vue": "9.10.0",
     "event-target-shim": "5.0.1",
     "express": "4.17.1",
     "file-saver": "2.0.2",
@@ -113,7 +105,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.13",
+    "rancher-icons": "rancher/icons#v2.0.14",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",
@@ -129,15 +121,15 @@
     "typescript": "4.1.6",
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
-    "vue": "2.6.14",
+    "vue": "2.7.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-server-renderer": "2.7.14",
     "vue-shortkey": "3.1.7",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "2.7.14",
     "vue-virtual-scroll-list": "^2.3.4",
     "vue2-transitions": "0.3.0",
     "vuedraggable": "2.24.3",

package/pages/auth/setup.vue

@@ -281,8 +281,8 @@ export default {
 
           <template v-if="mustChangePassword">
             <p
+              v-clean-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
               class="text-center mb-20 mt-20 setup-title"
-              v-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
             />
 
             <Password
@@ -495,7 +495,7 @@ export default {
   }
 
   .landscape {
-    background-image: url('~shell/assets/images/pl/login-landscape.svg');
+    background-image: url('~@shell/assets/images/pl/login-landscape.svg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;

package/pages/c/_cluster/apps/charts/__tests__/install.helper.test.ts

@@ -0,0 +1,33 @@
+import { ignoreVariables } from '@shell/pages/c/_cluster/apps/charts/install.helpers';
+
+describe('fX: ignoreVariables', () => {
+  describe.each([['epinio', 'global.rbac.pspEnabled']])('given chart %p with path %p', (name, path) => {
+    it.each([
+      ['v1.24.11+rke2r1'],
+    ])('should not return variable path list if cluster has k8s version %p', (version) => {
+      const cluster = { kubernetesVersion: version };
+      const data = {
+        chart:  { name },
+        values: { global: { rbac: { pspEnabled: undefined } } }
+      };
+
+      const paths = ignoreVariables(cluster, data);
+
+      expect(paths).toStrictEqual([]);
+    });
+
+    it.each([
+      ['v1.25.11+rke2r1'],
+    ])('should return questions if cluster has k8s version %p', (version) => {
+      const cluster = { kubernetesVersion: version };
+      const data = {
+        chart:  { name },
+        values: { global: { rbac: { pspEnabled: undefined } } }
+      };
+
+      const paths = ignoreVariables(cluster, data);
+
+      expect(paths).toStrictEqual([path]);
+    });
+  });
+});

package/pages/c/_cluster/apps/charts/chart.vue

@@ -159,14 +159,14 @@ export default {
           v-if="osWarning"
           color="error"
         >
-          <span v-html="osWarning" />
+          <span v-clean-html="osWarning" />
         </Banner>
         <Banner
           v-for="msg in requires"
           :key="msg"
           color="error"
         >
-          <span v-html="msg" />
+          <span v-clean-html="msg" />
         </Banner>
 
         <Banner
@@ -174,14 +174,14 @@ export default {
           :key="msg"
           color="warning"
         >
-          <span v-html="msg" />
+          <span v-clean-html="msg" />
         </Banner>
 
         <Banner
           v-if="targetedAppWarning"
           color="warning"
         >
-          <span v-html="targetedAppWarning" />
+          <span v-clean-html="targetedAppWarning" />
         </Banner>
       </div>
       <div

package/pages/c/_cluster/apps/charts/install.helpers.js

@@ -0,0 +1,26 @@
+/**
+ * Return list of variables to filter chart questions
+ */
+export const ignoreVariables = (cluster, data) => {
+  const pspChartMap = {
+    epinio:                     'global.rbac.pspEnabled',
+    longhorn:                   'enablePSP',
+    'rancher-alerting-drivers': 'global.cattle.psp.enabled',
+    neuvector:                  'global.cattle.psp.enabled',
+    'prometheus-federator':     'global.rbac.pspEnabled',
+  };
+  const path = pspChartMap[data.chart.name];
+
+  if (path) {
+    const clusterVersion = cluster?.kubernetesVersion || '';
+    const version = clusterVersion.match(/\d+/g);
+    const isRequiredVersion = version?.length ? +version[0] === 1 && +version[1] < 25 : false;
+
+    // Provide path as question variable to be ignored
+    if (!isRequiredVersion) {
+      return [path];
+    }
+  }
+
+  return [];
+};

package/pages/c/_cluster/apps/charts/install.vue

@@ -32,6 +32,7 @@ import { CATALOG as CATALOG_ANNOTATIONS, PROJECT } from '@shell/config/labels-an
 
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { clone, diff, get, set } from '@shell/utils/object';
+import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import Vue from 'vue';
 import { saferDump } from '@shell/utils/create-yaml';
@@ -92,6 +93,7 @@ export default {
     */
     await this.fetchChart();
 
+    await this.fetchAutoInstallInfo();
     this.errors = [];
 
     // If the chart doesn't contain system `systemDefaultRegistry` properties there's no point applying them
@@ -360,6 +362,7 @@ export default {
       migratedApp:            false,
       defaultCmdOpts,
       customCmdOpts:          { ...defaultCmdOpts },
+      autoInstallInfo:        [],
 
       nameDisabled: false,
 
@@ -425,6 +428,13 @@ export default {
     ...mapGetters({ inStore: 'catalog/inStore', features: 'features/get' }),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    /**
+     * Return list of variables to filter chart questions
+     */
+    ignoreVariables() {
+      return ignoreVariables(this.currentCluster, this.versionInfo);
+    },
+
     namespaceIsNew() {
       const all = this.$store.getters['cluster/all'](NAMESPACE);
       const want = this.value?.metadata?.namespace;
@@ -799,7 +809,7 @@ export default {
         }) : {};
 
         if (provCluster.isRke2) { // isRke2 returns true for both RKE2 and K3s clusters.
-          const agentConfig = provCluster.spec.rkeConfig.machineSelectorConfig.find(x => !x.machineLabelSelector).config;
+          const agentConfig = provCluster.spec?.rkeConfig?.machineSelectorConfig?.find(x => !x.machineLabelSelector).config;
 
           // If a cluster scoped registry exists,
           // it should be used by default.
@@ -812,7 +822,7 @@ export default {
         if (provCluster.isRke1) {
           // For RKE1 clusters, the cluster scoped private registry is on the management
           // cluster, not the provisioning cluster.
-          const rke1Registries = mgmCluster.spec.rancherKubernetesEngineConfig.privateRegistries;
+          const rke1Registries = mgmCluster.spec?.rancherKubernetesEngineConfig?.privateRegistries;
 
           if (rke1Registries?.length > 0) {
             const defaultRegistry = rke1Registries.find((registry) => {
@@ -844,10 +854,8 @@ export default {
     },
 
     async loadValuesComponent() {
-      // TODO: Remove RELEASE_NAME. This is only in until the component annotation is added to the OPA Gatekeeper chart.
-
       // The const component is a string, for example, 'monitoring'.
-      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT] || this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
+      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT];
 
       // Load a values component for the UI if it is named in the Helm chart.
       if ( component ) {
@@ -872,7 +880,7 @@ export default {
     },
 
     async loadChartSteps() {
-      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT] || this.version?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
+      const component = this.version?.annotations?.[CATALOG_ANNOTATIONS.COMPONENT];
 
       if ( component ) {
         const steps = await this.$store.getters['catalog/chartSteps'](component);
@@ -1167,56 +1175,7 @@ export default {
 
       const more = [];
 
-      /*
-        An example value for auto is ["rancher-monitoring-crd=match"].
-        It is an array of chart names that lets Rancher know of other
-        charts that should be auto-installed at the same time.
-      */
-      let auto = (this.version?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL] || '').split(/\s*,\s*/).filter(x => !!x).reverse();
-
-      for ( const constraint of auto ) {
-        const provider = this.$store.getters['catalog/versionSatisfying']({
-          constraint,
-          repoName:     this.chart.repoName,
-          repoType:     this.chart.repoType,
-          chartVersion: this.version.version,
-        });
-
-        /*
-         An example return value for "provider":
-        [
-            {
-                "name": "rancher-monitoring-crd",
-                "version": "100.1.3+up19.0.3",
-                "description": "Installs the CRDs for rancher-monitoring.",
-                "apiVersion": "v1",
-                "annotations": {
-                    "catalog.cattle.io/certified": "rancher",
-                    "catalog.cattle.io/hidden": "true",
-                    "catalog.cattle.io/namespace": "cattle-monitoring-system",
-                    "catalog.cattle.io/release-name": "rancher-monitoring-crd"
-                },
-                "type": "application",
-                "urls": [
-                    "https://192.168.0.18:8005/k8s/clusters/c-m-hhpg69fv/v1/catalog.cattle.io.clusterrepos/rancher-charts?chartName=rancher-monitoring-crd&link=chart&version=100.1.3%2Bup19.0.3"
-                ],
-                "created": "2022-04-27T10:04:18.343124-07:00",
-                "digest": "ecf07ba23a9cdaa7ffbbb14345d94ea1240b7f3b8e0ce9be4640e3e585c484e2",
-                "key": "cluster/rancher-charts/rancher-monitoring-crd/100.1.3+up19.0.3",
-                "repoType": "cluster",
-                "repoName": "rancher-charts"
-            }
-        ]
-        */
-
-        if ( provider ) {
-          more.push(provider);
-        } else {
-          errors.push(`This chart requires ${ constraint } but no matching chart was found`);
-        }
-      }
-
-      auto = (this.version?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL_GVK] || '').split(/\s*,\s*/).filter(x => !!x).reverse();
+      const auto = (this.version?.annotations?.[CATALOG_ANNOTATIONS.AUTO_INSTALL_GVK] || '').split(/\s*,\s*/).filter(x => !!x).reverse();
 
       for ( const gvr of auto ) {
         const provider = this.$store.getters['catalog/versionProviding']({
@@ -1232,9 +1191,33 @@ export default {
         }
       }
 
+      /* Chart custom UI components have the ability to edit CRD chart values eg gatekeeper-crd has values.enableRuntimeDefaultSeccompProfile
+        like the main chart, only CRD values that differ from defaults should be sent on install/upgrade
+        CRDs should be installed with the same global values as the main chart
+      */
+      for (const versionInfo of this.autoInstallInfo) {
+        // allValues are the values potentially changed in the installation ui: any previously customized values + defaults
+        // values are default values from the chart
+        const { allValues, values: crdValues } = versionInfo;
+
+        // only save crd values that differ from the defaults defined in chart values.yaml
+        const customizedCrdValues = diff(crdValues, allValues);
+
+        // CRD globals should be overwritten by main chart globals
+        // we want to avoid including globals present on crd values and not main chart values
+        // that covers the scenario where a global value was customized on a previous install (and so is present in crd global vals) and the user has reverted it to default on this update (no longer present in main chart global vals)
+        const crdValuesToInstall = { ...customizedCrdValues, global: values.global };
+
+        out.charts.unshift({
+          chartName:   versionInfo.chart.name,
+          version:     versionInfo.chart.version,
+          releaseName: versionInfo.chart.annotations[CATALOG_ANNOTATIONS.RELEASE_NAME] || chart.name,
+          projectId:   this.project,
+          values:      crdValuesToInstall
+        });
+      }
       /*
-        'more' contains the values for the CRD chart, which needs the same
-        global and cattle values as the chart. It could also contain additional
+        'more' contains additional
         charts that may not be CRD charts but are also meant to be installed at
         the same time.
       */
@@ -1368,7 +1351,7 @@ export default {
               :key="msg"
               color="error"
             >
-              <span v-html="msg" />
+              <span v-clean-html="msg" />
             </Banner>
 
             <Banner
@@ -1376,7 +1359,7 @@ export default {
               :key="msg"
               color="warning"
             >
-              <span v-html="msg" />
+              <span v-clean-html="msg" />
             </Banner>
           </div>
           <div
@@ -1479,7 +1462,7 @@ export default {
             v-if="isNamespaceNew && value.metadata.namespace.length"
             color="info"
           >
-            <div v-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) " />
+            <div v-clean-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) " />
           </Banner>
         </div>
       </template>
@@ -1517,47 +1500,49 @@ export default {
         </div>
       </template>
       <template #helmValues>
-        <Banner
-          v-if="step2Description"
-          color="info"
-          class="description"
-        >
-          {{ step2Description }}
-        </Banner>
-        <div class="step__values__controls">
-          <ButtonGroup
-            v-model="preFormYamlOption"
-            :options="formYamlOptions"
-            inactive-class="bg-disabled btn-sm"
-            active-class="bg-primary btn-sm"
-            :disabled="preFormYamlOption != formYamlOption"
-          />
-          <div class="step__values__controls--spacer">
-&nbsp;
-          </div>
-          <ButtonGroup
-            v-if="showDiff"
-            v-model="diffMode"
-            :options="yamlDiffModeOptions"
-            inactive-class="bg-disabled btn-sm"
-            active-class="bg-primary btn-sm"
-          />
-          <div
-            v-if="hasReadme && !showingReadmeWindow"
-            class="btn-group"
+        <div class="sticky-header">
+          <Banner
+            v-if="step2Description"
+            color="info"
+            class="description"
           >
-            <button
-              type="button"
-              class="btn bg-primary btn-sm"
-              @click="showSlideIn = !showSlideIn"
+            {{ step2Description }}
+          </Banner>
+          <div class="step__values__controls">
+            <ButtonGroup
+              v-model="preFormYamlOption"
+              :options="formYamlOptions"
+              inactive-class="bg-disabled btn-sm"
+              active-class="bg-primary btn-sm"
+              :disabled="preFormYamlOption != formYamlOption"
+            />
+            <div class="step__values__controls--spacer">
+  &nbsp;
+            </div>
+            <ButtonGroup
+              v-if="showDiff"
+              v-model="diffMode"
+              :options="yamlDiffModeOptions"
+              inactive-class="bg-disabled btn-sm"
+              active-class="bg-primary btn-sm"
+            />
+            <div
+              v-if="hasReadme && !showingReadmeWindow"
+              class="btn-group"
             >
-              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
-            </button>
+              <button
+                type="button"
+                class="btn bg-primary btn-sm"
+                @click="showSlideIn = !showSlideIn"
+              >
+                {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+              </button>
+            </div>
           </div>
         </div>
         <div class="scroll__container">
           <div class="scroll__content">
-            <!-- Values (as Custom Component) -->
+            <!-- Values (as Custom Component in ./shell/charts/) -->
             <template v-if="valuesComponent && showValuesComponent">
               <Tabbed
                 v-if="componentHasTabs"
@@ -1576,6 +1561,7 @@ export default {
                   :existing="existing"
                   :version="version"
                   :version-info="versionInfo"
+                  :auto-install-info="autoInstallInfo"
                   @warn="e=>errors.push(e)"
                   @register-before-hook="registerBeforeHook"
                   @register-after-hook="registerAfterHook"
@@ -1592,13 +1578,15 @@ export default {
                   :existing="existing"
                   :version="version"
                   :version-info="versionInfo"
+                  :auto-install-info="autoInstallInfo"
                   @warn="e=>errors.push(e)"
                   @register-before-hook="registerBeforeHook"
                   @register-after-hook="registerAfterHook"
                 />
               </template>
             </template>
-            <!-- Values (as Questions)  -->
+
+            <!-- Values (as Questions, abstracted component based on question.yaml configuration from repositories)  -->
             <Tabbed
               v-else-if="hasQuestions && showQuestions"
               ref="tabs"
@@ -1612,6 +1600,7 @@ export default {
                 :in-store="inStore"
                 :mode="mode"
                 :source="versionInfo"
+                :ignore-variables="ignoreVariables"
                 tabbed="multiple"
                 :target-namespace="targetNamespace"
               />
@@ -1802,17 +1791,17 @@ export default {
           {{ t('catalog.install.error.legacy.label', { legacyType: mcapp ? legacyDefs.mcm : legacyDefs.legacy }, true) }}
         </span>
         <template v-if="!legacyEnabled">
-          <span v-html="t('catalog.install.error.legacy.enableLegacy.prompt', true)" />
+          <span v-clean-html="t('catalog.install.error.legacy.enableLegacy.prompt', true)" />
           <nuxt-link :to="legacyFeatureRoute">
             {{ t('catalog.install.error.legacy.enableLegacy.goto') }}
           </nuxt-link>
         </template>
         <template v-else-if="mcapp">
-          <span v-html="t('catalog.install.error.legacy.mcmNotSupported')" />
+          <span v-clean-html="t('catalog.install.error.legacy.mcmNotSupported')" />
         </template>
         <template v-else>
           <nuxt-link :to="legacyAppRoute">
-            <span v-html="t('catalog.install.error.legacy.navigate')" />
+            <span v-clean-html="t('catalog.install.error.legacy.navigate')" />
           </nuxt-link>
         </template>
       </Banner>
@@ -1971,8 +1960,6 @@ export default {
   .scroll {
     &__container {
       $yaml-height: 200px;
-      display: flex;
-      flex: 1;
       min-height: $yaml-height;
       height: 0;
     }
@@ -2071,4 +2058,13 @@ export default {
   margin-top: 5px;
 }
 
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  background: var(--primary-text);
+}
+
 </style>