Merge commit '207d3100' into 11-9-stable-prepare-rc4

.gitlab-ci.yml

@@ -444,6 +444,17 @@ setup-test-env:
       - master
       - /(^docs[\/-].*|.*-docs$)/
+.review-schedules-only: &review-schedules-only
+  only:
+    refs:
+      - schedules@gitlab-org/gitlab-ce
+      - schedules@gitlab-org/gitlab-ee
+    kubernetes: active
+  except:
+    refs:
+      - tags
+      - /(^docs[\/-].*|.*-docs$)/
+
 .review-base: &review-base
   <<: *dedicated-no-docs-no-db-pull-cache-job
   <<: *review-only
@@ -672,6 +683,35 @@ gitlab:assets:compile:
     - docker
     - gitlab-org
+gitlab:ui:visual:
+  <<: *except-docs
+  tags:
+    - gitlab-org
+  before_script: []
+  dependencies:
+    - compile-assets
+  script:
+    # Remove node modules from GitLab that may conflict with gitlab-ui
+    - rm -r node_modules
+    - git clone https://gitlab.com/gitlab-org/gitlab-ui.git
+    - cp public/assets/application-*.css gitlab-ui/styles/application.css
+    - cd gitlab-ui
+    - yarn install
+    - CSS_URL=./application.css yarn test
+  only:
+    changes:
+      - app/assets/stylesheets/*.scss
+      - app/assets/stylesheets/**/*.scss
+      - app/assets/stylesheets/**/**/*.scss
+  except:
+    refs:
+      - master
+    variables:
+      - $CI_COMMIT_MESSAGE =~ /\[skip visual\]/i
+  artifacts:
+    paths:
+      - tests/__image_snapshots__/
+
 karma:
   <<: *dedicated-no-docs-pull-cache-job
   <<: *use-pg
@@ -959,8 +999,7 @@ no_ee_check:
     - //@gitlab-org/gitlab-ce
 # GitLab Review apps
-review-build-cng:
-  <<: *review-only
+.review-build-cng-base: &review-build-cng-base
   image: ruby:2.5-alpine
   stage: test
   before_script: []
@@ -976,7 +1015,15 @@ review-build-cng:
     - wait_for_job_to_be_done "gitlab:assets:compile"
     - BUILD_TRIGGER_TOKEN=$REVIEW_APPS_BUILD_TRIGGER_TOKEN ./scripts/trigger-build cng
-review-deploy:
+review-build-cng:
+  <<: *review-only
+  <<: *review-build-cng-base
+
+schedule:review-build-cng:
+  <<: *review-schedules-only
+  <<: *review-build-cng-base
+
+.review-deploy-base: &review-deploy-base
   <<: *review-base
   retry: 2
   allow_failure: true
@@ -998,6 +1045,8 @@ review-deploy:
     - source ./scripts/review_apps/review-apps.sh
   script:
     - wait_for_job_to_be_done "review-build-cng"
+  after_script:
+    - source ./scripts/review_apps/review-apps.sh
     - check_kube_domain
     - download_gitlab_chart
     - ensure_namespace
@@ -1006,6 +1055,15 @@ review-deploy:
     - time deploy
     - add_license
+review-deploy:
+  <<: *review-deploy-base
+
+schedule:review-deploy:
+  <<: *review-deploy-base
+  <<: *review-schedules-only
+  script:
+    - wait_for_job_to_be_done "schedule:review-build-cng"
+
 .review-qa-base: &review-qa-base
   <<: *review-docker
   allow_failure: true
@@ -1032,22 +1090,26 @@ review-deploy:
     - apk update && apk add curl jq
     - source ./scripts/review_apps/review-apps.sh
     - gem install gitlab-qa --no-document ${GITLAB_QA_VERSION:+ --version ${GITLAB_QA_VERSION}}
-    - wait_for_job_to_be_done "review-deploy"
 review-qa-smoke:
   <<: *review-qa-base
   script:
+    - wait_for_job_to_be_done "review-deploy"
     - gitlab-qa Test::Instance::Smoke "${QA_IMAGE}" "${CI_ENVIRONMENT_URL}"
 review-qa-all:
   <<: *review-qa-base
   script:
+    - wait_for_job_to_be_done "review-deploy"
     - gitlab-qa Test::Instance::Any "${QA_IMAGE}" "${CI_ENVIRONMENT_URL}"
   when: manual
-review-performance:
+
+.review-performance-base: &review-performance-base
   <<: *review-qa-base
   script:
+    - wait_for_job_to_be_done "review-deploy"
+  after_script:
     - mkdir gitlab-exporter
     - wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
     - mkdir sitespeed-results
@@ -1059,6 +1121,9 @@ review-performance:
     reports:
       performance: performance.json
+review-performance:
+  <<: *review-performance-base
+
 review-stop:
   <<: *review-base
   <<: *single-script-job
@@ -1078,21 +1143,20 @@ review-stop:
 schedule:review-cleanup:
   <<: *review-base
+  <<: *review-schedules-only
   stage: build
   allow_failure: true
   variables:
     GIT_DEPTH: "1"
   environment:
     name: review/auto-cleanup
-  only:
-    refs:
-      - schedules@gitlab-org/gitlab-ce
-      - schedules@gitlab-org/gitlab-ee
-    kubernetes: active
-  except:
-    - tags
-    - /(^docs[\/-].*|.*-docs$)/
   before_script:
     - gem install gitlab --no-document
   script:
     - ruby -rrubygems scripts/review_apps/automated_cleanup.rb
+
+schedule:review-performance:
+  <<: *review-performance-base
+  <<: *review-schedules-only
+  script:
+    - wait_for_job_to_be_done "schedule:review-deploy"

.rubocop.yml

@@ -181,3 +181,6 @@ Cop/InjectEnterpriseEditionModule:
   Exclude:
     - 'spec/**/*'
     - 'ee/spec/**/*'
