Draft: Create Vue Form errors and feature flag

What does this MR do?

Create Vue Form errors and feature flag

• create new form_error method that renders a Vue alert
• create feature flag to iteratively verify the new form_error method
• remove unused file
• update styling
• truncate long errors
• add/update tests

Credit: @ealcantara for making the initial draft

Related to #294442 (closed)

How to reproduce

1. Enable :new_form_errors feature flag via rails c && Feature.enable(:new_form_errors)
2. Single Error: Navigate to create a merge request, do not select a source branch, click Compare branches and continue (seems like bad UX to not grey out that button if a selection has not been made, but that is a different problem), verify alert
3. Multiple Errors: Navigate to Admin => Deploy Keys => Click "Add Deploy Key", Click Create without filling anything out, verify multiple errors
4. Truncated Errors: Apply the patch below, navigate to Project => Wiki, click Create a new wiki page, put in a title that is >255chars, click Create, verify error

diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index 2ea3a95e2fa..89c2e734292 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -14,6 +14,7 @@ def new_form_errors(model, type, truncate)
     errors = model.errors.map do |attribute, message|
       { attribute: attribute, message: model.errors.full_message(attribute, message) }
     end
+    errors << {attribute: 'title', message: 'thisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncate'}
     content_tag(:div, nil, class: 'js-form-errors-explanation', data: { errors: errors, truncate: truncate, type: type })
   end
 
@@ -41,6 +42,8 @@ def form_errors_legacy(model, type, truncate)
             tag.li(message)
           end
 
+          messages << tag.li(tag.span('thisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncatethisIsAFakeErrorToTestTruncate', class: 'str-truncated-100')) if truncate.include?(:title)
+
           messages.join.html_safe
         end
     end

5. Different Type Errors: Apply the patch below, navigate to Project => Wiki, click Create a new wiki page, put in a title that is >255chars, click Create, verify error

diff --git a/app/views/shared/wikis/_form.html.haml b/app/views/shared/wikis/_form.html.haml
index e121725b9af..71317a5b510 100644
--- a/app/views/shared/wikis/_form.html.haml
+++ b/app/views/shared/wikis/_form.html.haml
@@ -1,6 +1,6 @@
 - page_info = { last_commit_sha: @page.last_commit_sha, persisted: @page.persisted?, title: @page.title, content: @page.content || '', format: @page.format.to_s, uploads_path: uploads_path, path: wiki_page_path(@wiki, @page), wiki_path: wiki_path(@wiki), help_path: help_page_path('user/project/wiki/index'), markdown_help_path: help_page_path('user/markdown'), markdown_preview_path: wiki_page_path(@wiki, @page, action: :preview_markdown), create_path: wiki_path(@wiki, action: :create) }
 
 .gl-mt-3
-  = form_errors(@page, truncate: :title)
+  = form_errors(@page, type: 'wiki', truncate: :title)
 
 #js-wiki-form{ data: { page_info: page_info.to_json, format_options: Wiki::MARKUPS.to_json } }

Screenshots (strongly suggested)

Page	Feature Flag Off	Feature Flag On
Merge Branch (single error)
Deploy Keys (multiple errors)
Wiki (with truncate)
Wiki (modified to use a different type) (see below for code)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #294442 (closed)