Gemfile.next.checksum

@@ -220,7 +220,7 @@
 {"name":"gettext","version":"3.4.9","platform":"ruby","checksum":"292864fe6a15c224cee4125a4a72fab426fdbb280e4cff3cfe44935f549b009a"},
 {"name":"gettext_i18n_rails","version":"1.13.0","platform":"ruby","checksum":"d4a4739d928b6ce52a2d694d33a831dcb06c7c8e197b3172fc73dfaa20ac8ee6"},
 {"name":"git","version":"1.18.0","platform":"ruby","checksum":"c9b80462e4565cd3d7a9ba8440c41d2c52244b17b0dad0bfddb46de70630c465"},
-{"name":"gitaly","version":"17.7.0","platform":"ruby","checksum":"71b0062985eb22a4ffa69976b5e5aeea43023dd32ff88af082fc2f42cfbdfe3a"},
+{"name":"gitaly","version":"17.8.1","platform":"ruby","checksum":"6268ff47ea4a7480ca116f16dadaeca626eda345a04a0cfef812d2072797d6ed"},
 {"name":"gitlab","version":"4.19.0","platform":"ruby","checksum":"3f645e3e195dbc24f0834fbf83e8ccfb2056d8e9712b01a640aad418a6949679"},
 {"name":"gitlab-chronic","version":"0.10.6","platform":"ruby","checksum":"a244d11a1396d2aac6ae9b2f326adf1605ec1ad20c29f06e8b672047d415a9ac"},
 {"name":"gitlab-cloud-connector","version":"1.0.0","platform":"ruby","checksum":"edf2d13c698e1eb8a6828acefa7c12230f1e47d48212710f1617d5f986d051af"},
@@ -239,7 +239,7 @@
 {"name":"gitlab-license","version":"2.6.0","platform":"ruby","checksum":"2c1f8ae73835640ec77bf758c1d0c9730635043c01cf77902f7976e826d7d016"},
 {"name":"gitlab-mail_room","version":"0.0.25","platform":"ruby","checksum":"223ce7c3c0797b6015eaa37147884e6ddc7be9a7ee90a424358c96bc18613b1a"},
 {"name":"gitlab-markup","version":"1.9.0","platform":"ruby","checksum":"7eda045a08ec2d110084252fa13a8c9eac8bdac0e302035ca7db4b82bcbd7ed4"},
-{"name":"gitlab-net-dns","version":"0.9.2","platform":"ruby","checksum":"f726d978479d43810819f12a45c0906d775a07e34df111bbe693fffbbef3059d"},
+{"name":"gitlab-net-dns","version":"0.10.0","platform":"ruby","checksum":"73b4613d8c851480b7b4e631f117bce4bbb4b6b8073ecf4eb167407e46097c6e"},
 {"name":"gitlab-sdk","version":"0.3.1","platform":"ruby","checksum":"48ba49084f4ab92df7c7ef9f347020d9dfdf6ed9c1e782b67264e98ffe6ea710"},
 {"name":"gitlab-secret_detection","version":"0.18.0","platform":"ruby","checksum":"c143c22c8a70898b11141dd530fc740725835c54a5cd01117c1ecfefab798ae6"},
 {"name":"gitlab-security_report_schemas","version":"0.1.2.min15.0.0.max15.2.1","platform":"ruby","checksum":"300037487ec9d51a814f648514ff521cb82b94fc51d9fe53389175b36ac680ae"},
@@ -513,7 +513,7 @@
 {"name":"pact-support","version":"1.20.0","platform":"ruby","checksum":"41c343a3124fb379684b9ad9f1a0766c5fa18d3b78d433a52e5552d8b9475871"},
 {"name":"paper_trail","version":"15.1.0","platform":"ruby","checksum":"0dbccd97e9d26c54aaea256d2566eaa040a3535601f49a62d79187e77d9ba9f9"},
 {"name":"parallel","version":"1.26.3","platform":"ruby","checksum":"d86babb7a2b814be9f4b81587bf0b6ce2da7d45969fab24d8ae4bf2bb4d4c7ef"},
-{"name":"parser","version":"3.3.6.0","platform":"ruby","checksum":"25d4e67cc4f0f7cab9a2ae1f38e2005b6904d2ea13c34734511d0faad038bc3b"},
+{"name":"parser","version":"3.3.7.0","platform":"ruby","checksum":"7449011771e3e7881297859b849de26a6f4fccd515bece9520a87e7d2116119b"},
 {"name":"parslet","version":"1.8.2","platform":"ruby","checksum":"08d1ab3721cd3f175bfbee8788b2ddff71f92038f2d69bd65454c22bb9fbd98a"},
 {"name":"pastel","version":"0.8.0","platform":"ruby","checksum":"481da9fb7d2f6e6b1a08faf11fa10363172dc40fd47848f096ae21209f805a75"},
 {"name":"peek","version":"1.1.0","platform":"ruby","checksum":"d6501ead8cde46d8d8ed0d59eb6f0ba713d0a41c11a2c4a81447b2dce37b3ecc"},