+
+Style/ReturnNil:
+  Enabled: true

GITALY_SERVER_VERSION

-1.23.0
\ No newline at end of file
+1.26.0

GITLAB_SHELL_VERSION

-8.6.0
+8.7.1

Gemfile

@@ -267,7 +267,6 @@ gem 'gemojione', '~> 3.3'
 gem 'gon', '~> 6.2'
 gem 'jquery-atwho-rails', '~> 1.3.2'
 gem 'request_store', '~> 1.3'
-gem 'select2-rails', '~> 3.5.9'
 gem 'virtus', '~> 1.0.1'
 gem 'base32', '~> 0.3.0'
@@ -421,7 +420,7 @@ group :ed25519 do
 end
 # Gitaly GRPC client
-gem 'gitaly-proto', '~> 1.12.0', require: 'gitaly'
+gem 'gitaly-proto', '~> 1.13.0', require: 'gitaly'
 gem 'grpc', '~> 1.15.0'

Gemfile.lock

@@ -279,7 +279,7 @@ GEM
       gettext_i18n_rails (>= 0.7.1)
       po_to_json (>= 1.0.0)
       rails (>= 3.2.0)
-    gitaly-proto (1.12.0)
+    gitaly-proto (1.13.0)
       grpc (~> 1.0)
     github-markup (1.7.0)
     gitlab-default_value_for (3.1.1)
@@ -310,7 +310,7 @@ GEM
       representable (~> 3.0)
       retriable (>= 2.0, < 4.0)
     google-protobuf (3.6.1)
-    googleapis-common-protos-types (1.0.2)
+    googleapis-common-protos-types (1.0.3)
       google-protobuf (~> 3.0)
     googleauth (0.6.6)
       faraday (~> 0.12)
@@ -811,8 +811,6 @@ GEM
     seed-fu (2.3.7)
       activerecord (>= 3.1)
       activesupport (>= 3.1)
-    select2-rails (3.5.9.3)
-      thor (~> 0.14)
     selenium-webdriver (3.12.0)
       childprocess (~> 0.5)
       rubyzip (~> 1.2)
@@ -1018,7 +1016,7 @@ DEPENDENCIES
   gettext (~> 3.2.2)
   gettext_i18n_rails (~> 1.8.0)
   gettext_i18n_rails_js (~> 1.3)
-  gitaly-proto (~> 1.12.0)
+  gitaly-proto (~> 1.13.0)
   github-markup (~> 1.7.0)
   gitlab-default_value_for (~> 3.1.1)
   gitlab-markup (~> 1.6.5)

app/assets/javascripts/awards_handler.js

