.haml-lint_todo.yml

@@ -356,6 +356,7 @@ linters:
       - 'app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml'
       - 'app/views/shared/_commit_message_container.html.haml'
       - 'app/views/shared/_confirm_modal.html.haml'
+      - 'app/views/shared/_confirm_fork_modal.html.haml'
       - 'app/views/shared/_delete_label_modal.html.haml'
       - 'app/views/shared/_group_form.html.haml'
       - 'app/views/shared/_group_tips.html.haml'

.rubocop.yml

@@ -178,6 +178,11 @@ Gitlab/ModuleWithInstanceVariables:
     - spec/support/**/*.rb
     - features/steps/**/*.rb
 
+Gitlab/ConstGetInheritFalse:
+  Enabled: true
+  Exclude:
+    - 'qa/bin/*'
+
 Gitlab/HTTParty:
   Enabled: true
   Exclude:

Dangerfile

 # frozen_string_literal: true
 
 require_relative 'lib/gitlab_danger'
+require_relative 'lib/gitlab/danger/request_helper'
 
 danger.import_plugin('danger/plugins/helper.rb')
 danger.import_plugin('danger/plugins/roulette.rb')

app/assets/javascripts/ide/stores/mutations.js

@@ -73,16 +73,15 @@ export default {
       const entry = data.entries[key];
       const foundEntry = state.entries[key];
 
+      // NOTE: We can't clone `entry` in any of the below assignments because
+      // we need `state.entries` and the `entry.tree` to reference the same object.
       if (!foundEntry) {
         Object.assign(state.entries, {
           [key]: entry,
         });
       } else if (foundEntry.deleted) {
         Object.assign(state.entries, {
-          [key]: {
-            ...entry,
-            replaces: true,
-          },
+          [key]: Object.assign(entry, { replaces: true }),
         });
       } else {
         const tree = entry.tree.filter(

app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue

+<script>
+export default {
+  props: {
+    signedIn: {
+      type: Boolean,
+      required: true,
+    },
+    sidebarStatusClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <aside
+    :class="sidebarStatusClass"
+    class="right-sidebar js-right-sidebar js-issuable-sidebar"
+    aria-live="polite"
+  ></aside>
+</template>

app/assets/javascripts/issuable_sidebar/sidebar_bundle.js

+import Vue from 'vue';
+
+import SidebarApp from './components/sidebar_app.vue';
+
+export default () => {
+  const el = document.getElementById('js-vue-issuable-sidebar');
+
+  if (!el) {
+    return false;
+  }
+
+  const { sidebarStatusClass } = el.dataset;
+  // An empty string is present when user is signed in.
+  const signedIn = el.dataset.signedIn === '';
+
+  return new Vue({
+    el,
+    components: { SidebarApp },
+    render: createElement =>
+      createElement('sidebar-app', {
+        props: {
+          signedIn,
+          sidebarStatusClass,
+        },
+      }),
+  });
+};

app/assets/javascripts/jobs/components/environments_block.vue

@@ -19,69 +19,18 @@ export default {
   },
   computed: {
     environment() {
-      let environmentText;
       switch (this.deploymentStatus.status) {
         case 'last':
-          environmentText = sprintf(
-            __('This job is the most recent deployment to %{link}.'),
-            { link: this.environmentLink },
-            false,
-          );
-          break;
+          return this.lastEnvironmentMessage();
         case 'out_of_date':
-          if (this.hasLastDeployment) {
-            environmentText = sprintf(
-              __(
-                'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
-              ),
-              {
-                environmentLink: this.environmentLink,
-                deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
-              },
-              false,
-            );
-          } else {
-            environmentText = sprintf(
-              __('This job is an out-of-date deployment to %{environmentLink}.'),
-              { environmentLink: this.environmentLink },
-              false,
-            );
-          }
-
-          break;
+          return this.outOfDateEnvironmentMessage();
         case 'failed':
-          environmentText = sprintf(
-            __('The deployment of this job to %{environmentLink} did not succeed.'),
-            { environmentLink: this.environmentLink },
-            false,
-          );
-          break;
+          return this.failedEnvironmentMessage();
         case 'creating':
-          if (this.hasLastDeployment) {
-            environmentText = sprintf(
-              __(
-                'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
-              ),
-              {
-                environmentLink: this.environmentLink,
-                deploymentLink: this.deploymentLink(__('latest deployment')),
-              },
-              false,
-            );
-          } else {
-            environmentText = sprintf(
-              __('This job is creating a deployment to %{environmentLink}.'),
-              { environmentLink: this.environmentLink },
-              false,
-            );
-          }
-          break;
+          return this.creatingEnvironmentMessage();
         default:
-          break;
+          return '';
       }
-      return environmentText && this.hasCluster
-        ? `${environmentText} ${this.clusterText}`
-        : environmentText;
     },
     environmentLink() {
       if (this.hasEnvironment) {
@@ -137,11 +86,6 @@ export default {
         false,
       );
     },
-    clusterText() {
-      return this.hasCluster
-        ? sprintf(__('Cluster %{cluster} was used.'), { cluster: this.clusterNameOrLink }, false)
-        : '';
-    },
   },
   methods: {
     deploymentLink(name) {
@@ -155,6 +99,91 @@ export default {
         false,
       );
     },
+    failedEnvironmentMessage() {
+      const { environmentLink } = this;
+
+      return sprintf(
+        __('The deployment of this job to %{environmentLink} did not succeed.'),
+        { environmentLink },
+        false,
+      );
+    },
+    lastEnvironmentMessage() {
+      const { environmentLink, clusterNameOrLink, hasCluster } = this;
+
+      const message = hasCluster
+        ? __('This job is deployed to %{environmentLink} using cluster %{clusterNameOrLink}.')
+        : __('This job is deployed to %{environmentLink}.');
+
+      return sprintf(message, { environmentLink, clusterNameOrLink }, false);
+    },
+    outOfDateEnvironmentMessage() {
+      const { hasLastDeployment, hasCluster, environmentLink, clusterNameOrLink } = this;
+
+      if (hasLastDeployment) {
+        const message = hasCluster
+          ? __(
+              'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}. View the %{deploymentLink}.',
+            )
+          : __(
+              'This job is an out-of-date deployment to %{environmentLink}. View the %{deploymentLink}.',
+            );
+
+        return sprintf(
+          message,
+          {
+            environmentLink,
+            clusterNameOrLink,
+            deploymentLink: this.deploymentLink(__('most recent deployment')),
+          },
+          false,
+        );
+      }
+
+      const message = hasCluster
+        ? __(
+            'This job is an out-of-date deployment to %{environmentLink} using cluster %{clusterNameOrLink}.',
+          )
+        : __('This job is an out-of-date deployment to %{environmentLink}.');
+
+      return sprintf(
+        message,
+        {
+          environmentLink,
+          clusterNameOrLink,
+        },
+        false,
+      );
+    },
+    creatingEnvironmentMessage() {
+      const { hasLastDeployment, hasCluster, environmentLink, clusterNameOrLink } = this;
+
+      if (hasLastDeployment) {
+        const message = hasCluster
+          ? __(
+              'This job is creating a deployment to %{environmentLink} using cluster %{clusterNameOrLink}. This will overwrite the %{deploymentLink}.',
+            )
+          : __(
+              'This job is creating a deployment to %{environmentLink}. This will overwrite the %{deploymentLink}.',
+            );
+
+        return sprintf(
+          message,
+          {
+            environmentLink,
+            clusterNameOrLink,
+            deploymentLink: this.deploymentLink(__('latest deployment')),
+          },
+          false,
+        );
+      }
+
+      return sprintf(
+        __('This job is creating a deployment to %{environmentLink}.'),
+        { environmentLink },
+        false,
+      );
+    },
   },
 };
 </script>

app/assets/javascripts/jobs/components/log/duration_badge.vue

@@ -9,7 +9,7 @@ export default {
 };
 </script>
 <template>
-  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0">
+  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0 ws-normal">
     {{ duration }}
   </div>
 </template>

app/assets/javascripts/jobs/components/log/line.vue

@@ -21,8 +21,12 @@ export default {
 <template>
   <div class="js-line log-line">
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" :class="content.style">{{
-      content.text
-    }}</span>
+    <span
+      v-for="(content, i) in line.content"
+      :key="i"
+      :class="content.style"
+      class="ws-pre-wrap"
+      >{{ content.text }}</span
+    >
   </div>
 </template>

app/assets/javascripts/jobs/components/log/line_header.vue

@@ -43,15 +43,19 @@ export default {
 
 <template>
   <div
-    class="log-line collapsible-line d-flex justify-content-between"
+    class="log-line collapsible-line d-flex justify-content-between ws-normal"
     role="button"
     @click="handleOnClick"
   >
     <icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
-      content.text
-    }}</span>
+    <span
+      v-for="(content, i) in line.content"
+      :key="i"
+      class="line-text w-100 ws-pre-wrap"
+      :class="content.style"
+      >{{ content.text }}</span
+    >
     <duration-badge v-if="duration" :duration="duration" />
   </div>
 </template>

app/assets/javascripts/jobs/components/log/line_number.vue

@@ -48,7 +48,7 @@ export default {
 <template>
   <gl-link
     :id="lineNumberId"
-    class="d-inline-block text-right line-number"
+    class="d-inline-block text-right line-number flex-shrink-0"
     :href="buildLineNumber"
     >{{ parsedLineNumber }}</gl-link
   >

app/assets/javascripts/jobs/store/mutations.js

@@ -19,7 +19,7 @@ export default {
     state.isSidebarOpen = true;
   },
 
-  [types.RECEIVE_TRACE_SUCCESS](state, log) {
+  [types.RECEIVE_TRACE_SUCCESS](state, log = {}) {
     if (log.state) {
       state.traceState = log.state;
     }

app/assets/javascripts/labels_select.js

@@ -32,6 +32,7 @@ export default class LabelsSelect {
         $selectbox,
         $sidebarCollapsedValue,
         $value,
+        $dropdownMenu,
         abilityName,
         defaultLabel,
         issueUpdateURL,
@@ -67,6 +68,7 @@ export default class LabelsSelect {
       $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
       $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
       $value = $block.find('.value');
+      $dropdownMenu = $dropdown.parent().find('.dropdown-menu');
       $loading = $block.find('.block-loading').fadeOut();
       fieldName = $dropdown.data('fieldName');
       initialSelected = $selectbox
@@ -454,9 +456,21 @@ export default class LabelsSelect {
             }
 
             $loading.fadeIn();
+            const oldLabels = boardsStore.detail.issue.labels;
 
             boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
+              .then(() => {
+                if (isScopedLabel(label)) {
+                  const prevIds = oldLabels.map(label => label.id);
+                  const newIds = boardsStore.detail.issue.labels.map(label => label.id);
+                  const differentIds = _.difference(prevIds, newIds);
+                  $dropdown.data('marked', newIds);
+                  $dropdownMenu
+                    .find(differentIds.map(id => `[data-label-id="${id}"]`).join(','))
+                    .removeClass('is-active');
+                }
+              })
               .then(fadeOutLoader)
               .catch(fadeOutLoader);
           } else if (handleClick) {

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -416,7 +416,6 @@ export default {
             <gl-button
               v-if="showRearrangePanelsBtn"
               :pressed="isRearrangingPanels"
-              new-style
               variant="default"
               class="mr-2 mt-1 js-rearrange-button"
               @click="toggleRearrangingPanels"
@@ -426,7 +425,6 @@ export default {
             <gl-button
               v-if="addingMetricsAvailable"
               v-gl-modal="$options.addMetric.modalId"
-              new-style
               variant="outline-success"
               class="mr-2 mt-1 js-add-metric-button"
             >

app/assets/javascripts/pages/projects/issues/show.js

@@ -5,6 +5,7 @@ import ZenMode from '~/zen_mode';
 import '~/notes/index';
 import initIssueableApp from '~/issue_show';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 
 export default function() {
   initIssueableApp();
@@ -12,5 +13,9 @@ export default function() {
   new Issue(); // eslint-disable-line no-new
   new ShortcutsIssuable(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
-  initIssuableSidebar();
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
+    initIssuableSidebar();
+  }
 }

app/assets/javascripts/pages/projects/issues/show/index.js

@@ -3,5 +3,7 @@ import initShow from '../show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
-  initSidebarBundle();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
+    initSidebarBundle();
+  }
 });

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

@@ -4,11 +4,16 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 import initWidget from '../../../vue_merge_request_widget';
 
 export default function() {
   new ZenMode(); // eslint-disable-line no-new
-  initIssuableSidebar();
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
+    initIssuableSidebar();
+  }
   initPipelines();
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();

app/assets/javascripts/pages/projects/merge_requests/show/index.js

@@ -4,6 +4,8 @@ import initShow from '../init_merge_request_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
-  initSidebarBundle();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
+    initSidebarBundle();
+  }
   initMrNotes();
 });

app/assets/javascripts/registry/components/app.vue

@@ -15,15 +15,19 @@ export default {
     GlLoadingIcon,
   },
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
     characterError: {
       type: Boolean,
       required: false,
       default: false,
     },
+    containersErrorImage: {
+      type: String,
+      required: true,
+    },
+    endpoint: {
+      type: String,
+      required: true,
+    },
     helpPagePath: {
       type: String,
       required: true,
@@ -32,7 +36,11 @@ export default {
       type: String,
       required: true,
     },
-    containersErrorImage: {
+    personalAccessTokensHelpLink: {
+      type: String,
+      required: true,
+    },
+    registryHostUrlWithPort: {
       type: String,
       required: true,
     },
@@ -40,6 +48,10 @@ export default {
       type: String,
       required: true,
     },
+    twoFactorAuthHelpLink: {
+      type: String,
+      required: true,
+    },
   },
   store,
   computed: {
@@ -79,6 +91,26 @@ export default {
         false,
       );
     },
+    notLoggedInToRegistryText() {
+      return sprintf(
+        s__(`ContainerRegistry|If you are not already logged in, you need to authenticate to
+             the Container Registry by using your GitLab username and password. If you have
+             %{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a
+             %{personalAccessTokensDocLinkStart}Personal Access Token
+             %{personalAccessTokensDocLinkEnd}instead of a password.`),
+        {
+          twofaDocLinkStart: `<a href="${this.twoFactorAuthHelpLink}" target="_blank">`,
+          twofaDocLinkEnd: '</a>',
+          personalAccessTokensDocLinkStart: `<a href="${this.personalAccessTokensHelpLink}" target="_blank">`,
+          personalAccessTokensDocLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    dockerLoginCommand() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+      return `docker login ${this.registryHostUrlWithPort}`;
+    },
     dockerBuildCommand() {
       // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `docker build -t ${this.repositoryUrl} .`;
@@ -130,6 +162,17 @@ export default {
       <template #description>
         <p class="js-no-container-images-text" v-html="noContainerImagesText"></p>
         <h5>{{ s__('ContainerRegistry|Quick Start') }}</h5>
+        <p class="js-not-logged-in-to-registry-text" v-html="notLoggedInToRegistryText"></p>
+        <div class="input-group append-bottom-10">
+          <input :value="dockerLoginCommand" type="text" class="form-control monospace" readonly />
+          <span class="input-group-append">
+            <clipboard-button
+              :text="dockerLoginCommand"
+              :title="s__('ContainerRegistry|Copy login command')"
+              class="input-group-text"
+            />
+          </span>
+        </div>
         <p>
           {{
             s__(

app/assets/javascripts/registry/index.js

@@ -13,23 +13,29 @@ export default () =>
     data() {
       const { dataset } = document.querySelector(this.$options.el);
       return {
-        endpoint: dataset.endpoint,
         characterError: Boolean(dataset.characterError),
+        containersErrorImage: dataset.containersErrorImage,
+        endpoint: dataset.endpoint,
         helpPagePath: dataset.helpPagePath,
         noContainersImage: dataset.noContainersImage,
-        containersErrorImage: dataset.containersErrorImage,
+        personalAccessTokensHelpLink: dataset.personalAccessTokensHelpLink,
+        registryHostUrlWithPort: dataset.registryHostUrlWithPort,
         repositoryUrl: dataset.repositoryUrl,
+        twoFactorAuthHelpLink: dataset.twoFactorAuthHelpLink,
       };
     },
     render(createElement) {
       return createElement('registry-app', {
         props: {
-          endpoint: this.endpoint,
           characterError: this.characterError,
+          containersErrorImage: this.containersErrorImage,
+          endpoint: this.endpoint,
           helpPagePath: this.helpPagePath,
           noContainersImage: this.noContainersImage,
-          containersErrorImage: this.containersErrorImage,
+          personalAccessTokensHelpLink: this.personalAccessTokensHelpLink,
+          registryHostUrlWithPort: this.registryHostUrlWithPort,
           repositoryUrl: this.repositoryUrl,
+          twoFactorAuthHelpLink: this.twoFactorAuthHelpLink,
         },
       });
     },