diff --git a/app/assets/javascripts/pages/projects/pages_domains/form.js b/app/assets/javascripts/pages/projects/pages_domains/form.js
index 6836d399fa4628840aa238969d4687eb50834bfa..d8defa0ddcebf86b2cd7760d60f461f9d7b7ca74 100644
--- a/app/assets/javascripts/pages/projects/pages_domains/form.js
+++ b/app/assets/javascripts/pages/projects/pages_domains/form.js
@@ -3,9 +3,9 @@ import { initToggle } from '~/toggles';
function updateVisibility(selector, isVisible) {
Array.from(document.querySelectorAll(selector)).forEach((el) => {
if (isVisible) {
- el.classList.remove('d-none');
+ el.classList.remove('!gl-hidden');
} else {
- el.classList.add('d-none');
+ el.classList.add('!gl-hidden');
}
});
}
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
index e72194eb1bcc4ae7e8ef1189ba9440c636c3a07e..b613c60287a5d0747f46dae5071785b1f556b29f 100644
--- a/app/views/projects/pages/_access.html.haml
+++ b/app/views/projects/pages/_access.html.haml
@@ -4,15 +4,20 @@
- if Gitlab.config.pages.namespace_in_path
- pages_url_text = "#{pages_url} (Beta)"
- = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5', data: { testid: 'access-page-container' } }, footer_options: { class: 'gl-alert-warning' }) do |c|
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { testid: 'access-page-container' } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-p-5 gl-flex gl-flex-col gl-gap-3' }, footer_options: { class: 'gl-alert-warning' }) do |c|
- c.with_header do
- = s_('GitLabPages|Access pages')
+ .gl-new-card-title-wrapper
+ %h2.gl-new-card-title
+ = s_('GitLabPages|Access pages')
+ .gl-new-card-count
+ = sprite_icon('doc-text', css_class: 'gl-mr-2')
+ %span= @project.pages_domains.size + (pages_url ? 1 : 0)
- c.with_body do
- %p
+ %p.gl-m-0
= external_link(pages_url_text, pages_url)
- @project.pages_domains.each do |domain|
- %p
+ %p.gl-m-0
= external_link(domain.url, domain.url)
- unless @project.public_pages?
- c.with_footer do
diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml
index f80c4e361d3de8349d09775b1cd1676bc67885bd..b77a7eb9b4eaf6030aa27df1695e02628f5028d9 100644
--- a/app/views/projects/pages/_destroy.haml
+++ b/app/views/projects/pages/_destroy.haml
@@ -1,12 +1,12 @@
- if @project.pages_deployed?
- if can?(current_user, :remove_pages, @project)
- .gl-bg-red-50.gl-shadow-inner-l-3-red-600.gl-py-5.gl-px-6
+ .gl-bg-red-50.gl-shadow-inner-l-3-red-600.gl-py-5.gl-px-6.gl-mt-5
%h4.gl-font-lg.gl-mt-0= s_('GitLabPages|Remove pages')
- %p= s_('GitLabPages|Removing pages will prevent them from being exposed to the outside world.')
+ %p= s_('GitLabPages|Removing pages will prevent them from being exposed to the public internet.')
= render Pajamas::ButtonComponent.new(href: project_pages_path(@project),
variant: :danger,
method: :delete,
- button_options: {data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, "aria-label": s_('GitLabPages|Remove pages')}) do
+ button_options: { data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger' }, "aria-label": s_('GitLabPages|Remove pages') }) do
= s_('GitLabPages|Remove pages')
- else
.nothing-here-block
diff --git a/app/views/projects/pages/_header.html.haml b/app/views/projects/pages/_header.html.haml
index c34034ccafc7af73272af91ad0754ddc17aae25f..2d62c2dd5e08ad7f78d014801284dfce7c72769d 100644
--- a/app/views/projects/pages/_header.html.haml
+++ b/app/views/projects/pages/_header.html.haml
@@ -1,8 +1,6 @@
-- @content_class = 'limit-container-width'
-
-%h4.page-title
+%h1.gl-heading-1{ class: "!gl-mt-5" }
= s_('GitLabPages|Pages')
-%p
+%p.gl-text-secondary
- docs_link_start = "".html_safe
- docs_link_end = ''.html_safe
= s_('GitLabPages|With GitLab Pages you can host your static website directly from your GitLab repository. %{docs_link_start}Learn more.%{link_end}').html_safe % { docs_link_start: docs_link_start, link_end: docs_link_end }
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 944e6e6b9bb4569d0860d9450f8bd53fc88c5151..539eb2ebbb7cc86682aef3cec0ca331239e3204f 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -2,55 +2,65 @@
- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
- if can?(current_user, :update_pages, @project)
- = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5'}, header_options: { class: 'gl-display-flex gl-align-items-center gl-justify-content-space-between' }) do |c|
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex gl-items-center gl-justify-between' }, body_options: { class: 'gl-new-card-body gl-p-0' }) do |c|
- c.with_header do
- Domains (#{@domains.size})
+ .gl-new-card-title-wrapper
+ %h2.gl-new-card-title
+ = s_('GitLabPages|Domains')
+ .gl-new-card-count
+ = sprite_icon('earth', css_class: 'gl-mr-2')
+ %span.js-admin-labels-count= @domains.size
- if can_add_new_domain
- = render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_pages_domain_path(@project)) do
- = s_('GitLabPages|New Domain')
+ .gl-new-card-actions
+ = render Pajamas::ButtonComponent.new(size: :small, href: new_project_pages_domain_path(@project)) do
+ = s_('GitLabPages|New domain')
- c.with_body do
- if @domains.any?
%ul.list-group.list-group-flush
- @domains.each do |domain|
- %li.list-group-item.gl-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-p-0
- .gl-display-flex.gl-align-items-center
- - if verification_enabled
- - tooltip, status = domain.unverified? ? [s_('GitLabPages|Unverified'), 'failed'] : [s_('GitLabPages|Verified'), 'success']
- .domain-status.ci-status-icon.has-tooltip{ class: "gl-mr-5 ci-status-icon-#{status}", title: tooltip }
- = sprite_icon("status_#{status}")
- .domain-name
- = external_link(domain.url, domain.url)
- - if domain.certificate
- %div
- = gl_badge_tag(s_('GitLabPages|Certificate: %{subject}') % { subject: domain.pages_domain.subject })
- - if domain.expired?
- = gl_badge_tag s_('GitLabPages|Expired'), variant: :danger
- %div
- = link_button_to s_('GitLabPages|Edit'), project_pages_domain_path(@project, domain), class: 'btn-grouped', variant: :confirm, category: :secondary, size: :small
- = link_button_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger'}, "aria-label": s_("GitLabPages|Remove domain"), method: :delete, class: 'btn-grouped', variant: :danger, size: :small
- - if domain.needs_verification?
- %li.list-group-item.gl-p-0
- - details_link_start = "".html_safe
- - details_link_end = ''.html_safe
- = render Pajamas::AlertComponent.new(dismissible: false,
- variant: :warning,
- show_icon: false) do |c|
- - c.with_body do
- = s_('GitLabPages|%{domain} is not verified. To learn how to verify ownership, visit your %{link_start}domain details%{link_end}.').html_safe % { domain: domain.domain,
- link_start: details_link_start,
- link_end: details_link_end }
-
- - if domain.show_auto_ssl_failed_warning?
- %li.list-group-item.gl-p-0
- - details_link_start = "".html_safe
- - details_link_end = ''.html_safe
- = render Pajamas::AlertComponent.new(dismissible: false,
- variant: :warning,
- show_icon: false) do |c|
- - c.with_body do
- = s_("GitLabPages|Something went wrong while obtaining the Let's Encrypt certificate for %{domain}. To retry visit your %{link_start}domain details%{link_end}.").html_safe % { domain: domain.domain,
+ %li.list-group-item.gl-flex.gl-flex-col.gl-bg-transparent
+ .gl-flex.gl-justify-between.gl-items-baseline
+ .gl-flex.gl-gap-3
+ - if verification_enabled
+ - tooltip, status = domain.unverified? ? [s_('GitLabPages|Unverified'), 'failed'] : [s_('GitLabPages|Verified'), 'success']
+ .domain-status.ci-status-icon.has-tooltip{ class: "ci-status-icon-#{status}", title: tooltip }
+ = sprite_icon("status_#{status}")
+ .domain-name
+ = external_link(domain.url, domain.url)
+ - if domain.certificate && domain.pages_domain.subject
+ %div
+ = gl_badge_tag(s_('GitLabPages|Certificate: %{subject}') % { subject: domain.pages_domain.subject })
+ - if domain.expired?
+ = gl_badge_tag s_('GitLabPages|Expired'), variant: :danger
+ .gl-flex.gl-gap-2
+ = render Pajamas::ButtonComponent.new(href: project_pages_domain_path(@project, domain),
+ icon: 'pencil',
+ category: :tertiary,
+ button_options: { title: s_('GitLabPages|Edit'), data: { toggle: 'tooltip', container: 'body' } })
+ = render Pajamas::ButtonComponent.new(href: project_pages_domain_path(@project, domain),
+ icon: 'remove',
+ category: :tertiary,
+ button_options: { title: s_("GitLabPages|Remove domain"), "aria-label": s_("GitLabPages|Remove domain"), data: { method: :delete, confirm: s_('GitLabPages|Are you sure?'), 'confirm-btn-variant': 'danger', toggle: 'tooltip', container: 'body' } })
+ - if domain.needs_verification?
+ .gl-mt-3
+ - details_link_start = "".html_safe
+ - details_link_end = ''.html_safe
+ = render Pajamas::AlertComponent.new(dismissible: false,
+ variant: :warning) do |c|
+ - c.with_body do
+ = s_('GitLabPages|%{domain} is not verified. To learn how to verify ownership, visit your %{link_start}domain details%{link_end}.').html_safe % { domain: domain.domain,
link_start: details_link_start,
link_end: details_link_end }
+ - if domain.show_auto_ssl_failed_warning?
+ .gl-mt-3
+ - details_link_start = "".html_safe
+ - details_link_end = ''.html_safe
+ = render Pajamas::AlertComponent.new(dismissible: false,
+ variant: :warning) do |c|
+ - c.with_body do
+ = s_("GitLabPages|Something went wrong while obtaining the Let's Encrypt certificate for %{domain}. To retry visit your %{link_start}domain details%{link_end}.").html_safe % { domain: domain.domain,
+ link_start: details_link_start,
+ link_end: details_link_end }
- else
- .gl-text-center
+ .gl-text-secondary.gl-text-center.gl-p-5
= s_("You currently have no custom domains.")
diff --git a/app/views/projects/pages/_no_domains.html.haml b/app/views/projects/pages/_no_domains.html.haml
index 97c3ad11f1abc4a5df25a0297629ade7f460c50c..706c6cc1499acc8b7907252301e45fe5a6646799 100644
--- a/app/views/projects/pages/_no_domains.html.haml
+++ b/app/views/projects/pages/_no_domains.html.haml
@@ -1,11 +1,13 @@
- can_add_new_domain = can_create_pages_custom_domains?(current_user, @project)
- if can?(current_user, :update_pages, @project)
- = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5'}, body_options: { class: 'gl-text-center nothing-here-block' }) do |c|
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card'}, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-text-center nothing-here-block gl-p-5' }) do |c|
- c.with_header do
- = s_('GitLabPages|Domains')
+ .gl-new-card-title-wrapper
+ %h4.gl-new-card-title
+ = s_('GitLabPages|Domains')
- if can_add_new_domain
= render Pajamas::ButtonComponent.new(variant: :confirm, href: new_project_pages_domain_path(@project)) do
- = s_('GitLabPages|New Domain')
+ = s_('GitLabPages|New domain')
- c.with_body do
- = s_("GitLabPages|Support for domains and certificates is disabled. Ask your system's administrator to enable it.")
+ %span.gl-text-secondary= s_("GitLabPages|Support for domains and certificates is disabled. Ask your GitLab administrator to enable it.")
diff --git a/app/views/projects/pages/new.html.haml b/app/views/projects/pages/new.html.haml
index 56dfc69d740a416ce30bf60bdcc26e2e74ea0033..a7cea8f6c3abeaffbc58e23020f61987955b67c9 100644
--- a/app/views/projects/pages/new.html.haml
+++ b/app/views/projects/pages/new.html.haml
@@ -1,5 +1,4 @@
- @breadcrumb_link = project_pages_path(@project)
- page_title s_('GitLabPages|Pages')
-
#js-pages{ data: @pipeline_wizard_data }
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index 698ce404be89d22ce44581307d9fe177a7e37e26..54ce5bf099d3acefc5b67a95cb0d08dd29ffd3c4 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -2,19 +2,13 @@
- unless @project.pages_deployed?
= render 'waiting'
-
- else
= render 'header'
-
- %section
-
= render 'pages_settings'
-
- %hr.clearfix
- = render 'ssl_limitations_warning' if pages_subdomain(@project).include?(".")
- = render 'access'
- - if Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
- = render 'list'
- - else
- = render 'no_domains'
- = render 'destroy'
+ = render 'ssl_limitations_warning' if pages_subdomain(@project).include?(".")
+ = render 'access'
+ - if Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
+ = render 'list'
+ - else
+ = render 'no_domains'
+ = render 'destroy'
diff --git a/app/views/projects/pages_domains/_certificate.html.haml b/app/views/projects/pages_domains/_certificate.html.haml
index 265ce0c95890bd3aa5ec0d71b64fe3ecc5d1d65b..a752ee0593624ab341449526d670c5b2cd4ebbcc 100644
--- a/app/views/projects/pages_domains/_certificate.html.haml
+++ b/app/views/projects/pages_domains/_certificate.html.haml
@@ -4,11 +4,9 @@
- has_user_defined_certificate = domain_presenter.certificate && domain_presenter.certificate_user_provided?
- if auto_ssl_available
- .form-group.border-section
+ .form-group
.row
- .col-sm-2
- = _('Certificate')
- .col-sm-10.js-auto-ssl-toggle-container
+ .col-12.js-auto-ssl-toggle-container
%label{ for: "pages_domain_auto_ssl_enabled_button" }
- lets_encrypt_link_url = "https://letsencrypt.org/"
- lets_encrypt_link_start = "".html_safe % { lets_encrypt_link_url: lets_encrypt_link_url }
@@ -26,39 +24,40 @@
- docs_link_end = "".html_safe
= _("Let's Encrypt is a free, automated, and open certificate authority (CA) that gives digital certificates in order to enable HTTPS (SSL/TLS) for websites. Learn more about Let's Encrypt configuration by following the %{docs_link_start}documentation on GitLab Pages%{docs_link_end}.").html_safe % { docs_link_url: docs_link_url, docs_link_start: docs_link_start, docs_link_end: docs_link_end }
-.form-group.border-section.js-shown-unless-auto-ssl{ class: ("d-none" if auto_ssl_available_and_enabled) }
+.form-group.js-shown-unless-auto-ssl{ class: ("!gl-hidden" if auto_ssl_available_and_enabled) }
- if has_user_defined_certificate
- .row
- .col-sm-10.offset-sm-2
- = render Pajamas::CardComponent.new(body_options: { class: 'gl-display-flex gl-align-items-center gl-justify-content-space-between gl-p-5' }) do |c|
+ .row.gl-mt-5
+ .col-12
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-mt-0' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-flex gl-items-center gl-justify-between gl-px-5 gl-py-4' }) do |c|
- c.with_header do
- = _('Certificate')
+ .gl-new-card-title-wrapper
+ %h2.gl-new-card-title
+ = _('Certificate')
+ .gl-new-card-count
+ = sprite_icon('partner-verified', css_class: 'gl-mr-2')
- c.with_body do
%span
= domain_presenter.pages_domain.subject || _('missing')
- = link_button_to _('Remove'),
- clean_certificate_project_pages_domain_path(@project, domain_presenter),
- data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' },
- 'aria-label': s_("GitLabPages|Remove certificate"),
- variant: :danger,
- size: :small,
- method: :delete
+ = render Pajamas::ButtonComponent.new(href: clean_certificate_project_pages_domain_path(@project, domain_presenter),
+ icon: 'remove',
+ category: :tertiary,
+ button_options: { title: s_('GitLabPages|Remove certificate'), "aria-label": s_('GitLabPages|Remove certificate'), data: { method: :delete, confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger', toggle: 'tooltip', container: 'body', testid: 'remove-certificate' } })
- else
- .row
- .col-sm-10.offset-sm-2
+ .row.gl-mt-5
+ .col-12
= f.label :user_provided_certificate, _("Certificate (PEM)")
= f.text_area :user_provided_certificate,
rows: 5,
class: "form-control js-enabled-unless-auto-ssl",
disabled: auto_ssl_available_and_enabled
- %span.help-inline.text-muted= _("Upload a certificate for your domain with all intermediates")
+ %span.help-inline.gl-text-secondary= _("Upload a certificate for your domain with all intermediates")
.row
- .col-sm-10.offset-sm-2
+ .col-12
= f.label :user_provided_key, _("Key (PEM)")
= f.text_area :user_provided_key,
rows: 5,
class: "form-control js-enabled-unless-auto-ssl",
disabled: auto_ssl_available_and_enabled
- %span.help-inline.text-muted= _("Upload a private key for your certificate")
+ %span.help-inline.gl-text-secondary= _("Upload a private key for your certificate")
= render 'lets_encrypt_callout', auto_ssl_available_and_enabled: auto_ssl_available_and_enabled
diff --git a/app/views/projects/pages_domains/_dns.html.haml b/app/views/projects/pages_domains/_dns.html.haml
index 360ef01620bd305c92603eacee3a4b3272e4bfe4..6098e7092e3e37f32aac3adf7a050957d71a13e6 100644
--- a/app/views/projects/pages_domains/_dns.html.haml
+++ b/app/views/projects/pages_domains/_dns.html.haml
@@ -1,31 +1,32 @@
- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
- dns_record = "#{domain_presenter.domain} ALIAS #{pages_subdomain(domain_presenter.project)}.#{Settings.pages.host}."
-.form-group.border-section
+.form-group
.row
- .col-sm-2
- = _("DNS")
- .col-sm-10
+ .col-12
+ %label{ for: "domain_dns" }
+ = _("DNS")
.input-group
= text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
.input-group-append
= clipboard_button(target: '#domain_dns', category: :primary, size: :medium)
- %p.form-text.text-muted
+ %p.form-text.gl-text-secondary
= _("To access this domain create a new DNS record")
- if verification_enabled
- .form-group.border-section
+ .form-group
.row
- .col-sm-2
- = _("Verification status")
- .col-sm-10
- .gl-mb-3
- - text, status = domain_presenter.unverified? ? [_('Unverified'), :danger] : [_('Verified'), :success]
- = gl_badge_tag text, variant: status
- = link_button_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: 'gl-ml-2 has-tooltip', title: _("Retry verification"), size: :small
+ .col-12
+ .gl-flex.gl-items-baseline.gl-gap-3
+ %label{ for: "domain_verification" }
+ = _("Verification status")
+ .gl-flex.gl-items-baseline.gl-gap-2
+ - text, status = domain_presenter.unverified? ? [_('Unverified'), :danger] : [_('Verified'), :success]
+ = gl_badge_tag text, variant: status
+ = link_button_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: 'gl-ml-2 has-tooltip', title: _("Retry verification"), size: :small
.input-group
= text_field_tag :domain_verification, domain_presenter.verification_record, class: "monospace js-select-on-focus form-control", readonly: true
.input-group-append
= clipboard_button(target: '#domain_verification', category: :primary, size: :medium)
- %p.form-text.text-muted
+ %p.form-text.gl-text-secondary
- link_to_help = link_to(_('verify ownership'), help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index', anchor: '4-verify-the-domains-ownership'))
= _("To %{link_to_help} of your domain, add the above key to a TXT record within your DNS configuration within seven days.").html_safe % { link_to_help: link_to_help }
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index bca955dcdaebd002f6392ce68eaf9e1b4429e8f3..c351fd5e592c91315b6f10e4b6a9d7cea87f8958 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -4,17 +4,15 @@
- domain_presenter.errors.full_messages.each do |msg|
= msg
-.form-group.border-section
+.form-group
.row
- if domain_presenter.persisted?
- .col-sm-2
+ .col-12
= _("Domain")
- .col-sm-10
= external_link(domain_presenter.url, domain_presenter.url)
- else
- .col-sm-2
+ .col-12
= f.label :domain, _("Domain")
- .col-sm-10
.input-group
= f.text_field :domain, required: true, autocomplete: "off", class: "form-control"
@@ -24,5 +22,5 @@
- if Gitlab.config.pages.external_https
= render 'certificate', f: f
- else
- .border-section.nothing-here-block
+ .gl-text-secondary.gl-my-5
= _("Support for custom certificates is disabled. Ask your system's administrator to enable it.")
diff --git a/app/views/projects/pages_domains/_helper_text.html.haml b/app/views/projects/pages_domains/_helper_text.html.haml
index 4ad341c13948ae5db23ef3daff53896945b8c7bb..70519e85518e47e47b52516660724e01201012aa 100644
--- a/app/views/projects/pages_domains/_helper_text.html.haml
+++ b/app/views/projects/pages_domains/_helper_text.html.haml
@@ -2,4 +2,4 @@
- docs_link_start = "".html_safe % { docs_link_url: docs_link_url }
- docs_link_end = "".html_safe
-%p= _("Learn more about adding certificates to your project by following the %{docs_link_start}documentation on GitLab Pages%{docs_link_end}.").html_safe % { docs_link_url: docs_link_url, docs_link_start: docs_link_start, docs_link_end: docs_link_end }
+%p.gl-text-secondary= _("%{docs_link_start}How to add certificates to your project?%{docs_link_end}").html_safe % { docs_link_url: docs_link_url, docs_link_start: docs_link_start, docs_link_end: docs_link_end }
diff --git a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
index 8d4aa861736923e3ccc2f38b50c2461a99d0fca9..4957efa2a8ce3325be4d01c8204d641a87413c0b 100644
--- a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
+++ b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
@@ -1,7 +1,7 @@
- if domain_presenter.enabled?
- if domain_presenter.auto_ssl_enabled
- if domain_presenter.show_auto_ssl_failed_warning?
- .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
+ .form-group.border-section.js-shown-if-auto-ssl{ class: ("!gl-hidden" unless auto_ssl_available_and_enabled) }
.row
.col-sm-10.offset-sm-2
= render Pajamas::AlertComponent.new(dismissible: false, variant: :warning) do |c|
@@ -10,14 +10,14 @@
- c.with_actions do
= link_button_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), method: :post, size: :small
- elsif !domain_presenter.certificate_gitlab_provided?
- .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
+ .form-group.border-section.js-shown-if-auto-ssl{ class: ("!gl-hidden" unless auto_ssl_available_and_enabled) }
.row
.col-sm-10.offset-sm-2
= render Pajamas::AlertComponent.new(dismissible: false, show_icon: false) do |c|
- c.with_body do
= _("GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later.")
- else
- .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
+ .form-group.border-section.js-shown-if-auto-ssl{ class: ("!gl-hidden" unless auto_ssl_available_and_enabled) }
.row
.col-sm-10.offset-sm-2
= render Pajamas::AlertComponent.new(dismissible: false, variant: :warning, show_icon: false) do |c|
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
index c58209f880634a68562cf4cad64b5070e281c5d8..94521b891d1c3cb17328dbc044b2e1a495895f8b 100644
--- a/app/views/projects/pages_domains/new.html.haml
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -1,11 +1,12 @@
- add_to_breadcrumbs _("Pages"), project_pages_path(@project)
-- page_title _('New Pages Domain')
-%h1.page-title.gl-font-size-h-display
- = _("New Pages Domain")
-= render 'projects/pages_domains/helper_text'
+- page_title _('New pages domain')
+%h1.gl-heading-1
+ = _("New pages domain")
+.gl-text-secondary
+ = render 'projects/pages_domains/helper_text'
%div
= gitlab_ui_form_for [@project, domain_presenter], html: { class: 'fieldset-form' } do |f|
= render 'form', { f: f }
- .form-actions.gl-display-flex
- = f.submit _('Create New Domain'), class: 'gl-mr-3', pajamas_button: true
+ .gl-flex.gl-gap-3.gl-mt-6
+ = f.submit _('Create new domain'), pajamas_button: true
= link_button_to _('Cancel'), project_pages_path(@project)
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index d34650d3f5a0ccb344dc794fcd7e54b06650ca2a..51b931096952d3fc27ff10c10ebf60ee00cbf79b 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -8,6 +8,6 @@
%div
= gitlab_ui_form_for [@project, domain_presenter], html: { class: 'fieldset-form' } do |f|
= render 'form', { f: f }
- .form-actions.gl-display-flex
- = f.submit _('Save Changes'), class: 'gl-mr-3', pajamas_button: true
+ .gl-flex.gl-gap-3.gl-mt-6
+ = f.submit _('Save changes'), pajamas_button: true
= link_button_to _('Cancel'), project_pages_path(@project)
diff --git a/doc/user/project/pages/custom_domains_ssl_tls_certification/index.md b/doc/user/project/pages/custom_domains_ssl_tls_certification/index.md
index 45d1cbf0a522e10c21bc57859ac04d916cd22b5c..76c6966af075a5359bd206e7b855820b4982f15b 100644
--- a/doc/user/project/pages/custom_domains_ssl_tls_certification/index.md
+++ b/doc/user/project/pages/custom_domains_ssl_tls_certification/index.md
@@ -162,7 +162,7 @@ After you have added all the DNS records:
1. On the left sidebar, select **Search or go to** and find your project.
1. Select **Deploy > Pages**.
-1. Next to the domain name, select **Edit**.
+1. Next to the domain name, select **Edit** (**{pencil}**).
1. In **Verification status**, select **Retry verification** (**{retry}**).
@@ -263,7 +263,7 @@ meet these requirements.
1. On the left sidebar, select **Search or go to** and find your project.
1. On the left sidebar, select **Deploy > Pages**.
- 1. Next to the domain name, select **Edit**.
+ 1. Next to the domain name, select **Edit** (**{pencil}**).
1. In **Certificate**, turn off the **Automatic certificate management using Let's Encrypt** toggle to add an [SSL/TLS certificate](#adding-an-ssltls-certificate-to-pages).
1. Select **Save changes**.
@@ -311,7 +311,7 @@ To edit a custom domain:
1. On the left sidebar, select **Search or go to** and find your project.
1. Select **Deploy > Pages**.
-1. Next to the domain name, select **Edit**.
+1. Next to the domain name, select **Edit** (**{pencil}**).
## Delete a custom domain
@@ -321,7 +321,7 @@ To delete and remove a custom domain:
1. On the left sidebar, select **Search or go to** and find your project.
1. Select **Deploy > Pages**.
-1. Next to the domain name, select **Remove**.
+1. Next to the domain name, select **Remove domain** (**{remove}**)
1. When prompted, select **Remove domain**.
## Troubleshooting
diff --git a/doc/user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md b/doc/user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md
index 94dac9a8961620a8556398e4ed4271c11e021a16..1f9f0df0938610f05205557cfdc50d207926e247 100644
--- a/doc/user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md
+++ b/doc/user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md
@@ -47,7 +47,7 @@ Once you've met the requirements, enable Let's Encrypt integration:
1. On the left sidebar, select **Search or go to** and find your project.
1. Select **Deploy > Pages**.
-1. Next to the domain name, select **Edit**.
+1. Next to the domain name, select **Edit** (**{pencil}**).
1. Turn on the **Automatic certificate management using Let's Encrypt** toggle.
@@ -72,7 +72,7 @@ If you get an error **Something went wrong while obtaining the Let's Encrypt cer
1. On the left sidebar, select **Search or go to** and find your project.
1. Select **Deploy > Pages**.
-1. Next to the domain name, select **Edit**.
+1. Next to the domain name, select **Edit** (**{pencil}**).
1. In **Verification status**, select **Retry verification** (**{retry}**).
1. If you're still getting the same error:
1. Make sure you have properly set only one `CNAME` or `A` DNS record for your domain.
diff --git a/ee/app/views/groups/settings/domain_verification/show.html.haml b/ee/app/views/groups/settings/domain_verification/show.html.haml
index 16fc788a7289193c72a9b27234f461a15f14c26d..6c6250430dc289856fab4964a864d578602af07b 100644
--- a/ee/app/views/groups/settings/domain_verification/show.html.haml
+++ b/ee/app/views/groups/settings/domain_verification/show.html.haml
@@ -7,5 +7,5 @@
%div
= gitlab_ui_form_for domain_presenter, url: group_settings_domain_verification_path(@group, domain_presenter), html: { name: "domain-form", class: 'fieldset-form' } do |f|
= render 'form', { f: f }
- = f.submit _('Save Changes'), class: 'gl-mr-3', pajamas_button: true
+ = f.submit _('Save changes'), class: 'gl-mr-3', pajamas_button: true
= link_button_to _('Cancel'), group_settings_domain_verification_index_path(@group)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e4ec262b43045802c7a2fd2aff65ed32c0f4a8f1..de47af85f8a3e8a994549cc5b7fba843dffb881b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -753,6 +753,9 @@ msgid_plural "%{digit} total tests"
msgstr[0] ""
msgstr[1] ""
+msgid "%{docs_link_start}How to add certificates to your project?%{docs_link_end}"
+msgstr ""
+
msgid "%{docs_link_start}Learn about visibility levels.%{docs_link_end}"
msgstr ""
@@ -15097,9 +15100,6 @@ msgstr ""
msgid "Create New Directory"
msgstr ""
-msgid "Create New Domain"
-msgstr ""
-
msgid "Create Self-Hosted Model"
msgstr ""
@@ -15244,6 +15244,9 @@ msgstr ""
msgid "Create new directory"
msgstr ""
+msgid "Create new domain"
+msgstr ""
+
msgid "Create new emoji"
msgstr ""
@@ -23498,7 +23501,7 @@ msgstr ""
msgid "GitLabPages|Maximum size (MB)"
msgstr ""
-msgid "GitLabPages|New Domain"
+msgid "GitLabPages|New domain"
msgstr ""
msgid "GitLabPages|Only project maintainers can remove pages"
@@ -23507,9 +23510,6 @@ msgstr ""
msgid "GitLabPages|Pages"
msgstr ""
-msgid "GitLabPages|Remove"
-msgstr ""
-
msgid "GitLabPages|Remove certificate"
msgstr ""
@@ -23519,7 +23519,7 @@ msgstr ""
msgid "GitLabPages|Remove pages"
msgstr ""
-msgid "GitLabPages|Removing pages will prevent them from being exposed to the outside world."
+msgid "GitLabPages|Removing pages will prevent them from being exposed to the public internet."
msgstr ""
msgid "GitLabPages|Save changes"
@@ -23531,7 +23531,7 @@ msgstr ""
msgid "GitLabPages|Start over"
msgstr ""
-msgid "GitLabPages|Support for domains and certificates is disabled. Ask your system's administrator to enable it."
+msgid "GitLabPages|Support for domains and certificates is disabled. Ask your GitLab administrator to enable it."
msgstr ""
msgid "GitLabPages|Unverified"
@@ -30285,9 +30285,6 @@ msgstr ""
msgid "Learn more about X.509 signed commits"
msgstr ""
-msgid "Learn more about adding certificates to your project by following the %{docs_link_start}documentation on GitLab Pages%{docs_link_end}."
-msgstr ""
-
msgid "Learn more about custom project templates"
msgstr ""
@@ -33878,9 +33875,6 @@ msgstr ""
msgid "New Milestone"
msgstr ""
-msgid "New Pages Domain"
-msgstr ""
-
msgid "New Pipeline Schedule"
msgstr ""
@@ -33991,6 +33985,9 @@ msgstr ""
msgid "New name"
msgstr ""
+msgid "New pages domain"
+msgstr ""
+
msgid "New password"
msgstr ""
diff --git a/spec/features/projects/pages/user_adds_domain_spec.rb b/spec/features/projects/pages/user_adds_domain_spec.rb
index 7f6b33cbce469562217fbfe1fc2b4949902c9a99..b83ec4f1babe1c89b768b78b09927510aa440d48 100644
--- a/spec/features/projects/pages/user_adds_domain_spec.rb
+++ b/spec/features/projects/pages/user_adds_domain_spec.rb
@@ -23,7 +23,7 @@
visit new_project_pages_domain_path(project)
fill_in 'Domain', with: 'my.test.domain.com'
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('my.test.domain.com')
end
@@ -32,7 +32,7 @@
it 'allows to add new domain' do
visit project_pages_path(project)
- expect(page).to have_content('New Domain')
+ expect(page).to have_content('New domain')
end
it_behaves_like 'adds new domain'
@@ -57,7 +57,7 @@
it 'does not adds new domain and renders error message' do
fill_in 'Domain', with: 'my.test.domain.com'
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('Domain has already been taken')
end
@@ -80,7 +80,7 @@
fill_in 'Certificate (PEM)', with: certificate_pem
fill_in 'Key (PEM)', with: certificate_key
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('my.test.domain.com')
end
@@ -96,7 +96,7 @@
fill_in 'Certificate (PEM)', with: certificate_pem
fill_in 'Key (PEM)', with: certificate_key
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('my.test.domain.com')
end
@@ -107,7 +107,7 @@
visit new_project_pages_domain_path(project)
fill_in 'Domain', with: 'my.test.domain.com'
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('Domain has already been taken')
end
@@ -153,7 +153,7 @@
visit project_pages_path(project)
within('#content-body') { click_link 'Edit' }
- click_button 'Save Changes'
+ click_button 'Save changes'
expect(page).to have_content('Domain was updated')
end
@@ -169,7 +169,7 @@
within('#content-body') { click_link 'Edit' }
fill_in 'Certificate (PEM)', with: 'invalid data'
- click_button 'Save Changes'
+ click_button 'Save changes'
expect(page).to have_content('Certificate must be a valid PEM certificate')
expect(page).to have_content("Key doesn't match the certificate")
@@ -181,7 +181,7 @@
within('#content-body') { click_link 'Edit' }
- accept_gl_confirm(button_text: 'Remove certificate') { click_link 'Remove' }
+ accept_gl_confirm(button_text: 'Remove certificate') { find_by_testid('remove-certificate').click }
expect(page).to have_field('Certificate (PEM)', with: '')
expect(page).to have_field('Key (PEM)', with: '')
diff --git a/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb b/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
index 16e64ade665167add30a1dd14c3e5747764c9fd9..5d0b8862c202f0c9641c01393dac0e2d7ba587fe 100644
--- a/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
+++ b/spec/features/projects/pages/user_edits_lets_encrypt_settings_spec.rb
@@ -31,7 +31,7 @@
fill_in 'Domain', with: 'my.test.domain.com'
expect(find("#pages_domain_auto_ssl_enabled", visible: false).value).to eq 'true'
- click_button 'Create New Domain'
+ click_button 'Create new domain'
expect(page).to have_content('my.test.domain.com')
expect(PagesDomain.find_by_domain('my.test.domain.com').auto_ssl_enabled).to eq(true)
@@ -57,7 +57,7 @@
expect(page).not_to have_selector '.gl-card-header', text: 'Certificate'
expect(page).not_to have_text domain.subject
- click_on 'Save Changes'
+ click_on 'Save changes'
expect(domain.reload.auto_ssl_enabled).to eq true
end
@@ -81,7 +81,7 @@
expect(page).to have_field 'Certificate (PEM)', type: 'textarea'
expect(page).to have_field 'Key (PEM)', type: 'textarea'
- click_on 'Save Changes'
+ click_on 'Save changes'
expect(domain.reload.auto_ssl_enabled).to eq false
end
@@ -140,7 +140,7 @@
expect(page).to have_selector '.gl-card-header', text: 'Certificate'
expect(page).to have_text domain.subject
- within('.gl-card') { click_on 'Remove' }
+ within('.gl-card') { find_by_testid('remove-certificate').click }
accept_gl_confirm(button_text: 'Remove certificate')
expect(page).to have_field 'Certificate (PEM)', with: ''
expect(page).to have_field 'Key (PEM)', with: ''
diff --git a/spec/frontend/pages/projects/pages_domains/form_spec.js b/spec/frontend/pages/projects/pages_domains/form_spec.js
index e437121acd20f5ea572de7c388d7017944cb2d0c..0e3292df320e3cd9c1f34c6c13d8d274ca38ec27 100644
--- a/spec/frontend/pages/projects/pages_domains/form_spec.js
+++ b/spec/frontend/pages/projects/pages_domains/form_spec.js
@@ -6,7 +6,7 @@ const SSL_TOGGLE_CLASS = 'js-enable-ssl-gl-toggle';
const SSL_TOGGLE_INPUT_CLASS = 'js-project-feature-toggle-input';
const SHOW_IF_AUTO_SSL_CLASS = 'js-shown-if-auto-ssl';
const SHOW_UNLESS_AUTO_SSL_CLASS = 'js-shown-unless-auto-ssl';
-const D_NONE_CLASS = 'd-none';
+const D_NONE_CLASS = '!gl-hidden';
describe('Page domains form', () => {
let toggle;