@@ -615,10 +615,18 @@ export class AwardsHandler {
 let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
-    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(Emoji => {
-      const awardsHandler = new AwardsHandler(Emoji);
-      awardsHandler.bindEvents();
-      return awardsHandler;
+    awardsHandlerPromise = new Promise((resolve, reject) => {
+      import(/* webpackChunkName: 'emoji' */ './emoji')
+        .then(Emoji => {
+          Emoji.initEmojiMap()
+            .then(() => {
+              const awardsHandler = new AwardsHandler(Emoji);
+              awardsHandler.bindEvents();
+              resolve(awardsHandler);
+            })
+            .catch(() => reject);
+        })
+        .catch(() => reject);
     });
   }
   return awardsHandlerPromise;

app/assets/javascripts/behaviors/gl_emoji.js

 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
+import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 class GlEmoji extends HTMLElement {
   constructor() {
     super();
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
-
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
-
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
-        }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
+    let emojiUnicode = this.textContent.trim();
+    const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
+    let { name, unicodeVersion } = this.dataset;
+
+    initEmojiMap()
+      .then(() => {
+        if (!unicodeVersion) {
+          const emojiInfo = getEmojiInfo(name);
+
+          if (emojiInfo) {
+            if (name !== emojiInfo.name) {
+              ({ name } = emojiInfo);
+              this.dataset.name = emojiInfo.name;
+            }
+            unicodeVersion = emojiInfo.u;
+            this.dataset.uni = unicodeVersion;
+
+            if (forceFallback === 'true' && !fallbackSpriteClass) {
+              this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name));
             } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
+              emojiUnicode = emojiInfo.e;
+              this.innerHTML = emojiInfo.e;
             }
-          })
-          .catch(() => {
-            // do nothing
-          });
-      }
-    }
+
+            this.title = emojiInfo.d;
+          }
+        }
+
+        const isEmojiUnicode =
+          this.childNodes &&
+          Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+        const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+        if (
+          emojiUnicode &&
+          isEmojiUnicode &&
+          !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+        ) {
+          // CSS sprite fallback takes precedence over image fallback
+          if (hasCssSpriteFalback) {
+            if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+              const emojiSpriteLinkTag = document.createElement('link');
+              emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+              emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+              document.head.appendChild(emojiSpriteLinkTag);
+              gon.emoji_sprites_css_added = true;
+            }
+            // IE 11 doesn't like adding multiple at once :(
+            this.classList.add('emoji-icon');
+            this.classList.add(fallbackSpriteClass);
+          } else if (hasImageFallback) {
+            this.innerHTML = emojiImageTag(name, fallbackSrc);
+          } else {
+            const src = emojiFallbackImageSrc(name);
+            this.innerHTML = emojiImageTag(name, src);
+          }
+        }
+      })
+      .catch(error => {
+        // Only reject is already handled in initEmojiMap
+        throw error;
+      });
   }
 }

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -13,7 +13,7 @@ export default () => {
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
     const assetsPath = editBlobForm.data('assetsPrefix');
-    const filePath = editBlobForm.data('blobFilename');
+    const filePath = `${editBlobForm.data('blobFilename')}`;
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
     const isMarkdown = editBlobForm.data('is-markdown');

app/assets/javascripts/boards/components/issue_due_date.vue

@@ -53,7 +53,7 @@ export default {
       } else if (timeDifference === -1) {
         return __('Yesterday');
       } else if (timeDifference > 0 && timeDifference < 7) {
-        return dateFormat(issueDueDate, 'dddd', true);
+        return dateFormat(issueDueDate, 'dddd');
       }
       return standardDateFormat;

app/assets/javascripts/boards/index.js

@@ -58,6 +58,7 @@ export default () => {
       state: boardsStore.state,
       loading: true,
       boardsEndpoint: $boardApp.dataset.boardsEndpoint,
+      recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
       listsEndpoint: $boardApp.dataset.listsEndpoint,
       boardId: $boardApp.dataset.boardId,
       disabled: parseBoolean($boardApp.dataset.disabled),
@@ -75,6 +76,7 @@ export default () => {
     created() {
       gl.boardService = new BoardService({
         boardsEndpoint: this.boardsEndpoint,
+        recentBoardsEndpoint: this.recentBoardsEndpoint,
         listsEndpoint: this.listsEndpoint,
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,

app/assets/javascripts/boards/services/board_service.js

@@ -2,12 +2,13 @@ import axios from '../../lib/utils/axios_utils';
 import { mergeUrlParams } from '../../lib/utils/url_utility';
 export default class BoardService {
-  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
+  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId, recentBoardsEndpoint }) {
     this.boardsEndpoint = boardsEndpoint;
     this.boardId = boardId;
     this.listsEndpoint = listsEndpoint;
     this.listsEndpointGenerate = `${listsEndpoint}/generate.json`;
     this.bulkUpdatePath = bulkUpdatePath;
+    this.recentBoardsEndpoint = `${recentBoardsEndpoint}.json`;
   }
   generateBoardsPath(id) {

app/assets/javascripts/clusters/clusters_bundle.js

@@ -36,6 +36,7 @@ export default class Clusters {
       installRunnerPath,
       installJupyterPath,
       installKnativePath,
+      updateKnativePath,
       installPrometheusPath,
       managePrometheusPath,
       hasRbac,
@@ -62,6 +63,7 @@ export default class Clusters {
       installPrometheusEndpoint: installPrometheusPath,
       installJupyterEndpoint: installJupyterPath,
       installKnativeEndpoint: installKnativePath,
+      updateKnativeEndpoint: updateKnativePath,
     });
     this.installApplication = this.installApplication.bind(this);
@@ -119,8 +121,7 @@ export default class Clusters {
   static initDismissableCallout() {
     const callout = document.querySelector('.js-cluster-security-warning');
-
-    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+    PersistentUserCallout.factory(callout);
   }
   addListeners() {
@@ -129,6 +130,8 @@ export default class Clusters {
     eventHub.$on('upgradeApplication', data => this.upgradeApplication(data));
     eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId));
     eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId));
+    eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data));
+    eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data));
   }
   removeListeners() {
@@ -137,6 +140,8 @@ export default class Clusters {
     eventHub.$off('upgradeApplication', this.upgradeApplication);
     eventHub.$off('upgradeFailed', this.upgradeFailed);
     eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess);
+    eventHub.$off('saveKnativeDomain');
+    eventHub.$off('setKnativeHostname');
   }
   initPolling() {
@@ -272,6 +277,18 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'requestStatus', null);
   }
