Give users more feedback when they have successfully protected an environment

Problem

Currently when a user goes to protect an environment, they aren't given any sort of confirmation that the environment has been successfully protected. Users prefer to see some sort of visual confirmation when an action has been taken as per: #378924 (closed)

Screen_Recording_2022-12-08_at_10.05.48_AM

Interestingly enough, when an environment becomes unprotected, we do provide users with an information alert:

Alert

Solution

• Provide users with a confirmation alert that an environment has been protected.

• Provide users with an info alert that an environment has been

Implementation guide

1. Add a GlAlert to the protected_environments.vue
2. We expect two types of alerts:
   • variant success when the environment was protected
   • variant info when the environment was unprotected
3. We can serve both alerts by creating an object with the alert properties, such as text and variant.
4. Update completeAddForm method to populate the alertOptions when the environment is protected.
5. Similarly, update unprotect method when the environment is unprotected.

Example of the suggested changes:

diff --git a/ee/app/assets/javascripts/protected_environments/protected_environments.vue b/ee/app/assets/javascripts/protected_environments/protected_environments.vue
index b1f366746d67..c1e7d53bb35c 100644
--- a/ee/app/assets/javascripts/protected_environments/protected_environments.vue
+++ b/ee/app/assets/javascripts/protected_environments/protected_environments.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlButton, GlCollapse, GlIcon, GlModal } from '@gitlab/ui';
+import { GlBadge, GlButton, GlCollapse, GlIcon, GlModal, GlAlert } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapState, mapActions } from 'vuex';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
@@ -15,6 +15,7 @@ export default {
     GlCollapse,
     GlIcon,
     GlModal,
+    GlAlert,
     Pagination,
     CrudComponent,
     CreateProtectedEnvironment,
@@ -39,6 +40,7 @@ export default {
       expanded: {},
       environmentToUnprotect: null,
       isAddFormVisible: false,
+      alertOptions: {},
     };
   },
   computed: {
@@ -66,6 +68,9 @@ export default {
     emptyMessage() {
       return this.$options.i18n.emptyMessage[this.entityType];
     },
+    showAlert() {
+      return Boolean(this.alertOptions.message);
+    },
   },
   methods: {
     ...mapActions(['setPage', 'fetchProtectedEnvironments']),
@@ -100,6 +105,10 @@ export default {
     },
     unprotect() {
       this.$emit('unprotect', this.environmentToUnprotect);
+      this.alertOptions = {
+        message: s__('ProtectedEnvironment|Your environment has been unprotected.'),
+        variant: 'info',
+      };
     },
     clearEnvironment() {
       this.environmentToUnprotect = null;
@@ -115,6 +124,14 @@ export default {
     completeAddForm() {
       this.hideAddForm();
       this.fetchProtectedEnvironments();
+
+      this.alertOptions = {
+        message: s__('ProtectedEnvironment|Your environment has been protected.'),
+        variant: 'success',
+      };
+    },
+    closeAlert() {
+      this.alertOptions = {};
     },
   },
   modalOptions: {
@@ -132,6 +149,15 @@ export default {
 </script>
 <template>
   <div class="gl-mb-5">
+    <gl-alert
+      v-if="showAlert"
+      :variant="alertOptions.variant"
+      class="gl-mb-5"
+      @dismiss="closeAlert"
+    >
+      {{ alertOptions.message }}
+    </gl-alert>
+
     <crud-component
       ref="crud"
       :title="$options.i18n.title"

6. Update corresponding tests in protected_environments_spec.js