Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

Gemfile

@@ -323,7 +323,7 @@ gem 'thrift', '>= 0.14.0'
 
 # I18n
 gem 'ruby_parser', '~> 3.15', require: false
-gem 'rails-i18n', '~> 6.0'
+gem 'rails-i18n', '~> 7.0'
 gem 'gettext_i18n_rails', '~> 1.8.0'
 gem 'gettext_i18n_rails_js', '~> 1.3'
 gem 'gettext', '~> 3.3', require: false, group: :development
@@ -344,7 +344,7 @@ gem 'prometheus-client-mmap', '~> 0.15.0', require: 'prometheus/client'
 gem 'warning', '~> 1.2.0'
 
 group :development do
-  gem 'lefthook', '~> 1.0.0', require: false
+  gem 'lefthook', '~> 1.0.1', require: false
   gem 'rubocop'
   gem 'solargraph', '~> 0.44.3', require: false
 

Gemfile.lock

@@ -724,7 +724,7 @@ GEM
       rest-client (~> 2.0)
     launchy (2.5.0)
       addressable (~> 2.7)
-    lefthook (1.0.0)
+    lefthook (1.0.1)
     letter_opener (1.7.0)
       launchy (~> 2.2)
     letter_opener_web (2.0.0)
@@ -1030,9 +1030,9 @@ GEM
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    rails-i18n (6.0.0)
+    rails-i18n (7.0.3)
       i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 7)
+      railties (>= 6.0.0, < 8)
     railties (6.1.4.7)
       actionpack (= 6.1.4.7)
       activesupport (= 6.1.4.7)
@@ -1586,7 +1586,7 @@ DEPENDENCIES
   knapsack (~> 1.21.1)
   kramdown (~> 2.3.1)
   kubeclient (~> 4.9.2)
-  lefthook (~> 1.0.0)
+  lefthook (~> 1.0.1)
   letter_opener_web (~> 2.0.0)
   licensee (~> 9.14.1)
   lockbox (~> 0.6.2)
@@ -1650,7 +1650,7 @@ DEPENDENCIES
   rack-timeout (~> 0.6.0)
   rails (~> 6.1.4.7)
   rails-controller-testing
-  rails-i18n (~> 6.0)
+  rails-i18n (~> 7.0)
   rainbow (~> 3.0)
   rbtrace (~> 0.4)
   rdoc (~> 6.3.2)

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

