Refactor for vue3

rancher · Oct 8, 2024 · c8f69bf · c8f69bf
1 parent 2ddca88
commit c8f69bf
Show file tree

Hide file tree

Showing 57 changed files with 5,002 additions and 8,717 deletions.
diff --git a/package.json b/package.json
@@ -16,35 +16,52 @@
   },
   "dependencies": {
     "@kubernetes/client-node": "^0.20.0",
-    "@rancher/components": "^0.2.1-alpha.0",
-    "@rancher/shell": "^2.0.1",
+    "@rancher/components": "^0.3.0-alpha.1",
+    "@rancher/shell": "^3.0.0-rc.4",
+    "cache-loader": "^4.1.0",
+    "color": "4.2.3",
     "core-js": "^3.37.1",
     "css-loader": "4.3.0",
+    "ip": "2.0.1",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "v-tooltip": "^2.1.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@types/lodash": "4.17.5",
-    "@types/node": "20.14.8",
-    "@types/semver": "^7.5.8",
+    "@types/node": "~20.10.0",
+    "@types/semver": "7.5.4",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/vue2-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "sass-loader": "10.1.1",
-    "semver": "^7.6.2",
     "ts-jest": "^29.1.5",
     "typescript": "4.5.5"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "resolutions": {
-    "**/webpack": "4",
-    "glob": "7.2.3"
-  }
+    "@types/node": "~20.10.0",
+    "@types/lodash": "4.17.5",
+    "@achrinza/node-ipc": "9.2.9",
+    "@vue/cli-service/html-webpack-plugin": "^5.0.0",
+    "d3-color": "3.1.0",
+    "ejs": "3.1.9",
+    "follow-redirects": "1.15.2",
+    "glob": "7.2.3",
+    "glob-parent": "6.0.2",
+    "json5": "2.2.3",
+    "merge": "2.1.1",
+    "node-forge": "1.3.1",
+    "nth-check": "2.1.1",
+    "qs": "6.11.1",
+    "roarr": "7.0.4",
+    "semver": "7.5.4"
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/pkg/kubewarden/chart/kubewarden/_index.vue b/pkg/kubewarden/chart/kubewarden/_index.vue
@@ -27,7 +27,7 @@ export default {
   <div>
     <div class="row mb-20">
       <Checkbox
-        v-model="value['kubewarden-defaults'].recommendedPolicies.enabled"
+        v-model:value="value['kubewarden-defaults'].recommendedPolicies.enabled"
         label="Enable the Recommended Policies"
         tooltip="The chart allows the user to install some recommended policies to enforce some best practice security checks."
       />

diff --git a/pkg/kubewarden/chart/kubewarden/admission/ContextAware/Resource.vue b/pkg/kubewarden/chart/kubewarden/admission/ContextAware/Resource.vue
@@ -79,7 +79,7 @@ export default {
   methods: {
     clearKind() {
       if ( !isEmpty(this.value.kind) ) {
-        this.$set(this.value, 'kind', null);
+        this.value.kind = null;
       }
     },
 
@@ -113,7 +113,7 @@ export default {
   >
     <div class="col span-4">
       <LabeledSelect
-        v-model="value.apiVersion"
+        v-model:value="value.apiVersion"
         data-testid="kw-policy-context-resource-apiversion-select"
         :disabled="disabled"
         :clearable="false"
@@ -129,7 +129,7 @@ export default {
 
     <div class="col span-4">
       <LabeledSelect
-        v-model="value.kind"
+        v-model:value="value.kind"
         data-testid="kw-policy-context-resource-kind-select"
         :disabled="disabled"
         :clearable="false"

diff --git a/pkg/kubewarden/chart/kubewarden/admission/ContextAware/index.vue b/pkg/kubewarden/chart/kubewarden/admission/ContextAware/index.vue
@@ -1,11 +1,11 @@
 <script>
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
+import { isEmpty } from '@shell/utils/object';
 
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 
-import { isEmpty } from '@shell/utils/object';
 import { KUBEWARDEN_APPS, ARTIFACTHUB_PKG_ANNOTATION } from '../../../../types';
 import Resource from './Resource';
 
@@ -101,7 +101,7 @@ export default {
     <div v-for="(resource, index) in contextAwareResources" :key="'filtered-resource-' + index">
       <Resource
         ref="lastResource"
-        v-model="contextAwareResources[index]"
+        v-model:value="contextAwareResources[index]"
         :data-testid="`kw-policy-config-context-resource-${ index }`"
         :disabled="disabledcontextAwareResources"
         :mode="mode"

diff --git a/pkg/kubewarden/chart/kubewarden/admission/General.vue b/pkg/kubewarden/chart/kubewarden/admission/General.vue
@@ -88,7 +88,7 @@ export default {
 
   watch: {
     isNamespaceNew(neu) {
-      this.$set(this.value, 'isNamespaceNew', neu);
+      this.value.isNamespaceNew = neu;
     }
   },
 
@@ -188,7 +188,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledSelect
-          v-model="policy.spec.policyServer"
+          v-model:value="policy.spec.policyServer"
           data-testid="kw-policy-general-ps-input"
           :value="value"
           :mode="mode"
@@ -203,7 +203,7 @@ export default {
       <div class="row mb-20">
         <div v-if="isCustom" class="col span-12">
           <LabeledInput
-            v-model="policy.spec.module"
+            v-model:value="policy.spec.module"
             data-testid="kw-policy-general-module-input"
             :mode="mode"
             :label="t('kubewarden.policyConfig.module.label')"
@@ -216,7 +216,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <RadioGroup
-            v-model="policy.spec.mode"
+            v-model:value="policy.spec.mode"
             data-testid="kw-policy-general-mode-input"
             name="mode"
             :disabled="modeDisabled"
@@ -235,7 +235,7 @@ export default {
         </div>
         <div class="col span-6">
           <RadioGroup
-            v-model="policy.spec.backgroundAudit"
+            v-model:value="policy.spec.backgroundAudit"
             data-testid="kw-policy-general-background-audit-input"
             name="mode"
             :options="[true, false]"

diff --git a/pkg/kubewarden/chart/kubewarden/admission/MatchConditions.vue b/pkg/kubewarden/chart/kubewarden/admission/MatchConditions.vue
@@ -112,7 +112,7 @@ export default {
     },
 
     handleInput(e, index) {
-      this.$set(this.matchConditions[index], 'expression', e);
+      this.matchConditions[index].expression = e;
       this.emitUpdate();
     }
   }
@@ -127,7 +127,7 @@ export default {
       <InfoBox>
         <div class="condition__name-container">
           <LabeledInput
-            v-model="condition.name"
+            v-model:value="condition.name"
             class="mb-10 condition__name"
             :data-testid="`kw-policy-match-condition-name-input-${ index }`"
             :mode="mode"
@@ -173,15 +173,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-::v-deep code {
+:deep(code) {
   padding: 2px;
 }
 
 .fill {
   flex: 1;
 }
 
-::v-deep .code-mirror  {
+:deep(.code-mirror)  {
   position: relative;
 
   .CodeMirror {

diff --git a/pkg/kubewarden/chart/kubewarden/admission/NamespaceSelector/index.vue b/pkg/kubewarden/chart/kubewarden/admission/NamespaceSelector/index.vue
@@ -39,20 +39,17 @@ export default {
     value: {
       deep: true,
       handler(neu) {
-        const matchExpressions = neu?.matchExpressions || [];
-        const matchLabels = neu?.matchLabels || {};
-
-        this.$set(this, 'matchExpressions', matchExpressions);
-        this.$set(this, 'matchLabels', matchLabels);
+        this.matchExpressions = neu?.matchExpressions || [];
+        this.matchLabels = neu?.matchLabels || {};
       }
     },
     matchExpressions(neu) {
-      this.$set(this.namespaceSelector, 'matchExpressions', neu);
-      this.$emit('input', this.namespaceSelector);
+      this.namespaceSelector.matchExpressions = neu;
+      this.$emit('update:value', this.namespaceSelector);
     },
     matchLabels(neu) {
-      this.$set(this.namespaceSelector, 'matchLabels', neu);
-      this.$emit('input', this.namespaceSelector);
+      this.namespaceSelector.matchLabels = neu;
+      this.$emit('update:value', this.namespaceSelector);
     },
   }
 };
@@ -63,43 +60,43 @@ export default {
     <p class="col span-12 mb-20">
       {{ t('kubewarden.policyConfig.namespaceSelector.description') }}
     </p>
-    <template>
-      <InfoBox ref="infobox">
-        <div class="row mb-20">
-          <div class="col span-12">
-            <h4>
-              <t k="kubewarden.policyConfig.namespaceSelector.matchExpressions.label" />
-              <i
-                v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchExpressions.tooltip')"
-                class="icon icon-info icon-lg"
-              />
-            </h4>
-            <span v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchExpressions.tooltip')"></span>
-            <MatchExpressions
-              ref="matchexp"
-              v-model="matchExpressions"
-              :mode="mode"
-              :show-remove="false"
-              :type="POD"
+    <InfoBox ref="infobox">
+      <div class="row mb-20">
+        <div class="col span-12">
+          <h4>
+            <t k="kubewarden.policyConfig.namespaceSelector.matchExpressions.label" />
+            <i
+              v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchExpressions.tooltip')"
+              class="icon icon-info icon-lg"
             />
-          </div>
+          </h4>
+          <span v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchExpressions.tooltip')"></span>
+          <MatchExpressions
+            ref="matchexp"
+            v-model:value="matchExpressions"
+            :mode="mode"
+            :show-remove="false"
+            :type="POD"
+            @update:value="matchExpressions = $event"
+          />
         </div>
-        <h4>
-          <t k="kubewarden.policyConfig.namespaceSelector.matchLabels.label" />
-          <i
-            v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchLabels.tooltip')"
-            class="icon icon-info icon-lg"
+      </div>
+      <h4>
+        <t k="kubewarden.policyConfig.namespaceSelector.matchLabels.label" />
+        <i
+          v-clean-tooltip="t('kubewarden.policyConfig.namespaceSelector.matchLabels.tooltip')"
+          class="icon icon-info icon-lg"
+        />
+      </h4>
+      <div class="row mb-20">
+        <div class="col span-12">
+          <KeyValue
+            v-model:value="matchLabels"
+            :mode="mode"
+            @update:value="matchLabels = $event"
           />
-        </h4>
-        <div class="row mb-20">
-          <div class="col span-12">
-            <KeyValue
-              v-model="matchLabels"
-              :mode="mode"
-            />
-          </div>
         </div>
-      </InfoBox>
-    </template>
+      </div>
+    </InfoBox>
   </div>
 </template>
diff --git a/pkg/kubewarden/chart/kubewarden/admission/Rules/Rule.vue b/pkg/kubewarden/chart/kubewarden/admission/Rules/Rule.vue
@@ -61,7 +61,7 @@ export default {
   fetch() {
     if ( this.isCreate && isEmpty(this.value?.apiGroups) ) {
       if ( !Array.isArray(this.value.apiGroups) ) {
-        this.$set(this.value, 'apiGroups', []);
+        this.value.apiGroups = [];
       }
 
       this.value.apiGroups.push('*');
@@ -217,7 +217,7 @@ export default {
   >
     <div v-if="isGlobalRule">
       <LabeledSelect
-        v-model="value.scope"
+        v-model:value="value.scope"
         data-testid="kw-policy-rules-rule-scope-select"
         :disabled="disabled"
         :label="t('kubewarden.policyConfig.scope.label')"
@@ -230,7 +230,7 @@ export default {
 
     <div>
       <LabeledSelect
-        v-model="apiGroupValues"
+        v-model:value="apiGroupValues"
         data-testid="kw-policy-rules-rule-apigroup-select"
         :disabled="disabled"
         :label="t('kubewarden.policyConfig.apiGroups.label')"
@@ -245,7 +245,7 @@ export default {
 
     <div>
       <LabeledSelect
-        v-model="value.resources"
+        v-model:value="value.resources"
         data-testid="kw-policy-rules-rule-resources-select"
         :disabled="disabled"
         :label="t('kubewarden.policyConfig.resources.label')"
@@ -260,7 +260,7 @@ export default {
 
     <div>
       <LabeledSelect
-        v-model="value.apiVersions"
+        v-model:value="value.apiVersions"
         data-testid="kw-policy-rules-rule-apiversions-select"
         :disabled="disabled"
         :clearable="true"
@@ -277,7 +277,7 @@ export default {
 
     <div>
       <LabeledSelect
-        v-model="value.operations"
+        v-model:value="value.operations"
         data-testid="kw-policy-rules-rule-operations-select"
         :disabled="disabled"
         :label="t('kubewarden.policyConfig.operations.label')"

diff --git a/pkg/kubewarden/chart/kubewarden/admission/Rules/index.vue b/pkg/kubewarden/chart/kubewarden/admission/Rules/index.vue
@@ -97,7 +97,7 @@ export default {
     <div v-for="(rule, index) in rules" :key="'filtered-rule-' + index">
       <Rule
         ref="lastRule"
-        v-model="rules[index]"
+        v-model:value="rules[index]"
         :data-testid="`kw-policy-rules-rule-${ index }`"
         :disabled="disabledRules"
         :mode="mode"

diff --git a/pkg/kubewarden/chart/kubewarden/admission/Settings.vue b/pkg/kubewarden/chart/kubewarden/admission/Settings.vue
@@ -48,7 +48,7 @@ export default {
   <div>
     <YamlEditor
       ref="yamleditor"
-      v-model="settingsYaml"
+      v-model:value="settingsYaml"
       data-testid="kw-policy-config-settings-yaml-editor"
       class="yaml-editor"
       initial-yaml-values="# Additional Settings YAML \n"