Apply new GitLab UI for form inputs project settings page

app/assets/javascripts/badges/components/badge_form.vue

@@ -179,7 +179,7 @@ export default {
         id="badge-link-url"
         v-model="linkUrl"
         type="URL"
-        class="form-control"
+        class="form-control gl-form-input"
         required
         @input="debouncedPreview"
       />
@@ -194,7 +194,7 @@ export default {
         id="badge-image-url"
         v-model="imageUrl"
         type="URL"
-        class="form-control"
+        class="form-control gl-form-input"
         required
         @input="debouncedPreview"
       />

app/assets/javascripts/deploy_keys/components/keys_panel.vue

@@ -48,7 +48,7 @@ export default {
         :project-id="projectId"
       />
     </template>
-    <div v-else class="settings-message text-center">
+    <div v-else class="settings-message text-center gl-mt-5">
       {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
   </div>

app/views/projects/_merge_request_merge_suggestions_settings.html.haml

@@ -9,7 +9,7 @@
       anchor: 'configure-the-commit-message-for-applied-suggestions'),
       target: '_blank'
   .mb-2
-    = form.text_field :suggestion_commit_message, class: 'form-control mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
+    = form.text_field :suggestion_commit_message, class: 'form-control gl-form-input mb-2', placeholder: Gitlab::Suggestions::CommitMessage::DEFAULT_SUGGESTION_COMMIT_MESSAGE
     %p.form-text.text-muted
       = s_('ProjectSettings|The variables GitLab supports:')
       - Gitlab::Suggestions::CommitMessage::PLACEHOLDERS.keys.each do |placeholder|

app/views/projects/mirrors/_authentication_method.html.haml

@@ -6,11 +6,11 @@
   .select-wrapper
     = f.select :auth_method,
         options_for_select(auth_options, mirror.auth_method),
-        {}, { class: "form-control select-control js-mirror-auth-type qa-authentication-method" }
+        {}, { class: "form-control gl-form-input select-control js-mirror-auth-type qa-authentication-method" }
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
     = f.hidden_field :auth_method, value: "password", class: "js-hidden-mirror-auth-type"
 
 .form-group
   .well-password-auth.collapse.js-well-password-auth
     = f.label :password, _("Password"), class: "label-bold"
-    = f.password_field :password, value: mirror.password, class: 'form-control qa-password', autocomplete: 'new-password'
+    = f.password_field :password, value: mirror.password, class: 'form-control gl-form-input qa-password', autocomplete: 'new-password'

app/views/projects/mirrors/_mirror_repos.html.haml

@@ -21,7 +21,7 @@
 
             .form-group.has-feedback
               = label_tag :url, _('Git repository URL'), class: 'label-light'
-              = text_field_tag :url, nil, class: 'form-control js-mirror-url js-repo-url qa-mirror-repository-url-input', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password'
+              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url qa-mirror-repository-url-input', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password'
 
             = render 'projects/mirrors/instructions'
 

app/views/projects/mirrors/_mirror_repos_form.html.haml

 .form-group
   = label_tag :mirror_direction, _('Mirror direction'), class: 'label-light'
   .select-wrapper
-    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control select-control js-mirror-direction qa-mirror-direction', disabled: true
+    = select_tag :mirror_direction, options_for_select([[_('Push'), 'push']]), class: 'form-control gl-form-input select-control js-mirror-direction qa-mirror-direction', disabled: true
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
 
 = render partial: "projects/mirrors/mirror_repos_push", locals: { f: f }

app/views/projects/settings/_general.html.haml

@@ -7,17 +7,17 @@
       .form-group.col-md-5
         = f.label :name, class: 'label-bold', for: 'project_name_edit' do
           = _('Project name')
-        = f.text_field :name, class: 'form-control qa-project-name-field', id: "project_name_edit"
+        = f.text_field :name, class: 'form-control gl-form-input qa-project-name-field', id: "project_name_edit"
 
       .form-group.col-md-7
         = f.label :id, class: 'label-bold' do
           = _('Project ID')
-        = f.text_field :id, class: 'form-control w-auto', readonly: true
+        = f.text_field :id, class: 'form-control gl-form-input w-auto', readonly: true
 
     .row
       .form-group.col-md-9
         = f.label :tag_list, _('Topics (optional)'), class: 'label-bold'
-        = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control"
+        = f.text_field :tag_list, value: @project.tag_list.join(', '), maxlength: 2000, class: "form-control gl-form-input"
         %p.form-text.text-muted= _('Separate topics with commas.')
 
     = render_if_exists 'compliance_management/compliance_framework/project_settings', f: f
@@ -25,7 +25,7 @@
     .row
       .form-group.col-md-9
         = f.label :description, _('Project description (optional)'), class: 'label-bold'
-        = f.text_area :description, class: 'form-control', rows: 3, maxlength: 250
+        = f.text_area :description, class: 'form-control gl-form-input', rows: 3, maxlength: 250
 
   .row= render_if_exists 'projects/classification_policy_settings', f: f
 

app/views/projects/settings/ci_cd/_form.html.haml

@@ -63,7 +63,7 @@
         .form-group
           = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
             = form.label :default_git_depth, _('Git shallow clone'), class: 'label-bold'
-            = form.number_field :default_git_depth, { class: 'form-control', min: 0, max: 1000 }
+            = form.number_field :default_git_depth, { class: 'form-control gl-form-input', min: 0, max: 1000 }
             %p.form-text.text-muted
               = html_escape(_('The number of changes to fetch from GitLab when cloning a repository. Lower values can speed up pipeline execution. Set to %{code_open}0%{code_close} or blank to fetch all branches and tags for each job')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
               = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'git-shallow-clone'), target: '_blank'
@@ -71,7 +71,7 @@
         %hr
         .form-group
           = f.label :build_timeout_human_readable, _('Timeout'), class: 'label-bold'
-          = f.text_field :build_timeout_human_readable, class: 'form-control'
+          = f.text_field :build_timeout_human_readable, class: 'form-control gl-form-input'
           %p.form-text.text-muted
             = html_escape(_('Jobs fail if they run longer than the timeout time. Input value is in seconds by default. Human readable input is also accepted, for example %{code_open}1 hour%{code_close}.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'timeout'), target: '_blank'
@@ -79,7 +79,7 @@
         - if can?(current_user, :update_max_artifacts_size, @project)
           .form-group
             = f.label :max_artifacts_size, _('Maximum artifacts size'), class: 'label-bold'
-            = f.number_field :max_artifacts_size, class: 'form-control'
+            = f.number_field :max_artifacts_size, class: 'form-control gl-form-input'
             %p.form-text.text-muted
               = _("The maximum file size in megabytes for individual job artifacts.")
               = link_to sprite_icon('question-o'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size'), target: '_blank'
@@ -89,7 +89,7 @@
           .input-group
             %span.input-group-prepend
               .input-group-text /
-            = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression', data: { qa_selector: 'build_coverage_regex_field' }
+            = f.text_field :build_coverage_regex, class: 'form-control gl-form-input', placeholder: 'Regular expression', data: { qa_selector: 'build_coverage_regex_field' }
             %span.input-group-append
               .input-group-text /
           %p.form-text.text-muted

app/views/projects/settings/operations/_tracing.html.haml

@@ -24,7 +24,7 @@
       .form-group
         = f.fields_for :tracing_setting_attributes, setting do |form|
           = form.label :external_url, _('Jaeger URL'), class: 'label-bold'
-          = form.url_field :external_url, class: 'form-control', placeholder: 'e.g. https://jaeger.mycompany.com'
+          = form.url_field :external_url, class: 'form-control gl-form-input', placeholder: 'e.g. https://jaeger.mycompany.com'
           %p.form-text.text-muted
             - jaeger_help_url = "https://www.jaegertracing.io/docs/1.7/getting-started/"
             - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }

app/views/projects/triggers/_form.html.haml

@@ -7,5 +7,5 @@
       %p.form-control-plaintext= @trigger.token
   .form-group
     = f.label :key, "Description", class: "label-bold"
-    = f.text_field :description, class: "form-control", required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
+    = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
   = f.submit btn_text, class: "btn btn-success"

app/views/shared/deploy_keys/_form.html.haml

@@ -6,7 +6,7 @@
 
 .form-group
   = form.label :title, class: 'col-form-label col-sm-2'
-  .col-sm-10= form.text_field :title, class: 'form-control', readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
+  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
 
 .form-group
   - if deploy_key.new_record?
@@ -16,11 +16,11 @@
         - link_start = "<a href='#{help_page_path('ssh/README')}' target='_blank' rel='noreferrer noopener'>".html_safe
         - link_end = '</a>'
         = _('Paste a machine public key here. Read more about how to generate it %{link_start}here%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
-      = form.text_area :key, class: 'form-control thin_area', rows: 5
+      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5
   - else
     = form.label :fingerprint, class: 'col-form-label col-sm-2'
     .col-sm-10
-      = form.text_field :fingerprint, class: 'form-control', readonly: 'readonly'
+      = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|

app/views/shared/deploy_keys/_project_group_form.html.haml

@@ -2,10 +2,10 @@
   = form_errors(@deploy_keys.new_key)
   .form-group.row
     = f.label :title, class: "label-bold"
-    = f.text_field :title, class: 'form-control', required: true
+    = f.text_field :title, class: 'form-control gl-form-input', required: true
   .form-group.row
     = f.label :key, class: "label-bold"
-    = f.text_area :key, class: "form-control", rows: 5, required: true
+    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true
   .form-group.row
     %p.light.gl-mb-0
       = _('Paste a machine public key here. Read more about how to generate it')

app/views/shared/deploy_tokens/_form.html.haml

@@ -6,15 +6,15 @@
 
   .form-group
     = f.label :name, class: 'label-bold'
-    = f.text_field :name, class: 'form-control qa-deploy-token-name', required: true
+    = f.text_field :name, class: 'form-control gl-form-input qa-deploy-token-name', required: true
 
   .form-group
     = f.label :expires_at, class: 'label-bold'
-    = f.text_field :expires_at, class: 'datepicker form-control qa-deploy-token-expires-at', value: f.object.expires_at
+    = f.text_field :expires_at, class: 'datepicker form-control gl-form-input qa-deploy-token-expires-at', value: f.object.expires_at
 
   .form-group
     = f.label :username, class: 'label-bold'
-    = f.text_field :username, class: 'form-control qa-deploy-token-username'
+    = f.text_field :username, class: 'form-control gl-form-input qa-deploy-token-username'
     .text-secondary= s_('DeployTokens|Default format is "gitlab+deploy-token-{n}". Enter custom username if you want to change it.')
 
   .form-group

app/views/shared/web_hooks/_form.html.haml

@@ -2,10 +2,10 @@
 
 .form-group
   = form.label :url, s_('Webhooks|URL'), class: 'label-bold'
-  = form.text_field :url, class: 'form-control', placeholder: 'http://example.com/trigger-ci.json'
+  = form.text_field :url, class: 'form-control gl-form-input', placeholder: 'http://example.com/trigger-ci.json'
 .form-group
   = form.label :token, s_('Webhooks|Secret Token'), class: 'label-bold'
-  = form.text_field :token, class: 'form-control', placeholder: ''
+  = form.text_field :token, class: 'form-control gl-form-input', placeholder: ''
   %p.form-text.text-muted
   = s_('Webhooks|Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header.')
 .form-group
@@ -13,9 +13,9 @@
   %ul.list-unstyled.gl-ml-6
     %li
       = form.check_box :push_events, class: 'form-check-input'
-      = form.label :push_events, class: 'list-label form-check-label gl-ml-1' do
+      = form.label :push_events, class: 'list-label form-check-label gl-ml-1 gl-mb-3' do
         %strong= s_('Webhooks|Push events')
-      = form.text_field :push_events_branch_filter, class: 'form-control', placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
+      = form.text_field :push_events_branch_filter, class: 'form-control gl-form-input', placeholder: 'Branch name or wildcard pattern to trigger on (leave blank for all)'
       %p.text-muted.gl-ml-1
         = s_('Webhooks|This URL will be triggered by a push to the repository')
     %li

changelogs/unreleased/yo-gl-new-input.yml

+---
+title: Apply new GitLab UI for form inputs project settings page
+merge_request: 52097
+author: Yogi (@yo)
+type: other

ee/app/views/projects/mirrors/_mirror_repos_form.html.haml

@@ -10,7 +10,7 @@
 .form-group
   = label_tag :mirror_direction, _('Mirror direction'), class: 'label-light'
   .select-wrapper
-    = select_tag :mirror_direction, options_for_select(direction_options), class: 'form-control select-control js-mirror-direction qa-mirror-direction', disabled: (direction_options.count == 1) || has_existing_pull_mirror
+    = select_tag :mirror_direction, options_for_select(direction_options), class: 'form-control gl-form-input select-control js-mirror-direction qa-mirror-direction', disabled: (direction_options.count == 1) || has_existing_pull_mirror
     = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")
 
 .js-form-insertion-point