Add latest changes from gitlab-org/gitlab@master

13 files changed, 176 insertions, 66 deletions

diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 30a178db5cc..d5c6d26cfd0 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/app/assets/javascripts/environments/components/new_environment_folder.vue
@@ -3,6 +3,7 @@ import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql';
 import folderQuery from '../graphql/queries/folder.query.graphql';
+import { ENVIRONMENT_COUNT_BY_SCOPE } from '../constants';
 import EnvironmentItem from './new_environment_item.vue';
 
 export default {
@@ -56,7 +57,8 @@ export default {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
     },
     count() {
-      return this.folder?.[`${this.scope}Count`] ?? 0;
+      const count = ENVIRONMENT_COUNT_BY_SCOPE[this.scope];
+      return this.folder?.[count] ?? 0;
     },
     folderClass() {
       return { 'gl-font-weight-bold': this.visible };
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue
index 8e6457ed918..087e9cd2fcd 100644
--- a/app/assets/javascripts/environments/components/new_environments_app.vue
+++ b/app/assets/javascripts/environments/components/new_environments_app.vue
@@ -9,6 +9,7 @@ import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.q
 import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql';
 import environmentToChangeCanaryQuery from '../graphql/queries/environment_to_change_canary.query.graphql';
+import { ENVIRONMENTS_SCOPE } from '../constants';
 import EnvironmentFolder from './new_environment_folder.vue';
 import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
@@ -82,12 +83,14 @@ export default {
   },
   modalId: 'enable-review-app-info',
   data() {
-    const { page = '1', scope = 'available' } = queryToObject(window.location.search);
+    const { page = '1', scope } = queryToObject(window.location.search);
     return {
       interval: undefined,
       isReviewAppModalVisible: false,
       page: parseInt(page, 10),
-      scope,
+      scope: Object.values(ENVIRONMENTS_SCOPE).includes(scope)
+        ? scope
+        : ENVIRONMENTS_SCOPE.AVAILABLE,
       environmentToDelete: {},
       environmentToRollback: {},
       environmentToStop: {},
@@ -188,6 +191,7 @@ export default {
       });
     },
   },
+  ENVIRONMENTS_SCOPE,
 };
 </script>
 <template>
