Customize error message for outcome group remove

closes OUT-4278
flag=improved_outcomes_management

Test plan:
- Make sure you have an Account and a Course
- In the Account create one outcome group with one outcome
- Create a rubrik and align the outcome with the rubrik
- Repeat the above steps for the Course
- Go to Account > Settings > Feature Options
- Enable Improved Outcomes Management FF
- With Improved Outcomes Management FF Enabled
- Go to Account > Outcomes
- Select the above created group via TreeBrowser then select
Remove option from group kebab menu
- A modal should open and ask you to confirm removal
- Click on 'Remove Group' button; modal should close and after
few seconds you should see a flash notification with message:
"An error occurred while removing this group: Request failed
with status code 400"
- Reload the page and confirm that the group is not deleted
- Go to Course > Outcomes
- Repeat the same tests as for the Account

Change-Id: I3f49e3165e5a88915bf9e05bf1a574050bd04795
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/260227
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Pat Renner <prenner@instructure.com>
Reviewed-by: Augusto Callejas <acallejas@instructure.com>
QA-Review: Augusto Callejas <acallejas@instructure.com>
Product-Review: Jody Sailor

app/jsx/outcomes/Management/GroupRemoveModal.js

@@ -47,7 +47,11 @@ const GroupRemoveModal = ({groupId, isOpen, onCloseHandler}) => {
       }
     } catch (err) {
       showFlashAlert({
-        message: I18n.t('An error occurred while making a network request.'),
+        message: err.message
+          ? I18n.t('An error occurred while removing this group: %{message}', {
+              message: err.message
+            })
+          : I18n.t('An error occurred while removing this group.'),
         type: 'error'
       })
     }

app/jsx/outcomes/Management/__tests__/GroupRemoveModal.test.js

@@ -17,7 +17,7 @@
  */
 
 import React from 'react'
-import {render as rawRender, fireEvent, wait} from '@testing-library/react'
+import {render as rawRender, fireEvent, waitFor} from '@testing-library/react'
 import GroupRemoveModal from '../GroupRemoveModal'
 import OutcomesContext from '../../contexts/OutcomesContext'
 import {removeOutcomeGroup} from '../api'
@@ -105,7 +105,7 @@ describe('GroupRemoveModal', () => {
     const {getByText} = render(<GroupRemoveModal {...defaultProps()} />)
     fireEvent.click(getByText('Remove Group'))
     expect(removeOutcomeGroup).toHaveBeenCalledWith('Account', '1', '123')
-    await wait(() => {
+    await waitFor(() => {
       expect(showFlashAlertSpy).toHaveBeenCalledWith({
         message: 'This group was successfully removed from this account.',
         type: 'success'
@@ -121,7 +121,7 @@ describe('GroupRemoveModal', () => {
     })
     fireEvent.click(getByText('Remove Group'))
     expect(removeOutcomeGroup).toHaveBeenCalledWith('Course', '1', '123')
-    await wait(() => {
+    await waitFor(() => {
       expect(showFlashAlertSpy).toHaveBeenCalledWith({
         message: 'This group was successfully removed from this course.',
         type: 'success'
@@ -135,9 +135,9 @@ describe('GroupRemoveModal', () => {
     const {getByText} = render(<GroupRemoveModal {...defaultProps()} />)
     fireEvent.click(getByText('Remove Group'))
     expect(removeOutcomeGroup).toHaveBeenCalledWith('Account', '1', '123')
-    await wait(() => {
+    await waitFor(() => {
       expect(showFlashAlertSpy).toHaveBeenCalledWith({
-        message: 'An error occurred while making a network request.',
+        message: 'An error occurred while removing this group: Network error',
         type: 'error'
       })
     })