From 58a91755d0ccd1d08448015ada2e3a3c52b42f7b Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Wed, 31 Jul 2024 14:38:09 -0400
Subject: [PATCH 1/2] Add basic configuration for policy creation

---
 jest.setup.js                                 |  13 +-
 .../chart/kubewarden/admission/Basic.vue      | 155 +++++++
 .../chart/kubewarden/admission/General.vue    |  97 ----
 .../components/NamespaceNameInput.vue         | 414 ++++++++++++++++++
 pkg/kubewarden/components/Policies/Config.vue |   2 +-
 .../components/Policies/PolicyTable.vue       |   6 +-
 pkg/kubewarden/components/Policies/Values.vue |   7 +-
 pkg/kubewarden/l10n/en-us.yaml                |   5 +
 tests/unit/charts/admission/Basic.spec.ts     | 107 +++++
 tests/unit/charts/admission/General.spec.ts   |  39 +-
 .../components/Policies/PolicyTable.spec.ts   |  16 -
 11 files changed, 698 insertions(+), 163 deletions(-)
 create mode 100644 pkg/kubewarden/chart/kubewarden/admission/Basic.vue
 create mode 100644 pkg/kubewarden/components/NamespaceNameInput.vue
 create mode 100644 tests/unit/charts/admission/Basic.spec.ts

diff --git a/jest.setup.js b/jest.setup.js
index 7d51eddc..ca69ffc1 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,13 +1,13 @@
-import { config } from '@vue/test-utils';
-import { directiveSsr as t } from '@shell/plugins/i18n';
-import { VCleanTooltip } from '@shell/plugins/clean-tooltip-directive';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
 import Vue from 'vue';
+import { config } from '@vue/test-utils';
+import i18n from '@shell/plugins/i18n';
+import cleanTooltipDirective from '@shell/directives/clean-tooltip';
+import cleanHtmlDirective from '@shell/directives/clean-html';
 
 Vue.config.productionTip = false;
 
-Vue.directive('clean-tooltip', VCleanTooltip);
+Vue.use(i18n);
+Vue.directive('clean-tooltip', cleanTooltipDirective);
 Vue.directive('clean-html', cleanHtmlDirective);
 
 beforeAll(() => {});
@@ -16,7 +16,6 @@ beforeEach(() => {
   jest.restoreAllMocks();
 
   config.mocks['$store'] = { getters: { 'i18n/t': jest.fn() } };
-  config.directives = { t };
 });
 
 afterEach(() => {});
