diff options
Diffstat (limited to 'app/views/shared')
62 files changed, 285 insertions, 285 deletions
diff --git a/app/views/shared/_alert_info.html.haml b/app/views/shared/_alert_info.html.haml index e47c100909a..30dfc87b9bf 100644 --- a/app/views/shared/_alert_info.html.haml +++ b/app/views/shared/_alert_info.html.haml @@ -1,6 +1,3 @@ -.gl-alert.gl-alert-info - = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title') - %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') } - = sprite_icon('close', css_class: 'gl-icon') - .gl-alert-body += render Pajamas::AlertComponent.new(variant: :info, dismissible: true) do |c| + = c.body do = body diff --git a/app/views/shared/_auto_devops_callout.html.haml b/app/views/shared/_auto_devops_callout.html.haml index d6d84b2181f..c2b941c6106 100644 --- a/app/views/shared/_auto_devops_callout.html.haml +++ b/app/views/shared/_auto_devops_callout.html.haml @@ -1,15 +1,13 @@ -%section.js-autodevops-banner.gl-banner{ data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } } - .gl-banner-illustration - = image_tag('illustrations/autodevops.svg') += render Pajamas::BannerComponent.new(button_text: s_('AutoDevOps|Enable in settings'), + button_link: project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), + svg_path: 'illustrations/autodevops.svg', + banner_options: { class: 'js-autodevops-banner', data: { uid: 'auto_devops_settings_dismissed', project_path: project_path(@project) } }, + close_options: { 'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box'), class: 'js-close-callout' }) do |c| + - c.title do + = s_('AutoDevOps|Auto DevOps') - .gl-banner-content - %h1.gl-banner-title= s_('AutoDevOps|Auto DevOps') - %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') - %p - - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer') - = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link } - = link_to s_('AutoDevOps|Enable in settings'), project_settings_ci_cd_path(@project, anchor: 'autodevops-settings'), class: 'btn btn-md btn-default gl-button js-close-callout' + %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.') - %button.gl-banner-close.close.js-close-callout{ type: 'button', - 'aria-label' => s_('AutoDevOps|Dismiss Auto DevOps box') } - = sprite_icon('close', size: 16, css_class: 'dismiss-icon') + %p + - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer') + = s_('AutoDevOps|Learn more in the %{link_to_documentation}').html_safe % { link_to_documentation: link } diff --git a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml index d69f54608e9..1f37e33a037 100644 --- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml +++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml @@ -1,7 +1,7 @@ - if show_auto_devops_implicitly_enabled_banner?(project, current_user) - = render Pajamas::AlertComponent.new(alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner', - close_button_class: 'hide-auto-devops-implicitly-enabled-banner', - close_button_data: { project_id: project.id }) do |c| + = render Pajamas::AlertComponent.new(alert_options: { class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner' }, + close_button_options: { class: 'hide-auto-devops-implicitly-enabled-banner', + data: { project_id: project.id }}) do |c| = c.body do = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.") - unless Gitlab.config.registry.enabled diff --git a/app/views/shared/_broadcast_message.html.haml b/app/views/shared/_broadcast_message.html.haml index ab6423e9ade..f7794677dc1 100644 --- a/app/views/shared/_broadcast_message.html.haml +++ b/app/views/shared/_broadcast_message.html.haml @@ -13,8 +13,11 @@ - else = yield - if dismissable && !preview - %button.btn.gl-close-btn-color-inherit.gl-broadcast-message-dismiss.btn-default.btn-sm.gl-button.btn-default-tertiary.btn-icon.js-dismiss-current-broadcast-notification{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } } - = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! gl-text-white") + = render Pajamas::ButtonComponent.new(category: :tertiary, + icon: 'close', + size: :small, + button_options: { class: 'gl-close-btn-color-inherit gl-broadcast-message-dismiss js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601 } }, + icon_classes: 'gl-mx-3! gl-text-white') - else - notification_class = "js-broadcast-notification-#{message.id}" - notification_class << ' preview' if preview @@ -25,5 +28,8 @@ - else = yield - if !preview - %button.js-dismiss-current-broadcast-notification.btn.btn-link.gl-button{ 'aria-label' => _('Close'), :type => 'button', data: { id: message.id, expire_date: message.ends_at.iso8601 } } - = sprite_icon('close', size: 16, css_class: "gl-icon gl-mx-3! gl-text-gray-700") + = render Pajamas::ButtonComponent.new(variant: :link, + icon: 'close', + size: :small, + button_options: { class: 'js-dismiss-current-broadcast-notification', 'aria-label': _('Close'), data: { id: message.id, expire_date: message.ends_at.iso8601 } }, + icon_classes: 'gl-mx-3! gl-text-gray-700') diff --git a/app/views/shared/_captcha_check.html.haml b/app/views/shared/_captcha_check.html.haml index 3d611c22491..a10ae655ea6 100644 --- a/app/views/shared/_captcha_check.html.haml +++ b/app/views/shared/_captcha_check.html.haml @@ -3,7 +3,7 @@ - script = local_assigns.fetch(:script, true) - method = params[:action] == 'create' ? :post : :put -%h3.page-title +%h1.page-title.gl-font-size-h-display = _('Anti-spam verification') %hr diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml index ee8cfe3abb6..5ae99474c70 100644 --- a/app/views/shared/_group_form.html.haml +++ b/app/views/shared/_group_form.html.haml @@ -2,38 +2,42 @@ - group_path = root_url - group_path << parent.full_path + '/' if parent -.row - .form-group.group-name-holder.col-sm-12 - = f.label :name, class: 'label-bold' do - = s_('Groups|Group name') - = f.text_field :name, placeholder: _('My awesome group'), class: 'js-autofill-group-name form-control input-lg', data: { qa_selector: 'group_name_field' }, - required: true, - title: s_('Groups|Enter a descriptive name for your group.'), - autofocus: true - .text-muted - = s_('Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.') -.row - .form-group.col-xs-12.col-sm-8 - = f.label :path, class: 'label-bold' do - = s_('Groups|Group URL') - .input-group.gl-field-error-anchor - .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' } - .input-group-text - %span>= root_url - - if parent - %strong= parent.full_path + '/' - = f.hidden_field :parent_id - = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' }, - autofocus: local_assigns[:autofocus] || false, required: true, - pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, - title: group_url_error_message, - maxlength: ::Namespace::URL_MAX_LENGTH, - "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}" - %p.validation-error.gl-field-error.field-validation.hide - = s_('Groups|Group path is unavailable. Path has been replaced with a suggested available path.') - %p.validation-success.gl-field-success.field-validation.hide= s_('Groups|Group path is available.') - %p.validation-pending.gl-field-error-ignore.field-validation.hide= s_('Groups|Checking group URL availability...') +- if Feature::enabled?(:group_name_path_vue, current_user) + = render 'shared/groups/group_name_and_path_fields', f: f +- else + .row + .form-group.group-name-holder.col-sm-12 + = f.label :name, class: 'label-bold' do + = s_('Groups|Group name') + = f.text_field :name, placeholder: _('My awesome group'), class: 'js-autofill-group-name form-control input-lg', data: { qa_selector: 'group_name_field' }, + required: true, + title: s_('Groups|Enter a descriptive name for your group.'), + autofocus: true + .text-muted + = s_('Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.') + + .row + .form-group.col-xs-12.col-sm-8 + = f.label :path, class: 'label-bold' do + = s_('Groups|Group URL') + .input-group.gl-field-error-anchor + .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' } + .input-group-text + %span>= root_url + - if parent + %strong= parent.full_path + '/' + = f.hidden_field :parent_id + = f.text_field :path, placeholder: _('my-awesome-group'), class: 'form-control js-validate-group-path js-autofill-group-path', data: { qa_selector: 'group_path_field' }, + autofocus: local_assigns[:autofocus] || false, required: true, + pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, + title: group_url_error_message, + maxlength: ::Namespace::URL_MAX_LENGTH, + "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}" + %p.validation-error.gl-field-error.field-validation.hide + = s_('Groups|Group path is unavailable. Path has been replaced with a suggested available path.') + %p.validation-success.gl-field-success.field-validation.hide= s_('Groups|Group path is available.') + %p.validation-pending.gl-field-error-ignore.field-validation.hide= s_('Groups|Checking group URL availability...') - if @group.persisted? .gl-alert.gl-alert-warning.gl-mt-3.gl-mb-3 @@ -43,9 +47,9 @@ = succeed '.' do = link_to s_('Groups|Learn more'), help_page_path('user/group/index', anchor: 'change-a-groups-path'), target: '_blank', class: 'gl-link' -- if @group.persisted? - .row - .form-group.group-name-holder.col-sm-8 - = f.label :id, class: 'label-bold' do - = s_('Groups|Group ID') - = f.text_field :id, class: 'form-control', readonly: true + - if @group.persisted? + .row + .form-group.group-name-holder.col-sm-8 + = f.label :id, class: 'label-bold' do + = s_('Groups|Group ID') + = f.text_field :id, class: 'form-control', readonly: true diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml index 7248403d6c9..d10f514dc58 100644 --- a/app/views/shared/_import_form.html.haml +++ b/app/views/shared/_import_form.html.haml @@ -22,9 +22,9 @@ = f.text_field :import_url, value: import_url.sanitized_url, autocomplete: 'off', class: 'form-control gl-form-input', placeholder: 'https://gitlab.company.com/group/project.git', required: true = render Pajamas::AlertComponent.new(variant: :danger, - alert_class: 'gl-mt-3 js-import-url-error hide', + alert_options: { class: 'gl-mt-3 js-import-url-error hide' }, dismissible: false, - close_button_class: 'js-close-2fa-enabled-success-alert') do |c| + close_button_options: { class: 'js-close-2fa-enabled-success-alert' }) do |c| = c.body do = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.') = render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml index 9428813f6b0..af5657e0e14 100644 --- a/app/views/shared/_label.html.haml +++ b/app/views/shared/_label.html.haml @@ -6,25 +6,27 @@ - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user - tooltip_title = label_status_tooltip(label, status) if status -%li.label-list-item{ id: label_css_id, data: { id: label.id } } +%li.label-list-item{ id: label_css_id, class: "gl-p-5 gl-border-b", data: { id: label.id } } = render "shared/label_row", label: label, force_priority: force_priority %ul.label-actions-list - if can?(current_user, :admin_label, @project) %li.gl-display-inline-block.js-toggle-priority.gl-ml-3{ data: { url: remove_priority_project_label_path(@project, label), dom_id: dom_id(label), type: label.type } } - %button.add-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') } - = sprite_icon('star-o') - %button.remove-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') } - = sprite_icon('star') + = render Pajamas::ButtonComponent.new(category: :tertiary, + icon: 'star', + button_options: { class: 'remove-priority has-tooltip', 'title': _('Remove priority'), 'aria_label': _('Deprioritize label'), data: { placement: 'bottom' } }) + = render Pajamas::ButtonComponent.new(category: :tertiary, + icon: 'star-o', + button_options: { class: 'add-priority has-tooltip', title: _('Prioritize'), aria_label: _('Prioritize label'), data: { placement: 'bottom' } }) - if can?(current_user, :admin_label, label) %li.gl-display-inline-block - = link_to label.edit_path, class: 'btn gl-button btn-default-tertiary btn-sm edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do - = sprite_icon('pencil') + = render Pajamas::ButtonComponent.new(href: label.edit_path, category: :tertiary, icon: 'pencil', button_options: { class: 'edit has-tooltip', 'title': _('Edit'), 'aria_label': _('Edit'), data: { placement: 'bottom' } }) - if can?(current_user, :admin_label, label) %li.gl-display-inline-block .dropdown - %button{ type: 'button', class: 'btn gl-button btn-default-tertiary btn-sm js-label-options-dropdown', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') } - = sprite_icon('ellipsis_v') + = render Pajamas::ButtonComponent.new(category: :tertiary, + icon: 'ellipsis_v', + button_options: { class: 'js-label-options-dropdown', 'aria_label': _('Label actions dropdown'), data: { toggle: 'dropdown' } }) .dropdown-menu.dropdown-open-left %ul - if label.project_label? && label.project.group && can?(current_user, :admin_label, label.project.group) @@ -46,10 +48,9 @@ %button.js-unsubscribe-button.gl-button.btn.btn-default.gl-w-full{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title } %span.gl-button-text= _('Unsubscribe') .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) } - %button.gl-button.btn.btn-default.gl-w-full{ data: { toggle: 'dropdown' } } - %span.gl-button-text - = _('Subscribe') - = sprite_icon('chevron-down') + = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-w-full', data: { toggle: 'dropdown' } }) do + = _('Subscribe') + = sprite_icon('chevron-down') .dropdown-menu.dropdown-open-left %ul %li diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml index 91cd91ec38b..76830230cf6 100644 --- a/app/views/shared/_no_password.html.haml +++ b/app/views/shared/_no_password.html.haml @@ -1,7 +1,7 @@ - if show_no_password_message? = render Pajamas::AlertComponent.new(variant: :warning, - alert_class: 'js-no-password-message', - close_button_class: 'js-hide-no-password-message') do |c| + alert_options: { class: 'js-no-password-message' }, + close_button_options: { class: 'js-hide-no-password-message' }) do |c| = c.body do = no_password_message = c.actions do diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml index c4d8cb092dc..be1df54a432 100644 --- a/app/views/shared/_no_ssh.html.haml +++ b/app/views/shared/_no_ssh.html.haml @@ -1,7 +1,7 @@ - if show_no_ssh_key_message? = render Pajamas::AlertComponent.new(variant: :warning, - alert_class: 'js-no-ssh-message', - close_button_class: 'js-hide-no-ssh-message') do |c| + alert_options: { class: 'js-no-ssh-message' }, + close_button_options: { class: 'js-hide-no-ssh-message'}) do |c| = c.body do = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.") = c.actions do diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml index b630c829c76..60be03c6631 100644 --- a/app/views/shared/_project_limit.html.haml +++ b/app/views/shared/_project_limit.html.haml @@ -1,7 +1,7 @@ - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0 = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, - alert_class: 'project-limit-message') do |c| + alert_options: { class: 'project-limit-message' }) do |c| = c.body do = _("You won't be able to create new projects because you have reached your project limit.") = c.actions do diff --git a/app/views/shared/_remote_mirror_update_button.html.haml b/app/views/shared/_remote_mirror_update_button.html.haml index 70b72f74ab3..f3942aa5dc2 100644 --- a/app/views/shared/_remote_mirror_update_button.html.haml +++ b/app/views/shared/_remote_mirror_update_button.html.haml @@ -1,6 +1,7 @@ - if remote_mirror.update_in_progress? - %button.btn.btn-icon.gl-button.disabled{ type: 'button', data: { toggle: 'tooltip', container: 'body', qa_selector: 'updating_button' }, title: _('Updating') } - = sprite_icon("retry", css_class: "spin") + = render Pajamas::ButtonComponent.new(icon: 'retry', + button_options: { class: 'disabled', title: _('Updating'), data: { toggle: 'tooltip', container: 'body', qa_selector: 'updating_button' } }, + icon_classes: 'spin') - elsif remote_mirror.enabled? = link_to update_now_project_mirror_path(@project, sync_remote: true), method: :post, class: "btn btn-icon gl-button qa-update-now-button rspec-update-now-button", data: { toggle: 'tooltip', container: 'body' }, title: _('Update now') do = sprite_icon("retry") diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml index 8de7552c39a..700ffa7aa12 100644 --- a/app/views/shared/_service_ping_consent.html.haml +++ b/app/views/shared/_service_ping_consent.html.haml @@ -1,5 +1,5 @@ - if session[:ask_for_usage_stats_consent] - = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do |c| + = render Pajamas::AlertComponent.new(alert_options: { class: 'service-ping-consent-message' }) do |c| = c.body do - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link' - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link' @@ -7,5 +7,5 @@ = c.actions do - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 }) - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 }) - = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info' + = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-confirm' = link_to _("Don't send service data"), not_now_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': false, 'data-service-ping-enabled': false, class: 'js-service-ping-consent-action alert-link btn gl-button btn-default gl-ml-3' diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml index b3d6c4c327b..0a74e47fa4c 100644 --- a/app/views/shared/_sidebar_toggle_button.html.haml +++ b/app/views/shared/_sidebar_toggle_button.html.haml @@ -1,5 +1,5 @@ %a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar.rspec-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" } - = sprite_icon('chevron-double-lg-left', css_class: 'icon-chevron-double-lg-left') + = sprite_icon('chevron-double-lg-left', size: 12, css_class: 'icon-chevron-double-lg-left') %span.collapse-text.gl-ml-3= _("Collapse sidebar") = button_tag class: 'close-nav-button', type: 'button' do diff --git a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml index 0899756d088..ff4b2de2286 100644 --- a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml +++ b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml @@ -1,9 +1,9 @@ = render Pajamas::AlertComponent.new(variant: :warning, - alert_class: 'js-recovery-settings-callout gl-mt-5', - alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK, - dismiss_endpoint: callouts_path, - defer_links: 'true' }, - close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do |c| + alert_options: { class: 'js-recovery-settings-callout gl-mt-5', + data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK, + dismiss_endpoint: callouts_path, + defer_links: 'true' }}, + close_button_options: { data: { testid: 'close-account-recovery-regular-check-callout' }}) do |c| = c.body do = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.') = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer' diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml index d4106ba4e5d..0f6fc860883 100644 --- a/app/views/shared/access_tokens/_form.html.haml +++ b/app/views/shared/access_tokens/_form.html.haml @@ -1,3 +1,4 @@ +- ajax = local_assigns.fetch(:ajax, false) - title = local_assigns.fetch(:title, _('Add a %{type}') % { type: type }) - prefix = local_assigns.fetch(:prefix, :personal_access_token) - help_path = local_assigns.fetch(:help_path) @@ -10,9 +11,9 @@ %p.profile-settings-content = _("Enter the name of your application, and we'll return a unique %{type}.") % { type: type } -= gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { class: 'js-requires-input' } do |f| += gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f| - = form_errors(token) + = form_errors(token, pajamas_alert: true) .row .form-group.col diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml index 3bbd7a32bda..8e4b8d6d428 100644 --- a/app/views/shared/builds/_tabs.html.haml +++ b/app/views/shared/builds/_tabs.html.haml @@ -1,6 +1,6 @@ - count_badge_classes = 'gl-display-none gl-sm-display-inline-flex' -= gl_tabs_nav( {class: 'gl-border-b-0 gl-flex-grow-1', data: { testid: 'jobs-tabs' } } ) do += gl_tabs_nav( {class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-w-full nav gl-border-b-0', data: { testid: 'jobs-tabs' } } ) do = gl_tab_link_to build_path_proc.call(nil), { item_active: scope.nil? } do = _('All') = gl_tab_counter_badge(limited_counter_with_delimiter(all_builds), { class: count_badge_classes }) diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml index b60d433bafa..4ab93030638 100644 --- a/app/views/shared/deploy_keys/_form.html.haml +++ b/app/views/shared/deploy_keys/_form.html.haml @@ -2,7 +2,7 @@ - deploy_key = local_assigns.fetch(:deploy_key) - deploy_keys_project = deploy_key.deploy_keys_project_for(@project) -= form_errors(deploy_key) += form_errors(deploy_key, pajamas_alert: true) .form-group = form.label :title, class: 'col-form-label col-sm-2' diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml index 388fe75e833..1cd2a590653 100644 --- a/app/views/shared/deploy_keys/_index.html.haml +++ b/app/views/shared/deploy_keys/_index.html.haml @@ -2,8 +2,8 @@ %section.rspec-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } } .settings-header %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Deploy keys') - %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' } - = expanded ? 'Collapse' : 'Expand' + = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do + = expanded ? _('Collapse') : _('Expand') %p - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_keys/index') } = _("Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe } diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml index 860fb5614af..aa4a3deaac4 100644 --- a/app/views/shared/deploy_tokens/_index.html.haml +++ b/app/views/shared/deploy_tokens/_index.html.haml @@ -3,8 +3,8 @@ %section.settings.no-animate#js-deploy-tokens{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_tokens_settings_content' } } .settings-header %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= s_('DeployTokens|Deploy tokens') - %button.btn.gl-button.btn-default.js-settings-toggle - = expanded ? 'Collapse' : 'Expand' + = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do + = expanded ? _('Collapse') : _('Expand') %p = description .settings-content diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml index c3120774826..552b100d5dd 100644 --- a/app/views/shared/empty_states/_wikis.html.haml +++ b/app/views/shared/empty_states/_wikis.html.haml @@ -13,7 +13,7 @@ = create_link - if show_enable_confluence_integration?(@wiki.container) = link_to s_('WikiEmpty|Enable the Confluence Wiki integration'), - edit_project_integration_path(@project, :confluence), + edit_project_settings_integration_path(@project, :confluence), class: 'btn gl-button', title: s_('WikiEmpty|Enable the Confluence Wiki integration') - elsif @project && can?(current_user, :read_issue, @project) diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml index c9d7920b9c2..ba3293a3f75 100644 --- a/app/views/shared/errors/_gitaly_unavailable.html.haml +++ b/app/views/shared/errors/_gitaly_unavailable.html.haml @@ -1,4 +1,4 @@ -= render Pajamas::AlertComponent.new(alert_class: 'gl-my-5', += render Pajamas::AlertComponent.new(alert_options: { class: 'gl-my-5' }, variant: :danger, dismissible: false, title: reason) do |c| diff --git a/app/views/shared/form_elements/_description.html.haml b/app/views/shared/form_elements/_description.html.haml index 94818c13f76..a87aa8de679 100644 --- a/app/views/shared/form_elements/_description.html.haml +++ b/app/views/shared/form_elements/_description.html.haml @@ -6,23 +6,22 @@ - supports_quick_actions = true - preview_url = preview_markdown_path(project, target_type: model.class.name) -.form-group.row.detail-page-description - = form.label :description, _('Description'), class: 'col-form-label col-sm-2' - .col-sm-10 - - if model.is_a?(MergeRequest) - = hidden_field_tag :merge_request_diff_head_sha, model.diff_head_sha +.form-group + = form.label :description, _('Description'), class: 'gl-display-block' + - if model.is_a?(MergeRequest) + = hidden_field_tag :merge_request_diff_head_sha, model.diff_head_sha - - if model.is_a?(Issuable) - = render 'shared/issuable/form/template_selector', issuable: model + - if model.is_a?(Issuable) + = render 'shared/issuable/form/template_selector', issuable: model - = render 'shared/form_elements/apply_template_warning', issuable: model + = render 'shared/form_elements/apply_template_warning', issuable: model - = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true } do - = render 'shared/zen', f: form, attr: :description, - classes: 'note-textarea rspec-issuable-form-description', - placeholder: placeholder, - supports_quick_actions: supports_quick_actions, - qa_selector: 'issuable_form_description' - = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions - .clearfix - .error-alert + = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true } do + = render 'shared/zen', f: form, attr: :description, + classes: 'note-textarea rspec-issuable-form-description', + placeholder: placeholder, + supports_quick_actions: supports_quick_actions, + qa_selector: 'issuable_form_description' + = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions + .clearfix + .error-alert diff --git a/app/views/shared/groups/_group_name_and_path_fields.html.haml b/app/views/shared/groups/_group_name_and_path_fields.html.haml new file mode 100644 index 00000000000..709130a47d3 --- /dev/null +++ b/app/views/shared/groups/_group_name_and_path_fields.html.haml @@ -0,0 +1,5 @@ +.js-group-name-and-path{ data: group_name_and_path_app_data(@group) } + = f.hidden_field :name, data: { js_name: 'name' } + = f.hidden_field :path, maxlength: ::Namespace::URL_MAX_LENGTH, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, data: { js_name: 'path' } + = f.hidden_field :parent_id, data: { js_name: 'parentId' } + = f.hidden_field :id, data: { js_name: 'groupId' } diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml index 932971402a2..8b5b4b6e5fa 100644 --- a/app/views/shared/hook_logs/_content.html.haml +++ b/app/views/shared/hook_logs/_content.html.haml @@ -30,8 +30,11 @@ %h4.gl-mt-6= _('Request') %pre - :escaped - #{Gitlab::Json.pretty_generate(hook_log.request_data)} + - if hook_log.oversize? + = _('Request data is too large') + - else + :escaped + #{Gitlab::Json.pretty_generate(hook_log.request_data)} %h5= _('Headers') %pre diff --git a/app/views/shared/integrations/overrides.html.haml b/app/views/shared/integrations/overrides.html.haml index 4619675cfef..a63053bde0a 100644 --- a/app/views/shared/integrations/overrides.html.haml +++ b/app/views/shared/integrations/overrides.html.haml @@ -3,7 +3,7 @@ - page_title @integration.title, _('Integrations') - @content_class = 'limit-container-width' unless fluid_layout -%h3.page-title +%h1.page-title.gl-font-size-h-display = @integration.title .js-vue-integration-overrides{ data: integration_overrides_data(@integration, project: @project, group: @group) } diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml index 3a526a9f306..8409f224158 100644 --- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml +++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml @@ -6,8 +6,10 @@ = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do .block.issuable-sidebar-header .filter-item.inline.update-issues-btn.float-left - = button_tag _('Update all'), class: "gl-button btn js-update-selected-issues btn-confirm", disabled: true - = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right" + = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { type: 'submit', disabled: true, class: 'js-update-selected-issues' }) do + = _('Update all') + = render Pajamas::ButtonComponent.new(button_options: { class: 'js-bulk-update-menu-hide float-right' }) do + = _('Cancel') - if params[:state] != 'merged' .block .title diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml index 62e1a930ee6..da49a301087 100644 --- a/app/views/shared/issuable/_form.html.haml +++ b/app/views/shared/issuable/_form.html.haml @@ -8,7 +8,7 @@ - if @conflict = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false, - alert_class: 'gl-mb-5') do |c| + alert_options: { class: 'gl-mb-5' }) do |c| = c.body do Someone edited the #{issuable.class.model_name.human.downcase} the same time you did. Please check out @@ -17,12 +17,11 @@ = render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form -.form-group.row - = form.label :title, class: 'col-form-label col-sm-2' do - = _('Title') - %i{ aria: { hidden: true } }= '*' +.form-group + = form.label :title do + = _('Title (required)') - = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?) + = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:draft?) #js-suggestions{ data: { project_path: @project.full_path } } = render 'shared/issuable/form/type_selector', issuable: issuable, form: form @@ -36,27 +35,26 @@ = render 'shared/issuable/form/contribution', issuable: issuable, form: form - if @merge_request_to_resolve_discussions_of - .form-group.row - .col-sm-10.offset-sm-2 - = sprite_icon('information-o') - - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user) - = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid - - if @discussion_to_resolve - = hidden_field_tag 'discussion_to_resolve', @discussion_to_resolve.id - Creating this issue will resolve the thread in - - else - Creating this issue will resolve all threads in - = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve) + .form-group + = sprite_icon('information-o') + - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user) + = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid + - if @discussion_to_resolve + = hidden_field_tag 'discussion_to_resolve', @discussion_to_resolve.id + Creating this issue will resolve the thread in - else - The - = @discussion_to_resolve ? 'thread' : 'threads' - at - = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve) - will stay unresolved. Ask someone with permission to resolve - = @discussion_to_resolve ? 'it.' : 'them.' + Creating this issue will resolve all threads in + = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve) + - else + The + = @discussion_to_resolve ? 'thread' : 'threads' + at + = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve) + will stay unresolved. Ask someone with permission to resolve + = @discussion_to_resolve ? 'it.' : 'them.' - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?) -.row-content-block{ class: (is_footer ? "footer-block" : "middle-block") } +.gl-mt-5{ class: (is_footer ? "footer-block" : "middle-block") } - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = issuable.project.present.contribution_guide_path) .gl-mb-5 Please review the diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml index 7ab82362e85..ec78b3f7ce3 100644 --- a/app/views/shared/issuable/_label_page_create.html.haml +++ b/app/views/shared/issuable/_label_page_create.html.haml @@ -6,7 +6,7 @@ .dropdown-page-two.dropdown-new-label = dropdown_title(create_label_title(subject), options: { back: true, close: show_close }) = dropdown_content do - = render Pajamas::AlertComponent.new(variant: :danger, alert_class: 'js-label-error gl-mb-3', dismissible: false) + = render Pajamas::AlertComponent.new(variant: :danger, alert_options: { class: 'js-label-error gl-mb-3' }, dismissible: false) %input#new_label_name.default-dropdown-input{ type: "text", placeholder: _('Name new label') } .suggest-colors.suggest-colors-dropdown = render_suggested_colors diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index feffc7eb011..55f5dce8b37 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -13,7 +13,7 @@ %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type } .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" } - .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-md-display-none!' if moved_sidebar_enabled}" } + .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" } %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", class: "#{'gl-display-block' if moved_sidebar_enabled}", href: "#", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } = sidebar_gutter_toggle_icon - if signed_in && !moved_sidebar_enabled @@ -48,7 +48,7 @@ .js-milestone-select{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } } - if in_group_context_with_iterations - .block{ class: 'gl-pt-0! gl-collapse-empty', data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }< + .block.gl-collapse-empty{ data: { qa_selector: 'iteration_container', testid: 'iteration_container' } }< = render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type - if issuable_sidebar[:show_crm_contacts] @@ -106,8 +106,7 @@ .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') } = sprite_icon('long-arrow') .dropdown.sidebar-move-issue-dropdown.hide-collapsed - %button.gl-button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button', - data: { toggle: 'dropdown', display: 'static', track_label: "right_sidebar", track_property: "move_issue", track_action: "click_button", track_value: "" } } + = render Pajamas::ButtonComponent.new(block: true, button_options: { class: 'js-sidebar-dropdown-toggle js-move-issue', data: { toggle: 'dropdown', display: 'static', track_label: "right_sidebar", track_property: "move_issue", track_action: "click_button", track_value: "" } } ) do = _('Move issue') .dropdown-menu.dropdown-menu-selectable.dropdown-extended-height = dropdown_title(_('Move issue')) diff --git a/app/views/shared/issuable/_status_box.html.haml b/app/views/shared/issuable/_status_box.html.haml index 4fda1f11545..125ef921cfa 100644 --- a/app/views/shared/issuable/_status_box.html.haml +++ b/app/views/shared/issuable/_status_box.html.haml @@ -2,8 +2,7 @@ - badge_icon = state_name_with_icon(issuable)[1] - badge_variant = issuable.open? ? :success : issuable.merged? ? :info : :danger - badge_status_class = issuable.open? ? 'issuable-status-badge-open' : issuable.merged? ? 'issuable-status-badge-merged' : 'issuable-status-badge-closed' -- updated_mr_header_enabled = Feature.enabled?(:updated_mr_header, @project) && issuable.is_a?(MergeRequest) -- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if updated_mr_header_enabled}" +- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if issuable.is_a?(MergeRequest)}" = gl_badge_tag({ variant: badge_variant, icon: badge_icon, icon_classes: 'gl-mr-0!' }, { class: badge_classes, data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, issuable_type: 'merge_request', state: issuable.state } }) do %span.gl-display-none.gl-sm-display-block.gl-ml-2 diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml index 46df9b4ef9a..8ab002f755f 100644 --- a/app/views/shared/issuable/form/_branch_chooser.html.haml +++ b/app/views/shared/issuable/form/_branch_chooser.html.haml @@ -37,12 +37,8 @@ data: { placeholder: _('Select branch'), endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }}) - if source_level < target_level - .gl-alert.gl-alert-warning.gl-alert-not-dismissible.gl-max-content.gl-mt-4 - .gl-alert-container - .gl-alert-content{ role: 'alert' } - = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title') - .gl-alert-body - = visibilityMismatchString - %br - = _('Review the target project before submitting to avoid exposing %{source} changes.') % { source: source_visibility } -%hr + = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c| + = c.body do + = visibilityMismatchString + %br + = _('Review the target project before submitting to avoid exposing %{source} changes.') % { source: source_visibility } diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml index 76feb4d1613..5831460d59a 100644 --- a/app/views/shared/issuable/form/_merge_params.html.haml +++ b/app/views/shared/issuable/form/_merge_params.html.haml @@ -4,11 +4,10 @@ - return unless issuable.is_a?(MergeRequest) - return if issuable.closed_or_merged_without_fork? -.form-group.row - .col-sm-2.col-form-label.pt-sm-0 +.form-group.row.gl-mb-7 + .col-12 %label = _('Merge options') - .col-sm-10 - if issuable.can_remove_source_branch?(current_user) .form-check.gl-mb-3 = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml index e941eaadbc9..61cc408f6b3 100644 --- a/app/views/shared/issuable/form/_metadata.html.haml +++ b/app/views/shared/issuable/form/_metadata.html.haml @@ -5,24 +5,21 @@ - form = local_assigns.fetch(:form) - if @add_related_issue - .form-group.row - .offset-sm-2.col-sm-10 - .form-check - = check_box_tag :add_related_issue, @add_related_issue.iid, true, class: 'form-check-input' - = label_tag :add_related_issue, class: 'form-check-label' do - - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title - #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }} - %p.text-muted= _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type } + .form-group + .form-check + = check_box_tag :add_related_issue, @add_related_issue.iid, true, class: 'form-check-input' + = label_tag :add_related_issue, class: 'form-check-label' do + - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title + #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }} + %p.text-muted= _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type } - if issuable.respond_to?(:confidential) && can?(current_user, :set_confidentiality, issuable) - .form-group.row - .offset-sm-2.col-sm-10 - = form.gitlab_ui_checkbox_component :confidential, - _('This issue is confidential and should only be visible to team members with at least Reporter access.') + .form-group + = form.gitlab_ui_checkbox_component :confidential, + _('This issue is confidential and should only be visible to team members with at least Reporter access.') - if can?(current_user, :"set_#{issuable.to_ability_name}_metadata", issuable) - %hr - .row + .row.gl-pt-4 %div{ class: (has_due_date ? "col-lg-6" : "col-12") } .form-group.row.merge-request-assignee = render "shared/issuable/form/metadata_issuable_assignee", issuable: issuable, form: form, has_due_date: has_due_date @@ -35,15 +32,15 @@ - if issuable.supports_milestone? .form-group.row.issue-milestone - = form.label :milestone_id, _('Milestone'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}" - .col-sm-10{ class: ("col-md-8" if has_due_date) } + = form.label :milestone_id, _('Milestone'), class: "col-12" + .col-12 .issuable-form-select-holder = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "qa-issuable-milestone-dropdown js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: _('Select milestone') .form-group.row - = form.label :label_ids, _('Labels'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}" + = form.label :label_ids, _('Labels'), class: "col-12" = form.hidden_field :label_ids, multiple: true, value: '' - .col-sm-10{ class: "#{"col-md-8" if has_due_date}" } + .col-12 .issuable-form-select-holder = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false }, dropdown_title: "Select label" @@ -53,7 +50,7 @@ .col-lg-6 = render_if_exists "shared/issuable/form/weight", issuable: issuable, form: form .form-group.row - = form.label :due_date, _('Due date'), class: "col-form-label col-md-2 col-lg-4" - .col-8 + = form.label :due_date, _('Due date'), class: "col-12" + .col-12 .issuable-form-select-holder = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: _('Select due date'), autocomplete: 'off' diff --git a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml index 781ee8b5f80..f9c3c11eed8 100644 --- a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml +++ b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml @@ -1,5 +1,5 @@ -= form.label :assignee_id, issuable.allows_multiple_assignees? ? _('Assignees') : _('Assignee'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}" -.col-sm-10{ class: ("col-md-8" if has_due_date) } += form.label :assignee_id, issuable.allows_multiple_assignees? ? _('Assignees') : _('Assignee'), class: "col-12" +.col-12 .issuable-form-select-holder.selectbox - issuable.assignees.each do |assignee| = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", assignee.id, id: nil, data: { meta: assignee.name, avatar_url: assignee.avatar_url, name: assignee.name, username: assignee.username } @@ -8,4 +8,4 @@ = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' } = dropdown_tag(users_dropdown_label(issuable.assignees), options: assignees_dropdown_options(issuable.to_ability_name)) - = link_to _('Assign to me'), '#', class: "assign-to-me-link qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}" + = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-pl-4 qa-assign-to-me-link #{'hide' if issuable.assignees.include?(current_user)}" diff --git a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml index fad13c78e26..0e3383acfce 100644 --- a/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml +++ b/app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml @@ -1,5 +1,5 @@ -= form.label :reviewer_id, issuable.allows_multiple_reviewers? ? _('Reviewers') : _('Reviewer'), class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}" -.col-sm-10.gl-mb-2{ class: ("col-md-8" if has_due_date) } += form.label :reviewer_id, issuable.allows_multiple_reviewers? ? _('Reviewers') : _('Reviewer'), class: "col-12" +.col-12 .issuable-form-select-holder.selectbox - issuable.reviewers.each do |reviewer| = hidden_field_tag "#{issuable.to_ability_name}[reviewer_ids][]", reviewer.id, id: nil, data: { meta: reviewer.name, avatar_url: reviewer.avatar_url, name: reviewer.name, username: reviewer.username } diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml index 6b00cdc5e24..e7c0833de0f 100644 --- a/app/views/shared/issuable/form/_title.html.haml +++ b/app/views/shared/issuable/form/_title.html.haml @@ -2,17 +2,16 @@ - has_wip_commits = local_assigns.fetch(:has_wip_commits) - form = local_assigns.fetch(:form) - no_issuable_templates = issuable_templates(ref_project, issuable.to_ability_name).empty? -- div_class = no_issuable_templates ? 'col-sm-10' : 'col-sm-7 col-lg-8' - toggle_wip_link_start = '<a href="" class="js-toggle-wip">' - toggle_wip_link_end = '</a>' - add_wip_text = (_('%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft:</code>'.html_safe } ).html_safe - remove_wip_text = (_('%{link_start}Remove the %{draft_snippet} prefix%{link_end} from the title to allow this merge request to be merged when it\'s ready.' ) % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft</code>'.html_safe } ).html_safe -%div{ class: div_class, data: { testid: 'issue-title-input-field' } } +%div{ data: { testid: 'issue-title-input-field' } } = form.text_field :title, required: true, aria: { required: true }, maxlength: 255, autofocus: true, - autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto' + autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', dir: 'auto' - - if issuable.respond_to?(:work_in_progress?) + - if issuable.respond_to?(:draft?) .form-text.text-muted .js-wip-explanation{ style: "display: none;" } = remove_wip_text diff --git a/app/views/shared/issuable/form/_type_selector.html.haml b/app/views/shared/issuable/form/_type_selector.html.haml index 0d86aa8c8e7..d5c696b1698 100644 --- a/app/views/shared/issuable/form/_type_selector.html.haml +++ b/app/views/shared/issuable/form/_type_selector.html.haml @@ -1,33 +1,32 @@ - return unless issuable.supports_issue_type? && can?(current_user, :create_issue, @project) -.form-group.row.gl-mb-0 - = form.label :type, _('Type'), class: 'col-form-label col-sm-2' - .col-sm-10 - .gl-display-flex.gl-align-items-center - .issuable-form-select-holder.selectbox.form-group.gl-mb-0 - .dropdown.js-issuable-type-filter-dropdown-wrap - %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' } - %span.dropdown-toggle-text.is-default - = issuable.issue_type.capitalize || _("Select type") - = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3") - .dropdown-menu.dropdown-menu-selectable.dropdown-select - .dropdown-title.gl-display-flex - %span.gl-ml-auto - = _("Select type") - %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') } - = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon') - .dropdown-content{ data: { testid: 'issue-type-select-dropdown' } } - %ul - - if create_issue_type_allowed?(@project, :issue) - %li.js-filter-issuable-type - = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do - #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_('Issue')} - - if create_issue_type_allowed?(@project, :incident) - %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } } - = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do - #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_('Incident')} +.form-group + = form.label :type, _('Type') + .gl-display-flex.gl-align-items-center + .issuable-form-select-holder.selectbox.form-group.gl-mb-0 + .dropdown.js-issuable-type-filter-dropdown-wrap + %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' } + %span.dropdown-toggle-text.is-default + = issuable.issue_type.capitalize || _("Select type") + = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3") + .dropdown-menu.dropdown-menu-selectable.dropdown-select + .dropdown-title.gl-display-flex + %span.gl-ml-auto + = _("Select type") + %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') } + = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon') + .dropdown-content{ data: { testid: 'issue-type-select-dropdown' } } + %ul + - if create_issue_type_allowed?(@project, :issue) + %li.js-filter-issuable-type + = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do + #{sprite_icon(work_item_type_icon(:issue), css_class: 'gl-icon')} #{_('Issue')} + - if create_issue_type_allowed?(@project, :incident) + %li.js-filter-issuable-type{ data: { track: { action: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } } + = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do + #{sprite_icon(work_item_type_icon(:incident), css_class: 'gl-icon')} #{_('Incident')} - #js-type-popover + #js-type-popover - if issuable.incident? %p.form-text.text-muted diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml index 7276175db59..7c5b3fd4b3c 100644 --- a/app/views/shared/issue_type/_details_content.html.haml +++ b/app/views/shared/issue_type/_details_content.html.haml @@ -3,9 +3,9 @@ .issue-details.issuable-details.js-issue-details .detail-page-description.content-block.js-detail-page-description - #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, full_path: @project.full_path } } + #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json, issuable_id: issuable.id, full_path: @project.full_path } } .title-container - %h1.title= markdown_field(issuable, :title) + %h1.title.page-title.gl-font-size-h-display= markdown_field(issuable, :title) - if issuable.description.present? .description .md= markdown_field(issuable, :description) @@ -17,6 +17,7 @@ = render 'projects/issues/design_management' + = render_if_exists 'projects/issues/work_item_links' = render_if_exists 'projects/issues/related_issues' #js-related-merge-requests{ data: { endpoint: expose_path(api_v4_projects_issues_related_merge_requests_path(id: @project.id, issue_iid: issuable.iid)), project_namespace: @project.namespace.path, project_path: @project.path } } diff --git a/app/views/shared/labels/_form.html.haml b/app/views/shared/labels/_form.html.haml index 29f6dc02749..f768b63afff 100644 --- a/app/views/shared/labels/_form.html.haml +++ b/app/views/shared/labels/_form.html.haml @@ -2,21 +2,18 @@ = form_errors(@label) .form-group.row - .col-sm-2.col-form-label + .col-12 = f.label :title - .col-sm-10 = f.text_field :title, class: "gl-form-input form-control js-label-title qa-label-title", required: true, autofocus: true = render_if_exists 'shared/labels/create_label_help_text' .form-group.row - .col-sm-2.col-form-label + .col-12 = f.label :description - .col-sm-10 = f.text_field :description, class: "gl-form-input form-control js-quick-submit qa-label-description" .form-group.row - .col-sm-2.col-form-label + .col-12 = f.label :color, _("Background color") - .col-sm-10 .input-group .input-group-prepend .input-group-text.label-color-preview @@ -26,13 +23,13 @@ %br = _("Or you can choose one of the suggested colors below") = render_suggested_colors - .gl-display-flex.gl-justify-content-space-between.gl-p-5.gl-bg-gray-10.gl-border-t-solid.gl-border-t-gray-100.gl-border-t-1 + .gl-display-flex.gl-justify-content-space-between %div - if @label.persisted? - = f.submit _('Save changes'), class: 'btn gl-button btn-confirm js-save-button' + = f.submit _('Save changes'), class: 'btn gl-button btn-confirm js-save-button gl-mr-2' - else - = f.submit _('Create label'), class: 'btn gl-button btn-confirm js-save-button qa-label-create-button' - = link_to _('Cancel'), back_path, class: 'btn gl-button btn-default btn-cancel' + = f.submit _('Create label'), class: 'btn gl-button btn-confirm js-save-button qa-label-create-button gl-mr-2' + = link_to _('Cancel'), back_path, class: 'btn gl-button btn-default btn-cancel gl-mr-2' - if @label.persisted? - presented_label = @label.present %button.btn.btn-danger.gl-button.btn-danger-secondary.js-delete-label-modal-button{ type: 'button', data: { label_name: presented_label.name, subject_name: presented_label.subject_name, destroy_path: presented_label.destroy_path } } diff --git a/app/views/shared/labels/_nav.html.haml b/app/views/shared/labels/_nav.html.haml index 47e9d9b0e4a..622ad9db425 100644 --- a/app/views/shared/labels/_nav.html.haml +++ b/app/views/shared/labels/_nav.html.haml @@ -11,10 +11,11 @@ .input-group = search_field_tag :search, params[:search], { placeholder: _('Filter'), id: 'label-search', class: 'form-control search-text-input input-short', spellcheck: false, autofocus: true } %span.input-group-append - %button.btn.gl-button.btn-default{ type: "submit", "aria-label" => _('Submit search') } - = sprite_icon('search') + = render Pajamas::ButtonComponent.new(icon: 'search', button_options: { type: "submit", "aria-label" => _('Submit search') }) = render 'shared/labels/sort_dropdown' - if labels_or_filters && can_admin_label && @project - = link_to _('New label'), new_project_label_path(@project), class: "btn gl-button btn-confirm qa-label-create-new" + = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_label_path(@project), button_options: { class: 'qa-label-create-new' }) do + = _('New label') - if labels_or_filters && can_admin_label && @group - = link_to _('New label'), new_group_label_path(@group), class: "btn gl-button btn-confirm qa-label-create-new" + = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_group_label_path(@group), button_options: { class: 'qa-label-create-new' }) do + = _('New label') diff --git a/app/views/shared/members/_manage_access_button.html.haml b/app/views/shared/members/_manage_access_button.html.haml index 13509a7480a..c88198ec380 100644 --- a/app/views/shared/members/_manage_access_button.html.haml +++ b/app/views/shared/members/_manage_access_button.html.haml @@ -2,6 +2,6 @@ .gl-float-right = link_to path, class: 'btn btn-default btn-sm gl-button' do - = sprite_icon('pencil-square', css_class: 'gl-icon gl-button-icon') + = sprite_icon('pencil', css_class: 'gl-icon gl-button-icon') %span.gl-button-text = _('Manage access') diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml index 45699808b6b..3082c6bb4db 100644 --- a/app/views/shared/milestones/_milestone.html.haml +++ b/app/views/shared/milestones/_milestone.html.haml @@ -48,14 +48,7 @@ .milestone-actions.d-flex.justify-content-sm-start.justify-content-md-end - if @project # if in milestones list on project level - if can_admin_group_milestones? - %button.js-promote-project-milestone-button.btn.gl-button.btn-icon.btn-default-tertiary.btn-sm.has-tooltip{ title: s_('Milestones|Promote to Group Milestone'), - disabled: true, - type: 'button', - data: { url: promote_project_milestone_path(milestone.project, milestone), - milestone_title: milestone.title, - group_name: @project.group.name } } - = sprite_icon('level-up', size: 14, css_class: 'gl-button-icon gl-icon') - + = render Pajamas::ButtonComponent.new(icon: 'level-up', category: :tertiary, size: :small, button_options: { class: 'js-promote-project-milestone-button', title: s_('Milestones|Promote to Group Milestone'), disabled: true, data: { toggle: 'tooltip', container: 'body', url: promote_project_milestone_path(milestone.project, milestone), milestone_title: milestone.title, group_name: @project.group.name } }) - if can?(current_user, :admin_milestone, milestone) - if milestone.closed? = link_to s_('Milestones|Reopen Milestone'), milestone_path(milestone, milestone: { state_event: :activate }), method: :put, class: "btn gl-button btn-sm gl-ml-3" diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml index 86f9193cc7a..bde8a0b91b0 100644 --- a/app/views/shared/milestones/_milestone_complete_alert.html.haml +++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml @@ -2,7 +2,7 @@ - if milestone.complete? && milestone.active? = render Pajamas::AlertComponent.new(variant: :success, - alert_data: { testid: 'all-issues-closed-alert' }, + alert_options: { data: { testid: 'all-issues-closed-alert' }}, dismissible: false) do |c| = c.body do = yield diff --git a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml index d167ffb5582..68a4d010872 100644 --- a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml +++ b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml @@ -3,6 +3,7 @@ - form = local_assigns.fetch(:form, nil) - setting_locked = local_assigns.fetch(:setting_locked, false) - help_text = local_assigns.fetch(:help_text, s_('CascadingSettings|Subgroups cannot change this setting.')) +- label = local_assigns.fetch(:label, s_('CascadingSettings|Enforce for all subgroups')) - return unless attribute && group && form - return if setting_locked @@ -10,6 +11,6 @@ - lock_attribute = "lock_#{attribute}" = form.gitlab_ui_checkbox_component lock_attribute, - s_('CascadingSettings|Enforce for all subgroups'), + label, help_text: help_text, checkbox_options: { checked: group.namespace_settings.public_send(lock_attribute), data: { testid: 'enforce-for-all-subgroups-checkbox' } } diff --git a/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml b/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml index 4e3b6b2afc4..ed835af6524 100644 --- a/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml +++ b/app/views/shared/namespaces/cascading_settings/_lock_icon.html.haml @@ -1,4 +1,3 @@ -%button.position-absolute.gl-top-3.gl-right-0.gl-translate-y-n50.gl-cursor-default.btn.btn-default.btn-sm.gl-button.btn-default-tertiary.js-cascading-settings-lock-popover-target{ class: 'gl-p-1! gl-text-gray-600! gl-bg-transparent!', - type: 'button', - data: cascading_namespace_settings_popover_data(attribute, group, settings_path_helper) } - = sprite_icon('lock', size: 16) +- class_list = local_assigns.fetch(:class_list, '') + += render Pajamas::ButtonComponent.new(category: 'tertiary', icon: 'lock', button_options: { class: "gl-absolute gl-top-3 gl-right-0 gl-translate-y-n50 gl-p-1! gl-bg-transparent! gl-cursor-default! js-cascading-settings-lock-popover-target #{class_list}", data: cascading_namespace_settings_popover_data(attribute, group, settings_path_helper) }) diff --git a/app/views/shared/notes/_edit_form.html.haml b/app/views/shared/notes/_edit_form.html.haml index 63c895a5a03..cbf0b6f1051 100644 --- a/app/views/shared/notes/_edit_form.html.haml +++ b/app/views/shared/notes/_edit_form.html.haml @@ -9,6 +9,6 @@ .note-form-actions.clearfix .settings-message.note-edit-warning.js-finish-edit-warning = _("Finish editing this message first!") - = submit_tag _('Save comment'), class: 'gl-button btn btn-success js-comment-save-button', data: { qa_selector: 'save_comment_button' } - %button.btn.gl-button.btn-cancel.note-edit-cancel{ type: 'button' } + = submit_tag _('Save comment'), class: 'gl-button btn btn-confirm js-comment-save-button', data: { qa_selector: 'save_comment_button' } + = render Pajamas::ButtonComponent.new(button_options: { class: 'note-edit-cancel' }) do = _("Cancel") diff --git a/app/views/shared/projects/_inactive_project_deletion_alert.html.haml b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml new file mode 100644 index 00000000000..0030265f007 --- /dev/null +++ b/app/views/shared/projects/_inactive_project_deletion_alert.html.haml @@ -0,0 +1,7 @@ +- if show_inactive_project_deletion_banner?(@project) + - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('administration/inactive_project_deletion') } + - link_end = '</a>'.html_safe + - deletion_date = inactive_project_deletion_date(@project) + - title = _('Due to inactivity, this project is scheduled to be deleted on %{deletion_date}. %{link_start}Why is this scheduled?%{link_end}').html_safe % { deletion_date: deletion_date, link_start: link_start, link_end: link_end } + + = render Pajamas::AlertComponent.new(title: title, variant: :warning, alert_options: { class: 'gl-pb-3' }, dismissible: false) diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml index 8ec11d9cfbb..5271a5fac09 100644 --- a/app/views/shared/projects/_search_bar.html.haml +++ b/app/views/shared/projects/_search_bar.html.haml @@ -13,8 +13,7 @@ .filtered-search-box.m-0 .filtered-search-box-input-container.pl-2 = render 'shared/projects/search_form', admin_view: false, search_form_placeholder: _("Search projects...") - %button.btn.gl-button.btn-icon.btn-secondary{ type: 'submit', form: 'project-filter-form' } - = sprite_icon('search', css_class: 'search-icon ') + = render Pajamas::ButtonComponent.new(icon: 'search', icon_classes: 'search-icon', button_options: { type: 'submit', form: 'project-filter-form' }) .filtered-search-dropdown.flex-row.align-items-center.mb-2.m-sm-0#filtered-search-visibility-dropdown{ class: flex_grow_and_shrink_xs } .filtered-search-dropdown-label.p-0.pl-sm-3.font-weight-bold %span diff --git a/app/views/shared/promotions/_promote_servicedesk.html.haml b/app/views/shared/promotions/_promote_servicedesk.html.haml index a2da23de2b9..57ac1370f8d 100644 --- a/app/views/shared/promotions/_promote_servicedesk.html.haml +++ b/app/views/shared/promotions/_promote_servicedesk.html.haml @@ -1,11 +1,8 @@ -.user-callout.promotion-callout.js-service-desk-callout#promote_service_desk{ data: { uid: 'promote_service_desk_dismissed' } } - .bordered-box.content-block - %button.gl-button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' } - = sprite_icon('close', size: 16, css_class: 'dismiss-icon') - .svg-container - = custom_icon('icon_service_desk') - .user-callout-copy - %h4 - = _("Improve customer support with Service Desk") - %p - = _("Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email.") += render Pajamas::BannerComponent.new(banner_options: {class: 'js-service-desk-callout', data: {uid: 'promote_service_desk_dismissed'}, id: 'promote_service_desk'}, + close_options: {'aria-label' => s_('Promotions|Dismiss Service Desk promotion'), class: 'js-close-callout'}, + svg_path: 'illustrations/service_desk_callout.svg', + button_text: s_('Promotions|Configure Service Desk'), button_link: help_page_path('user/project/service_desk.html', anchor: 'configuring-service-desk')) do |c| + - c.title do + = _('Improve customer support with Service Desk') + %p + = _('Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email.') diff --git a/app/views/shared/runners/_runner_details.html.haml b/app/views/shared/runners/_runner_details.html.haml index 7a35b1cec0a..f6396168cb3 100644 --- a/app/views/shared/runners/_runner_details.html.haml +++ b/app/views/shared/runners/_runner_details.html.haml @@ -1,7 +1,7 @@ - breadcrumb_title runner.short_sha - page_title "##{runner.id} (#{runner.short_sha})" -%h2.page-title +%h1.page-title.gl-font-size-h-display = s_('Runners|Runner #%{runner_id}' % { runner_id: runner.id }) = render 'shared/runners/runner_type_badge', runner: runner diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml index 4bf02b71109..9736780c436 100644 --- a/app/views/shared/runners/_runner_type_alert.html.haml +++ b/app/views/shared/runners/_runner_type_alert.html.haml @@ -1,14 +1,14 @@ -- alert_class = 'gl-mb-5' +- alert_options = { class: 'gl-mb-5' } - if runner.group_type? - = render Pajamas::AlertComponent.new(alert_class: alert_class, + = render Pajamas::AlertComponent.new(alert_options: alert_options, title: s_('Runners|This runner is available to all projects and subgroups in a group.'), dismissible: false) do |c| = c.body do = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.') = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer' - else - = render Pajamas::AlertComponent.new(alert_class: alert_class, + = render Pajamas::AlertComponent.new(alert_options: alert_options, title: s_('Runners|This runner is associated with specific projects.'), dismissible: false) do |c| = c.body do diff --git a/app/views/shared/snippets/_embed.html.haml b/app/views/shared/snippets/_embed.html.haml index 5744fc9fba6..05fe307318f 100644 --- a/app/views/shared/snippets/_embed.html.haml +++ b/app/views/shared/snippets/_embed.html.haml @@ -14,8 +14,8 @@ .file-actions.d-none.d-sm-block .btn-group{ role: "group" }< + = embedded_copy_snippet_button(blob) = embedded_raw_snippet_button(@snippet, blob) - = embedded_snippet_download_button(@snippet, blob) %figure.file-holder.snippet-file-content{ "aria-label" => _('Code snippet') } = render 'projects/blob/viewer', viewer: blob.simple_viewer, load_async: false, external_embed: true diff --git a/app/views/shared/snippets/show.js.haml b/app/views/shared/snippets/show.js.haml index 23cebc97f63..f61f162be10 100644 --- a/app/views/shared/snippets/show.js.haml +++ b/app/views/shared/snippets/show.js.haml @@ -1,2 +1,3 @@ +function copyToClipboard(queryEl) { const copyText = document.querySelector(queryEl).textContent; navigator.clipboard.writeText(copyText); } document.write('#{escape_javascript(stylesheet_link_tag("#{stylesheet_url 'snippets'}"))}'); document.write('#{escape_javascript(render(partial: 'shared/snippets/embed', collection: @blobs, as: :blob))}'); diff --git a/app/views/shared/topics/_topic.html.haml b/app/views/shared/topics/_topic.html.haml index ca1098511da..83d5ecdb833 100644 --- a/app/views/shared/topics/_topic.html.haml +++ b/app/views/shared/topics/_topic.html.haml @@ -2,8 +2,9 @@ - detail_page_link = topic_explore_projects_path(topic_name: topic.name) .col-lg-3.col-md-4.col-sm-12 - .gl-card.gl-mb-5 - .gl-card-body.gl-display-flex.gl-align-items-center + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, + body_options: { class: 'gl-display-flex gl-align-items-center' }) do |c| + = c.body do .avatar-container.rect-avatar.s40.gl-flex-shrink-0 = link_to detail_page_link do = topic_icon(topic, class: "avatar s40") diff --git a/app/views/shared/users/_user.html.haml b/app/views/shared/users/_user.html.haml index 7f7cd31591e..93b3ce5f319 100644 --- a/app/views/shared/users/_user.html.haml +++ b/app/views/shared/users/_user.html.haml @@ -1,8 +1,8 @@ - user = local_assigns.fetch(:user) .col-lg-3.col-md-4.col-sm-12 - .gl-card.gl-mb-5 - .gl-card-body + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c| + = c.body do = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: '' .user-info diff --git a/app/views/shared/wikis/_form.html.haml b/app/views/shared/wikis/_form.html.haml index 34bedbd928a..0d5e59919cb 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, truncate: :title, pajamas_alert: true) #js-wiki-form{ data: { page_info: page_info.to_json, format_options: wiki_markup_hash_by_name_id.to_json } } diff --git a/app/views/shared/wikis/_sidebar.html.haml b/app/views/shared/wikis/_sidebar.html.haml index 5f181371663..cb6a67bd8d4 100644 --- a/app/views/shared/wikis/_sidebar.html.haml +++ b/app/views/shared/wikis/_sidebar.html.haml @@ -16,7 +16,7 @@ - edit_sidebar_url = wiki_page_path(@wiki, Wiki::SIDEBAR, action: :edit) - link_class = (editing && @page&.slug == Wiki::SIDEBAR) ? 'active' : '' = link_to edit_sidebar_url, class: link_class, data: { qa_selector: 'edit_sidebar_link' } do - = sprite_icon('pencil-square', css_class: 'gl-mr-2') + = sprite_icon('pencil', css_class: 'gl-mr-2') %span= _("Edit sidebar") - if @sidebar_error.present? diff --git a/app/views/shared/wikis/diff.html.haml b/app/views/shared/wikis/diff.html.haml index 0eeceac28c8..c39739ac422 100644 --- a/app/views/shared/wikis/diff.html.haml +++ b/app/views/shared/wikis/diff.html.haml @@ -5,7 +5,7 @@ .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row = wiki_sidebar_toggle_button - %h3.page-title.gl-flex-grow-1 + %h1.page-title.gl-font-size-h-display.gl-flex-grow-1 = link_to_wiki_page @page %span.light · diff --git a/app/views/shared/wikis/edit.html.haml b/app/views/shared/wikis/edit.html.haml index e0860bc473d..6bbce6b80d8 100644 --- a/app/views/shared/wikis/edit.html.haml +++ b/app/views/shared/wikis/edit.html.haml @@ -7,7 +7,7 @@ .js-wiki-edit-page.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row = wiki_sidebar_toggle_button - %h3.page-title.gl-flex-grow-1 + %h1.page-title.gl-font-size-h-display.gl-flex-grow-1 - if @page.persisted? = link_to_wiki_page @page %span.light diff --git a/app/views/shared/wikis/history.html.haml b/app/views/shared/wikis/history.html.haml index afbed3b0f42..052bbb3b410 100644 --- a/app/views/shared/wikis/history.html.haml +++ b/app/views/shared/wikis/history.html.haml @@ -4,7 +4,7 @@ .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row = wiki_sidebar_toggle_button - %h3.page-title + %h1.page-title.gl-font-size-h-display = link_to_wiki_page @page %span.light · diff --git a/app/views/shared/wikis/pages.html.haml b/app/views/shared/wikis/pages.html.haml index abe7753b9f1..21d63a6db3d 100644 --- a/app/views/shared/wikis/pages.html.haml +++ b/app/views/shared/wikis/pages.html.haml @@ -5,7 +5,7 @@ - wiki_sort_options = [{ text: s_("Wiki|Title"), value: 'title', href: wiki_path(@wiki, action: :pages, sort: Wiki::TITLE_ORDER)}, { text: s_("Wiki|Created date"), value: 'created_at', href: wiki_path(@wiki, action: :pages, sort: Wiki::CREATED_AT_ORDER) }] .wiki-page-header.top-area.flex-column.flex-lg-row - %h3.page-title.gl-flex-grow-1 + %h1.page-title.gl-font-size-h-display.gl-flex-grow-1 = s_("Wiki|Wiki Pages") .nav-controls.pb-md-3.pb-lg-0 |