Add latest changes from gitlab-org/gitlab@master

10 files changed, 256 insertions, 113 deletions

diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js
index c76e44a196d..b4933376d4e 100644
--- a/app/assets/javascripts/logo.js
+++ b/app/assets/javascripts/logo.js
@@ -13,7 +13,7 @@ export function initPortraitLogoDetection() {
       const isPortrait = img.height > img.width;
       if (isPortrait) {
         // Limit the width when the logo has portrait format
-        img.classList.replace('gl-h-9', 'gl-w-10');
+        img.classList.replace('gl-h-10', 'gl-w-10');
       }
       img.classList.remove('gl-visibility-hidden');
     },
diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue
index 538aa090aa8..a753641ffd2 100644
--- a/app/assets/javascripts/merge_requests/components/compare_app.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_app.vue
@@ -42,6 +42,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -120,6 +125,7 @@ export default {
           :default="currentBranch"
           :toggle-class="toggleClass.branch"
           :data-qa-compare-side="compareSide"
+          :disabled="disabled"
           data-testid="compare-dropdown"
           @selected="selectBranch"
         />
diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
index 20989206a51..35fbf4bc4e6 100644
--- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
@@ -46,6 +46,11 @@ export default {
       required: false,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -131,6 +136,7 @@ export default {
       :toggle-text="current.text || dropdownHeader"
       :header-text="dropdownHeader"
       :searching="isLoading"
+      :disabled="disabled"
       searchable
       class="gl-w-full dropdown-target-project"
       :toggle-class="[
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
index 8cb1462c883..3d877bb3abb 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
@@ -16,8 +16,9 @@ if (mrNewCompareNode) {
   const sourceCompareEl = document.getElementById('js-source-project-dropdown');
   const compareEl = document.querySelector('.js-merge-request-new-compare');
   const targetBranch = Vue.observable({ name: '' });
-
   const currentSourceBranch = JSON.parse(sourceCompareEl.dataset.currentBranch);
+  const sourceBranch = Vue.observable(currentSourceBranch);
+
   // eslint-disable-next-line no-new
   new Vue({
     el: sourceCompareEl,
@@ -52,6 +53,9 @@ if (mrNewCompareNode) {
         if (targetBranchName) {
           targetBranch.name = targetBranchName;
         }
+
+        sourceBranch.value = branchName;
+        sourceBranch.text = branchName;
       },
     },
     render(h) {
@@ -102,9 +106,14 @@ if (mrNewCompareNode) {
 
         return currentTargetBranch;
       },
+      isDisabled() {
+        return !sourceBranch.value;
+      },
     },
     render(h) {
-      return h(CompareApp, { props: { currentBranch: this.currentBranch } });
+      return h(CompareApp, {
+        props: { currentBranch: this.currentBranch, disabled: this.isDisabled },
+      });
     },
   });
 } else {
diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
index f71e6e6b405..79f0fdca061 100644
--- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
+++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue
@@ -17,14 +17,16 @@ import {
 import WorkItemDueDate from './work_item_due_date.vue';
 import WorkItemAssignees from './work_item_assignees.vue';
 import WorkItemLabels from './work_item_labels.vue';
-import WorkItemMilestone from './work_item_milestone.vue';
+import WorkItemMilestoneInline from './work_item_milestone_inline.vue';
+import WorkItemMilestoneWithEdit from './work_item_milestone_with_edit.vue';
 import WorkItemParentInline from './work_item_parent_inline.vue';
 import WorkItemParent from './work_item_parent_with_edit.vue';
 
 export default {
   components: {
     WorkItemLabels,
-    WorkItemMilestone,
+    WorkItemMilestoneInline,
+    WorkItemMilestoneWithEdit,
     WorkItemAssignees,
     WorkItemDueDate,
     WorkItemParent,
@@ -140,15 +142,28 @@ export default {
       :work-item-type="workItemType"
       @error="$emit('error', $event)"
     />
-    <work-item-milestone
-      v-if="workItemMilestone"
-      :full-path="fullPath"
-      :work-item-id="workItem.id"
-      :work-item-milestone="workItemMilestone.milestone"
-      :work-item-type="workItemType"
-      :can-update="canUpdate"
-      @error="$emit('error', $event)"
-    />
+    <template v-if="workItemMilestone">
+      <work-item-milestone-with-edit
+        v-if="glFeatures.workItemsMvc2"
+        class="gl-mb-5"
+        :full-path="fullPath"
+        :work-item-id="workItem.id"
+        :work-item-milestone="workItemMilestone.milestone"
+        :work-item-type="workItemType"
+        :can-update="canUpdate"
+        @error="$emit('error', $event)"
+      />
+      <work-item-milestone-inline
+        v-else
+        class="gl-mb-5"
+        :full-path="fullPath"
+        :work-item-id="workItem.id"
+        :work-item-milestone="workItemMilestone.milestone"
+        :work-item-type="workItemType"
+        :can-update="canUpdate"
+        @error="$emit('error', $event)"
+      />
+    </template>
     <template v-if="workItemWeight">
       <work-item-weight
         v-if="glFeatures.workItemsMvc2"
diff --git a/app/assets/javascripts/work_items/components/work_item_milestone.vue b/app/assets/javascripts/work_items/components/work_item_milestone_inline.vue
index dbeb3d4d3ff..dbeb3d4d3ff 100644
--- a/app/assets/javascripts/work_items/components/work_item_milestone.vue
+++ b/app/assets/javascripts/work_items/components/work_item_milestone_inline.vue
diff --git a/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue
new file mode 100644
index 00000000000..9588d21a3c5
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue
@@ -0,0 +1,203 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import Tracking from '~/tracking';
+import { s__, __ } from '~/locale';
+import { MILESTONE_STATE } from '~/sidebar/constants';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import WorkItemSidebarDropdownWidgetWithEdit from '~/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue';
+import projectMilestonesQuery from '~/sidebar/queries/project_milestones.query.graphql';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import {
+  I18N_WORK_ITEM_ERROR_UPDATING,
+  sprintfWorkItem,
+  TRACKING_CATEGORY_SHOW,
+} from '../constants';
+
+export default {
+  i18n: {
+    milestone: s__('WorkItem|Milestone'),
+    none: s__('WorkItem|None'),
+    noMilestone: s__('WorkItem|No milestone'),
+    milestoneFetchError: s__(
+      'WorkItem|Something went wrong while fetching milestones. Please try again.',
+    ),
+    expiredText: __('(expired)'),
+  },
+  components: {
+    WorkItemSidebarDropdownWidgetWithEdit,
+    GlLink,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: true,
+    },
+    workItemMilestone: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    workItemType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      searchTerm: '',
+      shouldFetch: false,
+      updateInProgress: false,
+      milestones: [],
+      localMilestone: this.workItemMilestone,
+    };
+  },
+  computed: {
+    tracking() {
+      return {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'item_milestone',
+        property: `type_${this.workItemType}`,
+      };
+    },
+    emptyPlaceholder() {
+      return this.canUpdate ? this.$options.i18n.noMilestone : this.$options.i18n.none;
+    },
+    expired() {
+      return this.localMilestone?.expired ? ` ${this.$options.i18n.expiredText}` : '';
+    },
+    dropdownText() {
+      return this.localMilestone?.title
+        ? `${this.localMilestone?.title}${this.expired}`
+        : this.emptyPlaceholder;
+    },
+    isLoadingMilestones() {
+      return this.$apollo.queries.milestones.loading;
+    },
+    milestonesList() {
+      return this.milestones.map(({ id, title, expired }) => ({
+        value: id,
+        text: title,
+        expired,
+      }));
+    },
+  },
+  apollo: {
+    milestones: {
+      query: projectMilestonesQuery,
+      debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          title: this.searchTerm,
+          state: MILESTONE_STATE.ACTIVE,
+          first: 20,
+        };
+      },
+      skip() {
+        return !this.shouldFetch;
+      },
+      update(data) {
+        return data?.workspace?.attributes?.nodes || [];
+      },
+      error() {
+        this.$emit('error', this.i18n.milestoneFetchError);
+      },
+    },
+  },
+  methods: {
+    onDropdownShown() {
+      this.searchTerm = '';
+      this.shouldFetch = true;
+    },
+    search(searchTerm) {
+      this.searchTerm = searchTerm;
+      this.shouldFetch = true;
+    },
+    itemExpiredText(item) {
+      return item.expired ? this.$options.i18n.expiredText : '';
+    },
+    updateMilestone(selectedMilestoneId) {
+      if (this.localMilestone?.id === selectedMilestoneId) {
+        return;
+      }
+
+      this.localMilestone = selectedMilestoneId
+        ? this.milestones.find(({ id }) => id === selectedMilestoneId)
+        : null;
+
+      this.track('updated_milestone');
+      this.updateInProgress = true;
+
+      this.$apollo
+        .mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              milestoneWidget: {
+                milestoneId: selectedMilestoneId,
+              },
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data.workItemUpdate.errors.length) {
+            throw new Error(data.workItemUpdate.errors.join('\n'));
+          }
+        })
+        .catch((error) => {
+          this.localMilestone = this.workItemMilestone;
+          const msg = sprintfWorkItem(I18N_WORK_ITEM_ERROR_UPDATING, this.workItemType);
+          this.$emit('error', msg);
+          Sentry.captureException(error);
+        })
+        .finally(() => {
+          this.updateInProgress = false;
+          this.searchTerm = '';
+          this.shouldFetch = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <work-item-sidebar-dropdown-widget-with-edit
+    :dropdown-label="$options.i18n.milestone"
+    :can-update="canUpdate"
+    dropdown-name="milestone"
+    :loading="isLoadingMilestones"
+    :list-items="milestonesList"
+    :item-value="localMilestone"
+    :update-in-progress="updateInProgress"
+    :toggle-dropdown-text="dropdownText"
+    :header-text="__('Select milestone')"
+    :reset-button-label="__('Clear')"
+    data-testid="work-item-milestone-with-edit"
+    @dropdownShown="onDropdownShown"
+    @searchStarted="search"
+    @updateValue="updateMilestone"
+  >
+    <template #list-item="{ item }">
+      <div>{{ item.text }}{{ itemExpiredText(item) }}</div>
+      <div v-if="item.title">{{ item.title }}</div>
+    </template>
+    <template #readonly>
+      <gl-link class="gl-text-gray-900!" :href="localMilestone.webPath">
+        {{ localMilestone.title }}{{ expired }}
+      </gl-link>
+    </template>
+  </work-item-sidebar-dropdown-widget-with-edit>
+</template>
diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss
index 4cc44b01e60..bdbb2fb786f 100644
--- a/app/assets/stylesheets/page_bundles/login.scss
+++ b/app/assets/stylesheets/page_bundles/login.scss
@@ -16,43 +16,8 @@
     top: 8px;
   }
 
-  .brand-holder {
-    font-size: 18px;
-    line-height: 1.5;
-
-    p {
-      font-size: 16px;
-      color: $login-brand-holder-color;
-    }
-
-    h3 {
-      font-size: 22px;
-    }
-
-    img {
-      max-width: 100%;
-      margin-bottom: 30px;
-    }
-
-    a {
-      font-weight: $gl-font-weight-bold;
-    }
-  }
-
-  p {
-    font-size: 13px;
-  }
-
-  .signin-text {
-    p {
-      margin-bottom: 0;
-      line-height: 1.5;
-    }
-  }
-
   .borderless {
-    .login-box,
-    .omniauth-container {
+    .login-box {
       box-shadow: none;
     }
   }
@@ -64,67 +29,6 @@
     }
   }
 
-  .login-box,
-  .omniauth-container {
-    box-shadow: 0 0 0 1px $border-color;
-    border-radius: $border-radius;
-
-    .login-heading h3 {
-      font-weight: $gl-font-weight-normal;
-      line-height: 1.5;
-      margin: 0 0 10px;
-    }
-
-    .login-footer {
-      margin-top: 10px;
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    a.forgot {
-      float: right;
-      padding-top: 6px;
-    }
-
-    .nav .active a {
-      background: transparent;
-    }
-
-    // Styles the glowing border of focused input for username async validation
-    .login-body {
-      font-size: 13px;
-
-      .username .validation-success {
-        color: $green-600;
-      }
-
-      .username .validation-error {
-        color: $red-500;
-      }
-
-      .terms .gl-form-checkbox {
-        @include gl-reset-font-size;
-      }
-    }
-  }
-
-  .omniauth-container {
-    border-radius: $border-radius;
-    font-size: 13px;
-
-    p {
-      margin: 0;
-    }
-
-    form {
-      padding: 0;
-      border: 0;
-      background: none;
-    }
-  }
-
   .new-session-tabs {
     &.nav-links-unboxed {
       border-color: transparent;
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index 07a5e711d1c..81aa4757862 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -44,7 +44,7 @@ module AppearancesHelper
   end
 
   def brand_image
-    image_tag(brand_image_path, alt: brand_title, class: 'gl-visibility-hidden gl-h-9 js-portrait-logo-detection')
+    image_tag(brand_image_path, alt: brand_title, class: 'gl-visibility-hidden gl-h-10 js-portrait-logo-detection')
   end
 
   def brand_image_path
diff --git a/app/helpers/count_helper.rb b/app/helpers/count_helper.rb
index 62bb2e4da23..aed730850fd 100644
--- a/app/helpers/count_helper.rb
+++ b/app/helpers/count_helper.rb
@@ -11,7 +11,7 @@ module CountHelper
 
   # This will approximate the fork count by checking all counting all fork network
   # memberships, and deducting 1 for each root of the fork network.
-  # This might be inacurate as the root of the fork network might have been deleted.
+  # This might be inaccurate as the root of the fork network might have been deleted.
   #
   # This makes querying this information a lot more efficient and it should be
   # accurate enough for the instance wide statistics