Merge branch '381683-delete-excluded-namespace' into 'master'

Allow deleting excluded namespaces

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121561



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: Phil Hughes <me@iamphill.com>
Approved-by: Sheldon Led <sheldonled@gitlab.com>
Reviewed-by: Phil Hughes <me@iamphill.com>
Reviewed-by: Ammar Alakkad <aalakkad@gitlab.com>
Reviewed-by: Sheldon Led <sheldonled@gitlab.com>
Co-authored-by: Ammar Alakkad <am.alakkad@gmail.com>

ee/app/assets/javascripts/pages/admin/namespace_limits/components/excluded_namespaces.vue

 <script>
-import { GlAlert, GlTable, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlTable, GlLoadingIcon, GlButton, GlModal } from '@gitlab/ui';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import {
   LIST_EXCLUSIONS_ENDPOINT,
+  DELETE_EXCLUSION_ENDPOINT,
   exclusionListFetchError,
+  exclusionDeleteError,
   excludedNamespacesDescription,
+  deleteModalBody,
+  deleteModalTitle,
+  deleteModalProps,
 } from '../constants';
 import ExcludedNamespacesForm from './excluded_namespaces_form.vue';
 
 export default {
   components: {
     GlAlert,
+    GlButton,
     GlTable,
+    GlModal,
     GlLoadingIcon,
     ExcludedNamespacesForm,
   },
@@ -28,14 +35,14 @@ export default {
         'operations',
       ],
       fetchError: null,
+      namespaceIdToBeConfirmed: null,
     };
   },
   created() {
     this.fetchExclusions();
   },
-  i18n: {
-    excludedNamespacesDescription,
-  },
+  i18n: { excludedNamespacesDescription, deleteModalTitle, deleteModalBody },
+  deleteModalProps,
   methods: {
     async fetchExclusions() {
       const endpoint = Api.buildUrl(LIST_EXCLUSIONS_ENDPOINT);
@@ -52,6 +59,26 @@ export default {
         this.loading = false;
       }
     },
+    openConfirmationModal(namespaceId) {
+      this.namespaceIdToBeConfirmed = namespaceId;
+      this.$refs.modal.show();
+    },
+    handleModalConfirmation() {
+      this.deleteExclusion(this.namespaceIdToBeConfirmed);
+      // reset namespaceIdToBeConfirmed to be ready for next usage
+      this.namespaceIdToBeConfirmed = null;
+    },
+    async deleteExclusion(namespaceId) {
+      const endpoint = Api.buildUrl(DELETE_EXCLUSION_ENDPOINT).replace(':id', namespaceId);
+
+      try {
+        await axios.delete(endpoint);
+        this.fetchExclusions();
+      } catch (error) {
+        const errorMessage = error.response?.data?.message || error.message;
+        this.fetchError = sprintf(exclusionDeleteError, { errorMessage });
+      }
+    },
   },
 };
 </script>