+  saveKnativeDomain(data) {
+    const appId = data.id;
+    this.store.updateAppProperty(appId, 'status', APPLICATION_STATUS.UPDATING);
+    this.service.updateApplication(appId, data.params);
+  }
+
+  setKnativeHostname(data) {
+    const appId = data.id;
+    this.store.updateAppProperty(appId, 'isEditingHostName', true);
+    this.store.updateAppProperty(appId, 'hostname', data.hostname);
+  }
+
   destroy() {
     this.destroyed = true;

app/assets/javascripts/clusters/components/application_row.vue

@@ -191,14 +191,7 @@ export default {
       return this.status === APPLICATION_STATUS.UPDATE_ERRORED;
     },
     upgradeFailureDescription() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Something went wrong when upgrading %{title}. Please check the logs and try again.',
-        ),
-        {
-          title: this.title,
-        },
-      );
+      return s__('ClusterIntegration|Update failed. Please check the logs and try again.');
     },
     upgradeSuccessDescription() {
       return sprintf(s__('ClusterIntegration|%{title} upgraded successfully.'), {
@@ -210,9 +203,9 @@ export default {
       if (this.upgradeAvailable && !this.upgradeFailed && !this.isUpgrading) {
         label = s__('ClusterIntegration|Upgrade');
       } else if (this.isUpgrading) {
-        label = s__('ClusterIntegration|Upgrading');
+        label = s__('ClusterIntegration|Updating');
       } else if (this.upgradeFailed) {
-        label = s__('ClusterIntegration|Retry upgrade');
+        label = s__('ClusterIntegration|Retry update');
       }
       return label;
@@ -224,6 +217,14 @@ export default {
         (this.upgradeRequested && !this.upgradeSuccessful)
       );
     },
+    shouldShowUpgradeDetails() {
+      // This method only returns true when;
+      // Upgrade was successful OR Upgrade failed
+      //     AND new upgrade is unavailable AND version information is present.
+      return (
+        (this.upgradeSuccessful || this.upgradeFailed) && !this.upgradeAvailable && this.version
+      );
+    },
   },
   watch: {
     status() {
@@ -303,7 +304,7 @@ export default {
         </div>
         <div
-          v-if="(upgradeSuccessful || upgradeFailed) && !upgradeAvailable"
+          v-if="shouldShowUpgradeDetails"
           class="form-text text-muted label p-0 js-cluster-application-upgrade-details"
         >
           {{ versionLabel }}

app/assets/javascripts/clusters/components/applications.vue

@@ -15,11 +15,14 @@ import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import eventHub from '~/clusters/event_hub';
 export default {
   components: {
     applicationRow,
     clipboardButton,
+    LoadingButton,
   },
   props: {
     type: {
@@ -86,53 +89,26 @@ export default {
     ingressInstalled() {
       return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
-    ingressExternalIp() {
-      return this.applications.ingress.externalIp;
+    ingressExternalEndpoint() {
+      return this.applications.ingress.externalIp || this.applications.ingress.externalHostname;
     },
     certManagerInstalled() {
       return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED;
     },
     ingressDescription() {
-      const extraCostParagraph = sprintf(
-        _.escape(
-          s__(
-            `ClusterIntegration|%{boldNotice} This will add some extra resources
-            like a load balancer, which may incur additional costs depending on
-            the hosting provider your Kubernetes cluster is installed on. If you are using
-            Google Kubernetes Engine, you can %{pricingLink}.`,
-          ),
-        ),
-        {
-          boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
-          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|check the pricing here'))}</a>`,
-        },
-        false,
-      );
-
-      const externalIpParagraph = sprintf(
+      return sprintf(
         _.escape(
           s__(
-            `ClusterIntegration|After installing Ingress, you will need to point your wildcard DNS
-            at the generated external IP address in order to view your app after it is deployed. %{ingressHelpLink}`,
+            `ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.`,
           ),
         ),
         {
-          ingressHelpLink: `<a href="${this.ingressHelpPath}">
-              ${_.escape(s__('ClusterIntegration|More information'))}
-            </a>`,
+          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+              target="_blank" rel="noopener noreferrer">
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
         },
         false,
       );
-
-      return `
-          <p>
-            ${extraCostParagraph}
-          </p>
-          <p class="settings-message append-bottom-0">
-            ${externalIpParagraph}
-          </p>
-        `;
     },
     certManagerDescription() {
       return sprintf(
@@ -173,16 +149,70 @@ export default {
     jupyterHostname() {
       return this.applications.jupyter.hostname;
     },
+    knative() {
+      return this.applications.knative;
+    },
     knativeInstalled() {
-      return this.applications.knative.status === APPLICATION_STATUS.INSTALLED;
+      return (
+        this.knative.status === APPLICATION_STATUS.INSTALLED ||
+        this.knativeUpgrading ||
+        this.knativeUpgradeFailed ||
+        this.knative.status === APPLICATION_STATUS.UPDATED
+      );
+    },
+    knativeUpgrading() {
+      return (
+        this.knative.status === APPLICATION_STATUS.UPDATING ||
+        this.knative.status === APPLICATION_STATUS.SCHEDULED
+      );
     },
-    knativeExternalIp() {
-      return this.applications.knative.externalIp;
+    knativeUpgradeFailed() {
+      return this.knative.status === APPLICATION_STATUS.UPDATE_ERRORED;
+    },
+    knativeExternalEndpoint() {
+      return this.knative.externalIp || this.knative.externalHostname;
+    },
+    knativeDescription() {
+      return sprintf(
+        _.escape(
+          s__(
+            `ClusterIntegration|Installing Knative may incur additional costs. Learn more about %{pricingLink}.`,
+          ),
+        ),
+        {
+          pricingLink: `<strong><a href="https://cloud.google.com/compute/pricing#lb"
+              target="_blank" rel="noopener noreferrer">
+              ${_.escape(s__('ClusterIntegration|pricing'))}</a></strong>`,
+        },
+        false,
+      );
+    },
+    canUpdateKnativeEndpoint() {
+      return this.knativeExternalEndpoint && !this.knativeUpgradeFailed && !this.knativeUpgrading;
+    },
+    knativeHostname: {
+      get() {
+        return this.knative.hostname;
+      },
+      set(hostname) {
+        eventHub.$emit('setKnativeHostname', {
+          id: 'knative',
+          hostname,
+        });
+      },
     },
   },
   created() {
     this.helmInstallIllustration = helmInstallIllustration;
   },
+  methods: {
+    saveKnativeDomain() {
+      eventHub.$emit('saveKnativeDomain', {
+        id: 'knative',
+        params: { hostname: this.knative.hostname },
+      });
+    },
+  },
 };
 </script>
@@ -247,31 +277,31 @@ export default {
           <template v-if="ingressInstalled">
             <div class="form-group">
-              <label for="ingress-ip-address">
-                {{ s__('ClusterIntegration|Ingress IP Address') }}
+              <label for="ingress-endpoint">
+                {{ s__('ClusterIntegration|Ingress Endpoint') }}
               </label>
-              <div v-if="ingressExternalIp" class="input-group">
+              <div v-if="ingressExternalEndpoint" class="input-group">
                 <input
-                  id="ingress-ip-address"
-                  :value="ingressExternalIp"
+                  id="ingress-endpoint"
+                  :value="ingressExternalEndpoint"
                   type="text"
-                  class="form-control js-ip-address"
+                  class="form-control js-endpoint"
                   readonly
                 />
                 <span class="input-group-append">
                   <clipboard-button
-                    :text="ingressExternalIp"
-                    :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
+                    :text="ingressExternalEndpoint"
+                    :title="s__('ClusterIntegration|Copy Ingress Endpoint to clipboard')"
                     class="input-group-text js-clipboard-btn"
                   />
                 </span>
               </div>
-              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
+              <input v-else type="text" class="form-control js-endpoint" readonly value="?" />
               <p class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Point a wildcard DNS to this
-                generated IP address in order to access
-                your application after it has been deployed.`)
+                  generated endpoint in order to access
+                  your application after it has been deployed.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -279,19 +309,21 @@ export default {
               </p>
             </div>
-            <p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
+            <p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
               {{
-                s__(`ClusterIntegration|The IP address is in
-              the process of being assigned. Please check your Kubernetes
-              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+                s__(`ClusterIntegration|The endpoint is in
+                the process of being assigned. Please check your Kubernetes
+                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
               }}
-              <a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
           </template>
-          <div v-html="ingressDescription"></div>
+          <template v-if="!ingressInstalled">
+            <div class="bs-callout bs-callout-info" v-html="ingressDescription"></div>
+          </template>
         </div>
       </application-row>
       <application-row
@@ -401,7 +433,7 @@ export default {
             }}
           </p>
-          <template v-if="ingressExternalIp">
+          <template v-if="ingressExternalEndpoint">
             <div class="form-group">
               <label for="jupyter-hostname">
                 {{ s__('ClusterIntegration|Jupyter Hostname') }}
@@ -426,7 +458,7 @@ export default {
               <p v-if="ingressInstalled" class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Replace this with your own hostname if you want.
-                If you do so, point hostname to Ingress IP Address from above.`)
+                  If you do so, point hostname to Ingress IP Address from above.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -451,10 +483,10 @@ export default {
       >
         <div slot="description">
           <span v-if="!rbac">
-            <p v-if="!rbac" class="bs-callout bs-callout-info append-bottom-0">
+            <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
               {{
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
-              to install Knative.`)
+                to install Knative.`)
               }}
               <a :href="helpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
@@ -471,76 +503,88 @@ export default {
             }}
           </p>
-          <template v-if="knativeInstalled">
-            <div class="form-group">
-              <label for="knative-domainname">
-                {{ s__('ClusterIntegration|Knative Domain Name:') }}
-              </label>
-              <input
-                id="knative-domainname"
-                v-model="applications.knative.hostname"
-                type="text"
-                class="form-control js-domainname"
-                readonly
-              />
-            </div>
-          </template>
-          <template v-else-if="helmInstalled && rbac">
-            <div class="form-group">
-              <label for="knative-domainname">
-                {{ s__('ClusterIntegration|Knative Domain Name:') }}
-              </label>
-              <input
-                id="knative-domainname"
-                v-model="applications.knative.hostname"
-                type="text"
-                class="form-control js-domainname"
-              />
-            </div>
-          </template>
-          <template v-if="knativeInstalled">
-            <div class="form-group">
-              <label for="knative-ip-address">
-                {{ s__('ClusterIntegration|Knative IP Address:') }}
-              </label>
-              <div v-if="knativeExternalIp" class="input-group">
+          <div class="row">
+            <template v-if="knativeInstalled || (helmInstalled && rbac)">
+              <div
+                :class="{ 'col-md-6': knativeInstalled, 'col-12': helmInstalled && rbac }"
+                class="form-group col-sm-12 mb-0"
+              >
+                <label for="knative-domainname">
+                  <strong>
+                    {{ s__('ClusterIntegration|Knative Domain Name:') }}
+                  </strong>
+                </label>
                 <input
-                  id="knative-ip-address"
-                  :value="knativeExternalIp"
+                  id="knative-domainname"
+                  v-model="knativeHostname"
                   type="text"
-                  class="form-control js-ip-address"
-                  readonly
+                  class="form-control js-knative-domainname"
                 />
-                <span class="input-group-append">
-                  <clipboard-button
-                    :text="knativeExternalIp"
-                    :title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')"
-                    class="input-group-text js-clipboard-btn"
+              </div>
+            </template>
+            <template v-if="knativeInstalled">
+              <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
+                <label for="knative-endpoint">
+                  <strong>
+                    {{ s__('ClusterIntegration|Knative Endpoint:') }}
+                  </strong>
+                </label>
+                <div v-if="knativeExternalEndpoint" class="input-group">
+                  <input
+                    id="knative-endpoint"
+                    :value="knativeExternalEndpoint"
+                    type="text"
+                    class="form-control js-knative-endpoint"
+                    readonly
                   />
-                </span>
+                  <span class="input-group-append">
+                    <clipboard-button
+                      :text="knativeExternalEndpoint"
+                      :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
+                      class="input-group-text js-knative-endpoint-clipboard-btn"
+                    />
+                  </span>
+                </div>
+                <input
+                  v-else
+                  type="text"
+                  class="form-control js-knative-endpoint"
+                  readonly
+                  value="?"
+                />
               </div>
-              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
-            </div>
-            <p v-if="!knativeExternalIp" class="settings-message js-no-ip-message">
-              {{
-                s__(`ClusterIntegration|The IP address is in
-              the process of being assigned. Please check your Kubernetes
-              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
-              }}
-            </p>
-            <p>
-              {{
-                s__(`ClusterIntegration|Point a wildcard DNS to this
-              generated IP address in order to access
-              your application after it has been deployed.`)
-              }}
-              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
-                {{ __('More information') }}
-              </a>
-            </p>
-          </template>
+              <p class="form-text text-muted col-12">
+                {{
+                  s__(
+                    `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the Knative Endpoint.`,
+                  )
+                }}
+                <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
+                  {{ __('More information') }}
+                </a>
+              </p>
+              <p
+                v-if="!knativeExternalEndpoint"
+                class="settings-message js-no-knative-endpoint-message mt-2 mr-3 mb-0 ml-3"
+              >
+                {{
+                  s__(`ClusterIntegration|The endpoint is in
+                  the process of being assigned. Please check your Kubernetes
+                  cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+                }}
+              </p>
+
+              <button
+                v-if="canUpdateKnativeEndpoint"
+                class="btn btn-success js-knative-save-domain-button mt-3 ml-3"
+                @click="saveKnativeDomain"
+              >
+                {{ s__('ClusterIntegration|Save changes') }}
+              </button>
+            </template>
+          </div>
         </div>
       </application-row>
     </div>

app/assets/javascripts/clusters/services/clusters_service.js

@@ -12,6 +12,9 @@ export default class ClusterService {
       jupyter: this.options.installJupyterEndpoint,
       knative: this.options.installKnativeEndpoint,
     };
+    this.appUpdateEndpointMap = {
+      knative: this.options.updateKnativeEndpoint,
+    };
   }
   fetchData() {
@@ -22,6 +25,10 @@ export default class ClusterService {
     return axios.post(this.appInstallEndpointMap[appId], params);
   }
+  updateApplication(appId, params) {
+    return axios.patch(this.appUpdateEndpointMap[appId], params);
+  }
+
   static updateCluster(endpoint, data) {
     return axios.put(endpoint, data);
   }

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -25,6 +25,7 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
           externalIp: null,
+          externalHostname: null,
         },
         cert_manager: {
           title: s__('ClusterIntegration|Cert-Manager'),
@@ -66,7 +67,9 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
           hostname: null,
+          isEditingHostName: false,
           externalIp: null,
+          externalHostname: null,
         },
       },
     };
@@ -119,6 +122,7 @@ export default class ClusterStore {
       if (appId === INGRESS) {
         this.state.applications.ingress.externalIp = serverAppEntry.external_ip;
+        this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname;
       } else if (appId === CERT_MANAGER) {
         this.state.applications.cert_manager.email =
           this.state.applications.cert_manager.email || serverAppEntry.email;
@@ -129,10 +133,14 @@ export default class ClusterStore {
             ? `jupyter.${this.state.applications.ingress.externalIp}.nip.io`
             : '');
       } else if (appId === KNATIVE) {
-        this.state.applications.knative.hostname =
-          serverAppEntry.hostname || this.state.applications.knative.hostname;
+        if (!this.state.applications.knative.isEditingHostName) {
+          this.state.applications.knative.hostname =
+            serverAppEntry.hostname || this.state.applications.knative.hostname;
+        }
         this.state.applications.knative.externalIp =
           serverAppEntry.external_ip || this.state.applications.knative.externalIp;
+        this.state.applications.knative.externalHostname =
+          serverAppEntry.external_hostname || this.state.applications.knative.externalHostname;
       } else if (appId === RUNNER) {
         this.state.applications.runner.version = version;
         this.state.applications.runner.upgradeAvailable = upgradeAvailable;

app/assets/javascripts/contextual_sidebar.js

@@ -4,6 +4,10 @@ import _ from 'underscore';
 import bp from './breakpoints';
 import { parseBoolean } from '~/lib/utils/common_utils';
+// NOTE: at 1200px nav sidebar should not overlap the content
+// https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110
+const NAV_SIDEBAR_BREAKPOINT = 1200;
+
 export default class ContextualSidebar {
   constructor() {
     this.initDomElements();
@@ -26,44 +30,54 @@ export default class ContextualSidebar {
   bindEvents() {
     if (!this.$sidebar.length) return;
-    document.addEventListener('click', e => {
-      if (
-        !e.target.closest('.nav-sidebar') &&
-        (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
-      ) {
-        this.toggleCollapsedSidebar(true, true);
-      }
-    });
     this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
     this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
     this.$overlay.on('click', () => this.toggleSidebarNav(false));
     this.$sidebarToggle.on('click', () => {
-      const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
-      this.toggleCollapsedSidebar(value, true);
+      if (!ContextualSidebar.isDesktopBreakpoint()) {
+        this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
+      } else {
+        const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
+        this.toggleCollapsedSidebar(value, true);
+      }
     });
     $(window).on('resize', () => _.debounce(this.render(), 100));
   }
+  // TODO: use the breakpoints from breakpoints.js once they have been updated for bootstrap 4
+  // See documentation: https://design.gitlab.com/regions/navigation#contextual-navigation
+  static isDesktopBreakpoint = () => bp.windowWidth() >= NAV_SIDEBAR_BREAKPOINT;
   static setCollapsedCookie(value) {
-    if (bp.getBreakpointSize() !== 'lg') {
+    if (!ContextualSidebar.isDesktopBreakpoint()) {
       return;
     }
     Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 });
   }
   toggleSidebarNav(show) {
-    this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
-    this.$overlay.toggleClass('mobile-nav-open', show);
+    const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint();
+
+    this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
+    this.$overlay.toggleClass(
+      'mobile-nav-open',
+      breakpoint === 'xs' || breakpoint === 'sm' ? show : false,
+    );
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
   }
   toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint();
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
-      this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
+      this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
+      this.$page.toggleClass(
+        'page-with-icon-sidebar',
+        breakpoint === 'xs' || breakpoint === 'sm' ? true : collapsed,
+      );
     }
     if (saveCookie) {
@@ -84,13 +98,11 @@ export default class ContextualSidebar {
   render() {
     if (!this.$sidebar.length) return;
-    const breakpoint = bp.getBreakpointSize();
-
-    if (breakpoint === 'sm' || breakpoint === 'md') {
-      this.toggleCollapsedSidebar(true, false);
-    } else if (breakpoint === 'lg') {
+    if (!ContextualSidebar.isDesktopBreakpoint()) {
+      this.toggleSidebarNav(false);
+    } else {
       const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
-      this.toggleCollapsedSidebar(collapse, false);
+      this.toggleCollapsedSidebar(collapse, true);
     }
   }
 }

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -5,7 +5,7 @@ import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import { diffViewerModes } from '~/ide/constants';
@@ -14,6 +14,9 @@ import DiffStats from './diff_stats.vue';
 export default {
   components: {
+    GlTooltip,
+    GlLoadingIcon,
+    GlButton,
     ClipboardButton,
     EditButton,
     Icon,
@@ -125,12 +128,15 @@ export default {
     isModeChanged() {
       return this.diffFile.viewer.name === diffViewerModes.mode_changed;
     },
+    showExpandDiffToFullFileEnabled() {
+      return gon.features.expandDiffFullFile && !this.diffFile.is_fully_expanded;
+    },
   },
   mounted() {
     polyfillSticky(this.$refs.header);
   },
   methods: {
-    ...mapActions('diffs', ['toggleFileDiscussions']),
+    ...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']),
     handleToggleFile(e, checkTarget) {
       if (
         !checkTarget ||
@@ -240,12 +246,30 @@ export default {
         v-html="viewReplacedFileButtonText"
       >
       </a>
-      <a
+      <gl-tooltip :target="() => $refs.viewButton" placement="bottom">
+        <span v-html="viewFileButtonText"></span>
+      </gl-tooltip>
+      <gl-button
+        ref="viewButton"
         :href="diffFile.view_path"
-        class="btn view-file js-view-file-button"
-        v-html="viewFileButtonText"
+        target="blank"
+        class="view-file js-view-file-button"
       >
-      </a>
+        <icon name="external-link" />
+      </gl-button>
+      <gl-button
+        v-if="showExpandDiffToFullFileEnabled"
+        class="expand-file js-expand-file"
+        @click="toggleFullDiff(diffFile.file_path)"
+      >
+        <template v-if="diffFile.isShowingFullFile">
+          {{ s__('MRDiff|Show changes only') }}
+        </template>
+        <template v-else>
+          {{ s__('MRDiff|Show full file') }}
+        </template>
+        <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
+      </gl-button>
       <a
         v-if="diffFile.external_url"

app/assets/javascripts/diffs/components/edit_button.vue

 <script>
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
 export default {
+  components: {
+    GlButton,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     editPath: {
       type: String,
@@ -27,5 +37,13 @@ export default {
 </script>
 <template>
-  <a :href="editPath" class="btn btn-default js-edit-blob" @click="handleEditClick"> Edit </a>
+  <gl-button
+    v-gl-tooltip.bottom
+    :href="editPath"
+    :title="__('Edit file')"
+    class="js-edit-blob"
+    @click.native="handleEditClick"
+  >
+    <icon name="pencil" />
+  </gl-button>
 </template>