Remove reliance on Flash styling

Replace Flash styling with `FlashAlert` component

- removed: ee/app/views/trials/_errors.html.haml
- added: ee/app/assets/javascripts/trials/components/flash_alert.vue

Changelog: changed
EE: true

ee/app/assets/javascripts/pages/trials/apply/index.js

 import 'ee/trials/namespace_select';
 import 'ee/trials/track_trial_user_errors';
+import { initFlashAlert } from 'ee/trials/init_flash_alert';
+
+initFlashAlert();

ee/app/assets/javascripts/pages/trials/create_lead/index.js

 import 'ee/trials/track_trial_user_errors';
 import { initTrialCreateLeadForm } from 'ee/trials/init_create_lead_form';
+import { initFlashAlert } from 'ee/trials/init_flash_alert';
 
 initTrialCreateLeadForm();
+initFlashAlert();

ee/app/assets/javascripts/trials/components/flash_alert.vue

+<script>
+import { GlAlert } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'FlashAlert',
+  components: {
+    GlAlert,
+  },
+  props: {
+    errors: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    errorsFound: __('We have found the following errors:'),
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    variant="danger"
+    :dismissible="false"
+    class="gl-mt-3"
+    :title="$options.i18n.errorsFound"
+    data-testid="alert-danger"
+  >
+    {{ errors }}
+  </gl-alert>
+</template>

ee/app/assets/javascripts/trials/init_flash_alert.js

+import Vue from 'vue';
+import FlashAlert from 'ee/trials/components/flash_alert.vue';
+
+export const initFlashAlert = () => {
+  const el = document.querySelector('.js-flash-alert');
+
+  if (!el) {
+    return null;
+  }
+
+  const { errors } = el.dataset;
+
+  if (!errors) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'FlashAlertRoot',
+    render(createElement) {
+      return createElement(FlashAlert, {
+        props: { errors },
+      });
+    },
+  });
+};

ee/app/helpers/ee/trial_helper.rb

@@ -56,10 +56,6 @@ module EE
       grouped_options_for_select(grouped_options, selected, prompt: _('Please select a group'))
     end
 
-    def show_trial_errors?(namespace, service_result)
-      namespace&.invalid? || (service_result && !service_result[:success])
-    end
-
     def trial_errors(namespace, service_result)
       namespace&.errors&.full_messages&.to_sentence&.presence || service_result&.dig(:errors)&.presence
     end

ee/app/views/trials/_errors.html.haml

-- if show_trial_errors?(@namespace, @result)
-  .flash-container.trial-errors
-    .flash-alert.text-center{ data: { testid: "alert-danger" } }
-      = _('We have found the following errors:')
-      .flash-text
-        = trial_errors(@namespace, @result)

ee/app/views/trials/new.html.haml

@@ -12,7 +12,7 @@
     %p.gl-text-gray-700.gl-font-lg
       = s_('Trial|Your GitLab Ultimate trial lasts for 30 days, but you can keep your free GitLab account forever. We just need some additional information to activate your trial.')
 
-    = render 'errors'
+    .js-flash-alert{ data: { errors: trial_errors(@namespace, @result) } }
 
     #js-trial-create-lead-form{ data: create_lead_form_data }
 

ee/app/views/trials/select.html.haml

@@ -12,7 +12,7 @@
     %p.gl-text-gray-700.gl-font-lg
       = trial_selection_intro_text
 
-    = render 'errors'
+    .js-flash-alert{ data: { errors: trial_errors(@namespace, @result) } }
 
     = form_tag apply_trials_path(glm_params), method: :post, class: 'js-saas-trial-group' do
       - if show_trial_namespace_select?

ee/spec/frontend/trials/components/flash_alert_spec.js

+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import FlashAlert from 'ee/trials/components/flash_alert.vue';
+
+describe('FlashAlert', () => {
+  let wrapper;
+
+  const createComponent = ({ errors = null } = {}) => {
+    wrapper = shallowMount(FlashAlert, {
+      propsData: { errors },
+    });
+  };
+
+  const errors = 'this is an error';
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  beforeEach(() => {
+    createComponent({ errors });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows an alert', () => {
+    expect(findAlert().exists()).toBe(true);
+  });
+
+  it('is dismissible', () => {
+    expect(findAlert().props('dismissible')).toBe(false);
+  });
+
+  it('is of type danger', () => {
+    expect(findAlert().props('variant')).toBe('danger');
+  });
+
+  it('contains the error message', () => {
+    expect(findAlert().text()).toContain(errors);
+  });
+});

ee/spec/helpers/ee/trial_helper_spec.rb

@@ -190,50 +190,6 @@ RSpec.describe EE::TrialHelper do
     end
   end
 
-  describe '#show_trial_errors?' do
-    shared_examples 'shows errors based on trial generation result' do
-      where(:trial_result, :expected_result) do
-        nil                | nil
-        { success: true }  | false
-        { success: false } | true
-      end
-
-      with_them do
-        it 'show errors when trial generation was unsuccessful' do
-          expect(helper.show_trial_errors?(namespace, trial_result)).to eq(expected_result)
-        end
-      end
-    end
-
-    context 'when namespace is nil' do
-      let(:namespace) { nil }
-
-      it_behaves_like 'shows errors based on trial generation result'
-    end
-
-    context 'when namespace is valid' do
-      let(:namespace) { build(:namespace) }
-
-      it_behaves_like 'shows errors based on trial generation result'
-    end
-
-    context 'when namespace is invalid' do
-      let(:namespace) { build(:namespace, name: 'admin') }
-
-      where(:trial_result, :expected_result) do
-        nil                | true
-        { success: true }  | true
-        { success: false } | true
-      end
-
-      with_them do
-        it 'show errors regardless of trial generation result' do
-          expect(helper.show_trial_errors?(namespace, trial_result)).to eq(expected_result)
-        end
-      end
-    end
-  end
-
   describe '#show_extend_reactivate_trial_button?' do
     let(:namespace) { build(:namespace) }