@@ -720,7 +720,7 @@
 {"name":"sprockets-rails","version":"3.5.1","platform":"ruby","checksum":"c44626cb3887a1a8b572ca258685db33b4ebd041aa73428a716eac444ee5ef48"},
 {"name":"ssh_data","version":"1.3.0","platform":"ruby","checksum":"ec7c1e95a3aebeee412147998f4c147b4b05da6ed0aafda6083f9449318eaac0"},
 {"name":"ssrf_filter","version":"1.0.8","platform":"ruby","checksum":"03f49f54837e407d43ee93ec733a8a94dc1bcf8185647ac61606e63aaedaa0db"},
-{"name":"stackprof","version":"0.2.26","platform":"ruby","checksum":"ee408cbcccd9422aabd66edff8b76a77d67955f2ee1b674961b5dfaa2cc7b8bd"},
+{"name":"stackprof","version":"0.2.27","platform":"ruby","checksum":"aff6d28656c852e74cf632cc2046f849033dc1dedffe7cb8c030d61b5745e80c"},
 {"name":"state_machines","version":"0.5.0","platform":"ruby","checksum":"23e6249d374a920b528dccade403518b4abbd83841a3e2c9ef13e6f1a009b102"},
 {"name":"state_machines-activemodel","version":"0.8.0","platform":"ruby","checksum":"e932dab190d4be044fb5f9cab01a3ea0b092c5f113d4676c6c0a0d49bf738d2c"},
 {"name":"state_machines-activerecord","version":"0.8.0","platform":"ruby","checksum":"072fb701b8ab03de0608297f6c55dc34ed096e556fa8f77e556f3c461c71aab6"},

Gemfile.next.lock

@@ -730,7 +730,7 @@ GEM
     git (1.18.0)
       addressable (~> 2.8)
       rchardet (~> 1.8)
-    gitaly (17.7.0)
+    gitaly (17.8.1)
       grpc (~> 1.0)
     gitlab (4.19.0)
       httparty (~> 0.20)
@@ -776,7 +776,7 @@ GEM
       redis (>= 5, < 6)
       redis-namespace (>= 1.8.2)
     gitlab-markup (1.9.0)
-    gitlab-net-dns (0.9.2)
+    gitlab-net-dns (0.10.0)
     gitlab-sdk (0.3.1)
       activesupport (>= 5.2.0)
       rake (~> 13.0)
@@ -1444,7 +1444,7 @@ GEM
       activerecord (>= 6.1)
       request_store (~> 1.4)
     parallel (1.26.3)
-    parser (3.3.6.0)
+    parser (3.3.7.0)
       ast (~> 2.4.1)
       racc
     parslet (1.8.2)
@@ -1836,7 +1836,7 @@ GEM
       sprockets (>= 3.0.0)
     ssh_data (1.3.0)
     ssrf_filter (1.0.8)
-    stackprof (0.2.26)
+    stackprof (0.2.27)
     state_machines (0.5.0)
     state_machines-activemodel (0.8.0)
       activemodel (>= 5.1)
@@ -2116,7 +2116,7 @@ DEPENDENCIES
   gettext (~> 3.4, >= 3.4.9)
   gettext_i18n_rails (~> 1.13.0)
   git (~> 1.8)
-  gitaly (~> 17.7.0)
+  gitaly (~> 17.8.0)
   gitlab-active-context!
   gitlab-backup-cli!
   gitlab-chronic (~> 0.10.5)
@@ -2133,7 +2133,7 @@ DEPENDENCIES
   gitlab-license (~> 2.6)
   gitlab-mail_room (~> 0.0.24)
   gitlab-markup (~> 1.9.0)
-  gitlab-net-dns (~> 0.9.2)
+  gitlab-net-dns (~> 0.10.0)
   gitlab-rspec!
   gitlab-rspec_flaky!
   gitlab-safe_request_store!
@@ -2278,7 +2278,7 @@ DEPENDENCIES
   pact (~> 1.64)
   paper_trail (~> 15.0)
   parallel (~> 1.19)
-  parser (= 3.3.6.0)
+  parser (= 3.3.7.0)
   parslet (~> 1.8)
   peek (~> 1.1)
   pg (~> 1.5.6)

app/assets/javascripts/blob/components/blob_header_filepath.vue