@@ -71,7 +98,25 @@ export default {
           <gl-loading-icon />
         </div>
       </template>
+      <template #cell(operations)="{ item }">
+        <gl-button
+          category="primary"
+          variant="danger"
+          @click="openConfirmationModal(item.namespace_id)"
+          >{{ __('Delete') }}</gl-button
+        >
+      </template>
     </gl-table>
+    <gl-modal
+      ref="modal"
+      modal-id="namespace-exclusion-modal"
+      :title="$options.i18n.deleteModalTitle"
+      :action-primary="$options.deleteModalProps.primaryProps"
+      :action-cancel="$options.deleteModalProps.cancelProps"
+      @primary="handleModalConfirmation"
+    >
+      {{ $options.i18n.deleteModalBody }}
+    </gl-modal>
     <br />
     <excluded-namespaces-form @added="fetchExclusions" />
   </div>

ee/app/assets/javascripts/pages/admin/namespace_limits/constants.js

-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const LIST_EXCLUSIONS_ENDPOINT = '/api/:version/namespaces/storage/limit_exclusions';
+export const DELETE_EXCLUSION_ENDPOINT = '/api/:version/namespaces/:id/storage/limit_exclusion';
 
 export const exclusionListFetchError = s__(
   'NamespaceLimits|There was an error fetching the exclusion list, try refreshing the page.',
@@ -9,3 +10,21 @@ export const exclusionListFetchError = s__(
 export const excludedNamespacesDescription = s__(
   "NamespaceLimits|These namespaces won't receive any notifications nor any degraded functionality while they remain on this list",
 );
+
+export const exclusionDeleteError = s__(
+  'NamespaceLimits|There was an error deleting the namespace: "%{errorMessage}".',
+);
+
+export const deleteModalTitle = s__('NamespaceLimits|Deletion confirmation');
+
+export const deleteModalBody = s__(
+  'NamespaceLimits|Do you confirm the deletion of the selected namespace from the exclusion list?',
+);
+
+export const deleteModalProps = {
+  primaryProps: {
+    text: s__('NamespaceLimits|Confirm deletion'),
+    attributes: { variant: 'danger', category: 'primary' },
+  },
+  cancelProps: { text: __('Cancel') },
+};

ee/spec/frontend/pages/admin/namespace_limits/components/excluded_namespaces_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import { GlAlert, GlTable } from '@gitlab/ui';
+import { GlAlert, GlTable, GlButton, GlModal } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import ExcludedNamespacesForm from 'ee/pages/admin/namespace_limits/components/excluded_namespaces_form.vue';
 import {
   LIST_EXCLUSIONS_ENDPOINT,
+  DELETE_EXCLUSION_ENDPOINT,
   exclusionListFetchError,
 } from 'ee/pages/admin/namespace_limits/constants';
 import ExcludedNamespaces from 'ee/pages/admin/namespace_limits/components/excluded_namespaces.vue';
@@ -16,15 +17,18 @@ describe('ExcludedNamespaces', () => {
   let wrapper;
   let axiosMock;
   const listExclusionsEndpoint = LIST_EXCLUSIONS_ENDPOINT.replace(':version', 'v4');
+  const deleteExclusionEndpoint = DELETE_EXCLUSION_ENDPOINT.replace(':version', 'v4');
 
   const createComponent = ({ mountFn = shallowMount } = {}) => {
     wrapper = mountFn(ExcludedNamespaces);
+    wrapper.vm.$refs.modal.show = jest.fn();
   };
 
   const findForm = () => wrapper.findComponent(ExcludedNamespacesForm);
   const findTable = () => wrapper.findComponent(GlTable);
   const findTableRowCells = (row) => findTable().find('tbody').findAll('tr').at(row).findAll('td');
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findModal = () => wrapper.findComponent(GlModal);
 
   beforeEach(() => {
     window.gon = { api_version: 'v4' };
@@ -58,6 +62,13 @@ describe('ExcludedNamespaces', () => {
   });
 
   describe('exclusion table', () => {
+    it('calls the exclusion list endpoint on component mount', async () => {
+      axiosMock.onGet(listExclusionsEndpoint).replyOnce(HTTP_STATUS_OK, mockData);
+      createComponent();
+      await waitForPromises();
+      expect(axiosMock.history.get.length).toBe(1);
+    });
+
     it('renders an error if there is a problem fetching the list', async () => {
       axiosMock.onGet(listExclusionsEndpoint).replyOnce(HTTP_STATUS_BAD_REQUEST);
       createComponent();
@@ -78,7 +89,33 @@ describe('ExcludedNamespaces', () => {
         expect(cells.at(0).text()).toEqual(item.namespace_name);
         expect(cells.at(1).text()).toEqual(`${item.namespace_id}`);
         expect(cells.at(2).text()).toEqual(item.reason);
+        expect(cells.at(3).findComponent(GlButton).text()).toBe('Delete');
       });
     });
   });
+
+  describe('deleting exclusion', () => {
+    beforeEach(async () => {
+      axiosMock.onGet(listExclusionsEndpoint).replyOnce(HTTP_STATUS_OK, [mockData[0]]);
+      axiosMock.onDelete(deleteExclusionEndpoint).replyOnce(HTTP_STATUS_OK);
+
+      createComponent({ mountFn: mount });
+      await waitForPromises();
+      wrapper.findComponent(GlTable).findComponent(GlButton).trigger('click');
+    });
+
+    it('opens confirmation modal when delete button is clicked', () => {
+      expect(wrapper.vm.$refs.modal.show).toHaveBeenCalled();
+      expect(findModal().props()).toMatchObject({
+        title: 'Deletion confirmation',
+        actionPrimary: { text: 'Confirm deletion' },
+      });
+    });
+
+    it('sends deletion request to the backend when deletion modal is confirmed', async () => {
+      findModal().vm.$emit('primary');
+      await waitForPromises();
+      expect(axiosMock.history.delete.length).toBe(1);
+    });
+  });
 });

locale/gitlab.pot

@@ -29623,9 +29623,18 @@ msgstr ""
 msgid "NamespaceLimits|%{linkStart}%{username}%{linkEnd} changed the limit to %{limit} at %{date}"
 msgstr ""
+msgid "NamespaceLimits|Confirm deletion"
+msgstr ""
+
 msgid "NamespaceLimits|Confirm limits change"
 msgstr ""
+msgid "NamespaceLimits|Deletion confirmation"
+msgstr ""
+
+msgid "NamespaceLimits|Do you confirm the deletion of the selected namespace from the exclusion list?"
+msgstr ""
+
 msgid "NamespaceLimits|Enter a valid number greater or equal to zero."
 msgstr ""
@@ -29650,6 +29659,9 @@ msgstr ""
 msgid "NamespaceLimits|Storage Phased Notification"
 msgstr ""
+msgid "NamespaceLimits|There was an error deleting the namespace: \"%{errorMessage}\"."
+msgstr ""
+
 msgid "NamespaceLimits|There was an error fetching the exclusion list, try refreshing the page."
 msgstr ""