Removed delete iteration option for closed iterations

For iteration cadences, when viewing an iteration report the user can
no longer delete the iteration if that iteration has already been
closed.

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -14,8 +14,7 @@ import { TYPE_ITERATION } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { s__ } from '~/locale';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { Namespace } from '../constants';
+import { Namespace, iterationStates } from '../constants';
 import deleteIteration from '../queries/destroy_iteration.mutation.graphql';
 import query from '../queries/iteration.query.graphql';
 import { getIterationPeriod } from '../utils';
@@ -60,7 +59,6 @@ export default {
       },
     },
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: [
     'fullPath',
     'hasScopedLabelsFeature',
@@ -96,6 +94,9 @@ export default {
     iterationPeriod() {
       return getIterationPeriod(this.iteration);
     },
+    showDelete() {
+      return this.iteration.state !== iterationStates.closed;
+    },
   },
   methods: {
     formatDate(date) {
@@ -165,7 +166,7 @@ export default {
             ><gl-icon name="ellipsis_v" />
           </template>
           <gl-dropdown-item :to="editPage">{{ __('Edit') }}</gl-dropdown-item>
-          <gl-dropdown-item data-testid="delete-iteration" @click="showModal">
+          <gl-dropdown-item v-if="showDelete" @click="showModal">
             {{ __('Delete') }}
           </gl-dropdown-item>
         </gl-dropdown>

ee/spec/frontend/iterations/components/iteration_report_spec.js

@@ -13,8 +13,11 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import IterationTitle from 'ee/iterations/components/iteration_title.vue';
 import { getIterationPeriod } from 'ee/iterations/utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { __ } from '~/locale';
 import {
   mockIterationNode,
+  mockPastIterationNode,
   createMockGroupIterations,
   mockIterationNodeWithoutTitle,
   mockProjectIterations,
@@ -46,6 +49,7 @@ describe('Iterations report', () => {
   const findHeading = () => wrapper.findComponent({ ref: 'heading' });
   const findDescription = () => wrapper.findComponent({ ref: 'description' });
   const findActionsDropdown = () => wrapper.find('[data-testid="actions-dropdown"]');
+  const findDeleteButton = () => wrapper.findByText(__('Delete'));
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
@@ -63,33 +67,35 @@ describe('Iterations report', () => {
       [deleteIteration, deleteMutationMock],
     ]);
 
-    wrapper = shallowMount(IterationReport, {
-      apolloProvider: mockApollo,
-      propsData: props,
-      provide: {
-        fullPath: props.fullPath,
-        groupPath: props.fullPath,
-        cadencesListPath: '/groups/some-group/-/cadences',
-        canCreateCadence: true,
-        canEditCadence: true,
-        namespaceType: props.namespaceType,
-        canEditIteration: props.canEditIteration,
-        hasScopedLabelsFeature: true,
-        labelsFetchPath,
-        previewMarkdownPath: '/markdown',
-        noIssuesSvgPath: '/some.svg',
-      },
-      mocks: {
-        $router,
-        $toast,
-      },
-      stubs: {
-        GlLoadingIcon,
-        GlTab,
-        GlTabs,
-        IterationTitle,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(IterationReport, {
+        apolloProvider: mockApollo,
+        propsData: props,
+        provide: {
+          fullPath: props.fullPath,
+          groupPath: props.fullPath,
+          cadencesListPath: '/groups/some-group/-/cadences',
+          canCreateCadence: true,
+          canEditCadence: true,
+          namespaceType: props.namespaceType,
+          canEditIteration: props.canEditIteration,
+          hasScopedLabelsFeature: true,
+          labelsFetchPath,
+          previewMarkdownPath: '/markdown',
+          noIssuesSvgPath: '/some.svg',
+        },
+        mocks: {
+          $router,
+          $toast,
+        },
+        stubs: {
+          GlLoadingIcon,
+          GlTab,
+          GlTabs,
+          IterationTitle,
+        },
+      }),
+    );
   };
 
   describe('with mock apollo', () => {
@@ -149,6 +155,14 @@ describe('Iterations report', () => {
   });
 
   describe('delete iteration', () => {
+    it('does not show delete option for past iterations', async () => {
+      mountComponent({ mockQueryResponse: createMockGroupIterations(mockPastIterationNode) });
+
+      await waitForPromises();
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+
     it('deletes iteration', async () => {
       mountComponent();
 

ee/spec/frontend/iterations/mock_data.js

+import { iterationStates } from 'ee/iterations/constants';
+
 export const mockIterationNode = {
   description: 'some description',
   descriptionHtml: '<p>some description</p>',
@@ -5,12 +7,17 @@ export const mockIterationNode = {
   id: 'gid://gitlab/Iteration/4',
   iid: '1',
   startDate: '2021-02-10',
-  state: 'upcoming',
+  state: iterationStates.upcoming,
   title: 'top-level-iteration',
   webPath: '/groups/top-level-group/-/iterations/4',
   __typename: 'Iteration',
 };
 
+export const mockPastIterationNode = {
+  ...mockIterationNode,
+  state: iterationStates.closed,
+};
+
 export const mockIterationNodeWithoutTitle = {
   ...mockIterationNode,
   title: null,