Add support for toast messages on user actions

Adds support for showing toast messages on
user actions like create, edit, archive & reopen.
Also adds missing license check for nav sidebar
requirements link.

ee/app/assets/javascripts/requirements/components/requirements_root.vue

 <script>
 import * as Sentry from '@sentry/browser';
 import { GlPagination } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import { updateHistory, setUrlParams, visitUrl } from '~/lib/utils/url_utility';
@@ -149,18 +149,41 @@ export default {
     requirementsListEmpty() {
       return !this.$apollo.queries.requirements.loading && !this.requirements.list.length;
     },
-    totalRequirements() {
+    /**
+     * We want to ensure that count `0` is prioritized
+     * over `this.requirements.count` (GraphQL) or `this.requirementsCount` (HAML prop)
+     * as both of them are invalid once user does archive/reopen actions.
+     * this is a technical debt that we want to clean up once mutations support
+     * `requirementStatesCount` connection.
+     */
+    totalRequirementsForCurrentTab() {
+      if (this.filterBy === FilterState.opened) {
+        return this.openedCount === 0
+          ? 0
+          : this.requirements.count.OPENED || this.requirementsCount.OPENED;
+      } else if (this.filterBy === FilterState.archived) {
+        return this.archivedCount === 0
+          ? 0
+          : this.requirements.count.ARCHIVED || this.requirementsCount.ARCHIVED;
+      }
       return this.requirements.count[this.filterBy] || this.requirementsCount[this.filterBy];
     },
+    showEmptyState() {
+      return (
+        (this.requirementsListEmpty && !this.showCreateForm) || !this.totalRequirementsForCurrentTab
+      );
+    },
     showPaginationControls() {
-      return this.totalRequirements > DEFAULT_PAGE_SIZE && !this.requirementsListEmpty;
+      return this.totalRequirementsForCurrentTab > DEFAULT_PAGE_SIZE && !this.requirementsListEmpty;
     },
     prevPage() {
       return Math.max(this.currentPage - 1, 0);
     },
     nextPage() {
       const nextPage = this.currentPage + 1;
-      return nextPage > Math.ceil(this.totalRequirements / DEFAULT_PAGE_SIZE) ? null : nextPage;
+      return nextPage > Math.ceil(this.totalRequirementsForCurrentTab / DEFAULT_PAGE_SIZE)
+        ? null
+        : nextPage;
     },
   },
   watch: {
@@ -273,7 +296,7 @@ export default {
       this.showUpdateFormForRequirement = iid;
     },
     handleNewRequirementSave(title) {
-      const reloadPage = this.totalRequirements === 0;
+      const reloadPage = this.totalRequirementsForCurrentTab === 0;
       this.createRequirementRequestActive = true;
       return this.$apollo
         .mutate({
@@ -293,6 +316,11 @@ export default {
               this.showCreateForm = false;
               this.$apollo.queries.requirements.refetch();
               this.openedCount += 1;
+              this.$toast.show(
+                sprintf(__('Requirement %{reference} has been added'), {
+                  reference: `REQ-${data.createRequirement.requirement.iid}`,
+                }),
+              );
             }
           } else {
             throw new Error(`Error creating a requirement`);
@@ -318,6 +346,11 @@ export default {
         .then(({ data }) => {
           if (!data.updateRequirement.errors.length) {
             this.showUpdateFormForRequirement = 0;
+            this.$toast.show(
+              sprintf(__('Requirement %{reference} has been updated'), {
+                reference: `REQ-${data.updateRequirement.requirement.iid}`,
+              }),
+            );
           } else {
             throw new Error(`Error updating a requirement`);
           }
@@ -337,17 +370,24 @@ export default {
       }).then(({ data }) => {
         if (!data.updateRequirement.errors.length) {
           this.stateChangeRequestActiveFor = 0;
+          let toastMessage;
+          if (params.state === FilterState.opened) {
+            this.openedCount += 1;
+            this.archivedCount -= 1;
+            toastMessage = sprintf(__('Requirement %{reference} has been reopened'), {
+              reference: `REQ-${data.updateRequirement.requirement.iid}`,
+            });
+          } else {
+            this.openedCount -= 1;
+            this.archivedCount += 1;
+            toastMessage = sprintf(__('Requirement %{reference} has been archived'), {
+              reference: `REQ-${data.updateRequirement.requirement.iid}`,
+            });
+          }
+          this.$toast.show(toastMessage);
         } else {
           throw new Error(`Error archiving a requirement`);
         }
-
-        if (params.state === FilterState.opened) {
-          this.openedCount += 1;
-          this.archivedCount -= 1;
-        } else {
-          this.openedCount -= 1;
-          this.archivedCount += 1;
-        }
       });
     },
     handleUpdateRequirementCancel() {
@@ -385,7 +425,7 @@ export default {
       @cancel="handleNewRequirementCancel"
     />
     <requirements-empty-state
-      v-if="requirementsListEmpty && !showCreateForm"
+      v-if="showEmptyState"
       :filter-by="filterBy"
       :empty-state-path="emptyStatePath"
       :requirements-count="requirementsCount"

ee/app/assets/javascripts/requirements/queries/createRequirement.mutation.graphql

@@ -2,5 +2,8 @@ mutation createRequirement($createRequirementInput: CreateRequirementInput!) {
   createRequirement(input: $createRequirementInput) {
     clientMutationId
     errors
+    requirement {
+      iid
+    }
   }
 }

ee/app/assets/javascripts/requirements/requirements_bundle.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlToast } from '@gitlab/ui';
 import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import createDefaultClient from '~/lib/graphql';
 
@@ -8,6 +9,7 @@ import RequirementsRoot from './components/requirements_root.vue';
 import { FilterState } from './constants';
 
 Vue.use(VueApollo);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-requirements-app');

ee/app/views/layouts/nav/_requirements_link.html.haml

 - return unless Feature.enabled?(:requirements_management, project)
+- return unless can?(current_user, :read_requirement, project)
 
 - requirements_count = Hash.new(0).merge(project.requirements.counts_by_state)
 - total_count = requirements_count['opened'] + requirements_count['archived']

ee/spec/features/projects/navbar_spec.rb

@@ -93,6 +93,15 @@ describe 'Project navbar' do
   context 'when requirements is available' do
     before do
       stub_licensed_features(requirements: true)
+      stub_feature_flags(requirements_management: { enabled: true, thing: project })
+
+      insert_after_nav_item(
+        _('Merge Requests'),
+        new_nav_item: {
+          nav_item: _('Requirements'),
+          nav_sub_items: [_('List')]
+        }
+      )
 
       visit project_path(project)
     end

ee/spec/features/projects/requirements/requirements_list_spec.rb

@@ -25,6 +25,7 @@ describe 'Requirements list', :js do
 
   before do
     stub_licensed_features(requirements: true)
+    stub_feature_flags(requirements_management: { enabled: true, thing: project })
     project.add_maintainer(user)
 
     sign_in(user)

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -36,6 +36,10 @@ jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
 }));
 
+const $toast = {
+  show: jest.fn(),
+};
+
 const createComponent = ({
   projectPath = 'gitlab-org/gitlab-shell',
   filterBy = FilterState.opened,
@@ -67,6 +71,7 @@ const createComponent = ({
         },
         mutate: jest.fn(),
       },
+      $toast,
     },
   });
 
@@ -92,9 +97,22 @@ describe('RequirementsRoot', () => {
   });
 
   describe('computed', () => {
-    describe('totalRequirements', () => {
+    describe('totalRequirementsForCurrentTab', () => {
       it('returns number representing total requirements for current tab', () => {
-        expect(wrapper.vm.totalRequirements).toBe(mockRequirementsCount.OPENED);
+        expect(wrapper.vm.totalRequirementsForCurrentTab).toBe(mockRequirementsCount.OPENED);
+      });
+
+      it('returns 0 when `openedCount` is 0 and filterBy represents opened tab', () => {
+        wrapper.setProps({
+          filterBy: FilterState.opened,
+        });
+        wrapper.setData({
+          openedCount: 0,
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.totalRequirementsForCurrentTab).toBe(0);
+        });
       });
     });
 
@@ -323,6 +341,9 @@ describe('RequirementsRoot', () => {
         data: {
           createRequirement: {
             errors: [],
+            requirement: {
+              iid: '1',
+            },
           },
         },
       };
@@ -388,6 +409,14 @@ describe('RequirementsRoot', () => {
         });
       });
 
+      it('calls `$toast.show` with string "Requirement added successfully" when request is successful', () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockMutationResult);
+
+        return wrapper.vm.handleNewRequirementSave('foo').then(() => {
+          expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Requirement REQ-1 has been added');
+        });
+      });
+
       it('sets `createRequirementRequestActive` prop to `false` and calls `createFlash` when `$apollo.mutate` request fails', () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
 
@@ -442,6 +471,21 @@ describe('RequirementsRoot', () => {
           });
       });
 
+      it('calls `$toast.show` with string "Requirement updated successfully" when request is successful', () => {
+        jest.spyOn(wrapper.vm, 'updateRequirement').mockResolvedValue(mockUpdateMutationResult);
+
+        return wrapper.vm
+          .handleUpdateRequirementSave({
+            iid: '1',
+            title: 'foo',
+          })
+          .then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
+              'Requirement REQ-1 has been updated',
+            );
+          });
+      });
+
       it('sets `createRequirementRequestActive` prop to `false` when request fails', () => {
         jest.spyOn(wrapper.vm, 'updateRequirement').mockRejectedValue(new Error());
 
@@ -542,6 +586,19 @@ describe('RequirementsRoot', () => {
           });
       });
 
