diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c27eacd190ef7ddccb9a91281d72cd26f954692
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rule_form.vue
@@ -0,0 +1,177 @@
+<script>
+import { GlAlert, GlButton, GlFormGroup, GlForm, GlFormInput, GlFormSelect } from '@gitlab/ui';
+import createPackagesProtectionRuleMutation from '~/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql';
+import { s__, __ } from '~/locale';
+
+const PACKAGES_PROTECTION_RULES_SAVED_SUCCESS_MESSAGE = s__('PackageRegistry|Rule saved.');
+const PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE = s__(
+  'PackageRegistry|Something went wrong while saving the package protection rule.',
+);
+
+const GRAPHQL_ACCESS_LEVEL_VALUE_MAINTAINER = 'MAINTAINER';
+const GRAPHQL_ACCESS_LEVEL_VALUE_DEVELOPER = 'DEVELOPER';
+const GRAPHQL_ACCESS_LEVEL_VALUE_OWNER = 'OWNER';
+
+export default {
+  components: {
+    GlButton,
+    GlFormInput,
+    GlFormSelect,
+    GlFormGroup,
+    GlAlert,
+    GlForm,
+  },
+  inject: ['projectPath'],
+  i18n: {
+    PACKAGES_PROTECTION_RULES_SAVED_SUCCESS_MESSAGE,
+    PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE,
+  },
+  data() {
+    return {
+      packageProtectionRuleFormData: {
+        packageNamePattern: '',
+        packageType: 'NPM',
+        pushProtectedUpToAccessLevel: GRAPHQL_ACCESS_LEVEL_VALUE_DEVELOPER,
+      },
+      updateInProgress: false,
+      alertErrorMessage: '',
+    };
+  },
+  computed: {
+    showLoadingIcon() {
+      return this.updateInProgress;
+    },
+    isEmptyPackageName() {
+      return !this.packageProtectionRuleFormData.packageNamePattern;
+    },
+    isSubmitButtonDisabled() {
+      return this.isEmptyPackageName || this.showLoadingIcon;
+    },
+    isFieldDisabled() {
+      return this.showLoadingIcon;
+    },
+    createPackagesProtectionRuleMutationInput() {
+      return {
+        projectPath: this.projectPath,
+        packageNamePattern: this.packageProtectionRuleFormData.packageNamePattern,
+        packageType: this.packageProtectionRuleFormData.packageType,
+        pushProtectedUpToAccessLevel: this.packageProtectionRuleFormData
+          .pushProtectedUpToAccessLevel,
+      };
+    },
+    packageTypeOptions() {
+      return [{ value: 'NPM', text: s__('PackageRegistry|Npm') }];
+    },
+    pushProtectedUpToAccessLevelOptions() {
+      return [
+        { value: GRAPHQL_ACCESS_LEVEL_VALUE_DEVELOPER, text: __('Developer') },
+        { value: GRAPHQL_ACCESS_LEVEL_VALUE_MAINTAINER, text: __('Maintainer') },
+        { value: GRAPHQL_ACCESS_LEVEL_VALUE_OWNER, text: __('Owner') },
+      ];
+    },
+  },
+  methods: {
+    submit() {
+      this.clearAlertErrorMessage();
+
+      this.updateInProgress = true;
+      return this.$apollo
+        .mutate({
+          mutation: createPackagesProtectionRuleMutation,
+          variables: {
+            input: this.createPackagesProtectionRuleMutationInput,
+          },
+        })
+        .then(({ data }) => {
+          const [errorMessage] = data?.createPackagesProtectionRule?.errors ?? [];
+          if (errorMessage) {
+            this.alertErrorMessage = errorMessage;
+            return;
+          }
+
+          this.$emit('submit', data.createPackagesProtectionRule.packageProtectionRule);
+        })
+        .catch(() => {
+          this.alertErrorMessage = PACKAGES_PROTECTION_RULES_SAVED_ERROR_MESSAGE;
+        })
+        .finally(() => {
+          this.updateInProgress = false;
+        });
+    },
+    clearAlertErrorMessage() {
+      this.alertErrorMessage = null;
+    },
+    cancelForm() {
+      this.clearAlertErrorMessage();
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-new-card-add-form gl-m-3">
+    <gl-form @submit.prevent="submit" @reset="cancelForm">
+      <gl-alert
+        v-if="alertErrorMessage"
+        class="gl-mb-5"
+        variant="danger"
+        @dismiss="clearAlertErrorMessage"
+      >
+        {{ alertErrorMessage }}
+      </gl-alert>
+
+      <gl-form-group
+        :label="s__('PackageRegistry|Package name pattern')"
+        label-for="input-package-name-pattern"
+      >
+        <gl-form-input
+          id="input-package-name-pattern"
+          v-model.trim="packageProtectionRuleFormData.packageNamePattern"
+          type="text"
+          required
+          :disabled="isFieldDisabled"
+        />
+      </gl-form-group>
+
+      <gl-form-group
+        :label="s__('PackageRegistry|Package type')"
+        label-for="input-package-type"
+        :disabled="isFieldDisabled"
+      >
+        <gl-form-select
+          id="input-package-type"
+          v-model="packageProtectionRuleFormData.packageType"
+          :disabled="isFieldDisabled"
+          :options="packageTypeOptions"
+          required
+        />
+      </gl-form-group>
+
+      <gl-form-group
+        :label="s__('PackageRegistry|Push protected up to access level')"
+        label-for="input-push-protected-up-to-access-level"
+        :disabled="isFieldDisabled"
+      >
+        <gl-form-select
+          id="input-push-protected-up-to-access-level"
+          v-model="packageProtectionRuleFormData.pushProtectedUpToAccessLevel"
+          :options="pushProtectedUpToAccessLevelOptions"
+          :disabled="isFieldDisabled"
+          required
+        />
+      </gl-form-group>
+
+      <div class="gl-display-flex gl-justify-content-start">
+        <gl-button
+          variant="confirm"
+          type="submit"
+          :disabled="isSubmitButtonDisabled"
+          :loading="showLoadingIcon"
+          >{{ __('Protect') }}</gl-button
+        >
+        <gl-button class="gl-ml-3" type="reset">{{ __('Cancel') }}</gl-button>
+      </div>
+    </gl-form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
index d917777880332d37a91b749c0f116b389e2b8d45..3391524a25d9bdc426147d1830a148d978c50cac 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/packages_protection_rules.vue
@@ -1,7 +1,8 @@
 <script>
-import { GlCard, GlTable, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlCard, GlTable, GlLoadingIcon } from '@gitlab/ui';
 import packagesProtectionRuleQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql';
 import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
+import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue';
 import { s__ } from '~/locale';
 
 const PAGINATION_DEFAULT_PER_PAGE = 10;
@@ -9,9 +10,11 @@ const PAGINATION_DEFAULT_PER_PAGE = 10;
 export default {
   components: {
     SettingsBlock,
+    GlButton,
     GlCard,
     GlTable,
     GlLoadingIcon,
+    PackagesProtectionRuleForm,
   },
   inject: ['projectPath'],
   i18n: {
@@ -24,6 +27,7 @@ export default {
     return {
       fetchSettingsError: false,
       packageProtectionRules: [],
+      protectionRuleFormVisibility: false,
     };
   },
   computed: {
@@ -43,6 +47,9 @@ export default {
     isLoadingPackageProtectionRules() {
       return this.$apollo.queries.packageProtectionRules.loading;
     },
+    isAddProtectionRuleButtonDisabled() {
+      return this.protectionRuleFormVisibility;
+    },
   },
   apollo: {
     packageProtectionRules: {
@@ -72,6 +79,18 @@ export default {
       label: s__('PackageRegistry|Push protected up to access level'),
     },
   ],
+  methods: {
+    showProtectionRuleForm() {
+      this.protectionRuleFormVisibility = true;
+    },
+    hideProtectionRuleForm() {
+      this.protectionRuleFormVisibility = false;
+    },
+    refetchProtectionRules() {
+      this.$apollo.queries.packageProtectionRules.refetch();
+      this.hideProtectionRuleForm();
+    },
+  },
 };
 </script>
 
@@ -92,16 +111,30 @@ export default {
         <template #header>
           <div class="gl-new-card-title-wrapper gl-justify-content-space-between">
             <h3 class="gl-new-card-title">{{ $options.i18n.settingBlockTitle }}</h3>
+            <div class="gl-new-card-actions">
+              <gl-button
+                size="small"
+                :disabled="isAddProtectionRuleButtonDisabled"
+                @click="showProtectionRuleForm"
+              >
+                {{ s__('PackageRegistry|Add package protection rule') }}
+              </gl-button>
+            </div>
           </div>
         </template>
 
         <template #default>
+          <packages-protection-rule-form
+            v-if="protectionRuleFormVisibility"
+            @cancel="hideProtectionRuleForm"
+            @submit="refetchProtectionRules"
+          />
+
           <gl-table
             :items="tableItems"
             :fields="$options.fields"
             show-empty
             stacked="md"
-            class="mb-3"
             :busy="isLoadingPackageProtectionRules"
           >
             <template #table-busy>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..923b9d2e4b26dc16d3ac01c157dadafb2c487ec3
--- /dev/null
+++ b/app/assets/javascripts/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql
@@ -0,0 +1,11 @@
+mutation createPackagesProtectionRule($input: CreatePackagesProtectionRuleInput!) {
+  createPackagesProtectionRule(input: $input) {
+    packageProtectionRule {
+      id
+      packageNamePattern
+      packageType
+      pushProtectedUpToAccessLevel
+    }
+    errors
+  }
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 79c9e718590d7497650e59f9c4b03bea9fb95b44..49395a7188ce34101f45b0e3d922b4be8b4f39e8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34637,6 +34637,9 @@ msgstr ""
 msgid "PackageRegistry|Add composer registry"
 msgstr ""
 
+msgid "PackageRegistry|Add package protection rule"
+msgstr ""
+
 msgid "PackageRegistry|Additional metadata"
 msgstr ""
 
@@ -34892,6 +34895,9 @@ msgstr ""
 msgid "PackageRegistry|Maven XML"
 msgstr ""
 
+msgid "PackageRegistry|Npm"
+msgstr ""
+
 msgid "PackageRegistry|NuGet"
 msgstr ""
 
@@ -34999,6 +35005,9 @@ msgstr ""
 msgid "PackageRegistry|RubyGems"
 msgstr ""
 
+msgid "PackageRegistry|Rule saved."
+msgstr ""
+
 msgid "PackageRegistry|Show Composer commands"
 msgstr ""
 
@@ -35041,6 +35050,9 @@ msgstr ""
 msgid "PackageRegistry|Something went wrong while fetching the package metadata."
 msgstr ""
 
+msgid "PackageRegistry|Something went wrong while saving the package protection rule."
+msgstr ""
+
 msgid "PackageRegistry|Sorry, your filter produced no results"
 msgstr ""
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rule_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rule_form_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..7697b7f6bd789204d7aade9657894252f7d86d21
--- /dev/null
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rule_form_spec.js
@@ -0,0 +1,227 @@
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import { GlForm } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue';
+import createPackagesProtectionRuleMutation from '~/packages_and_registries/settings/project/graphql/mutations/create_packages_protection_rule.mutation.graphql';
+import {
+  createPackagesProtectionRuleMutationPayload,
+  createPackagesProtectionRuleMutationInput,
+  createPackagesProtectionRuleMutationPayloadErrors,
+} from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Packages Protection Rule Form', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const defaultProvidedValues = {
+    projectPath: 'path',
+  };
+
+  const findPackageNamePatternInput = () =>
+    wrapper.findByRole('textbox', { name: /package name pattern/i });
+  const findPackageTypeSelect = () => wrapper.findByRole('combobox', { name: /package type/i });
+  const findPushProtectedUpToAccessLevelSelect = () =>
+    wrapper.findByRole('combobox', { name: /push protected up to access level/i });
+  const findSubmitButton = () => wrapper.findByRole('button', { name: /protect/i });
+  const findForm = () => wrapper.findComponent(GlForm);
+
+  const mountComponent = ({ data, config, provide = defaultProvidedValues } = {}) => {
+    wrapper = mountExtended(PackagesProtectionRuleForm, {
+      provide,
+      data() {
+        return { ...data };
+      },
+      ...config,
+    });
+  };
+
+  const mountComponentWithApollo = ({ provide = defaultProvidedValues, mutationResolver } = {}) => {
+    const requestHandlers = [[createPackagesProtectionRuleMutation, mutationResolver]];
+
+    fakeApollo = createMockApollo(requestHandlers);
+
+    mountComponent({
+      provide,
+      config: {
+        apolloProvider: fakeApollo,
+      },
+    });
+  };
+
+  describe('form fields', () => {
+    describe('form field "packageType"', () => {
+      it('contains only the options for npm', () => {
+        mountComponent();
+
+        expect(findPackageTypeSelect().exists()).toBe(true);
+        const packageTypeSelectOptions = findPackageTypeSelect()
+          .findAll('option')
+          .wrappers.map((option) => option.element.value);
+        expect(packageTypeSelectOptions).toEqual(['NPM']);
+      });
+    });
+
+    describe('form field "pushProtectedUpToAccessLevelSelect"', () => {
+      it('contains only the options for maintainer and owner', () => {
+        mountComponent();
+
+        expect(findPushProtectedUpToAccessLevelSelect().exists()).toBe(true);
+        const pushProtectedUpToAccessLevelSelectOptions = findPushProtectedUpToAccessLevelSelect()
+          .findAll('option')
+          .wrappers.map((option) => option.element.value);
+        expect(pushProtectedUpToAccessLevelSelectOptions).toEqual([
+          'DEVELOPER',
+          'MAINTAINER',
+          'OWNER',
+        ]);
+      });
+    });
+
+    describe('when graphql mutation is in progress', () => {
+      beforeEach(() => {
+        mountComponentWithApollo();
+
+        findForm().trigger('submit');
+      });
+
+      it('disables all form fields', () => {
+        expect(findSubmitButton().props('disabled')).toBe(true);
+        expect(findPackageNamePatternInput().attributes('disabled')).toBe('disabled');
+        expect(findPackageTypeSelect().attributes('disabled')).toBe('disabled');
+        expect(findPushProtectedUpToAccessLevelSelect().attributes('disabled')).toBe('disabled');
+      });
+
+      it('displays a loading spinner', () => {
+        expect(findSubmitButton().props('loading')).toBe(true);
+      });
+    });
+  });
+
+  describe('form actions', () => {
+    describe('button "Protect"', () => {
+      it.each`
+        packageNamePattern                                              | submitButtonDisabled
+        ${''}                                                           | ${true}
+        ${' '}                                                          | ${true}
+        ${createPackagesProtectionRuleMutationInput.packageNamePattern} | ${false}
+      `(
+        'when packageNamePattern is "$packageNamePattern" then the disabled state of the submit button is $submitButtonDisabled',
+        async ({ packageNamePattern, submitButtonDisabled }) => {
+          mountComponent();
+
+          expect(findSubmitButton().props('disabled')).toBe(true);
+
+          await findPackageNamePatternInput().setValue(packageNamePattern);
+
+          expect(findSubmitButton().props('disabled')).toBe(submitButtonDisabled);
+        },
+      );
+    });
+  });
+
+  describe('form events', () => {
+    describe('reset', () => {
+      const mutationResolver = jest
+        .fn()
+        .mockResolvedValue(createPackagesProtectionRuleMutationPayload());
+
+      beforeEach(() => {
+        mountComponentWithApollo({ mutationResolver });
+
+        findForm().trigger('reset');
+      });
+
+      it('emits custom event "cancel"', () => {
+        expect(mutationResolver).not.toHaveBeenCalled();
+
+        expect(wrapper.emitted('cancel')).toBeDefined();
+        expect(wrapper.emitted('cancel')[0]).toEqual([]);
+      });
+
+      it('does not dispatch apollo mutation request', () => {
+        expect(mutationResolver).not.toHaveBeenCalled();
+      });
+
+      it('does not emit custom event "submit"', () => {
+        expect(wrapper.emitted()).not.toHaveProperty('submit');
+      });
+    });
+
+    describe('submit', () => {
+      const findAlert = () => wrapper.findByRole('alert');
+
+      const submitForm = () => {
+        findForm().trigger('submit');
+        return waitForPromises();
+      };
+
+      it('dispatches correct apollo mutation', async () => {
+        const mutationResolver = jest
+          .fn()
+          .mockResolvedValue(createPackagesProtectionRuleMutationPayload());
+
+        mountComponentWithApollo({ mutationResolver });
+
+        await findPackageNamePatternInput().setValue(
+          createPackagesProtectionRuleMutationInput.packageNamePattern,
+        );
+
+        await submitForm();
+
+        expect(mutationResolver).toHaveBeenCalledWith({
+          input: { projectPath: 'path', ...createPackagesProtectionRuleMutationInput },
+        });
+      });
+
+      it('emits event "submit" when apollo mutation successful', async () => {
+        const mutationResolver = jest
+          .fn()
+          .mockResolvedValue(createPackagesProtectionRuleMutationPayload());
+
+        mountComponentWithApollo({ mutationResolver });
+
+        await submitForm();
+
+        expect(wrapper.emitted('submit')).toBeDefined();
+        const expectedEventSubmitPayload = createPackagesProtectionRuleMutationPayload().data
+          .createPackagesProtectionRule.packageProtectionRule;
+        expect(wrapper.emitted('submit')[0]).toEqual([expectedEventSubmitPayload]);
+
+        expect(wrapper.emitted()).not.toHaveProperty('cancel');
+      });
+
+      it('shows error alert with general message when apollo mutation request responds with errors', async () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockResolvedValue(
+            createPackagesProtectionRuleMutationPayload({
+              errors: createPackagesProtectionRuleMutationPayloadErrors,
+            }),
+          ),
+        });
+
+        await submitForm();
+
+        expect(findAlert().isVisible()).toBe(true);
+        expect(findAlert().text()).toBe(createPackagesProtectionRuleMutationPayloadErrors[0]);
+      });
+
+      it('shows error alert with general message when apollo mutation request fails', async () => {
+        mountComponentWithApollo({
+          mutationResolver: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+        });
+
+        await submitForm();
+
+        expect(findAlert().isVisible()).toBe(true);
+        expect(findAlert().text()).toMatch(
+          /something went wrong while saving the package protection rule/i,
+        );
+      });
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
index bdb3db7a1b9b11919341e134079a58aeee232599..26ace764a72fcddc11c81de47086ce2679fa271b 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_protection_rules_spec.js
@@ -1,11 +1,12 @@
-import { GlTable, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlTable, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PackagesProtectionRules from '~/packages_and_registries/settings/project/components/packages_protection_rules.vue';
-import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
+import PackagesProtectionRuleForm from '~/packages_and_registries/settings/project/components/packages_protection_rule_form.vue';
+import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
 import packagesProtectionRuleQuery from '~/packages_and_registries/settings/project/graphql/queries/get_packages_protection_rules.query.graphql';
 
 import { packagesProtectionRuleQueryPayload, packagesProtectionRulesData } from '../mock_data';
@@ -22,6 +23,8 @@ describe('Packages protection rules project settings', () => {
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
   const findTable = () => wrapper.findComponent(GlTable);
   const findTableLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findProtectionRuleForm = () => wrapper.findComponent(PackagesProtectionRuleForm);
+  const findAddProtectionRuleButton = () => wrapper.findComponent(GlButton);
   const findTableRows = () => findTable().find('tbody').findAll('tr');
 
   const mountComponent = (mountFn = shallowMount, provide = defaultProvidedValues, config) => {
@@ -94,4 +97,73 @@ describe('Packages protection rules project settings', () => {
       expect(findTable().exists()).toBe(true);
     });
   });
+
+  it('does not initially render package protection form', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findAddProtectionRuleButton().exists()).toBe(true);
+    expect(findProtectionRuleForm().exists()).toBe(false);
+  });
+
+  describe('button "add protection rule"', () => {
+    it('button exists', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findAddProtectionRuleButton().exists()).toBe(true);
+    });
+
+    describe('when button is clicked', () => {
+      beforeEach(async () => {
+        createComponent({ mountFn: mount });
+
+        await waitForPromises();
+
+        await findAddProtectionRuleButton().trigger('click');
+      });
+
+      it('renders package protection form', () => {
+        expect(findProtectionRuleForm().exists()).toBe(true);
+      });
+
+      it('disables the button "add protection rule"', () => {
+        expect(findAddProtectionRuleButton().attributes('disabled')).toBeDefined();
+      });
+    });
+  });
+
+  describe('form "add protection rule"', () => {
+    let resolver;
+
+    beforeEach(async () => {
+      resolver = jest.fn().mockResolvedValue(packagesProtectionRuleQueryPayload());
+
+      createComponent({ resolver, mountFn: mount });
+
+      await waitForPromises();
+
+      await findAddProtectionRuleButton().trigger('click');
+    });
+
+    it("handles event 'submit'", async () => {
+      await findProtectionRuleForm().vm.$emit('submit');
+
+      expect(resolver).toHaveBeenCalledTimes(2);
+
+      expect(findProtectionRuleForm().exists()).toBe(false);
+      expect(findAddProtectionRuleButton().attributes('disabled')).not.toBeDefined();
+    });
+
+    it("handles event 'cancel'", async () => {
+      await findProtectionRuleForm().vm.$emit('cancel');
+
+      expect(resolver).toHaveBeenCalledTimes(1);
+
+      expect(findProtectionRuleForm().exists()).toBe(false);
+      expect(findAddProtectionRuleButton().attributes()).not.toHaveProperty('disabled');
+    });
+  });
 });
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index 5c546289b145e22ee4c9dfa504a68b655b0918ed..a8133c0ace6a1a4b1f31edb869d412727d1ceb71 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -112,3 +112,25 @@ export const packagesProtectionRuleQueryPayload = ({ override, errors = [] } = {
     },
   },
 });
+
+export const createPackagesProtectionRuleMutationPayload = ({ override, errors = [] } = {}) => ({
+  data: {
+    createPackagesProtectionRule: {
+      packageProtectionRule: {
+        ...packagesProtectionRulesData[0],
+        ...override,
+      },
+      errors,
+    },
+  },
+});
+
+export const createPackagesProtectionRuleMutationInput = {
+  packageNamePattern: `@flight/flight-developer-14-*`,
+  packageType: 'NPM',
+  pushProtectedUpToAccessLevel: 'DEVELOPER',
+};
+
+export const createPackagesProtectionRuleMutationPayloadErrors = [
+  'Package name pattern has already been taken',
+];