Add latest changes from gitlab-org/gitlab@master

14 files changed, 208 insertions, 92 deletions

diff --git a/app/assets/javascripts/captcha/apollo_captcha_link.js b/app/assets/javascripts/captcha/apollo_captcha_link.js
new file mode 100644
index 00000000000..e49abc10b29
--- /dev/null
+++ b/app/assets/javascripts/captcha/apollo_captcha_link.js
@@ -0,0 +1,37 @@
+import { ApolloLink, Observable } from 'apollo-link';
+
+export const apolloCaptchaLink = new ApolloLink((operation, forward) =>
+  forward(operation).flatMap((result) => {
+    const { errors = [] } = result;
+
+    // Our API will return with a top-level GraphQL error with extensions
+    // in case a captcha is required.
+    const captchaError = errors.find((e) => e?.extensions?.needs_captcha_response);
+    if (captchaError) {
+      const captchaSiteKey = captchaError.extensions.captcha_site_key;
+      const spamLogId = captchaError.extensions.spam_log_id;
+
+      return new Observable((observer) => {
+        import('~/captcha/wait_for_captcha_to_be_solved')
+          .then(({ waitForCaptchaToBeSolved }) => waitForCaptchaToBeSolved(captchaSiteKey))
+          .then((captchaResponse) => {
+            // If the captcha was solved correctly, we re-do our action while setting
+            // captcha response headers.
+            operation.setContext({
+              headers: {
+                'X-GitLab-Captcha-Response': captchaResponse,
+                'X-GitLab-Spam-Log-Id': spamLogId,
+              },
+            });
+            forward(operation).subscribe(observer);
+          })
+          .catch((error) => {
+            observer.error(error);
+            observer.complete();
+          });
+      });
+    }
+
+    return Observable.of(result);
+  }),
+);
diff --git a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
index cb71be39ebc..3777f1dbb97 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
@@ -13,6 +13,11 @@ export default {
       type: Number,
       required: true,
     },