@@ -0,0 +1,56 @@
+<script>
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/reports/codequality_report/constants';
+
+export default {
+  components: { GlButton, GlIcon },
+  props: {
+    line: {
+      type: Number,
+      required: true,
+    },
+    codeQuality: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    severityClass(severity) {
+      return SEVERITY_CLASSES[severity] || SEVERITY_CLASSES.unknown;
+    },
+    severityIcon(severity) {
+      return SEVERITY_ICONS[severity] || SEVERITY_ICONS.unknown;
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="diff-codequality" class="gl-relative">
+    <ul
+      class="gl-list-style-none gl-mb-0 gl-p-0 codequality-findings-list gl-border-top-1 gl-border-bottom-1 gl-bg-gray-10"
+    >
+      <li
+        v-for="finding in codeQuality"
+        :key="finding.description"
+        class="gl-pt-1 gl-pb-1 gl-pl-3 gl-border-solid gl-border-bottom-0 gl-border-right-0 gl-border-1 gl-border-gray-100"
+      >
+        <gl-icon
+          :size="12"
+          :name="severityIcon(finding.severity)"
+          :class="severityClass(finding.severity)"
+          class="codequality-severity-icon"
+        />
+        {{ finding.description }}
+      </li>
+    </ul>
+    <gl-button
+      data-testid="diff-codequality-close"
+      category="tertiary"
+      size="small"
+      icon="close"
+      class="gl-absolute gl-right-2 gl-top-2"
+      @click="$emit('hideCodeQualityFindings', line)"
+    />
+  </div>
+</template>

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

@@ -274,6 +274,9 @@ export default {
             v-if="$options.showCodequalityLeft(props)"
             :codequality="props.line.left.codequality"
             :file-path="props.filePath"
+            @showCodeQualityFindings="
+              listeners.toggleCodeQualityFindings(props.line.left.codequality[0].line)
+            "
           />
         </div>
         <div
@@ -395,6 +398,9 @@ export default {
             :codequality="props.line.right.codequality"
             :file-path="props.filePath"
             data-testid="codeQualityIcon"
+            @showCodeQualityFindings="
+              listeners.toggleCodeQualityFindings(props.line.right.codequality[0].line)
+            "
           />
         </div>
         <div

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

@@ -2,12 +2,14 @@
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 import { hide } from '~/tooltips';
 import { pickDirection } from '../utils/diff_line';
 import DiffCommentCell from './diff_comment_cell.vue';
+import DiffCodeQuality from './diff_code_quality.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
 import { isHighlighted } from './diff_row_utils';
@@ -17,12 +19,17 @@ export default {
     DiffExpansionCell,
     DiffRow,
     DiffCommentCell,
+    DiffCodeQuality,
     DraftNote,
   },
   directives: {
     SafeHtml,
   },
-  mixins: [draftCommentsMixin, IdState({ idProp: (vm) => vm.diffFile.file_hash })],
+  mixins: [
+    draftCommentsMixin,
+    IdState({ idProp: (vm) => vm.diffFile.file_hash }),
+    glFeatureFlagsMixin(),
+  ],
   props: {
     diffFile: {
       type: Object,
@@ -43,6 +50,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      codeQualityExpandedLines: [],
+    };
+  },
   idState() {
     return {
       dragStart: null,
@@ -84,6 +96,23 @@ export default {
       }
       this.idState.dragStart = line;
     },
+    parseCodeQuality(line) {
+      return line.left?.codequality ?? line.right.codequality;
+    },
+
+    hideCodeQualityFindings(line) {
+      const index = this.codeQualityExpandedLines.indexOf(line);
+      if (index > -1) {
+        this.codeQualityExpandedLines.splice(index, 1);
+      }
+    },
+    toggleCodeQualityFindings(line) {
+      if (!this.codeQualityExpandedLines.includes(line)) {
+        this.codeQualityExpandedLines.push(line);
+      } else {
+        this.hideCodeQualityFindings(line);
+      }
+    },
     onDragOver(line) {
       if (line.chunk !== this.idState.dragStart.chunk) return;
 
@@ -125,15 +154,16 @@ export default {
     },
     handleParallelLineMouseDown(e) {
       const line = e.target.closest('.diff-td');
-      const table = line.closest('.diff-table');
-
-      table.classList.remove('left-side-selected', 'right-side-selected');
-      const [lineClass] = ['left-side', 'right-side'].filter((name) =>
-        line.classList.contains(name),
-      );
+      if (line) {
+        const table = line.closest('.diff-table');
+        table.classList.remove('left-side-selected', 'right-side-selected');
+        const [lineClass] = ['left-side', 'right-side'].filter((name) =>
+          line.classList.contains(name),
+        );
 
-      if (lineClass) {
-        table.classList.add(`${lineClass}-selected`);
+        if (lineClass) {
+          table.classList.add(`${lineClass}-selected`);
+        }
       }
     },
     getCountBetweenIndex(index) {
@@ -148,6 +178,9 @@ export default {
         Number(this.diffLines[index - 1].left.new_line)
       );
     },
+    getCodeQualityLine(line) {
+      return this.parseCodeQuality(line)?.[0]?.line;
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
@@ -190,6 +223,7 @@ export default {
         :coverage-loaded="coverageLoaded"
         @showCommentForm="(code) => singleLineComment(code, line)"
         @setHighlightedRow="setHighlightedRow"
+        @toggleCodeQualityFindings="toggleCodeQualityFindings"
         @toggleLineDiscussions="
           ({ lineCode, expanded }) =>
             toggleLineDiscussions({ lineCode, fileHash: diffFile.file_hash, expanded })
@@ -198,6 +232,17 @@ export default {
         @startdragging="onStartDragging"
         @stopdragging="onStopDragging"
       />
+
+      <diff-code-quality
+        v-if="
+          glFeatures.refactorCodeQualityInlineFindings &&
+          codeQualityExpandedLines.includes(getCodeQualityLine(line))
+        "
+        :key="line.line_code"
+        :line="getCodeQualityLine(line)"
+        :code-quality="parseCodeQuality(line)"
+        @hideCodeQualityFindings="hideCodeQualityFindings"
+      />
       <div
         v-if="line.renderCommentRow"
         :key="`dcr-${line.line_code || index}`"

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

@@ -3,10 +3,12 @@ import { isNode, isDocument, isSeq, visit } from 'yaml';
 import { capitalize } from 'lodash';
 import TextWidget from '~/pipeline_wizard/components/widgets/text.vue';
 import ListWidget from '~/pipeline_wizard/components/widgets/list.vue';
+import ChecklistWidget from '~/pipeline_wizard/components/widgets/checklist.vue';
 
 const widgets = {
   TextWidget,
   ListWidget,
+  ChecklistWidget,
 };
 
 function isNullOrUndefined(v) {
@@ -30,8 +32,9 @@ export default {
     },
     target: {
       type: String,
-      required: true,
+      required: false,
       validator: (v) => /^\$.*/g.test(v),
+      default: null,
     },
     widget: {
       type: String,
@@ -48,6 +51,7 @@ export default {
   },
   computed: {
     path() {
+      if (!this.target) return null;
       let res;
       visit(this.template, (seqKey, node, path) => {
         if (node && node.value === this.target) {

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

@@ -31,10 +31,7 @@ export default {
     inputs: {
       type: Array,
       required: true,
-      validator: (value) =>
-        value.every((i) => {
-          return i?.target && i?.widget;
-        }),
+      validator: (value) => value.every((i) => i?.widget),
     },
     template: {
       type: null,
@@ -131,7 +128,7 @@ export default {
       :template="template"
       :validate="validate"
       :widget="input.widget"
-      class="gl-mb-2"
+      class="gl-mb-8"
       v-bind="input"
       @highlight="onHighlight"
       @update:valid="(validationState) => onInputValidationStateChange(i, validationState)"

app/assets/javascripts/pipeline_wizard/components/widgets/checklist.vue

@@ -0,0 +1,80 @@
+<script>
+import { GlFormGroup, GlFormCheckbox, GlFormCheckboxGroup } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+
+const isValidItemDefinition = (value) => {
+  // The Item definition should either be a simple string
+  // or an object with at least a "title" property
+  return typeof value === 'string' || Boolean(value.text);
+};
+
+export default {
+  name: 'ChecklistWidget',
+  components: {
+    GlFormGroup,
+    GlFormCheckbox,
+    GlFormCheckboxGroup,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    items: {
+      type: Array,
+      required: false,
+      validator: (v) => v.every(isValidItemDefinition),
+      default: () => [],
+    },
+    validate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    checklistItems() {
+      return this.items.map((rawItem) => {
+        const id = rawItem.id || uniqueId();
+        return {
+          id,
+          text: rawItem.text || rawItem,
+          help: rawItem.help || null,
+        };
+      });
+    },
+  },
+  created() {
+    if (this.items.length > 0) {
+      this.$emit('update:valid', false);
+    }
+  },
+  methods: {
+    updateValidState(values) {
+      this.$emit(
+        'update:valid',
+        this.checklistItems.every((item) => values.includes(item.id)),
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group #default="{ ariaDescribedby }" :label="title">
+    <gl-form-checkbox-group :aria-describedby="ariaDescribedby" @input="updateValidState">
+      <gl-form-checkbox
+        v-for="item in checklistItems"
+        :id="item.id"
+        :key="item.id"
+        :value="item.id"
+      >
+        {{ item.text }}
+        <template v-if="item.help" #help>
+          {{ item.help }}
+        </template>
+      </gl-form-checkbox>
+    </gl-form-checkbox-group>
+  </gl-form-group>
+</template>