+      it('calls `$toast.show` with string "Requirement has been reopened" when `params.state` is "OPENED" and request is successful', () => {
+        return wrapper.vm
+          .handleRequirementStateChange({
+            iid: '1',
+            state: FilterState.opened,
+          })
+          .then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
+              'Requirement REQ-1 has been reopened',
+            );
+          });
+      });
+
       it('decrements `openedCount` by 1 and increments `archivedCount` by 1 when `params.state` is "ARCHIVED"', () => {
         wrapper.setData({
           openedCount: 1,
@@ -558,6 +615,19 @@ describe('RequirementsRoot', () => {
             expect(wrapper.vm.archivedCount).toBe(2);
           });
       });
+
+      it('calls `$toast.show` with string "Requirement has been archived" when `params.state` is "ARCHIVED" and request is successful', () => {
+        return wrapper.vm
+          .handleRequirementStateChange({
+            iid: '1',
+            state: FilterState.archived,
+          })
+          .then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(
+              'Requirement REQ-1 has been archived',
+            );
+          });
+      });
     });
 
     describe('handleUpdateRequirementCancel', () => {

locale/gitlab.pot

@@ -17178,6 +17178,18 @@ msgstr ""
 msgid "Requirement"
 msgstr ""
 
+msgid "Requirement %{reference} has been added"
+msgstr ""
+
+msgid "Requirement %{reference} has been archived"
+msgstr ""
+
+msgid "Requirement %{reference} has been reopened"
+msgstr ""
+
+msgid "Requirement %{reference} has been updated"
+msgstr ""
+
 msgid "Requirement title cannot have more than %{limit} characters."
 msgstr ""
 

spec/support/shared_contexts/navbar_structure_context.rb

 # frozen_string_literal: true
 
 RSpec.shared_context 'project navbar structure' do
-  let(:requirements_nav_item) do
-    {
-      nav_item: _('Requirements'),
-      nav_sub_items: [_('List')]
-    }
-  end
-
   let(:analytics_nav_item) do
     {
       nav_item: _('Analytics'),
@@ -56,7 +49,6 @@ RSpec.shared_context 'project navbar structure' do
         nav_item: _('Merge Requests'),
         nav_sub_items: []
       },
-      (requirements_nav_item if Gitlab.ee?),
       {
         nav_item: _('CI / CD'),
         nav_sub_items: [