Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.gitlab-ci.yml

@@ -48,6 +48,7 @@ default:
   ADD_SLOW_TEST_NOTE_TO_MERGE_REQUEST: "true"
   FF_NETWORK_PER_BUILD: "true"
   FF_TIMESTAMPS: "true"
+  FF_USE_FASTZIP: "true"
 
 .if-merge-request-security-canonical-sync: &if-merge-request-security-canonical-sync
   if: '$CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == "gitlab-org/security/gitlab" && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME == $CI_DEFAULT_BRANCH && $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == $CI_DEFAULT_BRANCH'

.gitlab/issue_templates/Documentation.md

@@ -4,10 +4,10 @@
   Note: Doc work as part of feature development is covered in the Feature Request template.
 
 * For issues related to features of the docs.gitlab.com site, see
-  https://gitlab.com/gitlab-org/gitlab-docs/issues/
+  https://gitlab.com/gitlab-org/technical-writing/docs-gitlab-com/-/issues
 
 * For information about documentation content and process, see
-  https://docs.gitlab.com/ee/development/documentation/
+  https://docs.gitlab.com/development/documentation/
 -->
 
 - [ ] Start this issue's title with `Docs:` or `Docs feedback:`.

.gitlab/issue_templates/Security developer workflow.md

@@ -34,8 +34,12 @@ After your merge request has been approved according to our [approval guidelines
   - You can use the script `bin/secpick` instead of the following steps, to help you cherry-picking. See the [secpick documentation]
 - [ ] Create each MR targeting the stable branch `X-Y-stable`, using the [Security merge request template].
   - Every merge request will have its own set of to-dos, so make sure to complete those.
-- [ ]  On the `Related merge requests` section, ensure that **ONLY** `4` merge requests are associated: **ONLY** one targeting `master` and the `3` backports.
-  - [ ]  If there are more associated MRs, re-create another security issue and ensure there are only 4 merge requests associated with that one.
+- [ ]  On the `Related merge requests` section, ensure that **ONLY** `4` merge requests matching these conditions:
+  - From the security namespace (`gitlab-org/security`)
+  - Status is not `Closed`
+  - (Other MRs not matching these above conditions are acceptable)
+  - [ ] Among these `4` MRs, one targeting `master` and the `3` backports targeting stable branches.
+  - [ ] If there are more associated MRs, re-create another security issue and ensure there are only 4 merge requests associated with that one.
 - [ ] If this issue requires less than `4` merge requests, add the ~"reduced backports" label.
 
 ## Assigning to a release

.rubocop_todo/rspec/spec_file_path_format.yml

@@ -53,6 +53,7 @@ RSpec/SpecFilePathFormat:
     - 'spec/services/ci/create_pipeline_service/rules_spec.rb'
     - 'spec/services/ci/create_pipeline_service/run_spec.rb'
     - 'spec/services/ci/create_pipeline_service/scripts_spec.rb'
+    - 'spec/services/ci/create_pipeline_service/stop_linting_spec.rb'
     - 'spec/services/ci/create_pipeline_service/tags_spec.rb'
     - 'spec/services/ci/create_pipeline_service/variables_spec.rb'
     - 'spec/services/ci/create_pipeline_service/workflow_auto_cancel_spec.rb'

app/assets/javascripts/glql/components/common/facade.vue

@@ -1,11 +1,12 @@
 <script>
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlButton, GlIntersectionObserver } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { renderMarkdown } from '~/notes/utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { sha256 } from '~/lib/utils/text_utility';
 import { InternalEvents } from '~/tracking';
-import { executeAndPresentQuery } from '../../core';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { executeAndPresentQuery, presentPreview } from '../../core';
 import Counter from '../../utils/counter';
 
 const MAX_GLQL_BLOCKS = 20;
