Add latest changes from gitlab-org/gitlab@master

7 files changed, 96 insertions, 35 deletions

diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 2587b57a817..e84e2782e46 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/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(
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 7ae06af02cf..a20bae9e37e 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/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__(
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index d8daec29fda..38c3d67042c 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/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,
         },
       });
     },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index ae1d9368008..36f291e995c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -39,9 +39,6 @@ export default {
     ariaLabel() {
       return this.isCollapsed ? __('Expand') : __('Collapse');
     },
-    isButtonDisabled() {
-      return this.isLoading || this.hasError;
-    },
   },
   methods: {
     toggleCollapsed() {
@@ -53,25 +50,35 @@ export default {
 <template>
   <div>
     <div class="mr-widget-extension d-flex align-items-center pl-3">
-      <gl-button
-        class="btn-blank btn s32 square append-right-default"
-        :aria-label="ariaLabel"
-        :disabled="isButtonDisabled"
-        @click="toggleCollapsed"
-      >
-        <gl-loading-icon v-if="isLoading" />
-        <icon v-else :name="arrowIconName" class="js-icon" />
-      </gl-button>
-      <gl-button
-        variant="link"
-        class="js-title"
-        :disabled="isButtonDisabled"
-        :class="{ 'border-0': isButtonDisabled }"
-        @click="toggleCollapsed"
-      >
-        <template v-if="isCollapsed">{{ title }}</template>
-        <template v-else>{{ __('Collapse') }}</template>
-      </gl-button>
+      <div v-if="hasError" class="ci-widget media">
+        <div class="media-body">
+          <span class="gl-font-size-small mr-widget-margin-left gl-line-height-24 js-error-state">{{
+            title
+          }}</span>
+        </div>
+      </div>
+
+      <template v-else>
+        <gl-button
+          class="btn-blank btn s32 square append-right-default"
+          :aria-label="ariaLabel"
+          :disabled="isLoading"
+          @click="toggleCollapsed"
+        >
+          <gl-loading-icon v-if="isLoading" />
+          <icon v-else :name="arrowIconName" class="js-icon" />
+        </gl-button>
+        <gl-button
+          variant="link"
+          class="js-title"
+          :disabled="isLoading"
+          :class="{ 'border-0': isLoading }"
+          @click="toggleCollapsed"
+        >
+          <template v-if="isCollapsed">{{ title }}</template>
+          <template v-else>{{ __('Collapse') }}</template>
+        </gl-button>
+      </template>
     </div>
 
     <div v-if="!isCollapsed" class="border-top js-slot-container">
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 370fc84e492..4b89a2f2b04 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -560,3 +560,6 @@ img.emoji {
     }
   }
 }
+
+.gl-font-size-small { font-size: $gl-font-size-small; }
+.gl-line-height-24 { line-height: $gl-line-height-24; }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f352ee33535..dfc39d8e03b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -833,6 +833,7 @@ Merge Requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
+$mr-widget-margin-left: 40px;
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index e6feded1d4f..971f3b2c308 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -19,6 +19,8 @@
   border-top: 1px solid $border-color;
 }
 
+.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
+
 .media-section {
   @include media-breakpoint-down(md) {
     align-items: flex-start;