@@ -209,7 +213,10 @@ export default {
       query-param-name="scope"
       @primary="showReviewAppModal"
     >
-      <gl-tab query-param-value="available" @click="setScope('available')">
+      <gl-tab
+        :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE"
+        @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)"
+      >
         <template #title>
           <span>{{ $options.i18n.available }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">
@@ -217,7 +224,10 @@ export default {
           </gl-badge>
         </template>
       </gl-tab>
-      <gl-tab query-param-value="stopped" @click="setScope('stopped')">
+      <gl-tab
+        :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED"
+        @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)"
+      >
         <template #title>
           <span>{{ $options.i18n.stopped }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">
diff --git a/app/assets/javascripts/environments/constants.js b/app/assets/javascripts/environments/constants.js
index 6d427bef4e6..942491039d6 100644
--- a/app/assets/javascripts/environments/constants.js
+++ b/app/assets/javascripts/environments/constants.js
@@ -38,3 +38,13 @@ export const CANARY_STATUS = {
 };
 
 export const CANARY_UPDATE_MODAL = 'confirm-canary-change';
+
+export const ENVIRONMENTS_SCOPE = {
+  AVAILABLE: 'available',
+  STOPPED: 'stopped',
+};
+
+export const ENVIRONMENT_COUNT_BY_SCOPE = {
+  [ENVIRONMENTS_SCOPE.AVAILABLE]: 'availableCount',
+  [ENVIRONMENTS_SCOPE.STOPPED]: 'stoppedCount',
+};
diff --git a/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue b/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
index 633dee75237..ca60f876c6f 100644
--- a/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
+++ b/app/assets/javascripts/members/components/filter_sort/members_filtered_search_bar.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlFilteredSearchToken } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import {
   getParameterByName,
@@ -7,46 +6,24 @@ import {
   queryToObject,
   redirectTo,
 } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
 import {
   SEARCH_TOKEN_TYPE,
   SORT_QUERY_PARAM_NAME,
   ACTIVE_TAB_QUERY_PARAM_NAME,
-} from '~/members/constants';
-import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+  AVAILABLE_FILTERED_SEARCH_TOKENS,
+} from 'ee_else_ce/members/constants';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 
 export default {
   name: 'MembersFilteredSearchBar',
   components: { FilteredSearchBar },
-  availableTokens: [
-    {
-      type: 'two_factor',
-      icon: 'lock',
-      title: s__('Members|2FA'),
-      token: GlFilteredSearchToken,
-      unique: true,
-      operators: OPERATOR_IS_ONLY,
-      options: [
-        { value: 'enabled', title: s__('Members|Enabled') },
-        { value: 'disabled', title: s__('Members|Disabled') },
-      ],
-      requiredPermissions: 'canManageMembers',
-    },
-    {
-      type: 'with_inherited_permissions',
-      icon: 'group',
-      title: s__('Members|Membership'),
-      token: GlFilteredSearchToken,
-      unique: true,
-      operators: OPERATOR_IS_ONLY,
-      options: [
-        { value: 'exclude', title: s__('Members|Direct') },
-        { value: 'only', title: s__('Members|Inherited') },
-      ],
-    },
-  ],
-  inject: ['namespace', 'sourceId', 'canManageMembers'],
+  availableTokens: AVAILABLE_FILTERED_SEARCH_TOKENS,
+  inject: {
+    namespace: {},
+    sourceId: {},
+    canManageMembers: {},
+    canFilterByEnterprise: { default: false },
+  },
   data() {
     return {
       initialFilterValue: [],
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index 273f1acebc7..49ce00a1689 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/app/assets/javascripts/members/constants.js
@@ -1,4 +1,7 @@
-import { __ } from '~/locale';
+import { GlFilteredSearchToken } from '@gitlab/ui';
+
+import { __, s__ } from '~/locale';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 
 export const FIELD_KEY_ACCOUNT = 'account';
 export const FIELD_KEY_SOURCE = 'source';
@@ -82,6 +85,38 @@ export const DEFAULT_SORT = {
   sortDesc: false,
 };
 
+export const FILTERED_SEARCH_TOKEN_TWO_FACTOR = {
+  type: 'two_factor',
+  icon: 'lock',
+  title: s__('Members|2FA'),
+  token: GlFilteredSearchToken,
+  unique: true,
+  operators: OPERATOR_IS_ONLY,
+  options: [
+    { value: 'enabled', title: s__('Members|Enabled') },
+    { value: 'disabled', title: s__('Members|Disabled') },
+  ],
+  requiredPermissions: 'canManageMembers',
+};
+
+export const FILTERED_SEARCH_TOKEN_WITH_INHERITED_PERMISSIONS = {
+  type: 'with_inherited_permissions',
+  icon: 'group',
+  title: s__('Members|Membership'),
+  token: GlFilteredSearchToken,
+  unique: true,
+  operators: OPERATOR_IS_ONLY,
+  options: [
+    { value: 'exclude', title: s__('Members|Direct') },
+    { value: 'only', title: s__('Members|Inherited') },
+  ],
+};
+
+export const AVAILABLE_FILTERED_SEARCH_TOKENS = [
+  FILTERED_SEARCH_TOKEN_TWO_FACTOR,
+  FILTERED_SEARCH_TOKEN_WITH_INHERITED_PERMISSIONS,
+];
+
 export const AVATAR_SIZE = 48;
 
 export const MEMBER_TYPES = {
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 510e89240f4..0df876cabd7 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -18,6 +18,7 @@ export const initMembersApp = (el, options) => {
     sourceId,
     canManageMembers,
     canExportMembers,
+    canFilterByEnterprise,
     exportCsvPath,
     ...vuexStoreAttributes
   } = parseDataAttributes(el);
@@ -60,6 +61,7 @@ export const initMembersApp = (el, options) => {
       currentUserId: gon.current_user_id || null,
       sourceId,
       canManageMembers,
+      canFilterByEnterprise,
       canExportMembers,
       exportCsvPath,
     },
diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js
index 36f37dab40d..be12ca6b015 100644
--- a/app/assets/javascripts/pages/groups/group_members/index.js
+++ b/app/assets/javascripts/pages/groups/group_members/index.js
@@ -21,7 +21,7 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), {
     requestFormatter: groupMemberRequestFormatter,
     filteredSearchBar: {
       show: true,
-      tokens: ['two_factor', 'with_inherited_permissions'],
+      tokens: ['two_factor', 'with_inherited_permissions', 'enterprise'],
       searchParam: 'search',
       placeholder: s__('Members|Filter members'),
       recentSearchesStorageKey: 'group_members',
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
index d0ec02bbd0c..573f996a254 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue
@@ -32,7 +32,7 @@ export default {
       );
     },
     openInNewTab() {
-      return ACTION_LABELS[this.action]?.openInNewTab === true;
+      return ACTION_LABELS[this.action]?.openInNewTab === true || this.value.openInNewTab === true;
     },
   },
   methods: {
@@ -65,8 +65,6 @@ export default {
       data-testid="uncompleted-learn-gitlab-link"
       data-track-action="click_link"
       :data-track-label="$options.i18n.ACTION_LABELS[action].title"
-      data-track-property="Growth::Conversion::Experiment::LearnGitLab"
-      data-track-experiment="change_continuous_onboarding_link_urls"
     >
       {{ $options.i18n.ACTION_LABELS[action].title }}
     </gl-link>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
index 880cf699e5e..1887c48dd1b 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js
@@ -62,7 +62,6 @@ export const ACTION_LABELS = {
     description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'),
     section: 'deploy',
     position: 1,
-    openInNewTab: true,
   },
   issueCreated: {
     title: s__('LearnGitLab|Create an issue'),
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 1e51bf3d974..1caf02937d5 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -439,6 +439,12 @@
       .na {
         color: inherit;
       }
+
+      // Rouge `Comment` token (quoted text in email body)
+      .c {
+        color: $gl-grayish-blue;
+        font-style: italic;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index ca8c358d97f..2d501781119 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -1,24 +1,4 @@
-@import 'framework/mixins';
-@import 'framework/variables';
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-p.details {
-  font-style: italic;
-  color: $gray-500;
-}
-
-.footer > p {
-  font-size: small;
-  color: $gray-500;
-}
-
-pre.commit-message {
-  white-space: pre-wrap;
-}
+@import 'notify_base';
 
 .gl-label-scoped {
   border: 2px solid currentColor;
@@ -52,6 +32,4 @@ pre.commit-message {
     border: 1px solid $gray-100;
     border-radius: $border-radius-small;
   }
-
-  @include email-code-block;
 }
diff --git a/app/assets/stylesheets/notify_base.scss b/app/assets/stylesheets/notify_base.scss
new file mode 100644
index 00000000000..8c6f9a27077
--- /dev/null
+++ b/app/assets/stylesheets/notify_base.scss
@@ -0,0 +1,25 @@
+@import 'framework/mixins';
+@import 'framework/variables';
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+p.details {
+  font-style: italic;
+  color: $gray-500;
+}
+
+.footer > p {
+  font-size: small;
+  color: $gray-500;
+}
+
+pre.commit-message {
+  white-space: pre-wrap;
+}
+
+.content {
+  @include email-code-block;
+}
diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss
new file mode 100644
index 00000000000..5df5a8592bf
--- /dev/null
+++ b/app/assets/stylesheets/notify_enhanced.scss
@@ -0,0 +1,68 @@
+// Import a subset of the GitLab UI framework:
+// keep parts that affect elements that can appear in emails;
+// omit Bootstrap Reboot since it adds unnecessary styles to every element.
+@import 'notify_base';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/code';
+@import '@gitlab/ui/src/scss/variables';
+@import '@gitlab/ui/src/scss/utility-mixins/index';
+@import '@gitlab/ui/src/scss/components';
+@import 'bootstrap_migration';
+@import 'framework/common';
+@import 'framework/gfm';
+@import 'framework/kbd';
+@import 'framework/tables';
+@import 'framework/typography';
+@import 'framework/emojis';
+
+body {
+  font-family: $regular-font;
+  font-size: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+.content {
+  .md {
+    padding: 1rem 0;
+  }
+
+  hr {
+    border: 1px solid #e1e1e1;
+  }
+
+  blockquote {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-right-width: 0;
+
+    &:dir(rtl) {
+      border-left-width: 0;
+      border-right-width: inherit;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  .diff-table.code,
+  table.code {
+    width: auto;
+
+    td {
+      padding: inherit;
+
+      pre {
+        background-color: inherit;
+        margin: 0;
+        padding: 0;
+        border: inherit;
+      }
+    }
+  }
+}