@@ -64,7 +64,7 @@ export default {
       <component
         :is="showAsLink ? 'gl-link' : 'strong'"
         v-bind="linkHref"
-        class="file-title-name mr-1 js-blob-header-filepath gl-break-all gl-font-bold"
+        class="file-title-name js-blob-header-filepath gl-mr-1 gl-break-all gl-font-bold gl-text-strong"
         :class="{ '!gl-text-blue-700 hover:gl-cursor-pointer': showAsLink }"
         data-testid="file-title-content"
         >{{ fileName }}</component
@@ -79,7 +79,7 @@ export default {
       css-class="gl-mr-2"
     />
 
-    <small v-if="showBlobSize" class="gl-mr-3">{{ blobSize }}</small>
+    <small v-if="showBlobSize" class="gl-mr-3 gl-text-subtle">{{ blobSize }}</small>
 
     <gl-badge v-if="showLfsBadge">{{ __('LFS') }}</gl-badge>
   </div>

app/assets/javascripts/boards/components/board_card.vue

 <script>
 import Tracking from '~/tracking';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { WORK_ITEM_TYPE_ENUM_INCIDENT } from '~/work_items/constants';
 import setSelectedBoardItemsMutation from '~/boards/graphql/client/set_selected_board_items.mutation.graphql';
 import unsetSelectedBoardItemsMutation from '~/boards/graphql/client/unset_selected_board_items.mutation.graphql';
 import selectedBoardItemsQuery from '~/boards/graphql/client/selected_board_items.query.graphql';
@@ -118,6 +120,13 @@ export default {
       if (e.target.closest('.js-no-trigger-title') && (e.ctrlKey || e.metaKey || e.button === 1)) {
         return;
       }
+
+      // we redirect to incident page instead of opening the drawer
+      // should be removed when we introduce incident WI type
+      if (this.item.type === WORK_ITEM_TYPE_ENUM_INCIDENT) {
+        visitUrl(this.item.webUrl);
+        return;
+      }
       e.preventDefault();
 
       const isMultiSelect = e.ctrlKey || e.metaKey;

app/assets/javascripts/ci/job_details/components/sidebar/artifacts_block.vue

 <script>
-import { GlBadge, GlButton, GlButtonGroup, GlLink, GlPopover } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlButton,
+  GlButtonGroup,
+  GlLink,
+  GlPopover,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -20,6 +27,7 @@ export default {
     keepText: s__('Job|Keep'),
     downloadText: s__('Job|Download'),
     browseText: s__('Job|Browse'),
+    sastTooltipText: s__('Job|This artifact contains SAST scan results in JSON format.'),
   },
   artifactsHelpPath: helpPagePath('ci/jobs/job_artifacts'),
   components: {
@@ -31,6 +39,9 @@ export default {
     TimeagoTooltip,
     HelpIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [timeagoMixin],
   props: {
     artifact: {
@@ -57,8 +68,18 @@ export default {
     willExpire() {
       return this.artifact?.expired === false && !this.isLocked;
     },
-    hasReports() {
-      return this.reports.length > 0;
+    sastReport() {
+      return this.reports.find((report) => report.file_type === 'sast');
+    },
+    dastReport() {
+      return this.reports.find((report) => report.file_type === 'dast');
+    },
+    hasArtifactPaths() {
+      return (
+        Boolean(this.artifact.keepPath) ||
+        Boolean(this.artifact.downloadPath) ||
+        Boolean(this.artifact.browsePath)
+      );
     },
   },
 };
@@ -79,9 +100,14 @@ export default {
           {{ $options.i18n.artifactsHelpText }}
         </gl-popover>
       </div>
-      <span v-if="hasReports" class="gl-ml-2">
-        <gl-badge v-for="(report, index) in reports" :key="index" class="gl-mr-2">
-          {{ report.file_type }}
+      <span v-if="sastReport" class="gl-ml-3">
+        <gl-badge v-gl-tooltip :title="$options.i18n.sastTooltipText">
+          {{ sastReport.file_type }}
+        </gl-badge>
+      </span>
+      <span v-if="dastReport" class="gl-ml-3">
+        <gl-badge>
+          {{ dastReport.file_type }}
         </gl-badge>
       </span>
     </div>
@@ -110,7 +136,11 @@ export default {
         {{ $options.i18n.lockedText }}
       </span>
     </p>
-    <gl-button-group class="gl-mt-3 gl-flex">
+    <gl-button-group
+      v-if="hasArtifactPaths"
+      class="gl-mt-3 gl-flex"
+      :class="{ 'gl-mb-3': sastReport }"
+    >
       <gl-button
         v-if="artifact.keepPath"
         :href="artifact.keepPath"
@@ -133,5 +163,15 @@ export default {
         >{{ $options.i18n.browseText }}</gl-button
       >
     </gl-button-group>
+    <div class="gl-mt-2">
+      <gl-link
+        v-if="sastReport"
+        :href="sastReport.download_path"
+        class="!gl-text-link gl-underline"
+        data-testid="download-sast-report-link"
+      >
+        {{ s__('Job|Download SAST report') }}
+      </gl-link>
+    </div>
   </div>
 </template>

app/assets/javascripts/diffs/components/file_row_stats.vue

 <script>
+import { n__ } from '~/locale';
+
 export default {
   props: {
     file: {
@@ -6,13 +8,25 @@ export default {
       required: true,
     },
   },
+  computed: {
+    addedLinesLabel() {
+      return n__('%d line added', '%d lines added', this.file.addedLines);
+    },
+    removedLinesLabel() {
+      return n__('%d line removed', '%d lines removed', this.file.removedLines);
+    },
+  },
 };
 </script>
 
 <template>
   <span class="file-row-stats">
-    <span data-testid="file-added-lines" class="gl-text-success"> +{{ file.addedLines }} </span>
-    <span data-testid="file-removed-lines" class="gl-text-danger"> -{{ file.removedLines }} </span>
+    <span data-testid="file-added-lines" class="gl-text-success" :aria-label="addedLinesLabel">
+      +{{ file.addedLines }}
+    </span>
+    <span data-testid="file-removed-lines" class="gl-text-danger" :aria-label="removedLinesLabel">
+      -{{ file.removedLines }}
+    </span>
   </span>
 </template>
 

app/assets/javascripts/diffs/components/tree_list.vue

@@ -232,7 +232,8 @@ export default {
                 :current-diff-file-id="currentDiffFileId"
                 :style="{ '--level': item.level }"
                 :class="{ 'tree-list-parent': item.level > 0 }"
-                class="gl-relative"
+                :tabindex="0"
+                class="gl-relative !gl-m-1"
                 @toggleTreeOpen="toggleTreeOpen"
                 @clickFile="(path) => goToFile({ path })"
               />

app/assets/javascripts/feature_flags/components/feature_flags.vue

@@ -176,38 +176,6 @@ export default {
       @token="rotateInstanceId()"
     />
     <div :class="topAreaBaseClasses">
-      <div class="gl-flex gl-flex-col md:!gl-hidden">
-        <gl-button
-          v-if="userListPath"
-          :href="userListPath"
-          variant="confirm"
-          category="tertiary"
-          class="gl-mb-3"
-        >
-          {{ s__('FeatureFlags|View user lists') }}
-        </gl-button>
-        <gl-button
-          v-if="canUserConfigure"
-          v-gl-modal="'configure-feature-flags'"
-          variant="confirm"
-          category="secondary"
-          data-testid="ff-configure-button"
-          class="gl-mb-3"
-        >
-          {{ s__('FeatureFlags|Configure') }}
-        </gl-button>
-
-        <gl-button
-          v-if="hasNewPath"
-          :href="newFeatureFlagPath"
-          :disabled="featureFlagsLimitExceeded"
-          variant="confirm"
-          data-testid="ff-new-button"
-        >
-          {{ s__('FeatureFlags|New feature flag') }}
-        </gl-button>
-      </div>
-
       <page-heading>
         <template #heading>
           <span>

app/assets/javascripts/feature_flags/components/feature_flags_table.vue

 <script>
-import { GlBadge, GlButton, GlTooltipDirective, GlModal, GlToggle } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlButton,
+  GlButtonGroup,
+  GlTooltipDirective,
+  GlModal,
+  GlToggle,
+  GlTableLite,
+} from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { labelForStrategy } from '../utils';
 
@@ -14,8 +22,10 @@ export default {
   components: {
     GlBadge,
     GlButton,
+    GlButtonGroup,
     GlModal,
     GlToggle,
+    GlTableLite,
     StrategyLabel,
   },
   directives: {
@@ -35,6 +45,32 @@ export default {
     };
   },
   computed: {
+    tableFields() {
+      return [
+        {
+          key: 'id',
+          label: s__('FeatureFlags|ID'),
+        },
+        {
+          key: 'status',
+          label: s__('FeatureFlags|Status'),
+        },
+        {
+          key: 'name',
+          label: s__('FeatureFlags|Feature flag'),
+        },
+        {
+          key: 'env_specs',
+          label: s__('FeatureFlags|Environment Specs'),
+          thClass: 'gl-w-1/2',
+        },
+        {
+          key: 'actions',
+          label: __('Actions'),
+          thClass: 'gl-w-1/12',
+        },
+      ];
+    },
     modalTitle() {
       return sprintf(s__('FeatureFlags|Delete %{name}?'), {
         name: this.deleteFeatureFlagName,
@@ -99,125 +135,124 @@ export default {
 };
 </script>
 <template>
-  <div class="table-holder js-feature-flag-table">
-    <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10">{{ s__('FeatureFlags|ID') }}</div>
-      <div class="table-section section-10" role="columnheader">
-        {{ s__('FeatureFlags|Status') }}
-      </div>
-      <div class="table-section section-20" role="columnheader">
-        {{ s__('FeatureFlags|Feature flag') }}
-      </div>
-      <div class="table-section section-40" role="columnheader">
-        {{ s__('FeatureFlags|Environment Specs') }}
-      </div>
-    </div>
-
-    <template v-for="featureFlag in featureFlags">
-      <div
-        :key="featureFlag.id"
-        :data-testid="featureFlag.id"
-        class="gl-responsive-table-row"
-        role="row"
-      >
-        <div class="table-section section-10" role="gridcell">
-          <div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|ID') }}</div>
-          <div class="table-mobile-content js-feature-flag-id gl-text-left">
-            {{ featureFlagIidText(featureFlag) }}
-          </div>
-        </div>
-        <div class="table-section section-10" role="gridcell">
-          <div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|Status') }}</div>
-          <div class="table-mobile-content gl-text-left">
-            <gl-toggle
-              v-if="featureFlag.update_path"
-              :value="featureFlag.active"
-              :label="$options.i18n.toggleLabel"
-              label-position="hidden"
-              data-testid="feature-flag-status-toggle"
-              data-track-action="click_button"
-              data-track-label="feature_flag_toggle"
-              @change="toggleFeatureFlag(featureFlag)"
-            />
-            <gl-badge
-              v-else-if="featureFlag.active"
-              variant="success"
-              data-testid="feature-flag-status-badge"
-              >{{ s__('FeatureFlags|Active') }}</gl-badge
-            >
-            <gl-badge v-else variant="danger">{{ s__('FeatureFlags|Inactive') }}</gl-badge>
-          </div>
+  <div>
+    <gl-table-lite :fields="tableFields" :items="featureFlags" stacked="md">
+      <template #cell(id)="{ item = {} }">
+        <div class="!gl-text-left" data-testid="feature-flag-id">
+          {{ featureFlagIidText(item) }}
         </div>
+      </template>
 
-        <div class="table-section section-20" role="gridcell">
-          <div class="table-mobile-header" role="rowheader">
-            {{ s__('FeatureFlags|Feature flag') }}
-          </div>
-          <div
-            class="table-mobile-content flex-column js-feature-flag-title gl-mr-5 gl-flex gl-text-left"
-          >
-            <div class="gl-flex gl-items-center">
-              <div class="feature-flag-name text-monospace text-wrap gl-break-anywhere">
-                {{ featureFlag.name }}
-              </div>
-              <div class="feature-flag-description">
-                <gl-button
-                  v-if="featureFlag.description"
-                  v-gl-tooltip.hover="featureFlag.description"
-                  :aria-label="featureFlag.description"
-                  class="gl-mx-3 !gl-p-0"
-                  category="tertiary"
-                  size="small"
-                  icon="information-o"
-                />
-              </div>
+      <template #cell(status)="{ item = {} }">
+        <gl-toggle
+          v-if="item.update_path"
+          :value="item.active"
+          :label="$options.i18n.toggleLabel"
+          label-position="hidden"
+          data-testid="feature-flag-status-toggle"
+          data-track-action="click_button"
+          data-track-label="feature_flag_toggle"
+          @change="toggleFeatureFlag(item)"
+        />
+        <gl-badge
+          v-else-if="item.active"
+          variant="success"
+          data-testid="feature-flag-status-badge"
+          >{{ s__('FeatureFlags|Active') }}</gl-badge
+        >
+        <gl-badge v-else variant="danger">{{ s__('FeatureFlags|Inactive') }}</gl-badge>
+      </template>
+
+      <template #cell(name)="{ item = {} }">
+        <div class="gl-flex" data-testid="feature-flag-title">
+          <div class="gl-flex gl-items-center">
+            <div class="feature-flag-name text-monospace text-wrap gl-break-anywhere">
+              {{ item.name }}
+            </div>
+            <div :data-testid="`feature-flag-description-${item.id}`">
+              <gl-button
+                v-if="item.description"
+                v-gl-tooltip.hover="item.description"
+                :aria-label="item.description"
+                class="gl-mx-3 !gl-p-0"
+                category="tertiary"
+                size="small"
+                icon="information-o"
+              />
             </div>
           </div>
         </div>
+      </template>
 
-        <div class="table-section section-40" role="gridcell">
-          <div class="table-mobile-header" role="rowheader">
-            {{ s__('FeatureFlags|Environment Specs') }}
-          </div>
-          <div
-            class="table-mobile-content justify-content-end justify-content-md-start js-feature-flag-environments gl-flex gl-flex-wrap gl-text-left"
-          >
-            <strategy-label
-              v-for="strategy in featureFlag.strategies"
-              :key="strategy.id"
-              data-testid="strategy-label"
-              class="gl-mr-3 gl-mt-2 gl-w-full gl-whitespace-normal gl-text-left"
-              v-bind="strategyBadgeText(strategy)"
-            />
-          </div>
+      <template #cell(env_specs)="{ item = {} }">
+        <div class="gl-flex gl-flex-wrap" data-testid="feature-flag-environments">
+          <strategy-label
+            v-for="strategy in item.strategies"
+            :key="strategy.id"
+            data-testid="strategy-label"
+            class="gl-mr-3 gl-mt-2 gl-w-full gl-whitespace-normal !gl-text-left"
+            v-bind="strategyBadgeText(strategy)"
+          />
         </div>
+      </template>
 
-        <div class="table-section section-20 table-button-footer" role="gridcell">
-          <div class="table-action-buttons btn-group">
-            <template v-if="featureFlag.edit_path">
-              <gl-button
-                v-gl-tooltip.hover.bottom="$options.i18n.editLabel"
-                class="js-feature-flag-edit-button"
-                icon="pencil"
-                :aria-label="$options.i18n.editLabel"
-                :href="featureFlag.edit_path"
-              />
-            </template>
-            <template v-if="featureFlag.destroy_path">
-              <gl-button
-                v-gl-tooltip.hover.bottom="$options.i18n.deleteLabel"
-                class="js-feature-flag-delete-button"
-                variant="danger"
-                icon="remove"
-                :disabled="!canDeleteFlag(featureFlag)"
-                :aria-label="$options.i18n.deleteLabel"
-                @click="setDeleteModalData(featureFlag)"
-              />
-            </template>
-          </div>
+      <template #cell(actions)="{ item = {} }">
+        <gl-button-group
+          class="gl-hidden md:gl-inline-flex"
+          data-testid="flags-table-action-buttons"
+        >
+          <template v-if="item.edit_path">
+            <gl-button
+              v-gl-tooltip.hover.bottom="$options.i18n.editLabel"
+              data-testid="feature-flag-edit-button"
+              class="gl-flex-grow"
+              icon="pencil"
+              :aria-label="$options.i18n.editLabel"
+              :href="item.edit_path"
+            />
+          </template>
+          <template v-if="item.destroy_path">
+            <gl-button
+              v-gl-tooltip.hover.bottom="$options.i18n.deleteLabel"
+              class="gl-flex-grow"
+              variant="danger"
+              icon="remove"
+              :disabled="!canDeleteFlag(item)"
+              :aria-label="$options.i18n.deleteLabel"
+              @click="setDeleteModalData(item)"
+            />
+          </template>
+        </gl-button-group>
+
+        <div
+          class="gl-flex gl-gap-4 md:gl-hidden md:gl-gap-0"
+          data-testid="flags-table-action-buttons"
+        >
+          <template v-if="item.edit_path">
+            <gl-button
+              v-gl-tooltip.hover.bottom="$options.i18n.editLabel"
+              data-testid="feature-flag-edit-button"
+              class="gl-flex-grow"
+              icon="pencil"
+              :aria-label="$options.i18n.editLabel"
+              :href="item.edit_path"
+            />
+          </template>
+          <template v-if="item.destroy_path">
+            <gl-button
+              v-gl-tooltip.hover.bottom="$options.i18n.deleteLabel"
+              data-testid="feature-flag-delete-button"
+              class="gl-flex-grow"
+              variant="danger"
+              icon="remove"
+              :disabled="!canDeleteFlag(item)"
+              :aria-label="$options.i18n.deleteLabel"
+              @click="setDeleteModalData(item)"
+            />
+          </template>
         </div>
-      </div>
-    </template>
+      </template>
+    </gl-table-lite>
 
     <gl-modal
       :ref="modalId"

app/assets/javascripts/graphql_shared/issuable_client.js

@@ -12,6 +12,7 @@ import {
   WIDGET_TYPE_AWARD_EMOJI,
   WIDGET_TYPE_HIERARCHY,
   WIDGET_TYPE_CUSTOM_FIELDS,
+  WIDGET_TYPE_LINKED_ITEMS,
   CUSTOM_FIELDS_TYPE_NUMBER,
   CUSTOM_FIELDS_TYPE_TEXT,
   CUSTOM_FIELDS_TYPE_SINGLE_SELECT,
@@ -136,9 +137,6 @@ export const config = {
           },
         },
       },
-      LinkedWorkItemType: {
-        keyFields: ['linkId'],
-      },
       WorkItem: {
         fields: {
           // @todo: Mocking CUSTOM_FIELDS widget while not suported by backend
@@ -474,6 +472,30 @@ export const config = {
                   };
                 }
 
+                // this ensures that we don’t override linkedItems.workItem when updating parent
+                if (incomingWidget?.type === WIDGET_TYPE_LINKED_ITEMS) {
+                  if (!incomingWidget.linkedItems) {
+                    return existingWidget;
+                  }
+
+                  const incomindNodes = incomingWidget.linkedItems?.nodes || [];
+                  const existingNodes = existingWidget.linkedItems?.nodes || [];
+
+                  const resultNodes = incomindNodes.map((incomingNode) => {
+                    const existingNode =
+                      existingNodes.find((n) => n.linkId === incomingNode.linkId) ?? {};
+                    return { ...existingNode, ...incomingNode };
+                  });
+
+                  return {
+                    ...incomingWidget,
+                    linkedItems: {
+                      ...incomingWidget.linkedItems,
+                      nodes: resultNodes,
+                    },
+                  };
+                }
+
                 return { ...existingWidget, ...incomingWidget };
               });
             },

app/assets/javascripts/graphql_shared/possible_types.json

@@ -216,6 +216,7 @@
     "Namespace",
     "Project",
     "Vulnerability",
+    "WikiPage",
     "WorkItem"
   ],
   "User": [
@@ -261,6 +262,7 @@
     "WorkItemWidgetColor",
     "WorkItemWidgetCrmContacts",
     "WorkItemWidgetCurrentUserTodos",
+    "WorkItemWidgetCustomFields",
     "WorkItemWidgetCustomStatus",
     "WorkItemWidgetDescription",
     "WorkItemWidgetDesigns",

app/assets/javascripts/merge_request_tabs.js

@@ -443,7 +443,11 @@ export default class MergeRequestTabs {
     let newStatePathname = pathname.replace(this.actionRegex, '');
 
     // Append the new action if we're on a tab other than 'notes'
-    if (this.currentAction !== 'show' && this.currentAction !== 'new') {
+    if (
+      this.currentAction !== 'show' &&
+      this.currentAction !== 'new' &&
+      this.currentAction !== 'reports'
+    ) {
       newStatePathname += `/${this.currentAction}`;
     }
 

app/assets/javascripts/merge_requests/reports/components/app.vue

 <script>
+import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
+import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
 import {
   BLOCKERS_ROUTE,
   CODE_QUALITY_ROUTE,
@@ -23,9 +25,21 @@ export default {
   inject: ['hasPolicies'],
   data() {
     return {
-      blockersCounter: 2,
+      mr: null,
     };
   },
+  created() {
+    if (
+      window.gl?.mrWidgetData?.merge_request_cached_widget_path &&
+      window.gl?.mrWidgetData?.merge_request_widget_path
+    ) {
+      MRWidgetService.fetchInitialData()
+        .then(({ data }) => {
+          this.mr = new MRWidgetStore({ ...window.gl.mrWidgetData, ...data });
+        })
+        .catch(() => {});
+    }
+  },
 };
 </script>
 
@@ -50,7 +64,7 @@ export default {
       </nav>
     </aside>
     <section class="md:gl-pt-5">
-      <router-view />
+      <router-view :mr="mr" />
     </section>
   </div>
 </template>

app/assets/javascripts/merge_requests/reports/pages/index.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import ReportWidgetContainer from 'ee_else_ce/vue_merge_request_widget/components/widget/app.vue';
+
 export default {
   name: 'MergeRequestReportsIndexPage',
+  components: {
+    GlLoadingIcon,
+    ReportWidgetContainer,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
 };
 </script>
 
 <template>
-  <div></div>
+  <div v-if="mr">
+    <report-widget-container :mr="mr" reports-tab-content />
+  </div>
+  <gl-loading-icon v-else size="lg" />
 </template>

app/assets/javascripts/merge_requests/reports/routes.js

 import BlockersPage from 'ee_else_ce/merge_requests/reports/pages/blockers_page.vue';
 import IndexComponent from './pages/index.vue';
-import {
-  BLOCKERS_ROUTE,
-  CODE_QUALITY_ROUTE,
-  LICENSE_COMPLIANCE_ROUTE,
-  SECURITY_ROUTE,
-} from './constants';
+import { BLOCKERS_ROUTE } from './constants';
 
 export default [
   {
@@ -14,18 +9,8 @@ export default [
     component: BlockersPage,
   },
   {
-    path: '/?type=code-quality',
-    name: CODE_QUALITY_ROUTE,
-    component: IndexComponent,
-  },
-  {
-    path: '/?type=security',
-    name: SECURITY_ROUTE,
-    component: IndexComponent,
-  },
-  {
-    path: '/?type=license-compliance',
-    name: LICENSE_COMPLIANCE_ROUTE,
+    name: 'report',
+    path: '/:report',
     component: IndexComponent,
   },
 ];

app/assets/javascripts/pipeline_wizard/components/wrapper.vue

@@ -221,16 +221,16 @@ export default {
           />
           <div
             v-if="showPlaceholder"
-            class="gl-filter-blur-1 gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0"
+            class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-backdrop-blur-sm"
             data-testid="placeholder-overlay"
           >
             <div
-              class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-z-2 gl-bg-white gl-opacity-5"
+              class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-z-2 gl-bg-overlay"
             ></div>
             <div class="gl-relative gl-z-3 gl-flex gl-h-full gl-items-center gl-justify-center">
-              <div class="gl-max-w-34">
-                <h4 data-testid="filename">{{ filename }}</h4>
-                <p data-testid="description">
+              <div class="gl-max-w-34 gl-rounded-base gl-bg-overlap gl-p-6">
+                <h4 data-testid="filename" class="gl-heading-4">{{ filename }}</h4>
+                <p data-testid="description" class="gl-mb-0 gl-text-subtle">
                   {{ $options.i18n.overlayMessage }}
                 </p>
               </div>

app/assets/javascripts/projects/new_v2/components/app.vue

 <script>
 import { GlButton, GlButtonGroup, GlFormGroup, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
 
 import NewProjectDestinationSelect from './project_destination_select.vue';
+import CommandLine from './command_line.vue';
 
 const OPTIONS = {
   blank: {
@@ -65,6 +67,10 @@ export default {
     SingleChoiceSelector,
     SingleChoiceSelectorItem,
     NewProjectDestinationSelect,
+    CommandLine,
+  },
+  directives: {
+    SafeHtml,
   },
   props: {
     rootPath: {
@@ -127,6 +133,11 @@ export default {
       required: false,
       default: null,
     },
+    newProjectGuidelines: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -211,5 +222,10 @@ export default {
         <single-choice-selector-item v-bind="$options.OPTIONS.transfer" :disabled="true" />
       </single-choice-selector>
     </template>
+    <template #footer>
+      <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
+
+      <command-line v-if="isPersonalProject" />
+    </template>
   </multi-step-form-template>
 </template>

app/assets/javascripts/projects/new_v2/components/command_line.vue

+<script>
+import { GlFormGroup, GlLink, GlFormInputGroup } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlLink,
+    GlFormInputGroup,
+    ClipboardButton,
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: ['projectHelpPath', 'pushToCreateProjectCommand'],
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-mb-6 gl-flex gl-items-center gl-gap-4">
+      <div class="gl-border-t gl-w-full"></div>
+      <div class="gl-text-primary">{{ __('or') }}</div>
+      <div class="gl-border-t gl-w-full"></div>
+    </div>
+
+    <gl-form-group
+      :label="s__('ProjectNew|You can also create a project from the command line')"
+      data-testid="new-project-with-command"
+    >
+      <template #label-description>
+        <gl-link :href="`${projectHelpPath}#create-a-new-project-with-git-push`" target="_blank">
+          {{ s__('ProjectNew|What does this command do?') }}
+        </gl-link>
+      </template>
+      <gl-form-input-group
+        :value="pushToCreateProjectCommand"
+        readonly
+        select-on-click
+        :aria-label="s__('ProjectNew|Push project from command line')"
+      >
+        <template #append>
+          <clipboard-button
+            :text="pushToCreateProjectCommand"
+            :title="__('Copy command')"
+            tooltip-placement="right"
+          />
+        </template>
+      </gl-form-input-group>
+    </gl-form-group>
+  </div>
+</template>

app/assets/javascripts/projects/new_v2/index.js

@@ -26,6 +26,7 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    newProjectGuidelines,
   } = el.dataset;
 
   const props = {
@@ -41,6 +42,7 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    newProjectGuidelines,
   };
 
   const provide = {

app/assets/javascripts/related_issues/components/related_issuable_input.vue

@@ -13,7 +13,6 @@ import IssueToken from './issue_token.vue';
 const SPACE_FACTOR = 1;
 
 export default {
-  TYPE_ISSUE,
   name: 'RelatedIssuableInput',
   components: {
     GlFormGroup,
@@ -64,6 +63,11 @@ export default {
       required: false,
       default: false,
     },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -84,6 +88,9 @@ export default {
     allowAutoComplete() {
       return Object.keys(this.autoCompleteSources).length > 0;
     },
+    showDescription() {
+      return !this.inline && this.issuableType === TYPE_ISSUE;
+    },
   },
   mounted() {
     this.setupAutoComplete();
@@ -182,7 +189,7 @@ export default {
 </script>
 
 <template>
-  <gl-form-group>
+  <gl-form-group :label-class="inline ? 'gl-hidden' : ''">
     <div
       ref="issuableFormWrapper"
       :class="{ focus: isInputFocused }"
@@ -229,7 +236,7 @@ export default {
         </li>
       </ul>
     </div>
-    <template v-if="issuableType === $options.TYPE_ISSUE" #description>
+    <template v-if="showDescription" #description>
       <span :id="`${inputId}-description`">
         {{
           __(