@@ -14,12 +15,13 @@ export default {
   name: 'GlqlFacade',
   components: {
     GlAlert,
-    GlLoadingIcon,
+    GlButton,
+    GlIntersectionObserver,
   },
   directives: {
     SafeHtml,
   },
-  mixins: [InternalEvents.mixin()],
+  mixins: [InternalEvents.mixin(), glFeatureFlagsMixin()],
   props: {
     query: {
       required: true,
@@ -28,8 +30,10 @@ export default {
   },
   data() {
     return {
+      loadOnClick: true,
+
+      presenterPreview: null,
       presenterComponent: null,
-      loading: false,
       error: {
         title: null,
         message: null,
@@ -41,37 +45,56 @@ export default {
     };
   },
   async mounted() {
-    if (this.checkGlqlBlocks()) {
-      this.presentQuery();
-    }
+    this.loadOnClick = this.glFeatures.glqlLoadOnClick;
   },
   methods: {
-    setLoading(loading) {
-      this.$emit(loading ? 'loading' : 'loaded');
-      this.loading = loading;
-    },
-    checkGlqlBlocks() {
-      try {
-        this.$options.numGlqlBlocks.increment();
-        return true;
-      } catch (e) {
-        this.handleLimitError();
-        return false;
+    loadGlqlBlock() {
+      if (this.presenterComponent || this.presenterPreview) return;
+
+      if (this.glFeatures.glqlLoadOnClick || this.checkGlqlBlocksCount()) {
+        this.presentPreview();
+        this.loadPresenterComponent();
       }
     },
-    async presentQuery() {
+
+    reloadGlqlBlock() {
+      this.presenterComponent = null;
+      this.presenterPreview = null;
+
       this.dismissAlert();
-      this.setLoading(true);
+      this.presentPreview();
+      this.loadPresenterComponent();
+    },
 
+    async loadPresenterComponent() {
       try {
         this.presenterComponent = await executeAndPresentQuery(this.query);
         this.trackRender();
       } catch (error) {
         this.handleQueryError(error.message);
-      } finally {
-        this.setLoading(false);
       }
     },
+
+    async presentPreview() {
+      this.dismissAlert();
+
+      try {
+        this.presenterPreview = await presentPreview(this.query);
+      } catch (error) {
+        this.handleQueryError(error.message);
+      }
+    },
+
+    checkGlqlBlocksCount() {
+      try {
+        this.$options.numGlqlBlocks.increment();
+        return true;
+      } catch (e) {
+        this.handleLimitError();
+        return false;
+      }
+    },
+
     handleQueryError(message) {
       this.error = { ...this.$options.i18n.glqlDisplayError, message };
     },
@@ -93,47 +116,53 @@ export default {
   safeHtmlConfig: { ALLOWED_TAGS: ['code'] },
   i18n: {
     glqlDisplayError: {
-      title: __('An error occurred when trying to display this GLQL block:'),
+      title: __('An error occurred when trying to display this GLQL view:'),
     },
     glqlLimitError: {
       title: sprintf(
         __(
-          'Only %{n} GLQL blocks can be automatically displayed on a page. Click the button below to manually display this block.',
+          'Only %{n} GLQL views can be automatically displayed on a page. Click the button below to manually display this block.',
         ),
         { n: MAX_GLQL_BLOCKS },
       ),
       action: __('Display block'),
     },
+    loadGlqlView: __('Load GLQL view'),
   },
   numGlqlBlocks: new Counter(MAX_GLQL_BLOCKS),
 };
 </script>
 <template>
   <div data-testid="glql-facade">
-    <gl-alert
-      v-if="error.title || error.message"
-      variant="warning"
-      class="gl-mb-3"
-      :primary-button-text="error.action"
-      @dismiss="dismissAlert"
-      @primaryAction="presentQuery"
-    >
-      {{ error.title }}
-      <ul v-if="error.message" class="!gl-mb-0">
-        <li v-safe-html:[$options.safeHtmlConfig]="renderMarkdown(error.message)"></li>
-      </ul>
-    </gl-alert>
+    <template v-if="error.title || error.message">
+      <gl-alert
+        variant="warning"
+        class="gl-mb-3"
+        :primary-button-text="error.action"
+        @dismiss="dismissAlert"
+        @primaryAction="reloadGlqlBlock"
+      >
+        {{ error.title }}
+        <ul v-if="error.message" class="!gl-mb-0">
+          <li v-safe-html:[$options.safeHtmlConfig]="renderMarkdown(error.message)"></li>
+        </ul>
+      </gl-alert>
+    </template>
 
-    <component :is="presenterComponent" v-if="presenterComponent" />
-    <div v-else class="markdown-code-block gl-relative">
-      <gl-loading-icon
-        v-if="loading"
-        size="lg"
-        class="gl-absolute gl-left-1/2 gl-top-1/2 gl-z-2 -gl-translate-x-1/2 -gl-translate-y-1/2"
-      />
-      <pre
-        :class="preClasses"
-      ><code :class="{ 'gl-opacity-5': loading }">{{ query.trim() }}</code></pre>
+    <div v-if="loadOnClick" class="markdown-code-block gl-relative">
+      <pre :class="preClasses"><gl-button
+        class="gl-font-regular gl-absolute gl-z-1 gl-top-2/4 gl-left-2/4"
+        style="transform: translate(-50%, -50%)"
+        :aria-label="$options.i18n.loadGlqlView"
+        @click="loadOnClick = false"
+      >{{ $options.i18n.loadGlqlView }}</gl-button><code class="gl-opacity-2">{{ query.trim() }}</code></pre>
     </div>
+    <gl-intersection-observer v-else @appear="loadGlqlBlock">
+      <component :is="presenterComponent" v-if="presenterComponent" />
+      <component :is="presenterPreview" v-else-if="presenterPreview" />
+      <div v-else class="markdown-code-block gl-relative">
+        <pre :class="preClasses"><code>{{ query.trim() }}</code></pre>
+      </div>
+    </gl-intersection-observer>
   </div>
 </template>

app/assets/javascripts/glql/components/presenters/list.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlIntersperse, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlIntersperse, GlLink, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
 
@@ -10,6 +10,7 @@ export default {
     GlIntersperse,
     GlLink,
     GlSprintf,
+    GlSkeletonLoader,
   },
   inject: ['presenter'],
   props: {
@@ -29,6 +30,11 @@ export default {
       default: 'ul',
       validator: (value) => ['ul', 'ol'].includes(value),
     },
+    isPreview: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     items() {
@@ -49,18 +55,25 @@ export default {
 <template>
   <div class="gl-mb-4">
     <component :is="listType" class="!gl-mb-1" data-testid="list">
-      <li
-        v-for="(item, itemIndex) in items"
-        :key="itemIndex"
-        :data-testid="`list-item-${itemIndex}`"
-      >
-        <gl-intersperse separator=" · ">
-          <span v-for="field in fields" :key="field.key">
-            <component :is="presenter.forField(item, field.key)" />
-          </span>
-        </gl-intersperse>
-      </li>
-      <div v-if="!items.length" :dismissible="false" variant="tip" class="!gl-my-2">
+      <template v-if="isPreview">
+        <li v-for="i in 5" :key="i">
+          <gl-skeleton-loader :width="400" :lines="1" />
+        </li>
+      </template>
+      <template v-else-if="items.length">
+        <li
+          v-for="(item, itemIndex) in items"
+          :key="itemIndex"
+          :data-testid="`list-item-${itemIndex}`"
+        >
+          <gl-intersperse separator=" · ">
+            <span v-for="field in fields" :key="field.key">
+              <component :is="presenter.forField(item, field.key)" />
+            </span>
+          </gl-intersperse>
+        </li>
+      </template>
+      <div v-else-if="!items.length" :dismissible="false" variant="tip" class="!gl-my-2">
         {{ __('No data found for this query') }}
       </div>
     </component>

app/assets/javascripts/glql/components/presenters/table.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
 import Sorter from '../../core/sorter';
@@ -11,6 +11,7 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
+    GlSkeletonLoader,
     ThResizable,
   },
   inject: ['presenter'],
@@ -25,6 +26,11 @@ export default {
       type: Object,
       validator: ({ fields }) => Array.isArray(fields) && fields.length > 0,
     },
+    isPreview: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     const items = this.data.nodes.slice();
@@ -73,16 +79,25 @@ export default {
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="(item, itemIndex) in items"
-          :key="item.id"
-          :data-testid="`table-row-${itemIndex}`"
-        >
-          <td v-for="field in fields" :key="field.key">
-            <component :is="presenter.forField(item, field.key)" />
-          </td>
-        </tr>
-        <tr v-if="!items.length">
+        <template v-if="isPreview">
+          <tr v-for="i in 5" :key="i">
+            <td v-for="field in fields" :key="field.key">
+              <gl-skeleton-loader :width="120" :lines="1" />
+            </td>
+          </tr>
+        </template>
+        <template v-else-if="items.length">
+          <tr
+            v-for="(item, itemIndex) in items"
+            :key="item.id"
+            :data-testid="`table-row-${itemIndex}`"
+          >
+            <td v-for="field in fields" :key="field.key">
+              <component :is="presenter.forField(item, field.key)" />
+            </td>
+          </tr>
+        </template>
+        <tr v-else-if="!items.length">
           <td :colspan="fields.length" class="gl-text-center">
             {{ __('No data found for this query') }}
           </td>