Merge Details Page and Edit Page for Page Domains

This ensures that editing a domain is the default action for looking at
gitlab-pages settings for a project.

app/assets/javascripts/pages/projects/pages_domains/form.js

 import setupToggleButtons from '~/toggle_buttons';
 
+function updateVisibility(selector, isVisible) {
+  Array.from(document.querySelectorAll(selector)).forEach(el => {
+    if (isVisible) {
+      el.classList.remove('d-none');
+    } else {
+      el.classList.add('d-none');
+    }
+  });
+}
+
 export default () => {
   const toggleContainer = document.querySelector('.js-auto-ssl-toggle-container');
 
   if (toggleContainer) {
     const onToggleButtonClicked = isAutoSslEnabled => {
-      Array.from(document.querySelectorAll('.js-shown-unless-auto-ssl')).forEach(el => {
-        if (isAutoSslEnabled) {
-          el.classList.add('d-none');
-        } else {
-          el.classList.remove('d-none');
-        }
-      });
+      updateVisibility('.js-shown-unless-auto-ssl', !isAutoSslEnabled);
+
+      updateVisibility('.js-shown-if-auto-ssl', isAutoSslEnabled);
 
       Array.from(document.querySelectorAll('.js-enabled-unless-auto-ssl')).forEach(el => {
         if (isAutoSslEnabled) {

app/assets/stylesheets/framework/common.scss

@@ -570,3 +570,10 @@ img.emoji {
 .gl-font-size-20 { font-size: $gl-font-size-20; }
 .gl-font-size-28 { font-size: $gl-font-size-28; }
 .gl-font-size-42 { font-size: $gl-font-size-42; }
+
+.border-section {
+  @include gl-py-6;
+  @include gl-m-0;
+
+  border-top: 1px solid $border-color;
+}

app/controllers/projects/pages_domains_controller.rb

@@ -8,6 +8,7 @@ class Projects::PagesDomainsController < Projects::ApplicationController
   before_action :domain, except: [:new, :create]
 
   def show
+    redirect_to edit_project_pages_domain_path(@project, @domain)
   end
 
   def new
@@ -23,7 +24,7 @@ class Projects::PagesDomainsController < Projects::ApplicationController
       flash[:alert] = 'Failed to verify domain ownership'
     end
 
-    redirect_to project_pages_domain_path(@project, @domain)
+    redirect_to edit_project_pages_domain_path(@project, @domain)
   end
 
   def edit
@@ -33,7 +34,7 @@ class Projects::PagesDomainsController < Projects::ApplicationController
     @domain = @project.pages_domains.create(create_params)
 
     if @domain.valid?
-      redirect_to project_pages_domain_path(@project, @domain)
+      redirect_to edit_project_pages_domain_path(@project, @domain)
     else
       render 'new'
     end
@@ -77,7 +78,7 @@ class Projects::PagesDomainsController < Projects::ApplicationController
   end
 
   def update_params
-    params.require(:pages_domain).permit(:user_provided_key, :user_provided_certificate, :auto_ssl_enabled)
+    params.fetch(:pages_domain, {}).permit(:user_provided_key, :user_provided_certificate, :auto_ssl_enabled)
   end
 
   def domain

app/views/projects/pages/_list.html.haml

@@ -21,11 +21,11 @@
                   %span.badge.badge-danger
                     = s_('GitLabPages|Expired')
           %div
-            = link_to s_('GitLabPages|Details'), project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped"
+            = link_to s_('GitLabPages|Edit'), edit_project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped btn-success btn-inverted"
             = link_to s_('GitLabPages|Remove'), project_pages_domain_path(@project, domain), data: { confirm: s_('GitLabPages|Are you sure?')}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
         - if verification_enabled && domain.unverified?
           %li.list-group-item.bs-callout-warning
-            - details_link_start = "<a href='#{project_pages_domain_path(@project, domain)}'>".html_safe
+            - details_link_start = "<a href='#{edit_project_pages_domain_path(@project, domain)}'>".html_safe
             - details_link_end = '</a>'.html_safe
             = 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,

app/views/projects/pages_domains/_certificate.html.haml

-- if @domain.auto_ssl_enabled?
-  - if @domain.enabled?
-    - if @domain.certificate_text
-      %pre
-        = @domain.certificate_text
-    - else
-      .bs-callout.bs-callout-info
-        = _("GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later.")
+- auto_ssl_available = ::Gitlab::LetsEncrypt.enabled?
+- auto_ssl_enabled = @domain.auto_ssl_enabled?
+- auto_ssl_available_and_enabled = auto_ssl_available && auto_ssl_enabled
+- has_user_defined_certificate = @domain.certificate && @domain.certificate_user_provided?
+
+- if auto_ssl_available
+  .form-group.border-section
+    .row
+      .col-sm-2
+        = _('Certificate')
+      .col-sm-10.js-auto-ssl-toggle-container
+        %label{ for: "pages_domain_auto_ssl_enabled_button" }
+          - lets_encrypt_link_url = "https://letsencrypt.org/"
+          - lets_encrypt_link_start = "<a href=\"%{lets_encrypt_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { lets_encrypt_link_url: lets_encrypt_link_url }
+          - lets_encrypt_link_end = "</a>".html_safe
+          = _("Automatic certificate management using %{lets_encrypt_link_start}Let's Encrypt%{lets_encrypt_link_end}").html_safe % { lets_encrypt_link_start: lets_encrypt_link_start, lets_encrypt_link_end: lets_encrypt_link_end }
+        %button{ type: "button", id: "pages_domain_auto_ssl_enabled_button",
+          class: "js-project-feature-toggle project-feature-toggle mt-2 #{"is-checked" if auto_ssl_available_and_enabled}",
+          "aria-label": _("Automatic certificate management using Let's Encrypt") }
+          = f.hidden_field :auto_ssl_enabled?, class: "js-project-feature-toggle-input"
+          %span.toggle-icon
+            = sprite_icon("status_success_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-checked")
+            = sprite_icon("status_failed_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-unchecked")
+        %p.text-secondary.mt-3
+          - docs_link_url = help_page_path("user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md")
+          - docs_link_start = "<a href=\"%{docs_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { docs_link_url: docs_link_url }
+          - docs_link_end = "</a>".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) }
+  - if has_user_defined_certificate
+    .row
+      .col-sm-10.offset-sm-2
+        .card
+          .card-header
+            = _('Certificate')
+          .d-flex.justify-content-between.align-items-center.p-3
+            %span
+              = @domain.subject || _('missing')
+            = link_to _('Remove'),
+              clean_certificate_project_pages_domain_path(@project, @domain),
+              data: { confirm: _('Are you sure?') },
+              class: 'btn btn-remove btn-sm',
+              method: :delete
   - else
-    .bs-callout.bs-callout-warning
-      = _("A Let's Encrypt SSL certificate can not be obtained until your domain is verified.")
-- else
-  - if @domain.certificate_text
-    %pre
-      = @domain.certificate_text
-  - else
-    .light
-      = _("missing")
+    .row
+      .col-sm-10.offset-sm-2
+        = 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")
+    .row
+      .col-sm-10.offset-sm-2
+        = 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")
+
+= render 'lets_encrypt_callout', auto_ssl_available_and_enabled: auto_ssl_available_and_enabled

app/views/projects/pages_domains/_dns.html.haml

+- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+- dns_record = "#{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}."
+
+.form-group.border-section
+  .row
+    .col-sm-2
+      = _("DNS")
+    .col-sm-10
+      .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', class: 'btn-default input-group-text d-none d-sm-block')
+      %p.form-text.text-muted
+        = _("To access this domain create a new DNS record")
+- if verification_enabled
+  - verification_record = "#{@domain.verification_domain} TXT #{@domain.keyed_verification_code}"
+  .form-group.border-section
+    .row
+      .col-sm-2
+        = _("Verification status")
+      .col-sm-10
+        .status-badge
+          - text, status = @domain.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success']
+          .badge{ class: status }
+            = text
+          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, @domain), method: :post, class: "btn has-tooltip", title: _("Retry verification")
+        .input-group
+          = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
+          .input-group-append
+            = clipboard_button(target: '#domain_verification', class: 'btn-default d-none d-sm-block')
+        %p.form-text.text-muted
+          - link_to_help = link_to(_('verify ownership'), help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index.md', anchor: '4-verify-the-domains-ownership'))
+          = _("To %{link_to_help} of your domain, add the above key to a TXT record within to your DNS configuration.").html_safe % { link_to_help: link_to_help }

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

@@ -3,62 +3,25 @@
     - @domain.errors.full_messages.each do |msg|
       = msg
 
-.form-group.row
-  .col-sm-2.col-form-label
-    = f.label :domain, _("Domain")
-  .col-sm-10
-    = f.text_field :domain, required: true, autocomplete: "off", class: "form-control", disabled: @domain.persisted?
-
-- if Gitlab.config.pages.external_https
-
-  - auto_ssl_available = ::Gitlab::LetsEncrypt.enabled?
-  - auto_ssl_enabled = @domain.auto_ssl_enabled?
-  - auto_ssl_available_and_enabled = auto_ssl_available && auto_ssl_enabled
-
-  - if auto_ssl_available
-    .form-group.row
-      .col-sm-2.col-form-label
-        %label{ for: "pages_domain_auto_ssl_enabled_button" }
-          - lets_encrypt_link_url = "https://letsencrypt.org/"
-          - lets_encrypt_link_start = "<a href=\"%{lets_encrypt_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { lets_encrypt_link_url: lets_encrypt_link_url }
-          - lets_encrypt_link_end = "</a>".html_safe
-          = _("Automatic certificate management using %{lets_encrypt_link_start}Let's Encrypt%{lets_encrypt_link_end}").html_safe % { lets_encrypt_link_start: lets_encrypt_link_start, lets_encrypt_link_end: lets_encrypt_link_end }
-
-      .col-sm-10.js-auto-ssl-toggle-container
-        %button{ type: "button", id: "pages_domain_auto_ssl_enabled_button",
-          class: "js-project-feature-toggle project-feature-toggle mt-2 #{"is-checked" if auto_ssl_available_and_enabled}",
-          "aria-label": _("Automatic certificate management using Let's Encrypt") }
-          = f.hidden_field :auto_ssl_enabled?, class: "js-project-feature-toggle-input"
-          %span.toggle-icon
-            = sprite_icon("status_success_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-checked")
-            = sprite_icon("status_failed_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-unchecked")
-        %p.text-secondary.mt-3
-          - docs_link_url = help_page_path("user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md")
-          - docs_link_start = "<a href=\"%{docs_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { docs_link_url: docs_link_url }
-          - docs_link_end = "</a>".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 }
-
-  .js-shown-unless-auto-ssl{ class: ("d-none" if auto_ssl_available_and_enabled) }
-    .form-group.row
-      .col-sm-2.col-form-label
-        = f.label :user_provided_certificate, _("Certificate (PEM)")
+.form-group.border-section
+  .row
+    - if @domain.persisted?
+      .col-sm-2
+        = _("Domain")
       .col-sm-10
-        = 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")
-
-    .form-group.row
-      .col-sm-2.col-form-label
-        = f.label :user_provided_key, _("Key (PEM)")
+        = external_link(@domain.url, @domain.url)
+    - else
+      .col-sm-2
+        = f.label :domain, _("Domain")
       .col-sm-10
-        = 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")
+        .input-group
+          = f.text_field :domain, required: true, autocomplete: "off", class: "form-control"
 
+- if @domain.persisted?
+  = render 'dns'
+
+- if Gitlab.config.pages.external_https
+  = render 'certificate', f: f
 - else
-  .nothing-here-block
+  .border-section.nothing-here-block
     = _("Support for custom certificates is disabled. Ask your system's administrator to enable it.")

app/views/projects/pages_domains/_lets_encrypt_callout.html.haml

+- if @domain.enabled?
+  - if @domain.auto_ssl_enabled && !@domain.certificate
+    .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
+      .row
+        .col-sm-10.offset-sm-2
+          .bs-callout.bs-callout-info.mt-0
+            = _("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) }
+    .row
+      .col-sm-10.offset-sm-2
+        .bs-callout.bs-callout-warning.mt-0
+          = _("A Let's Encrypt SSL certificate can not be obtained until your domain is verified.")

app/views/projects/pages_domains/edit.html.haml

 - add_to_breadcrumbs _("Pages"), project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - page_title @domain.domain
+
+- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+
+- if verification_enabled && @domain.unverified?
+  = content_for :flash_message do
+    .alert.alert-warning
+      .container-fluid.container-limited
+        = _("This domain is not verified. You will need to verify ownership before access is enabled.")
+
 %h3.page-title
-  = @domain.domain
+  = _('Pages Domain')
 = render 'projects/pages_domains/helper_text'
-%hr.clearfix
 %div
   = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }
-    .form-actions
+    .form-actions.d-flex.justify-content-between
       = f.submit _('Save Changes'), class: "btn btn-success"
+      = link_to _('Cancel'), project_pages_path(@project), class: 'btn btn-default btn-inverse'

app/views/projects/pages_domains/new.html.haml

@@ -3,7 +3,6 @@
 %h3.page-title
   = _("New Pages Domain")
 = render 'projects/pages_domains/helper_text'
-%hr.clearfix
 %div
   = form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'fieldset-form' } do |f|
     = render 'form', { f: f }

app/views/projects/pages_domains/show.html.haml

@@ -58,4 +58,4 @@
       %td
         = _("Certificate")
       %td
-        = render 'certificate'
+        = render 'lets_encrypt_callout', auto_ssl_available_and_enabled: false

changelogs/unreleased/remove-domain-details.yml

+---
+title: Merge Details Page and Edit Page for Page Domains
+merge_request: 16687
+author:
+type: added

locale/gitlab.pot

@@ -8220,10 +8220,10 @@ msgstr ""
 msgid "GitLabPages|Configure pages"
 msgstr ""
 
-msgid "GitLabPages|Details"
+msgid "GitLabPages|Domains"
 msgstr ""
 
-msgid "GitLabPages|Domains"
+msgid "GitLabPages|Edit"
 msgstr ""
 
 msgid "GitLabPages|Expired"

spec/controllers/projects/pages_domains_controller_spec.rb

@@ -32,10 +32,10 @@ describe Projects::PagesDomainsController do
       get(:show, params: request_params.merge(id: pages_domain.domain))
     end
 
-    it "displays the 'show' page" do
+    it "redirects to the 'edit' page" do
       make_request
-      expect(response).to have_gitlab_http_status(200)
-      expect(response).to render_template('show')
+
+      expect(response).to redirect_to(edit_project_pages_domain_path(project, pages_domain.domain))
     end
 
     context 'when user is developer' do
@@ -69,7 +69,7 @@ describe Projects::PagesDomainsController do
       created_domain = PagesDomain.reorder(:id).last
 
       expect(created_domain).to be_present
-      expect(response).to redirect_to(project_pages_domain_path(project, created_domain))
+      expect(response).to redirect_to(edit_project_pages_domain_path(project, created_domain))
     end
   end
 
@@ -160,7 +160,7 @@ describe Projects::PagesDomainsController do
 
       post :verify, params: params
 
-      expect(response).to redirect_to project_pages_domain_path(project, pages_domain)
+      expect(response).to redirect_to edit_project_pages_domain_path(project, pages_domain)
       expect(flash[:notice]).to eq('Successfully verified domain ownership')
     end
 
@@ -169,7 +169,7 @@ describe Projects::PagesDomainsController do
 
       post :verify, params: params
 
-      expect(response).to redirect_to project_pages_domain_path(project, pages_domain)
+      expect(response).to redirect_to edit_project_pages_domain_path(project, pages_domain)
       expect(flash[:alert]).to eq('Failed to verify domain ownership')
     end
 

spec/features/projects/pages_lets_encrypt_spec.rb

@@ -4,7 +4,7 @@ require 'spec_helper'
 describe "Pages with Let's Encrypt", :https_pages_enabled do
   include LetsEncryptHelpers
 
-  let(:project) { create(:project) }
+  let(:project) { create(:project, pages_https_only: false) }
   let(:user) { create(:user) }
   let(:role) { :maintainer }
   let(:certificate_pem) { attributes_for(:pages_domain)[:certificate] }
@@ -34,14 +34,14 @@ describe "Pages with Let's Encrypt", :https_pages_enabled do
       expect(domain.auto_ssl_enabled).to eq false
 
       expect(find("#pages_domain_auto_ssl_enabled", visible: false).value).to eq 'false'
-      expect(page).to have_field 'Certificate (PEM)', type: 'textarea'
-      expect(page).to have_field 'Key (PEM)', type: 'textarea'
+      expect(page).to have_selector '.card-header', text: 'Certificate'
+      expect(page).to have_text domain.subject
 
       find('.js-auto-ssl-toggle-container .project-feature-toggle').click
 
       expect(find("#pages_domain_auto_ssl_enabled", visible: false).value).to eq 'true'
-      expect(page).not_to have_field 'Certificate (PEM)', type: 'textarea'
-      expect(page).not_to have_field 'Key (PEM)', type: 'textarea'
+      expect(page).not_to have_selector '.card-header', text: 'Certificate'
+      expect(page).not_to have_text domain.subject
 
       click_on 'Save Changes'
 
@@ -67,9 +67,6 @@ describe "Pages with Let's Encrypt", :https_pages_enabled do
       expect(page).to have_field 'Certificate (PEM)', type: 'textarea'
       expect(page).to have_field 'Key (PEM)', type: 'textarea'
 
-      fill_in 'Certificate (PEM)', with: certificate_pem
-      fill_in 'Key (PEM)', with: certificate_key
-
       click_on 'Save Changes'
 
       expect(domain.reload.auto_ssl_enabled).to eq false
@@ -81,7 +78,8 @@ describe "Pages with Let's Encrypt", :https_pages_enabled do
       it 'user do not see private key' do
         visit edit_project_pages_domain_path(project, domain)
 
-        expect(find_field('Key (PEM)', visible: :all, disabled: :all).value).to be_blank
+        expect(page).not_to have_selector '.card-header', text: 'Certificate'
+        expect(page).not_to have_text domain.subject
       end
     end
 
@@ -100,10 +98,21 @@ describe "Pages with Let's Encrypt", :https_pages_enabled do
     context 'when certificate is provided by user' do
       let(:domain) { create(:pages_domain, project: project) }
 
-      it 'user sees private key' do
+      it 'user sees certificate subject' do
+        visit edit_project_pages_domain_path(project, domain)
+
+        expect(page).to have_selector '.card-header', text: 'Certificate'
+        expect(page).to have_text domain.subject
+      end
+
+      it 'user can delete the certificate', :js do
         visit edit_project_pages_domain_path(project, domain)
 
-        expect(find_field('Key (PEM)').value).not_to be_blank
+        expect(page).to have_selector '.card-header', text: 'Certificate'
+        expect(page).to have_text domain.subject
+        within('.card') { accept_confirm { click_on 'Remove' } }
+        expect(page).to have_field 'Certificate (PEM)', with: ''
+        expect(page).to have_field 'Key (PEM)', with: ''
       end
     end
   end

spec/features/projects/pages_spec.rb

@@ -2,7 +2,7 @@
 require 'spec_helper'
 
 shared_examples 'pages settings editing' do
-  let(:project) { create(:project) }
+  let_it_be(:project) { create(:project, pages_https_only: false) }
   let(:user) { create(:user) }
   let(:role) { :maintainer }
 
@@ -185,6 +185,21 @@ shared_examples 'pages settings editing' do
           expect(page).to have_content('my.test.domain.com')
         end
 
+        describe 'with dns verification enabled' do
+          before do
+            stub_application_setting(pages_domain_verification_enabled: true)
+          end
+
+          it 'shows the DNS verification record' do
+            domain = create(:pages_domain, project: project)
+
+            visit project_pages_path(project)
+
+            within('#content-body') { click_link 'Edit' }
+            expect(page).to have_field :domain_verification, with: "#{domain.verification_domain} TXT #{domain.keyed_verification_code}"
+          end
+        end
+
         describe 'updating the certificate for an existing domain' do
           let!(:domain) do
             create(:pages_domain, project: project)
@@ -193,19 +208,22 @@ shared_examples 'pages settings editing' do
           it 'allows the certificate to be updated' do
             visit project_pages_path(project)
 
-            within('#content-body') { click_link 'Details' }
-            click_link 'Edit'
+            within('#content-body') { click_link 'Edit' }
             click_button 'Save Changes'
 
             expect(page).to have_content('Domain was updated')
           end
 
           context 'when the certificate is invalid' do
+            let_it_be(:domain) do
+              create(:pages_domain, :without_certificate, :without_key, project: project)
+            end
+
             it 'tells the user what the problem is' do
               visit project_pages_path(project)
 
-              within('#content-body') { click_link 'Details' }
-              click_link 'Edit'
+              within('#content-body') { click_link 'Edit' }
+
               fill_in 'Certificate (PEM)', with: 'invalid data'
               click_button 'Save Changes'
 
@@ -214,6 +232,27 @@ shared_examples 'pages settings editing' do
               expect(page).to have_content("Key doesn't match the certificate")
             end
           end
+
+          it 'allows the certificate to be removed', :js do
+            visit project_pages_path(project)
+
+            within('#content-body') { click_link 'Edit' }
+
+            accept_confirm { click_link 'Remove' }
+
+            expect(page).to have_field('Certificate (PEM)', with: '')
+            expect(page).to have_field('Key (PEM)', with: '')
+            domain.reload
+            expect(domain.certificate).to be_nil
+            expect(domain.key).to be_nil
+          end
+
+          it 'shows the DNS CNAME record' do
+            visit project_pages_path(project)
+
+            within('#content-body') { click_link 'Edit' }
+            expect(page).to have_field :domain_dns, with: "#{domain.domain} CNAME #{domain.project.pages_subdomain}.#{Settings.pages.host}."
+          end
         end
       end
     end
@@ -250,7 +289,7 @@ shared_examples 'pages settings editing' do
     end
   end
 
-  describe 'HTTPS settings', :js, :https_pages_enabled do
+  describe 'HTTPS settings', :https_pages_enabled do
     before do
       project.namespace.update(owner: user)
 
@@ -358,18 +397,21 @@ shared_examples 'pages settings editing' do
 
         expect(page).to have_link('Remove pages')
 
-        click_link 'Remove pages'
+        accept_confirm { click_link 'Remove pages' }
 
-        expect(project.pages_deployed?).to be_falsey
+        expect(page).to have_content('Pages were removed')
+        expect(project.reload.pages_deployed?).to be_falsey
       end
     end
   end
 end
 
-describe 'Pages' do
+describe 'Pages', :js do
   include LetsEncryptHelpers
 
-  include_examples 'pages settings editing'
+  context 'when editing normally' do
+    include_examples 'pages settings editing'
+  end
 
   context 'when letsencrypt support is enabled' do
     before do

spec/views/projects/pages_domains/show.html.haml_spec.rb

@@ -30,39 +30,5 @@ describe 'projects/pages_domains/show' do
         expect(rendered).to have_content("GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later.")
       end
     end
-
-    context 'when certificate is present' do
-      let(:domain) { create(:pages_domain, :letsencrypt, project: project) }
-
-      it 'shows certificate info' do
-        render
-
-        # test just a random part of cert represenations(X509v3 Subject Key Identifier:)
-        expect(rendered).to have_content("C6:5F:56:4B:10:69:AC:1D:33:D2:26:C9:B3:7A:D7:12:4D:3E:F7:90")
-      end
-    end
-  end
-
-  context 'when auto_ssl is disabled' do
-    context 'when certificate is present' do
-      let(:domain) { create(:pages_domain, project: project) }
-
-      it 'shows certificate info' do
-        render
-
-        # test just a random part of cert represenations(X509v3 Subject Key Identifier:)
-        expect(rendered).to have_content("C6:5F:56:4B:10:69:AC:1D:33:D2:26:C9:B3:7A:D7:12:4D:3E:F7:90")
-      end
-    end
-
-    context 'when certificate is absent' do
-      let(:domain) { create(:pages_domain, :without_certificate, :without_key, project: project) }
-
-      it 'shows missing certificate' do
-        render
-
-        expect(rendered).to have_content("missing")
-      end
-    end
   end
 end