diff --git a/pkg/kubewarden/chart/kubewarden/admission/Basic.vue b/pkg/kubewarden/chart/kubewarden/admission/Basic.vue
new file mode 100644
index 00000000..dfe28bc1
--- /dev/null
+++ b/pkg/kubewarden/chart/kubewarden/admission/Basic.vue
@@ -0,0 +1,155 @@
+<script>
+import { _CREATE } from '@shell/config/query-params';
+import { set } from '@shell/utils/object';
+
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+
+import { KUBEWARDEN } from '../../../types';
+import NamespaceNameInput from '../../../components/NamespaceNameInput';
+
+export default {
+  inject: ['chartType'],
+
+  props: {
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+    value: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  components: {
+    LabeledSelect,
+    LabeledInput,
+    NamespaceNameInput,
+    RadioGroup
+  },
+
+  data() {
+    let policy = null;
+
+    if ( this.value?.policy ) {
+      policy = this.value.policy;
+    } else {
+      policy = this.value || {};
+    }
+
+    // fix for https://github.com/rancher/kubewarden-ui/issues/672
+    // enforce `default` as namespace for creation of AP's
+    if ( this.mode === _CREATE && this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
+      set(policy.metadata, 'namespace', 'default');
+    }
+
+    return {
+      policy,
+      namespaced:     true,
+      isNamespaceNew: false
+    };
+  },
+
+  beforeMount() {
+    if ( this.chartType !== KUBEWARDEN.ADMISSION_POLICY ) {
+      this.namespaced = false;
+    }
+  },
+
+  watch: {
+    isNamespaceNew(neu) {
+      this.$set(this.value, 'isNamespaceNew', neu);
+    },
+
+    namespaced(neu) {
+      if ( !neu ) {
+        this.$set(this.policy.metadata, 'namespace', undefined);
+      }
+    }
+  },
+
+  computed: {
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    isGlobal() {
+      return this.chartType === KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
+    },
+
+    policyServers() {
+      return this.$store.getters['cluster/all'](KUBEWARDEN.POLICY_SERVER);
+    },
+
+    policyServerOptions() {
+      if ( this.policyServers?.length > 0 ) {
+        const out = [];
+
+        this.policyServers.map(p => out.push(p.id));
+
+        return out;
+      }
+
+      return this.policyServers || [];
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="mb-20">
+    <RadioGroup
+      v-if="isCreate"
+      v-model="namespaced"
+      data-testid="kw-policy-basic-namespaced-radio"
+      name="namespaced"
+      :options="[true, false]"
+      :mode="mode"
+      class="mb-10"
+      :labels="[t('kubewarden.policyConfig.basic.namespacedRadio.namespaced'), t('kubewarden.policyConfig.basic.namespacedRadio.cluster')]"
+    />
+
+    <div class="row">
+      <template v-if="namespaced">
+        <div ref="nameNsDescriptionWrapper" class="col span-6 name-col">
+          <NamespaceNameInput
+            data-testid="kw-policy-basic-namespace-input"
+            :mode="mode"
+            :value="policy"
+            name-key="metadata.name"
+            namespace-key="metadata.namespace"
+            @isNamespaceNew="isNamespaceNew = $event"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="col span-6 mb-20">
+          <LabeledInput
+            v-model="policy.metadata.name"
+            data-testid="kw-policy-basic-name-input"
+            :mode="mode"
+            :label="t('nameNsDescription.name.label')"
+            :placeholder="t('nameNsDescription.name.placeholder')"
+            :required="true"
+          />
+        </div>
+      </template>
+
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="policy.spec.policyServer"
+          data-testid="kw-policy-general-ps-input"
+          :value="value"
+          :mode="mode"
+          :options="policyServerOptions"
+          :disabled="!isCreate"
+          :label="t('kubewarden.policyConfig.serverSelect.label')"
+          :tooltip="t('kubewarden.policyConfig.serverSelect.tooltip')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/kubewarden/chart/kubewarden/admission/General.vue b/pkg/kubewarden/chart/kubewarden/admission/General.vue
index 3074acd9..16269d62 100644
--- a/pkg/kubewarden/chart/kubewarden/admission/General.vue
+++ b/pkg/kubewarden/chart/kubewarden/admission/General.vue
@@ -4,9 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 import { _CREATE } from '@shell/config/query-params';
 import { set } from '@shell/utils/object';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
@@ -23,10 +21,6 @@ export default {
       type:    String,
       default: _CREATE
     },
-    targetNamespace: {
-      type:     String,
-      required: true
-    },
     isCustom: {
       type:    Boolean,
       default: false
@@ -38,9 +32,7 @@ export default {
   },
 
   components: {
-    LabeledSelect,
     Loading,
-    NameNsDescription,
     Banner,
     LabeledInput,
     RadioGroup
@@ -73,62 +65,23 @@ export default {
       policy = this.value || {};
     }
 
-    // fix for https://github.com/rancher/kubewarden-ui/issues/672
-    // enforce `default` as namespace for creation of AP's
-    if ( this.mode === _CREATE && this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
-      set(policy.metadata, 'namespace', 'default');
-    }
-
     return {
       policy,
       initialPolicyMode: null,
-      isNamespaceNew:    false
     };
   },
 
-  watch: {
-    isNamespaceNew(neu) {
-      this.$set(this.value, 'isNamespaceNew', neu);
-    }
-  },
-
   created() {
     if ( this.policyMode ) {
       this.initialPolicyMode = this.policyMode;
     }
   },
 
-  beforeUpdate() {
-    this.$nextTick(() => {
-      // In order to fix the layout of the NameNsDescription component
-      // we need to adjust the classes of the child elements
-      const wrapper = this.$refs?.nameNsDescriptionWrapper;
-
-      const children = wrapper?.querySelectorAll('.row.mb-20 > .col.span-3');
-
-      if ( this.isGlobal ) {
-        if ( children?.length === 1 ) {
-          children[0].classList.remove('span-3');
-          children[0].classList.add('span-12');
-        }
-      } else if ( children?.length === 2 ) {
-        children[0].classList.remove('span-3');
-        children[0].classList.add('span-4');
-        children[1].classList.remove('span-3');
-        children[1].classList.add('span-8');
-      }
-    });
-  },
-
   computed: {
     isCreate() {
       return this.mode === _CREATE;
     },
 
-    isGlobal() {
-      return this.chartType === KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
-    },
-
     modeDisabled() {
       // Kubewarden doesn't allow switching a policy from 'protect' to 'monitor'
       if ( !this.isCreate ) {
@@ -142,22 +95,6 @@ export default {
       return this.value?.policy?.spec?.mode;
     },
 
-    policyServers() {
-      return this.$store.getters['cluster/all'](KUBEWARDEN.POLICY_SERVER);
-    },
-
-    policyServerOptions() {
-      if ( this.policyServers?.length > 0 ) {
-        const out = [];
-
-        this.policyServers.map(p => out.push(p.id));
-
-        return out;
-      }
-
-      return this.policyServers || [];
-    },
-
     showModeBanner() {
       if ( !this.isCreate && ( this.initialPolicyMode === 'monitor' && this.policyMode === 'protect' ) ) {
         return true;
@@ -172,33 +109,6 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" mode="relative" />
   <div v-else>
-    <div class="row">
-      <div ref="nameNsDescriptionWrapper" class="col span-6 name-col">
-        <NameNsDescription
-          data-testid="kw-policy-general-name-input"
-          :mode="mode"
-          :value="policy"
-          :description-hidden="true"
-          :namespaced="!isGlobal"
-          :namespace-new-allowed="true"
-          name-key="metadata.name"
-          namespace-key="metadata.namespace"
-          @isNamespaceNew="isNamespaceNew = $event"
-        />
-      </div>
-      <div class="col span-6">
-        <LabeledSelect
-          v-model="policy.spec.policyServer"
-          data-testid="kw-policy-general-ps-input"
-          :value="value"
-          :mode="mode"
-          :options="policyServerOptions"
-          :disabled="!isCreate"
-          :label="t('kubewarden.policyConfig.serverSelect.label')"
-          :tooltip="t('kubewarden.policyConfig.serverSelect.tooltip')"
-        />
-      </div>
-    </div>
     <template v-if="policy.spec">
       <div class="row mb-20">
         <div v-if="isCustom" class="col span-12">
@@ -249,10 +159,3 @@ export default {
     </template>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.name-col div:before, .name-col div:after {
-  content: unset;
-  display: unset;
-}
-</style>
\ No newline at end of file
diff --git a/pkg/kubewarden/components/NamespaceNameInput.vue b/pkg/kubewarden/components/NamespaceNameInput.vue
new file mode 100644
index 00000000..bfbde7a3
--- /dev/null
+++ b/pkg/kubewarden/components/NamespaceNameInput.vue
@@ -0,0 +1,414 @@
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { get, set } from '@shell/utils/object';
+import { sortBy } from '@shell/utils/sort';
+import { NAMESPACE } from '@shell/config/types';
+import { DESCRIPTION } from '@shell/config/labels-annotations';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { normalizeName } from '@shell/utils/kube';
+
+export default {
+  name:       'NameNsDescription',
+  components: {
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+    nameEditable: {
+      type:    Boolean,
+      default: false,
+    },
+    nameDisabled: {
+      type:    Boolean,
+      default: false,
+    },
+    nameRequired: {
+      type:    Boolean,
+      default: true,
+    },
+    namespaceFilter:   { type: Function, default: null },
+    namespaceMapper:   { type: Function, default: null },
+    namespaceDisabled: {
+      type:    Boolean,
+      default: false,
+    },
+    namespaceNewAllowed: {
+      type:    Boolean,
+      default: false,
+    },
+    noDefaultNamespace: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Use these objects instead of namespaces
+     */
+    namespacesOverride: {
+      type:    Array,
+      default: null,
+    },
+    /**
+     * User these namespaces instead of determining list within component
+     */
+    namespaceOptions: {
+      type:    Array,
+      default: null,
+    },
+    createNamespaceOverride: {
+      type:    Boolean,
+      default: false,
+    },
+    // Use specific fields on the value instead of the normal metadata locations
+    nameKey: {
+      type:    String,
+      default: null,
+    },
+    namespaceKey: {
+      type:    String,
+      default: null,
+    },
+    forceNamespace: {
+      type:    String,
+      default: null,
+    },
+    rules: {
+      default: () => ({
+        namespace:   [],
+        name:        [],
+        description: []
+      }),
+      type: Object,
+    }
+  },
+
+  data() {
+    const v = this.value;
+    const metadata = v.metadata;
+    let namespace, name, description;
+
+    if (this.nameKey) {
+      name = get(v, this.nameKey);
+    } else {
+      name = metadata?.name;
+    }
+
+    if (this.forceNamespace) {
+      namespace = this.forceNamespace;
+      this.updateNamespace(namespace);
+    } else if (this.namespaceKey) {
+      namespace = get(v, this.namespaceKey);
+    } else {
+      namespace = metadata?.namespace;
+    }
+
+    if (!namespace && !this.noDefaultNamespace) {
+      namespace = this.$store.getters['defaultNamespace'];
+      if (metadata) {
+        metadata.namespace = namespace;
+      }
+    }
+
+    if (this.descriptionKey) {
+      description = get(v, this.descriptionKey);
+    } else {
+      description = metadata?.annotations?.[DESCRIPTION];
+    }
+
+    const inStore = this.$store.getters['currentStore']();
+    const nsSchema = this.$store.getters[`${ inStore }/schemaFor`](NAMESPACE);
+
+    return {
+      namespace,
+      name,
+      description,
+      createNamespace: false,
+      nsSchema
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
+    namespaceReallyDisabled() {
+      return (
+        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
+      ); // namespace is never editable
+    },
+
+    nameReallyDisabled() {
+      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
+    },
+
+    /**
+     * Map namespaces from the store to options, adding divider and create button
+     */
+    options() {
+      let namespaces;
+
+      if (this.namespacesOverride) {
+        // Use the resources provided
+        namespaces = this.namespacesOverride;
+      } else if (this.namespaceOptions) {
+        // Use the namespaces provided
+        namespaces = (this.namespaceOptions.map(ns => ns.name) || []).sort();
+      } else {
+        // Determine the namespaces
+        const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
+
+        namespaces = Object.keys(namespaceObjs);
+      }
+
+      const options = namespaces
+        .map(namespace => ({ nameDisplay: namespace, id: namespace }))
+        .map(this.namespaceMapper || (obj => ({
+          label: obj.nameDisplay,
+          value: obj.id,
+        })));
+
+      const sortedByLabel = sortBy(options, 'label');
+
+      if (this.forceNamespace) {
+        sortedByLabel.unshift({
+          label: this.forceNamespace,
+          value: this.forceNamespace,
+        });
+      }
+
+      const createButton = {
+        label: this.t('namespace.createNamespace'),
+        value: '',
+        kind:  'highlighted'
+      };
+      const divider = {
+        label:    'divider',
+        disabled: true,
+        kind:     'divider'
+      };
+
+      const createOverhead = this.canCreateNamespace || this.createNamespaceOverride ? [createButton, divider] : [];
+
+      return [
+        ...createOverhead,
+        ...sortedByLabel
+      ];
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
+    canCreateNamespace() {
+      // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
+      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster?.canUpdate;
+    }
+  },
+
+  watch: {
+    name(val) {
+      if (this.normalizeName) {
+        val = normalizeName(val);
+      }
+
+      if (this.nameKey) {
+        set(this.value, this.nameKey, val);
+      } else {
+        this.$set(this.value.metadata, 'name', val);
+      }
+      this.$emit('change');
+    },
+
+    namespace(val) {
+      this.updateNamespace(val);
+      this.$emit('change');
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.name) {
+        this.$refs.name.focus();
+      }
+    });
+  },
+
+  methods: {
+    updateNamespace(val) {
+      if (this.forceNamespace) {
+        val = this.forceNamespace;
+      }
+
+      this.$emit('isNamespaceNew', !val || (this.options && !this.options.find(n => n.value === val)));
+
+      if (this.namespaceKey) {
+        set(this.value, this.namespaceKey, val);
+      } else {
+        this.value.metadata.namespace = val;
+      }
+    },
+
+    changeNameAndNamespace(e) {
+      this.name = (e.text || '').toLowerCase();
+      this.namespace = e.selected;
+    },
+
+    cancelCreateNamespace(e) {
+      this.createNamespace = false;
+      this.$parent.$emit('createNamespace', false);
+      // In practice we should always have a defaultNamespace... unless we're in non-kube extension world,  so fall back on options
+      this.namespace = this.$store.getters['defaultNamespace'] || this.options.find(o => !!o.value)?.value;
+    },
+
+    selectNamespace(e) {
+      if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
+        this.createNamespace = true;
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          true,
+        );
+        this.$emit('isNamespaceNew', true);
+        this.$nextTick(() => this.$refs.namespace.focus());
+      } else {
+        this.createNamespace = false;
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          false,
+        );
+        this.$emit('isNamespaceNew', false);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row mb-20">
+    <div
+      v-if="createNamespace"
+      data-testid="namespace-create"
+      class="col span-4"
+    >
+      <LabeledInput
+        ref="namespace"
+        v-model="namespace"
+        :label="t('namespace.label')"
+        :placeholder="t('namespace.createNamespace')"
+        :disabled="namespaceReallyDisabled"
+        :mode="mode"
+        :min-height="30"
+        :required="nameRequired"
+        :rules="rules.namespace"
+      />
+      <button
+        aria="Cancel create"
+        @click="cancelCreateNamespace"
+      >
+        <i
+          v-clean-tooltip="t('generic.cancel')"
+          class="icon icon-close align-value"
+        />
+      </button>
+    </div>
+    <div
+      v-if="!createNamespace"
+      data-testid="namespace"
+      class="col span-4"
+    >
+      <LabeledSelect
+        v-show="!createNamespace"
+        v-model="namespace"
+        :clearable="true"
+        :options="options"
+        :disabled="namespaceReallyDisabled"
+        :searchable="true"
+        :mode="mode"
+        :multiple="false"
+        :label="t('namespace.label')"
+        :placeholder="t('namespace.selectOrCreate')"
+        :rules="rules.namespace"
+        required
+        @selecting="selectNamespace"
+      />
+    </div>
+
+    <div
+      data-testid="name"
+      class="col span-8"
+    >
+      <LabeledInput
+        ref="name"
+        key="name"
+        v-model="name"
+        :label="t('nameNsDescription.name.label')"
+        :placeholder="t('nameNsDescription.name.placeholder')"
+        :disabled="nameReallyDisabled"
+        :mode="mode"
+        :min-height="30"
+        :required="nameRequired"
+        :rules="rules.name"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+button {
+  all: unset;
+  height: 0;
+  position: relative;
+  top: -35px;
+  float: right;
+  margin-right: 7px;
+
+  cursor: pointer;
+
+  .align-value {
+    padding-top: 7px;
+  }
+}
+
+.row {
+  &.name-ns-description {
+    max-height: $input-height;
+  }
+
+  .namespace-select ::v-deep {
+    .labeled-select {
+      min-width: 40%;
+
+      .v-select.inline {
+        &.vs--single {
+          padding-bottom: 2px;
+        }
+      }
+    }
+  }
+
+  &.flip-direction {
+    flex-direction: column;
+
+    &.name-ns-description {
+      max-height: initial;
+    }
+
+    &>div>* {
+      margin-bottom: 20px;
+    }
+  }
+
+}
+</style>
diff --git a/pkg/kubewarden/components/Policies/Config.vue b/pkg/kubewarden/components/Policies/Config.vue
index b1ece9b4..a0b39d0c 100644
--- a/pkg/kubewarden/components/Policies/Config.vue
+++ b/pkg/kubewarden/components/Policies/Config.vue
@@ -98,7 +98,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <div class="content">
-      <div class="banner__title">
+      <div v-if="shortDescription || policyReadme" class="banner__title">
         <template v-if="shortDescription">
           <p class="banner__short-description">
             {{ shortDescription }}
diff --git a/pkg/kubewarden/components/Policies/PolicyTable.vue b/pkg/kubewarden/components/Policies/PolicyTable.vue
index 59acce58..b20538a9 100644
--- a/pkg/kubewarden/components/Policies/PolicyTable.vue
+++ b/pkg/kubewarden/components/Policies/PolicyTable.vue
@@ -73,9 +73,9 @@ export default {
           return false; // Exclude pre-releases if showPreRelease is false
         }
 
-        if ( this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
-          return !isGlobalPolicy(artifactHubPackage, this.allSchemas);
-        }
+        // if ( this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
+        //   return !isGlobalPolicy(artifactHubPackage, this.allSchemas);
+        // }
 
         return true;
       });
diff --git a/pkg/kubewarden/components/Policies/Values.vue b/pkg/kubewarden/components/Policies/Values.vue
index 39d2002d..f9b6fc6a 100644
--- a/pkg/kubewarden/components/Policies/Values.vue
+++ b/pkg/kubewarden/components/Policies/Values.vue
@@ -14,6 +14,8 @@ import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 
 import { KUBEWARDEN_CHARTS, VALUES_STATE, YAML_OPTIONS, RANCHER_NS_MATCH_EXPRESSION } from '../../types';
 
+import Basic from '../../chart/kubewarden/admission/Basic';
+
 export default {
   name: 'Values',
 
@@ -41,7 +43,7 @@ export default {
   },
 
   components: {
-    ButtonGroup, Loading, ResourceCancelModal, Tabbed, YamlEditor
+    Basic, ButtonGroup, Loading, ResourceCancelModal, Tabbed, YamlEditor
   },
 
   async fetch() {
@@ -180,6 +182,9 @@ export default {
         active-class="bg-primary btn-sm"
       />
     </div>
+    <div v-if="showForm" class="basic__container">
+      <Basic v-model="chartValues" :mode="mode" />
+    </div>
     <div class="scroll__container">
       <div class="scroll__content">
         <template v-if="showForm">
diff --git a/pkg/kubewarden/l10n/en-us.yaml b/pkg/kubewarden/l10n/en-us.yaml
index dfeb53bf..193ab569 100644
--- a/pkg/kubewarden/l10n/en-us.yaml
+++ b/pkg/kubewarden/l10n/en-us.yaml
@@ -224,6 +224,11 @@ kubewarden:
     noService: The Metrics service is not currently active or is not installed correctly. Check the status of the Monitoring app.
 
   policyConfig:
+    basic:
+      namespacedRadio:
+        label: Policy Type
+        namespaced: Create Namespaced-Scoped Admission Policy
+        cluster: Create Cluster-Scoped Admission Policy
     tabs:
       general: General
       rules: Rules
diff --git a/tests/unit/charts/admission/Basic.spec.ts b/tests/unit/charts/admission/Basic.spec.ts
new file mode 100644
index 00000000..253353f2
--- /dev/null
+++ b/tests/unit/charts/admission/Basic.spec.ts
@@ -0,0 +1,107 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from '@jest/globals';
+
+import { KUBEWARDEN } from '@kubewarden/types';
+import Basic from '@kubewarden/chart/kubewarden/admission/Basic.vue';
+
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NamespaceNameInput from '@kubewarden/components/NamespaceNameInput';
+
+import { userGroupPolicy } from '@tests/unit/_templates_/policyConfig';
+
+describe('component: Basic', () => {
+  const mockPolicy = {
+    metadata: {
+      name:      '',
+      namespace: ''
+    },
+    spec: { policyServer: '' }
+  };
+
+  const factory = (propsData = {}, computed = {}, provide = {}, stubs = {}) => {
+    return shallowMount(Basic, {
+      propsData: { value: mockPolicy, ...propsData },
+      provide:   { chartType: KUBEWARDEN.ADMISSION_POLICY, ...provide },
+      computed:  {
+        policyServers:       () => [],
+        policyServerOptions: () => [],
+        isGlobal:            () => false,
+        ...computed
+      },
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      {
+          getters: {
+            currentStore:        () => 'current_store',
+            'current_store/all': jest.fn(),
+            'i18n/t':            (key: string) => key
+          }
+        }
+      },
+      stubs: {
+        RadioGroup:         { template: '<div />' },
+        NamespaceNameInput: { template: '<div />' },
+        LabeledInput:       { template: '<div />' },
+        LabeledSelect:      { template: '<div />' },
+        ...stubs
+      }
+    });
+  };
+
+  it('should display the NamespaceNameInput when namespaced is true', () => {
+    const wrapper = factory({ mode: 'create' }, {}, { chartType: KUBEWARDEN.ADMISSION_POLICY });
+
+    const namespaceNameInput = wrapper.findComponent(NamespaceNameInput);
+
+    expect(namespaceNameInput.exists()).toBe(true);
+  });
+
+  it('should not display NamespaceNameInput when namespaced is false', async() => {
+    const wrapper = factory({}, { isGlobal: () => true });
+
+    await wrapper.setData({ namespaced: false });
+
+    const namespaceNameInput = wrapper.findComponent(NamespaceNameInput);
+
+    expect(namespaceNameInput.exists()).toBe(false);
+  });
+
+  it('should set namespace to "default" when creating an AdmissionPolicy', () => {
+    const wrapper = factory({ mode: 'create' });
+
+    expect(wrapper.vm.policy.metadata.namespace).toBe('default');
+  });
+
+  it('should display the PolicyServer options if available', () => {
+    const ps = [{ id: 'default' }, { id: 'custom-ps' }];
+
+    const wrapper = factory(
+      { mode: 'create', value: { policy: userGroupPolicy } },
+      {
+        policyServers:       () => ps,
+        policyServerOptions: () => ['default', 'custom-ps'],
+        isGlobal:            () => true
+      },
+      { chartType: KUBEWARDEN.CLUSTER_ADMISSION_POLICY },
+      {
+        LabeledSelect,
+        LabeledTooltip: { template: '<div />' },
+        'v-select':     { template: '<div />' }
+      }
+    );
+
+    const input = wrapper.findComponent(LabeledSelect);
+
+    expect(input.props().value).toStrictEqual('default' as String);
+    expect(input.props().options).toStrictEqual(['default', 'custom-ps'] as String[]);
+  });
+
+  it('should handle isNamespaceNew correctly', async() => {
+    const wrapper = factory();
+
+    await wrapper.findComponent(NamespaceNameInput).vm.$emit('isNamespaceNew', true);
+
+    expect(wrapper.vm.isNamespaceNew).toBe(true);
+    expect(wrapper.props().value.isNamespaceNew).toBe(true);
+  });
+});
\ No newline at end of file
diff --git a/tests/unit/charts/admission/General.spec.ts b/tests/unit/charts/admission/General.spec.ts
index f7baff89..917b5cc4 100644
--- a/tests/unit/charts/admission/General.spec.ts
+++ b/tests/unit/charts/admission/General.spec.ts
@@ -6,45 +6,11 @@ import { describe, expect, it } from '@jest/globals';
 import { KUBEWARDEN } from '@kubewarden/types';
 import General from '@kubewarden/chart/kubewarden/admission/General.vue';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { RadioGroup } from '@components/Form/Radio';
 
 import { userGroupPolicy } from '@tests/unit/_templates_/policyConfig';
 
 describe('component: General', () => {
-  it('should display the PolicyServer options if available', () => {
-    const ps = [{ id: 'default' }, { id: 'custom-ps' }];
-
-    const wrapper = shallowMount(General as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      propsData: { targetNamespace: 'default', value: { policy: userGroupPolicy } },
-      provide:   { chartType: KUBEWARDEN.CLUSTER_ADMISSION_POLICY },
-      computed:  {
-        policyServers:       () => ps,
-        policyServerOptions: () => ['default', 'custom-ps'],
-        isGlobal:            () => true
-      },
-      mocks:     {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            currentStore:           () => 'current_store',
-            'current_store/all':    jest.fn(),
-            'i18n/t':               jest.fn()
-          },
-        }
-      },
-      stubs: {
-        NameNsDescription: { template: '<span />' },
-        RadioGroup:        { template: '<span />' },
-        LabeledTooltip:    { template: '<span />' }
-      }
-    });
-    const input = wrapper.findComponent(LabeledSelect);
-
-    expect(input.props().value).toStrictEqual('default' as String);
-    expect(input.props().options).toStrictEqual(['default', 'custom-ps'] as String[]);
-  });
-
   it('monitor mode should be protect by default', async() => {
     const wrapper = shallowMount(General as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { targetNamespace: 'default', value: { policy: userGroupPolicy } },
@@ -60,10 +26,7 @@ describe('component: General', () => {
           },
         }
       },
-      stubs: {
-        NameNsDescription: { template: '<span />' },
-        LabeledTooltip:    { template: '<span />' }
-      }
+      stubs: { LabeledTooltip: { template: '<span />' } }
     });
     const radio = wrapper.findAllComponents(RadioGroup).at(0);
 
diff --git a/tests/unit/components/Policies/PolicyTable.spec.ts b/tests/unit/components/Policies/PolicyTable.spec.ts
index 5e30bdb4..6268e341 100644
--- a/tests/unit/components/Policies/PolicyTable.spec.ts
+++ b/tests/unit/components/Policies/PolicyTable.spec.ts
@@ -251,20 +251,4 @@ describe('component: PolicyTable', () => {
 
     expect(containsRc).toBe(true);
   });
-
-  it('hides policies defined as cluster admission policies when creating admission policy', () => {
-    const wrapper = shallowMount(PolicyTable, {
-      propsData:  { value: policyPackages },
-      mocks:      defaultMocks,
-      provide:    { chartType: KUBEWARDEN.ADMISSION_POLICY },
-      computed:   { allSchemas: () => schemas },
-    });
-
-    const filteredPackages = wrapper.vm.filteredPackages;
-    const containsCap = filteredPackages.some(
-      pkg => pkg.name === 'psa-label-enforcer'
-    );
-
-    expect(containsCap).toBe(false);
-  });
 });

From 779f95cfbb3ebed8307971080ef3dd80c80839a8 Mon Sep 17 00:00:00 2001
From: Jordon Leach <jordonleach@gmail.com>
Date: Thu, 1 Aug 2024 14:39:59 -0400
Subject: [PATCH 2/2] Spoof policy type for consolidating policy list and
 creation

---
 .../chart/kubewarden/admission/Basic.vue      |  21 ++-
 pkg/kubewarden/components/Policies/Create.vue |  13 +-
 .../components/Policies/PolicyTable.vue       |   6 -
 pkg/kubewarden/components/Policies/Values.vue |  13 +-
 pkg/kubewarden/config/kubewarden.ts           |  27 +++-
 .../detail/policies.kubewarden.io.policy.vue  |   5 +
 .../edit/policies.kubewarden.io.policy.vue    |  71 ++++++++++
 .../list/policies.kubewarden.io.policy.vue    | 125 ++++++++++++++++++
 .../models/policies.kubewarden.io.policy.js   |   3 +
 pkg/kubewarden/types/kubewarden.ts            |   9 +-
 pkg/kubewarden/types/policy.ts                |  86 +++++++++++-
 11 files changed, 358 insertions(+), 21 deletions(-)
 create mode 100644 pkg/kubewarden/detail/policies.kubewarden.io.policy.vue
 create mode 100644 pkg/kubewarden/edit/policies.kubewarden.io.policy.vue
 create mode 100644 pkg/kubewarden/list/policies.kubewarden.io.policy.vue
 create mode 100644 pkg/kubewarden/models/policies.kubewarden.io.policy.js

diff --git a/pkg/kubewarden/chart/kubewarden/admission/Basic.vue b/pkg/kubewarden/chart/kubewarden/admission/Basic.vue
index dfe28bc1..485ae765 100644
--- a/pkg/kubewarden/chart/kubewarden/admission/Basic.vue
+++ b/pkg/kubewarden/chart/kubewarden/admission/Basic.vue
@@ -6,7 +6,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 
-import { KUBEWARDEN } from '../../../types';
+import { KUBEWARDEN, KUBEWARDEN_KIND } from '../../../types';
 import NamespaceNameInput from '../../../components/NamespaceNameInput';
 
 export default {
@@ -30,6 +30,10 @@ export default {
     RadioGroup
   },
 
+  created() {
+    console.log('### chartType: ', this.chartType);
+  },
+
   data() {
     let policy = null;
 
@@ -38,7 +42,6 @@ export default {
     } else {
       policy = this.value || {};
     }
-
     // fix for https://github.com/rancher/kubewarden-ui/issues/672
     // enforce `default` as namespace for creation of AP's
     if ( this.mode === _CREATE && this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
@@ -65,7 +68,21 @@ export default {
 
     namespaced(neu) {
       if ( !neu ) {
+        // ClusterAdmissionPolicy
+        this.$set(this.policy, 'kind', KUBEWARDEN_KIND.CLUSTER_ADMISSION_POLICY);
         this.$set(this.policy.metadata, 'namespace', undefined);
+        this.$set(
+          this.policy.spec,
+          'namespaceSelector',
+          {
+            matchExpressions: [],
+            matchLabels:      {}
+          }
+        );
+      } else {
+        // AdmissionPolicy
+        this.$set(this.policy, 'kind', KUBEWARDEN_KIND.ADMISSION_POLICY);
+        this.$set(this.policy.spec, 'namespaceSelector', undefined);
       }
     }
   },
diff --git a/pkg/kubewarden/components/Policies/Create.vue b/pkg/kubewarden/components/Policies/Create.vue
index 06c04ed2..24ef06c5 100644
--- a/pkg/kubewarden/components/Policies/Create.vue
+++ b/pkg/kubewarden/components/Policies/Create.vue
@@ -21,7 +21,8 @@ import {
   KUBEWARDEN_PRODUCT_NAME,
   VALUES_STATE,
   ARTIFACTHUB_PKG_ANNOTATION,
-  DEFAULT_POLICY
+  DEFAULT_POLICY,
+  KUBEWARDEN_KIND
 } from '../../types';
 import { removeEmptyAttrs } from '../../utils/object';
 import { handleGrowl } from '../../utils/handle-growl';
@@ -56,8 +57,6 @@ export default ({
     Values
   },
 
-  inject: ['chartType'],
-
   mixins: [CreateEditView],
 
   async fetch() {
@@ -295,11 +294,17 @@ export default ({
           out = this.chartValues?.policy ? this.chartValues.policy : jsyaml.load(this.yamlValues);
         }
 
+        const resourceType = this.chartValues?.policy?.kind;
+        const schemaType = resourceType === KUBEWARDEN_KIND.ADMISSION_POLICY ? KUBEWARDEN.ADMISSION_POLICY : KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
+
+        // Set policy type to be saved
+        this.$set(out, 'type', schemaType);
+
         removeEmptyAttrs(out); // Clean up empty values from questions
         merge(this.value, out);
 
         // If create new namespace option is selected, create the ns before saving the policy
-        if ( this.chartType === KUBEWARDEN.ADMISSION_POLICY && this.chartValues?.isNamespaceNew ) {
+        if ( schemaType === KUBEWARDEN.ADMISSION_POLICY && this.chartValues?.isNamespaceNew ) {
           await this.createNamespace(this.value?.metadata?.namespace);
         }
 
diff --git a/pkg/kubewarden/components/Policies/PolicyTable.vue b/pkg/kubewarden/components/Policies/PolicyTable.vue
index b20538a9..d53e65a0 100644
--- a/pkg/kubewarden/components/Policies/PolicyTable.vue
+++ b/pkg/kubewarden/components/Policies/PolicyTable.vue
@@ -33,8 +33,6 @@ export default {
     }
   },
 
-  inject: ['chartType'],
-
   components: {
     Checkbox, LabeledSelect, LabeledInput, SortableTableWrapper
   },
@@ -73,10 +71,6 @@ export default {
           return false; // Exclude pre-releases if showPreRelease is false
         }
 
-        // if ( this.chartType === KUBEWARDEN.ADMISSION_POLICY ) {
-        //   return !isGlobalPolicy(artifactHubPackage, this.allSchemas);
-        // }
-
         return true;
       });
 
diff --git a/pkg/kubewarden/components/Policies/Values.vue b/pkg/kubewarden/components/Policies/Values.vue
index f9b6fc6a..01fbecd3 100644
--- a/pkg/kubewarden/components/Policies/Values.vue
+++ b/pkg/kubewarden/components/Policies/Values.vue
@@ -12,7 +12,9 @@ import ResourceCancelModal from '@shell/components/ResourceCancelModal';
 import Tabbed from '@shell/components/Tabbed';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 
-import { KUBEWARDEN_CHARTS, VALUES_STATE, YAML_OPTIONS, RANCHER_NS_MATCH_EXPRESSION } from '../../types';
+import {
+  KUBEWARDEN, KUBEWARDEN_KIND, KUBEWARDEN_CHARTS, VALUES_STATE, YAML_OPTIONS, RANCHER_NS_MATCH_EXPRESSION
+} from '../../types';
 
 import Basic from '../../chart/kubewarden/admission/Basic';
 
@@ -46,6 +48,15 @@ export default {
     Basic, ButtonGroup, Loading, ResourceCancelModal, Tabbed, YamlEditor
   },
 
+  provide() {
+    const values = this.chartValues?.policy ? this.chartValues.policy : this.chartValues || {};
+
+    const resourceKind = values?.kind;
+    const schemaType = resourceKind === KUBEWARDEN_KIND.ADMISSION_POLICY ? KUBEWARDEN.ADMISSION_POLICY : KUBEWARDEN.CLUSTER_ADMISSION_POLICY;
+
+    return { chartType: schemaType };
+  },
+
   async fetch() {
     if ( isEmpty(this.chartValues.questions) && !!this.chartValues?.policy?.spec?.settings ) {
       try {
diff --git a/pkg/kubewarden/config/kubewarden.ts b/pkg/kubewarden/config/kubewarden.ts
index 227f750b..5e7e90f8 100644
--- a/pkg/kubewarden/config/kubewarden.ts
+++ b/pkg/kubewarden/config/kubewarden.ts
@@ -1,6 +1,6 @@
 import { rootKubewardenRoute } from '../utils/custom-routing';
 import {
-  KUBEWARDEN, KUBEWARDEN_DASHBOARD, POLICY_REPORTER_PRODUCT, KUBEWARDEN_PRODUCT_NAME, WG_POLICY_K8S
+  KUBEWARDEN, KUBEWARDEN_DASHBOARD, POLICY_REPORTER_PRODUCT, KUBEWARDEN_PRODUCT_NAME, WG_POLICY_K8S, POLICY_SCHEMA
 } from '../types';
 import { POLICY_SERVER_HEADERS, POLICY_HEADERS } from './table-headers';
 
@@ -8,15 +8,19 @@ export function init($plugin: any, store: any) {
   const {
     product,
     basicType,
+    configureType,
+    mapType,
     weightType,
     virtualType,
+    spoofedType,
     headers
   } = $plugin.DSL(store, $plugin.name);
 
   const {
     POLICY_SERVER,
     ADMISSION_POLICY,
-    CLUSTER_ADMISSION_POLICY
+    CLUSTER_ADMISSION_POLICY,
+    SPOOFED
   } = KUBEWARDEN;
 
   product({
@@ -43,26 +47,37 @@ export function init($plugin: any, store: any) {
     ifHaveType: WG_POLICY_K8S.POLICY_REPORT.TYPE,
     name:       POLICY_REPORTER_PRODUCT,
     namespaced: false,
-    weight:     95,
+    weight:     94,
     route:      {
       name:   `c-cluster-${ KUBEWARDEN_PRODUCT_NAME }-${ POLICY_REPORTER_PRODUCT }`,
       params: { product: KUBEWARDEN_PRODUCT_NAME }
     }
   });
 
+  spoofedType({
+    label:             'Policies',
+    type:              SPOOFED.POLICY,
+    collectionMethods: ['POST'],
+    schemas:           [POLICY_SCHEMA],
+  });
+
   basicType([
     KUBEWARDEN_DASHBOARD,
     POLICY_REPORTER_PRODUCT,
+    SPOOFED.POLICY,
     POLICY_SERVER,
     ADMISSION_POLICY,
     CLUSTER_ADMISSION_POLICY
   ]);
 
-  weightType(POLICY_SERVER, 98, true);
-  weightType(CLUSTER_ADMISSION_POLICY, 97, true);
-  weightType(ADMISSION_POLICY, 96, true);
+  weightType(SPOOFED.POLICY, 98, true);
+  weightType(POLICY_SERVER, 97, true);
+  weightType(CLUSTER_ADMISSION_POLICY, 96, true);
+  weightType(ADMISSION_POLICY, 95, true);
 
   headers(POLICY_SERVER, POLICY_SERVER_HEADERS);
   headers(ADMISSION_POLICY, POLICY_HEADERS);
   headers(CLUSTER_ADMISSION_POLICY, POLICY_HEADERS);
+
+  mapType(SPOOFED.POLICY, 'Policy');
 }
diff --git a/pkg/kubewarden/detail/policies.kubewarden.io.policy.vue b/pkg/kubewarden/detail/policies.kubewarden.io.policy.vue
new file mode 100644
index 00000000..d9070277
--- /dev/null
+++ b/pkg/kubewarden/detail/policies.kubewarden.io.policy.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    KUBEWARDEN.SPOOFED.POLICY detail test
+  </div>
+</template>
\ No newline at end of file
diff --git a/pkg/kubewarden/edit/policies.kubewarden.io.policy.vue b/pkg/kubewarden/edit/policies.kubewarden.io.policy.vue
new file mode 100644
index 00000000..26ff0121
--- /dev/null
+++ b/pkg/kubewarden/edit/policies.kubewarden.io.policy.vue
@@ -0,0 +1,71 @@
+<script>
+import jsyaml from 'js-yaml';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+import { removeEmptyAttrs } from '../utils/object';
+import { handleGrowl } from '../utils/handle-growl';
+
+import Create from '../components/Policies/Create';
+
+export default {
+  name: 'AdmissionPolicy',
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    realMode: {
+      type:    String,
+      default: _EDIT
+    }
+  },
+
+  components: { Create },
+
+  mixins: [CreateEditView],
+
+  provide() {
+    return { realMode: this.realMode };
+  },
+
+  computed: {
+    isCreate() {
+      return this.realMode === _CREATE;
+    },
+  },
+
+  methods: {
+    async finish(event) {
+      try {
+        removeEmptyAttrs(this.value);
+
+        console.log('## finish event', event);
+
+        await this.save(event);
+      } catch (e) {
+        handleGrowl({ error: e, store: this.$store });
+      }
+    },
+    // this updates the "value" obj for CAP's
+    // with the updated values that came from the "edit YAML" scenario
+    updateYamlValuesFromEdit(val) {
+      const parsed = jsyaml.load(val);
+
+      removeEmptyAttrs(parsed);
+      Object.assign(this.value, parsed);
+    }
+  }
+};
+</script>
+
+<template>
+  <Create :value="value" :mode="mode" />
+</template>
diff --git a/pkg/kubewarden/list/policies.kubewarden.io.policy.vue b/pkg/kubewarden/list/policies.kubewarden.io.policy.vue
new file mode 100644
index 00000000..2225cf23
--- /dev/null
+++ b/pkg/kubewarden/list/policies.kubewarden.io.policy.vue
@@ -0,0 +1,125 @@
+<script>
+import { CATALOG, UI_PLUGIN } from '@shell/config/types';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
+
+import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+
+import { KUBEWARDEN, KUBEWARDEN_APPS, KUBEWARDEN_CHARTS, KUBEWARDEN_PRODUCT_NAME } from '../types';
+import { RELATED_HEADERS } from '../config/table-headers';
+import { kwDefaultsHelmChartSettings } from '../modules/policies';
+
+import DefaultsBanner from '../components/DefaultsBanner';
+
+export default {
+  components: {
+    Banner, Loading, DefaultsBanner, ResourceTable
+  },
+
+  async fetch() {
+    // needed to populate banner for edit settings compatibility for kubewarden-default CAP's
+    if ( this.$store.getters['cluster/canList'](CATALOG.APP) ) {
+      this.$store.dispatch('cluster/findAll', { type: CATALOG.APP });
+    }
+
+    if ( this.$store.getters['cluster/canList'](UI_PLUGIN) ) {
+      this.$store.dispatch('cluster/findAll', { type: UI_PLUGIN });
+    }
+
+    await this.$store.dispatch('cluster/findAll', { type: KUBEWARDEN.CLUSTER_ADMISSION_POLICY });
+    await this.$store.dispatch('cluster/findAll', { type: KUBEWARDEN.ADMISSION_POLICY });
+  },
+
+  data() {
+    return { RELATED_HEADERS };
+  },
+
+  computed: {
+    rows() {
+      const out = [
+        this.$store.getters['cluster/all'](KUBEWARDEN.CLUSTER_ADMISSION_POLICY),
+        this.$store.getters['cluster/all'](KUBEWARDEN.ADMISSION_POLICY)
+      ];
+
+      return out.flat();
+    },
+
+    allApps() {
+      return this.$store.getters['cluster/all'](CATALOG.APP);
+    },
+
+    groupPreference() {
+      const out = this._group === 'namespace' ? 'kind' : null;
+
+      return out;
+    },
+
+    kubewardenDefaultsApp() {
+      if ( this.allApps ) {
+        return this.allApps?.find((a) => {
+          return (
+            a.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME] === KUBEWARDEN_APPS.RANCHER_DEFAULTS ||
+            a.spec?.chart?.metadata?.name === KUBEWARDEN_CHARTS.DEFAULTS
+          );
+        });
+      }
+
+      return null;
+    },
+
+    kubewardenExtension() {
+      const extensionsInstalled = this.$store.getters['uiplugins/plugins'] || [];
+
+      return extensionsInstalled?.find(ext => ext?.id?.includes(KUBEWARDEN_PRODUCT_NAME));
+    },
+
+    kwDefaultsHelmChartSettingsCompatible() {
+      const kwDefaultsVersion = this.kubewardenDefaultsApp?.spec?.chart?.metadata?.version;
+      const uiPluginVersion = this.kubewardenExtension?.version;
+
+      if ( kwDefaultsVersion && uiPluginVersion) {
+        return kwDefaultsHelmChartSettings(kwDefaultsVersion, uiPluginVersion);
+      }
+
+      return true;
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Banner
+      data-testid="kw-cap-list-banner"
+      class="type-banner mb-20 mt-0"
+      color="info"
+      :label="t('kubewarden.clusterAdmissionPolicy.description')"
+    />
+    <DefaultsBanner
+      v-if="!kwDefaultsHelmChartSettingsCompatible"
+      mode="upgrade"
+    />
+
+    <ResourceTable
+      :rows="rows || []"
+      :headers="RELATED_HEADERS"
+      :groupable="true"
+      :group-by="groupPreference"
+      :table-actions="true"
+      data-testid="kw-ps-detail-related-policies-list"
+    >
+      <template #col:operation="{ row }">
+        <td>
+          <BadgeState
+            :data-testid="`kw-ps-detail-${ row.id }-state`"
+            :label="row.operation"
+            :color="color(row.operation)"
+          />
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pkg/kubewarden/models/policies.kubewarden.io.policy.js b/pkg/kubewarden/models/policies.kubewarden.io.policy.js
new file mode 100644
index 00000000..b1d88744
--- /dev/null
+++ b/pkg/kubewarden/models/policies.kubewarden.io.policy.js
@@ -0,0 +1,3 @@
+import PolicyModel from '../plugins/policy-class';
+
+export default class Policy extends PolicyModel {}
\ No newline at end of file
diff --git a/pkg/kubewarden/types/kubewarden.ts b/pkg/kubewarden/types/kubewarden.ts
index 8dbebd22..e9bf2d92 100644
--- a/pkg/kubewarden/types/kubewarden.ts
+++ b/pkg/kubewarden/types/kubewarden.ts
@@ -25,7 +25,14 @@ export const KUBEWARDEN_LABELS = { POLICY_SERVER: 'kubewarden/policy-server' };
 export const KUBEWARDEN = {
   ADMISSION_POLICY:         'policies.kubewarden.io.admissionpolicy',
   CLUSTER_ADMISSION_POLICY: 'policies.kubewarden.io.clusteradmissionpolicy',
-  POLICY_SERVER:            'policies.kubewarden.io.policyserver'
+  POLICY_SERVER:            'policies.kubewarden.io.policyserver',
+  SPOOFED:                  { POLICY: 'policies.kubewarden.io.policy' }
+};
+
+export const KUBEWARDEN_KIND = {
+  ADMISSION_POLICY:         'AdmissionPolicy',
+  CLUSTER_ADMISSION_POLICY: 'ClusterAdmissionPolicy',
+  POLICY_SERVER:            'PolicyServer'
 };
 
 /* eslint-disable no-unused-vars */
diff --git a/pkg/kubewarden/types/policy.ts b/pkg/kubewarden/types/policy.ts
index 6507e174..05d6ec78 100644
--- a/pkg/kubewarden/types/policy.ts
+++ b/pkg/kubewarden/types/policy.ts
@@ -1,5 +1,5 @@
 import { V1LabelSelectorRequirement } from '@kubernetes/client-node';
-import { Policy } from './kubewarden';
+import { Policy, KUBEWARDEN } from './kubewarden';
 
 export const DEFAULT_POLICY: Policy = {
   apiVersion: '',
@@ -103,3 +103,87 @@ export const YAML_OPTIONS = [
     value:    VALUES_STATE.YAML,
   }
 ];
+
+export const POLICY_SCHEMA = {
+  id:              KUBEWARDEN.SPOOFED.POLICY,
+  type:            'schema',
+  pluralName:      'policies.kubewarden.io.policies',
+  resourceMethods: [
+    'GET',
+    'DELETE',
+    'PUT',
+    'PATCH'
+  ],
+  _resourceFields:        null,
+  requiresResourceFields: true,
+  collectionMethods:      [
+    'GET',
+    'POST'
+  ],
+  attributes: {
+    columns: [
+      {
+        name:  'Policy Server',
+        field: '.spec.policyServer',
+        type:  'string'
+      },
+      {
+        name:  'Mutating',
+        field: '.spec.mutating',
+        type:  'boolean'
+      },
+      {
+        name:  'BackgroundAudit',
+        field: '.spec.backgroundAudit',
+        type:  'boolean'
+      },
+      {
+        name:  'Mode',
+        field: '.spec.mode',
+        type:  'string'
+      },
+      {
+        name:  'Observed mode',
+        field: '.status.mode',
+        type:  'string'
+      },
+      {
+        name:  'Status',
+        field: '.status.policyStatus',
+        type:  'string'
+      },
+      {
+        name:  'Age',
+        field: '.metadata.creationTimestamp',
+        type:  'date'
+      },
+      {
+        name:  'Severity',
+        field: ".metadata.annotations['io\\.kubewarden\\.policy\\.severity']",
+        type:  'string'
+      },
+      {
+        name:  'Category',
+        field: ".metadata.annotations['io\\.kubewarden\\.policy\\.category']",
+        type:  'string'
+      }
+    ],
+    group:      'policies.kubewarden.io',
+    kind:       'Policy',
+    namespaced: false,
+    resource:   'policies',
+    verbs:      [
+      'delete',
+      'deletecollection',
+      'get',
+      'list',
+      'patch',
+      'create',
+      'update',
+      'watch'
+    ],
+    version: 'v1'
+  },
+  _id:    KUBEWARDEN.SPOOFED.POLICY,
+  _group: 'policies.kubewarden.io'
+};