Alert settings form UX

Update UX for alert settings
form UX to match designs
provided for Operations

app/assets/javascripts/alerts_settings/components/alert_mapping_builder.vue

@@ -141,8 +141,13 @@ export default {
         />
       </h5>
     </div>
-    <div v-for="gitlabField in mappingData" :key="gitlabField.name" class="gl-display-table-row">
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+
+    <div
+      v-for="(gitlabField, index) in mappingData"
+      :key="gitlabField.name"
+      class="gl-display-table-row"
+    >
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
         <gl-form-input
           aria-labelledby="gitlabFieldsHeader"
           disabled
@@ -151,17 +156,17 @@ export default {
       </div>
 
       <div class="gl-display-table-cell gl-py-3 gl-pr-3">
-        <div class="right-arrow gl-vertical-align-middle gl-mt-n1">
+        <div class="right-arrow" :class="{ 'gl-vertical-align-middle': index === 0 }">
           <i class="right-arrow-head"></i>
         </div>
       </div>
 
-      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p">
+      <div class="gl-display-table-cell gl-py-3 gl-pr-3 w-30p gl-vertical-align-middle">
         <gl-dropdown
           :disabled="!gitlabField.mappingFields.length"
           aria-labelledby="parsedFieldsHeader"
           :text="selectedValue(gitlabField.mapping)"
-          class="gl-w-full gl-vertical-align-baseline!"
+          class="gl-w-full"
           :header-text="$options.i18n.selectMappingKey"
         >
           <gl-search-box-by-type @input="setSearchTerm($event, 'searchTerm', gitlabField.name)" />
@@ -186,7 +191,7 @@ export default {
           :disabled="!gitlabField.mappingFields.length"
           aria-labelledby="fallbackFieldsHeader"
           :text="selectedValue(gitlabField.fallback)"
-          class="gl-w-full gl-vertical-align-baseline!"
+          class="gl-w-full"
           :header-text="$options.i18n.selectMappingKey"
         >
           <gl-search-box-by-type

app/assets/javascripts/alerts_settings/components/alert_settings_form_help_block.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <span class="gl-text-gray-500">
+  <span>
     <gl-sprintf :message="message">
       <template #link="{ content }">
         <gl-link class="gl-display-inline-block" :href="link" target="_blank">{{

app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

@@ -13,7 +13,11 @@ import {
 import { s__, __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import Tracking from '~/tracking';
-import { trackAlertIntegrationsViewsOptions, integrationToDeleteDefault } from '../constants';
+import {
+  trackAlertIntegrationsViewsOptions,
+  integrationToDeleteDefault,
+  typeSet,
+} from '../constants';
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
 
 export const i18n = {
@@ -36,6 +40,7 @@ const bodyTrClass =
 
 export default {
   i18n,
+  typeSet,
   components: {
     GlButtonGroup,
     GlButton,
@@ -77,6 +82,8 @@ export default {
     },
     {
       key: 'actions',
+      thClass: `gl-text-center`,
+      tdClass: `gl-text-center`,
       label: __('Actions'),
     },
   ],
@@ -121,6 +128,7 @@ export default {
   <div class="incident-management-list">
     <h5 class="gl-font-lg">{{ $options.i18n.title }}</h5>
     <gl-table
+      class="integration-list"
       :items="integrations"
       :fields="$options.fields"
       :busy="loading"
@@ -152,10 +160,11 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group v-if="glFeatures.httpIntegrationsList">
+        <gl-button-group v-if="glFeatures.httpIntegrationsList" class="gl-ml-3">
           <gl-button icon="pencil" @click="$emit('edit-integration', { id: item.id })" />
           <gl-button
             v-gl-modal.deleteIntegration
+            :disabled="item.type === $options.typeSet.prometheus"
             icon="remove"
             @click="setIntegrationToDelete(item)"
           />
@@ -168,7 +177,7 @@ export default {
 
       <template #empty>
         <div
-          class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3"
+          class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5"
         >
           <p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p>
         </div>
@@ -176,7 +185,7 @@ export default {
     </gl-table>
     <gl-modal
       modal-id="deleteIntegration"
-      :title="__('Are you sure?')"
+      :title="s__('AlertSettings|Delete integration')"
       :ok-title="s__('AlertSettings|Delete integration')"
       ok-variant="danger"
       @ok="deleteIntegration"

app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue

@@ -118,6 +118,12 @@ export default {
     canAddIntegration() {
       return this.multiIntegrations || this.integrations?.list?.length < 2;
     },
+    canManageOpsgenie() {
+      return (
+        this.integrations?.list?.every(({ active }) => active === false) ||
+        this.integrations?.list?.length === 0
+      );
+    },
   },
   methods: {
     createNewIntegration({ type, variables }) {
@@ -313,6 +319,7 @@ export default {
       v-if="glFeatures.httpIntegrationsList"
       :loading="isUpdating"
       :can-add-integration="canAddIntegration"
+      :can-manage-opsgenie="canManageOpsgenie"
       @create-new-integration="createNewIntegration"
       @update-integration="updateIntegration"
       @reset-token="resetToken"

app/assets/stylesheets/pages/incident_management_list.scss

@@ -139,4 +139,12 @@
       @include gl-w-full;
     }
   }
+
+  .integration-list {
+    .b-table-empty-row {
+      td {
+        @include gl-px-0;
+      }
+    }
+  }
 }

locale/gitlab.pot

@@ -2520,7 +2520,7 @@ msgstr ""
 msgid "AlertSettings|3. Set up webhook"
 msgstr ""
 
-msgid "AlertSettings|4. Test integration(optional)"
+msgid "AlertSettings|4. Sample alert payload (optional)"
 msgstr ""
 
 msgid "AlertSettings|5. Map fields (optional)"
@@ -2586,9 +2586,6 @@ msgstr ""
 msgid "AlertSettings|Learn more about our our upcoming %{linkStart}integrations%{linkEnd}"
 msgstr ""
 
-msgid "AlertSettings|Learn more about our upcoming %{linkStart}integrations%{linkEnd}"
-msgstr ""
-
 msgid "AlertSettings|Opsgenie"
 msgstr ""
 
@@ -2598,7 +2595,10 @@ msgstr ""
 msgid "AlertSettings|Prometheus API base URL"
 msgstr ""
 
-msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the %{linkStart}alerts page%{linkEnd}. This payload can be used to test the integration using the \"save and test payload\" button."
+msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to create a custom mapping (optional), or to test the integration (also optional)."
+msgstr ""
+
+msgid "AlertSettings|Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional)."
 msgstr ""
 
 msgid "AlertSettings|Reset Key"
@@ -2649,10 +2649,13 @@ msgstr ""
 msgid "AlertSettings|URL cannot be blank and must start with http or https"
 msgstr ""
 
-msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
+msgid "AlertSettings|Utilize the URL and authorization key below to authorize Prometheus to send alerts to GitLab. Review the Prometheus documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
 msgstr ""
 
-msgid "AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your exisiting Opsgenie instance. By selecting this option, you cannot recieve alerts from any other source in GitLab; it will effectivley be turing Alerts within GitLab off as a feature."
+msgid "AlertSettings|Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
+msgstr ""
+
+msgid "AlertSettings|Utilizing this option will link the GitLab Alerts navigation item to your existing Opsgenie instance. By selecting this option, you cannot receive alerts from any other source in GitLab; it will effectively be turning Alerts within GitLab off as a feature."
 msgstr ""
 
 msgid "AlertSettings|We will soon be introducing the ability to create multiple unique HTTP endpoints. When this functionality is live,  you will be able to configure an integration with Opsgenie to surface Opsgenie alerts in GitLab. This will replace the current Opsgenie integration which will be deprecated. %{linkStart}More Information%{linkEnd}"
@@ -2670,6 +2673,9 @@ msgstr ""
 msgid "AlertSettings|Your integration was successfully updated."
 msgstr ""
 
+msgid "AlertSettings|{ \"events\": [{ \"application\": \"Name of application\" }] }"
+msgstr ""
+
 msgid "Alerts"
 msgstr ""
 

spec/frontend/alerts_settings/__snapshots__/alerts_settings_form_new_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = `
-"<form class=\\"gl-mt-6\\" canmanageopsgenie=\\"true\\">
+"<form class=\\"gl-mt-6\\">
   <h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5>
   <div id=\\"integration-type\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-type__BV_label_\\" for=\\"integration-type\\" class=\\"d-block col-form-label\\">1. Select integration type</label>
     <div class=\\"bv-no-focus-ring\\"><select class=\\"gl-form-select custom-select\\" id=\\"__BVID__8\\">
         <option value=\\"\\">Select integration type</option>
         <option value=\\"HTTP\\">HTTP Endpoint</option>
         <option value=\\"PROMETHEUS\\">External Prometheus</option>
-        <option disabled=\\"disabled\\" value=\\"OPSGENIE\\">Opsgenie</option>
+        <option value=\\"OPSGENIE\\">Opsgenie</option>
       </select>
-      <div class=\\"gl-my-4\\"><span class=\\"gl-text-gray-500\\">Learn more about our upcoming <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://gitlab.com/groups/gitlab-org/-/epics/4390\\" class=\\"gl-link gl-display-inline-block\\">integrations</a></span></div>
       <!---->
       <!---->
       <!---->
       <!---->
     </div>
   </div>
-  <div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__13\\">
+  <div class=\\"gl-mt-3 collapse\\" style=\\"display: none;\\" id=\\"__BVID__10\\">
     <div>
       <div id=\\"name-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"name-integration__BV_label_\\" for=\\"name-integration\\" class=\\"d-block col-form-label\\">2. Name integration</label>
-        <div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__18\\">
+        <div class=\\"bv-no-focus-ring\\"><input type=\\"text\\" placeholder=\\"Enter integration name\\" class=\\"gl-form-input form-control\\" id=\\"__BVID__15\\">
           <!---->
           <!---->
           <!---->
         </div>
       </div>
       <div id=\\"integration-webhook\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"integration-webhook__BV_label_\\" for=\\"integration-webhook\\" class=\\"d-block col-form-label\\">3. Set up webhook</label>
-        <div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Utilize the URL and authorization key below to authorize an external service to send Alerts to GitLab. Review your chosen services documentation to learn where to add these details, and the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html\\" class=\\"gl-link gl-display-inline-block\\">GitLab documentation</a> to learn more about configuring your endpoint.</span> <label class=\\"gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content gl-my-4 gl-font-weight-normal\\">
+        <div class=\\"bv-no-focus-ring\\"><span>Utilize the URL and authorization key below to authorize an external service to send alerts to GitLab. Review your external service's documentation to learn where to add these details, and the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"https://docs.gitlab.com/ee/operations/incident_management/alert_integrations.html\\" class=\\"gl-link gl-display-inline-block\\">GitLab documentation</a> to learn more about configuring your endpoint.</span> <label class=\\"gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content gl-my-4 gl-font-weight-normal\\">
             <div class=\\"gl-toggle-wrapper\\"><span class=\\"gl-toggle-label\\">Active</span>
               <!----> <button aria-label=\\"Active\\" type=\\"button\\" class=\\"gl-toggle\\"><span class=\\"toggle-icon\\"><svg data-testid=\\"close-icon\\" class=\\"gl-icon s16\\"><use href=\\"#close\\"></use></svg></span></button></div>
             <!---->
           </label>
           <!---->
-          <div class=\\"gl-my-4\\"><span>
+          <div class=\\"gl-my-4\\"><span class=\\"gl-font-weight-bold\\">
             Webhook URL
           </span>
             <div id=\\"url\\" readonly=\\"readonly\\">
@@ -49,10 +48,10 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
               </div>
             </div>
           </div>
-          <div class=\\"gl-my-4\\"><span>
+          <div class=\\"gl-my-4\\"><span class=\\"gl-font-weight-bold\\">
             Authorization key
           </span>
-            <div id=\\"authorization-key\\" readonly=\\"readonly\\" class=\\"gl-mb-2\\">
+            <div id=\\"authorization-key\\" readonly=\\"readonly\\" class=\\"gl-mb-3\\">
               <div role=\\"group\\" class=\\"input-group\\">
                 <!---->
                 <!----> <input id=\\"authorization-key\\" type=\\"text\\" readonly=\\"readonly\\" class=\\"gl-form-input form-control\\">
@@ -63,7 +62,7 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
                     <!----></button></div>
                 <!---->
               </div>
-            </div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn gl-mt-3 btn-default btn-md disabled gl-button\\">
+            </div> <button type=\\"button\\" disabled=\\"disabled\\" class=\\"btn btn-default btn-md disabled gl-button\\">
               <!---->
               <!----> <span class=\\"gl-button-text\\">
             Reset Key
@@ -75,8 +74,8 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
           <!---->
         </div>
       </div>
-      <div id=\\"test-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"test-integration__BV_label_\\" for=\\"test-integration\\" class=\\"d-block col-form-label\\">4. Test integration(optional)</label>
-        <div class=\\"bv-no-focus-ring\\"><span class=\\"gl-text-gray-500\\">Provide an example payload from the monitoring tool you intend to integrate with to send a test alert to the <a rel=\\"noopener noreferrer\\" target=\\"_blank\\" href=\\"http://invalid\\" class=\\"gl-link gl-display-inline-block\\">alerts page</a>. This payload can be used to test the integration using the \\"save and test payload\\" button.</span> <textarea id=\\"test-payload\\" disabled=\\"disabled\\" placeholder=\\"Enter test alert JSON....\\" wrap=\\"soft\\" class=\\"gl-form-input gl-form-textarea gl-my-4 form-control is-valid\\" style=\\"resize: none; overflow-y: scroll;\\"></textarea>
+      <div id=\\"test-integration\\" role=\\"group\\" class=\\"form-group gl-form-group\\"><label id=\\"test-integration__BV_label_\\" for=\\"test-integration\\" class=\\"d-block col-form-label\\">4. Sample alert payload (optional)</label>
+        <div class=\\"bv-no-focus-ring\\"><span>Provide an example payload from the monitoring tool you intend to integrate with. This payload can be used to test the integration (optional).</span> <textarea id=\\"test-payload\\" disabled=\\"disabled\\" placeholder=\\"{ &quot;events&quot;: [{ &quot;application&quot;: &quot;Name of application&quot; }] }\\" wrap=\\"soft\\" class=\\"gl-form-input gl-form-textarea gl-my-3 form-control is-valid\\" style=\\"resize: none; overflow-y: scroll;\\"></textarea>
           <!---->
           <!---->
           <!---->
@@ -85,14 +84,14 @@ exports[`AlertsSettingsFormNew with default values renders the initial template
       <!---->
       <!---->
     </div>
-    <div class=\\"gl-display-flex gl-justify-content-end\\"><button type=\\"reset\\" class=\\"btn gl-mr-3 js-no-auto-disable btn-default btn-md gl-button\\">
+    <div class=\\"gl-display-flex gl-justify-content-start gl-py-3\\"><button data-testid=\\"integration-form-submit\\" type=\\"submit\\" class=\\"btn js-no-auto-disable btn-success btn-md gl-button\\">
         <!---->
-        <!----> <span class=\\"gl-button-text\\">Cancel</span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mr-1 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\">
+        <!----> <span class=\\"gl-button-text\\">Save integration
+      </span></button> <button data-testid=\\"integration-test-and-submit\\" type=\\"button\\" class=\\"btn gl-mx-3 js-no-auto-disable btn-success btn-md gl-button btn-success-secondary\\">
         <!---->
-        <!----> <span class=\\"gl-button-text\\">Save and test payload</span></button> <button data-testid=\\"integration-form-submit\\" type=\\"submit\\" class=\\"btn js-no-auto-disable btn-success btn-md gl-button\\">
+        <!----> <span class=\\"gl-button-text\\">Save and test payload</span></button> <button type=\\"reset\\" class=\\"btn js-no-auto-disable btn-default btn-md gl-button\\">
         <!---->
-        <!----> <span class=\\"gl-button-text\\">Save integration
-      </span></button></div>
+        <!----> <span class=\\"gl-button-text\\">Cancel</span></button></div>
   </div>
 </form>"
 `;