+    memberType: {
+      type: String,
+      required: false,
+      default: null,
+    },
     message: {
       type: String,
       required: true,
@@ -50,6 +55,7 @@ export default {
     :aria-label="title"
     :icon="icon"
     :data-member-path="computedMemberPath"
+    :data-member-type="memberType"
     :data-is-access-request="isAccessRequest"
     :data-message="message"
     data-qa-selector="delete_member_button"
diff --git a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue b/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
index f779d1755a5..e723685d88b 100644
--- a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
+++ b/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
@@ -59,6 +59,7 @@ export default {
       <remove-member-button
         v-else
         :member-id="member.id"
+        :member-type="member.type"
         :message="message"
         :title="s__('Member|Remove member')"
       />
diff --git a/app/assets/javascripts/pipelines/components/graph/constants.js b/app/assets/javascripts/pipelines/components/graph/constants.js
index caa269f5095..e44458f8f84 100644
--- a/app/assets/javascripts/pipelines/components/graph/constants.js
+++ b/app/assets/javascripts/pipelines/components/graph/constants.js
@@ -10,3 +10,6 @@ export const ONE_COL_WIDTH = 180;
 
 export const REST = 'rest';
 export const GRAPHQL = 'graphql';
+
+export const STAGE_VIEW = 'stage';
+export const LAYER_VIEW = 'layer';
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index 962f2ca2a4c..d5aa6f42c51 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -2,8 +2,11 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
+import { STAGE_VIEW } from './constants';
 import PipelineGraph from './graph_component.vue';
+import GraphViewSelector from './graph_view_selector.vue';
 import {
   getQueryHeaders,
   reportToSentry,
@@ -17,8 +20,10 @@ export default {
   components: {
     GlAlert,
     GlLoadingIcon,
+    GraphViewSelector,
     PipelineGraph,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     graphqlResourceEtag: {
       default: '',
@@ -35,8 +40,9 @@ export default {
   },
   data() {
     return {
-      pipeline: null,
       alertType: null,
+      currentViewType: STAGE_VIEW,
+      pipeline: null,
       showAlert: false,
     };
   },
@@ -147,6 +153,9 @@ export default {
       }
     },
     /* eslint-enable @gitlab/require-i18n-strings */
+    updateViewType(type) {
+      this.currentViewType = type;
+    },
   },
 };
 </script>
@@ -155,6 +164,11 @@ export default {
     <gl-alert v-if="showAlert" :variant="alert.variant" @dismiss="hideAlert">
       {{ alert.text }}
     </gl-alert>
+    <graph-view-selector
+      v-if="glFeatures.pipelineGraphLayersView"
+      :type="currentViewType"
+      @updateViewType="updateViewType"
+    />
     <gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
     <pipeline-graph
       v-if="pipeline"
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
new file mode 100644
index 00000000000..080a9831574
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { STAGE_VIEW, LAYER_VIEW } from './constants';
+
+export default {
+  name: 'GraphViewSelector',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlIcon,
+    GlSprintf,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentViewType: STAGE_VIEW,
+    };
+  },
+  i18n: {
+    labelText: __('Order jobs by'),
+  },
+  views: {
+    [STAGE_VIEW]: {
+      type: STAGE_VIEW,
+      text: {
+        primary: __('Stage'),
+        secondary: __('View the jobs grouped into stages'),
+      },
+    },
+    [LAYER_VIEW]: {
+      type: LAYER_VIEW,
+      text: {
+        primary: __('%{codeStart}needs:%{codeEnd} relationships'),
+        secondary: __('View what jobs are needed for a job to run'),
+      },
+    },
+  },
+  computed: {
+    currentDropdownText() {
+      return this.$options.views[this.type].text.primary;
+    },
+  },
+  methods: {
+    itemClick(type) {
+      this.$emit('updateViewType', type);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-justify-content-end gl-align-items-center gl-my-4">
+    <span>{{ $options.i18n.labelText }}</span>
+    <gl-dropdown class="gl-ml-4" :right="true">
+      <template #button-content>
+        <gl-sprintf :message="currentDropdownText">
+          <template #code="{ content }">
+            <code> {{ content }} </code>
+          </template>
+        </gl-sprintf>
+        <gl-icon class="gl-px-2" name="angle-down" :size="18" />
+      </template>
+      <gl-dropdown-item
+        v-for="view in $options.views"
+        :key="view.type"
+        :secondary-text="view.text.secondary"
+        @click="itemClick(view.type)"
+      >
+        <b>
+          <gl-sprintf :message="view.text.primary">
+            <template #code="{ content }">
+              <code> {{ content }} </code>
+            </template>
+          </gl-sprintf>
+        </b>
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/remove_member_modal.vue b/app/assets/javascripts/vue_shared/components/remove_member_modal.vue
index 88d1b15aee3..2a19537f820 100644
--- a/app/assets/javascripts/vue_shared/components/remove_member_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/remove_member_modal.vue
@@ -22,6 +22,9 @@ export default {
     isAccessRequest() {
       return parseBoolean(this.modalData.isAccessRequest);
     },
+    isGroupMember() {
+      return this.modalData.memberType === 'GroupMember';
+    },
     actionText() {
       return this.isAccessRequest ? __('Deny access request') : __('Remove member');
     },
@@ -70,6 +73,9 @@ export default {
 
       <input ref="method" type="hidden" name="_method" value="delete" />
       <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+      <gl-form-checkbox v-if="isGroupMember" name="remove_sub_memberships">
+        {{ __('Also remove direct user membership from subgroups and projects') }}
+      </gl-form-checkbox>
       <gl-form-checkbox v-if="!isAccessRequest" name="unassign_issuables">
         {{ __('Also unassign this user from related issues and merge requests') }}
       </gl-form-checkbox>
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
deleted file mode 100644
index b9bb3edaaab..00000000000
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// Custom Font Awesome styles that render emojis in asciidoc
-.md {
-  .fa {
-    display: inline-block;
-    font-style: normal;
-    font-size: 14px;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .fa-2x {
-    font-size: 2em;
-  }
-
-  .fa-exclamation-triangle::before {
-    content: '⚠';
-  }
-
-  .fa-exclamation-circle::before {
-    content: '❗';
-  }
-
-  .fa-lightbulb-o::before {
-    content: '💡';
-  }
-
-  .fa-thumb-tack::before {
-    content: '📌';
-  }
-
-  .fa-fire::before {
-    content: '🔥';
-  }
-
-  .fa-square-o::before {
-    content: '\2610';
-  }
-
-  .fa-check-square-o::before {
-    content: '\2611';
-  }
-}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5d182373fb1..54a2284a3ab 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -292,11 +292,6 @@ img.emoji {
   }
 }
 
-.search_box {
-  @extend .card.card-body;
-  text-align: center;
-}
-
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index a4af45a467c..c835b1d6e26 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -204,10 +204,6 @@
     margin-bottom: 10px;
   }
 
-  &:hover {
-    @extend .form-control:hover;
-  }
-
   &.focus,
   &.focus:hover {
     border-color: $blue-300;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index ec433434573..48a18e0d145 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -94,14 +94,6 @@ body.modal-open {
   padding-right: 0 !important;
 }
 
-.modal-no-backdrop {
-  @extend .modal-dialog;
-
-  .modal-content {
-    box-shadow: none;
-  }
-}
-
 .modal {
   background-color: $black-transparent;
 
diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss
index 660e3dcac8d..c0847382544 100644
--- a/app/assets/stylesheets/framework/page_header.scss
+++ b/app/assets/stylesheets/framework/page_header.scss
@@ -32,8 +32,10 @@
   }
 
   .avatar {
-    @extend .avatar-inline;
-    margin-left: 0;
+    float: none;
+    display: inline-block;
+    margin-left: 2px;
+    flex-shrink: 0;
 
     @include media-breakpoint-up(sm) {
       margin-left: 4px;
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 07c3eb19fd4..f57d906e73c 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -3,6 +3,7 @@
   max-width: #{$max + '%'};
 }
 
+.gl-responsive-table-row,
 .gl-responsive-table-row-layout {
   width: 100%;
 
@@ -17,7 +18,6 @@
 }
 
 .gl-responsive-table-row {
-  @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
   color: $gray-500;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 5624a6ea8a3..7685a173e57 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,6 +1,3 @@
-// Custom Fontawesome icons
-@import 'fontawesome_custom';
-
 /**
  * Apply Markup (Markdown/AsciiDoc) typography
  *
@@ -435,7 +432,9 @@
     }
   }
 
-  a.with-attachment-icon {
+  a.with-attachment-icon,
+  a[href*='/uploads/'],
+  a[href*='storage.googleapis.com/google-code-attachments/'] {
     &::before {
       margin-right: 4px;
 
@@ -449,8 +448,6 @@
 
   a[href*='/uploads/'],
   a[href*='storage.googleapis.com/google-code-attachments/'] {
-    @extend .with-attachment-icon;
-
     &.no-attachment-icon {
       &::before {
         display: none;
@@ -507,32 +504,56 @@
     text-decoration: line-through;
   }
 
-  .admonitionblock td.icon {
-    width: 1%;
+  // Custom Font Awesome styles that render emojis in asciidoc
+  .fa {
+    display: inline-block;
+    font-style: normal;
+    font-size: 14px;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-    [class^='fa icon-'] {
-      @extend .fa-2x;
-    }
+  .fa-2x,
+  .admonitionblock td.icon [class^='fa icon-'] {
+    font-size: 2em;
+  }
 
-    .icon-note {
-      @extend .fa-thumb-tack;
-    }
+  .fa-exclamation-triangle::before,
+  .admonitionblock td.icon .icon-warning::before {
+    content: '⚠';
+  }
 
-    .icon-tip {
-      @extend .fa-lightbulb-o;
-    }
+  .fa-exclamation-circle::before,
+  .admonitionblock td.icon .icon-important::before {
+    content: '❗';
+  }
 
-    .icon-warning {
-      @extend .fa-exclamation-triangle;
-    }
+  .fa-lightbulb-o::before,
+  .admonitionblock td.icon .icon-tip::before {
+    content: '💡';
+  }
 
-    .icon-caution {
-      @extend .fa-fire;
-    }
+  .fa-thumb-tack::before,
+  .admonitionblock td.icon .icon-note::before {
+    content: '📌';
+  }
 
-    .icon-important {
-      @extend .fa-exclamation-circle;
-    }
+  .fa-fire::before,
+  .admonitionblock td.icon .icon-caution::before {
+    content: '🔥';
+  }
+
+  .fa-square-o::before {
+    content: '\2610';
+  }
+
+  .fa-check-square-o::before {
+    content: '\2611';
+  }
+
+  .admonitionblock td.icon {
+    width: 1%;
   }
 
   .metrics-embed {
@@ -640,12 +661,13 @@ code {
 .commit-sha,
 .ref-name,
 .pipeline-number {
-  @extend .monospace;
+  font-family: $monospace-font;
   font-size: 95%;
 }
 
 .git-revision-dropdown .dropdown-content ul li a {
-  @extend .ref-name;
+  font-family: $monospace-font;
+  font-size: 95%;
   word-break: break-all;
 }