diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 3c9770864fa761c376a700d081176a1dde0db900..474b5d1443e9646ae70a0d6981cad39006cd44ef 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -24,7 +24,8 @@ import * as utils from './diff_row_utils';
export default {
DiffGutterAvatars,
- CodeQualityGutterIcon: () => import('ee_component/diffs/components/code_quality_gutter_icon.vue'),
+ InlineFindingsGutterIcon: () =>
+ import('ee_component/diffs/components/inline_findings_gutter_icon.vue'),
// Temporary mixin for migration from Vue.js 2 to @vue/compat
mixins: [compatFunctionalMixin],
@@ -79,7 +80,7 @@ export default {
type: Function,
required: true,
},
- codeQualityExpanded: {
+ inlineFindingsExpanded: {
type: Boolean,
required: false,
default: false,
@@ -336,13 +337,13 @@ export default {
:class="$options.parallelViewLeftLineType(props)"
>
<component
- :is="$options.CodeQualityGutterIcon"
+ :is="$options.InlineFindingsGutterIcon"
v-if="$options.showCodequalityLeft(props) || $options.showSecurityLeft(props)"
- :code-quality-expanded="props.codeQualityExpanded"
+ :inline-findings-expanded="props.inlineFindingsExpanded"
:codequality="props.line.left.codequality"
:sast="props.line.left.sast"
:file-path="props.filePath"
- @showCodeQualityFindings="
+ @showInlineFindings="
listeners.toggleCodeQualityFindings(
props.line.left.codequality[0]
? props.line.left.codequality[0].line
@@ -477,13 +478,13 @@ export default {
:class="$options.classNameMapCellRight(props)"
>
<component
- :is="$options.CodeQualityGutterIcon"
+ :is="$options.InlineFindingsGutterIcon"
v-if="$options.showCodequalityRight(props) || $options.showSecurityRight(props)"
:codequality="props.line.right.codequality"
:sast="props.line.right.sast"
:file-path="props.filePath"
- data-testid="codeQualityIcon"
- @showCodeQualityFindings="
+ data-testid="inlineFindingsIcon"
+ @showInlineFindings="
listeners.toggleCodeQualityFindings(
props.line.right.codequality[0]
? props.line.right.codequality[0].line
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 7b35659e90a3455561526d132eca4d7e45d5d58a..3b5e573f7837da92517db5bdec82047afe2cd206 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -646,12 +646,12 @@ table.code {
.diff-comments-more-count,
.diff-notes-collapse,
-.diff-codequality-collapse {
+.inline-findings-collapse {
@include avatar-counter(50%);
}
.diff-notes-collapse,
-.diff-codequality-collapse {
+.inline-findings-collapse {
border: 0;
border-radius: 50%;
padding: 0;
@@ -735,7 +735,7 @@ table.code {
}
.diff-notes-collapse,
- .diff-codequality-collapse {
+ .inline-findings-collapse {
position: absolute;
left: -12px;
}
@@ -845,7 +845,7 @@ table.code {
}
.diff-notes-collapse,
- .diff-codequality-collapse,
+ .inline-findings-collapse,
.note,
.discussion-reply-holder {
display: none;
diff --git a/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue b/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon.vue
similarity index 76%
rename from ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue
rename to ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon.vue
index 81ce5fbd126b981efc7ffefe0ea343ab83eec338..7c7c8dc85111efad1a10ba9e0b8b7b8ec535d783 100644
--- a/ee/app/assets/javascripts/diffs/components/code_quality_gutter_icon.vue
+++ b/ee/app/assets/javascripts/diffs/components/inline_findings_gutter_icon.vue
@@ -6,7 +6,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { getSeverity } from '~/ci/reports/utils';
import { SAST_SCALE_KEY, CODE_QUALITY_SCALE_KEY } from '~/ci/reports/constants';
-const codequalityCountThreshold = 3;
+const inlineFindingsCountThreshold = 3;
export default {
components: {
@@ -15,7 +15,7 @@ export default {
},
mixins: [glFeatureFlagsMixin()],
props: {
- codeQualityExpanded: {
+ inlineFindingsExpanded: {
type: Boolean,
required: false,
default: false,
@@ -70,18 +70,18 @@ export default {
return this.combinedFindings[0].line;
},
moreCount() {
- return this.combinedFindings.length > codequalityCountThreshold
- ? this.combinedFindings.length - codequalityCountThreshold
+ return this.combinedFindings.length > inlineFindingsCountThreshold
+ ? this.combinedFindings.length - inlineFindingsCountThreshold
: 0;
},
findingsWithSeverity() {
return getSeverity(this.combinedFindings);
},
- firstCodequalityItem() {
+ firstItem() {
return { ...this.combinedFindings[0], filePath: this.filePath };
},
- codeQualitySubItems() {
- return this.findingsWithSeverity.slice(1, codequalityCountThreshold);
+ inlineFindingsSubItems() {
+ return this.findingsWithSeverity.slice(1, inlineFindingsCountThreshold);
},
},
};
@@ -91,17 +91,14 @@ export default {
<div
v-if="findingsWithSeverity.length"
class="gl-z-index-1 gl-relative"
- @click="$emit('showCodeQualityFindings')"
+ @click="$emit('showInlineFindings')"
>
- <div
- v-if="!codeQualityExpanded"
- class="codequality-severity-icon-container gl-display-inline-flex"
- >
- <span ref="codeQualityIcon" class="gl-z-index-200">
+ <div v-if="!inlineFindingsExpanded" class="gl-display-inline-flex">
+ <span ref="inlineFindingsIcon" class="gl-z-index-200">
<gl-icon
- :id="`codequality-${firstCodequalityItem.filePath}:${firstCodequalityItem.line}`"
- ref="firstCodeQualityIcon"
- :key="firstCodequalityItem.description"
+ :id="`inline-findings-${firstItem.filePath}:${firstItem.line}`"
+ ref="firstInlineFindingsIcon"
+ :key="firstItem.description"
:size="16"
:name="findingsWithSeverity[0].name"
:class="findingsWithSeverity[0].class"
@@ -110,7 +107,7 @@ export default {
@mouseleave="isHoveringFirstIcon = false"
/>
</span>
- <span class="code-quality-transition-container gl-display-inline-flex">
+ <span class="inline-findings-transition-container gl-display-inline-flex">
<transition-group name="icons">
<!--
The TransitionGroup Component will only apply its classes when first-level children are added/removed to the DOM.
@@ -118,11 +115,11 @@ export default {
-->
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<gl-icon
- v-for="(item, index) in codeQualitySubItems"
+ v-for="(item, index) in inlineFindingsSubItems"
v-if="isHoveringFirstIcon"
:key="item.description"
- :name="codeQualitySubItems[index].name"
- :class="codeQualitySubItems[index].class"
+ :name="inlineFindingsSubItems[index].name"
+ :class="inlineFindingsSubItems[index].class"
class="gl-hover-cursor-pointer gl-relative gl-top-1 inline-findings-severity-icon gl-absolute gl-left-0"
/>
<!-- eslint-enable -->
@@ -131,25 +128,21 @@ export default {
<div
v-if="showMoreCount"
class="more-count gl-px-2 gl-w-auto gl-absolute gl-left-0 gl-relative gl-top-1"
- data-testid="codeQualityMoreCount"
+ data-testid="inlineFindingsMoreCount"
>
<p class="gl-mb-0 gl-display-block gl-w-3 more-count-copy">{{ moreCount }}</p>
</div>
</transition>
</span>
</div>
- <button v-else class="diff-codequality-collapse gl-mx-n2">
+ <button v-else class="inline-findings-collapse gl-mx-n2">
<gl-icon :size="12" name="collapse" />
</button>
<!-- Only show tooltip when indicator is not expanded
a) to stay consistent with other collapsed icon on the same page
b) because the tooltip would be misaligned hence the negative margin
-->
- <gl-tooltip
- v-if="!$props.codeQualityExpanded"
- data-testid="codeQualityTooltip"
- :target="() => $refs.codeQualityIcon"
- >
+ <gl-tooltip v-if="!$props.inlineFindingsExpanded" :target="() => $refs.inlineFindingsIcon">
<span v-if="codequality.length" class="gl-display-block">{{
codeQualityTooltipTextCollapsed
}}</span>
diff --git a/ee/app/assets/stylesheets/framework/diffs.scss b/ee/app/assets/stylesheets/framework/diffs.scss
index 81d940cfc523300ee5054ef7c9a45efd60ca32ff..0b06e29cbd1ad8ee53fefdb93ab743531f40fef3 100644
--- a/ee/app/assets/stylesheets/framework/diffs.scss
+++ b/ee/app/assets/stylesheets/framework/diffs.scss
@@ -31,7 +31,7 @@
height: $default-icon-size;
}
- .code-quality-transition-container .inline-findings-severity-icon {
+ .inline-findings-transition-container .inline-findings-severity-icon {
@for $i from 1 through 4 {
$z-index: 100;
$x-pos: 10px;
@@ -53,7 +53,7 @@
}
- .code-quality-transition-container {
+ .inline-findings-transition-container {
.more-count-enter,
.more-count-leave-to {
&.more-count {
diff --git a/ee/spec/frontend/diffs/components/diff_row_spec.js b/ee/spec/frontend/diffs/components/diff_row_spec.js
index ef6da339ffcafbca9eb236283d79bbee376bd8ea..ea3afe6ea10aa0a2c5bfacd86eb98ac0d44abf2a 100644
--- a/ee/spec/frontend/diffs/components/diff_row_spec.js
+++ b/ee/spec/frontend/diffs/components/diff_row_spec.js
@@ -9,7 +9,7 @@ Vue.use(Vuex);
describe('EE DiffRow', () => {
let wrapper;
- const findIcon = () => wrapper.find('[data-testid="codeQualityIcon"]');
+ const findIcon = () => wrapper.find('[data-testid="inlineFindingsIcon"]');
const defaultProps = {
fileHash: 'abc',
diff --git a/ee/spec/frontend/diffs/components/code_quality_gutter_icon_spec.js b/ee/spec/frontend/diffs/components/inline_findings_gutter_icon_spec.js
similarity index 85%
rename from ee/spec/frontend/diffs/components/code_quality_gutter_icon_spec.js
rename to ee/spec/frontend/diffs/components/inline_findings_gutter_icon_spec.js
index fcf00a36bcf8ed2f783e540005ea3d30475b9d71..3f2ba67c436afa8dca00097bb978b64fca13610b 100644
--- a/ee/spec/frontend/diffs/components/code_quality_gutter_icon_spec.js
+++ b/ee/spec/frontend/diffs/components/inline_findings_gutter_icon_spec.js
@@ -1,7 +1,7 @@
import { GlIcon, GlTooltip } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import CodeQualityGutterIcon from 'ee/diffs/components/code_quality_gutter_icon.vue';
+import inlineFindingsGutterIcon from 'ee/diffs/components/inline_findings_gutter_icon.vue';
import store from '~/mr_notes/stores';
import { SEVERITY_CLASSES, SEVERITY_ICONS } from '~/ci/reports/codequality_report/constants';
@@ -19,7 +19,7 @@ jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/
let wrapper;
const findIcon = () => wrapper.findComponent(GlIcon);
const findIcons = () => wrapper.findAllComponents(GlIcon);
-const findFirstIcon = () => wrapper.findComponent({ ref: 'firstCodeQualityIcon' });
+const findFirstIcon = () => wrapper.findComponent({ ref: 'firstInlineFindingsIcon' });
let codequalityDiff;
@@ -33,10 +33,10 @@ const createComponent = (props = {}) => {
$store: store,
},
};
- wrapper = shallowMountExtended(CodeQualityGutterIcon, payload);
+ wrapper = shallowMountExtended(inlineFindingsGutterIcon, payload);
};
-describe('EE CodeQualityGutterIcon', () => {
+describe('EE inlineFindingsGutterIcon', () => {
const containsATooltip = (container) => container.findComponent(GlTooltip).exists();
it.each`
@@ -82,9 +82,9 @@ describe('EE CodeQualityGutterIcon', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain('3 Code Quality findings');
});
- it('emits showCodeQualityFindings event on click', () => {
+ it('emits showInlineFindings event on click', () => {
wrapper.trigger('click');
- expect(wrapper.emitted('showCodeQualityFindings')).toHaveLength(1);
+ expect(wrapper.emitted('showInlineFindings')).toHaveLength(1);
});
it('displays first icon with correct severity', () => {
@@ -104,7 +104,7 @@ describe('EE CodeQualityGutterIcon', () => {
});
it('does not display more count', () => {
- expect(wrapper.findByTestId('codeQualityMoreCount').exists()).toBe(false);
+ expect(wrapper.findByTestId('inlineFindingsMoreCount').exists()).toBe(false);
});
});
@@ -127,9 +127,9 @@ describe('EE CodeQualityGutterIcon', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain('3 Security findings');
});
- it('emits showCodeQualityFindings event on click', () => {
+ it('emits showInlineFindings event on click', () => {
wrapper.trigger('click');
- expect(wrapper.emitted('showCodeQualityFindings')).toHaveLength(1);
+ expect(wrapper.emitted('showInlineFindings')).toHaveLength(1);
});
it('displays first icon with correct severity', () => {
@@ -149,7 +149,7 @@ describe('EE CodeQualityGutterIcon', () => {
});
it('does not display more count', () => {
- expect(wrapper.findByTestId('codeQualityMoreCount').exists()).toBe(false);
+ expect(wrapper.findByTestId('inlineFindingsMoreCount').exists()).toBe(false);
});
});
@@ -174,9 +174,9 @@ describe('EE CodeQualityGutterIcon', () => {
);
});
- it('emits showCodeQualityFindings event on click', () => {
+ it('emits showInlineFindings event on click', () => {
wrapper.trigger('click');
- expect(wrapper.emitted('showCodeQualityFindings')).toHaveLength(1);
+ expect(wrapper.emitted('showInlineFindings')).toHaveLength(1);
});
it('displays first icon with correct severity', () => {
@@ -196,7 +196,7 @@ describe('EE CodeQualityGutterIcon', () => {
});
it('does not display more count', () => {
- expect(wrapper.findByTestId('codeQualityMoreCount').exists()).toBe(false);
+ expect(wrapper.findByTestId('inlineFindingsMoreCount').exists()).toBe(false);
});
});
@@ -219,7 +219,7 @@ describe('EE CodeQualityGutterIcon', () => {
expect(icons.at(0).props('name')).toBe('severity-low');
expect(icons.at(1).props('name')).toBe('severity-medium');
expect(icons.at(2).props('name')).toBe('severity-info');
- expect(wrapper.findByTestId('codeQualityMoreCount').exists()).toBe(true);
+ expect(wrapper.findByTestId('inlineFindingsMoreCount').exists()).toBe(true);
});
});
@@ -234,7 +234,7 @@ describe('EE CodeQualityGutterIcon', () => {
expect(wrapper.findComponent(GlTooltip).text()).toContain('1 Security finding');
});
- it('does not trigger "first-icon-hovered" class when firstCodeQualityIcon is hovered', async () => {
+ it('does not trigger "first-icon-hovered" class when firstInlineFindingsIcon is hovered', async () => {
createComponent(singularCodeQualityFinding, true);
findFirstIcon().vm.$emit('mouseenter');
await nextTick();
@@ -243,7 +243,7 @@ describe('EE CodeQualityGutterIcon', () => {
});
describe('indicator icon', () => {
- describe('with codeQualityExpanded prop false', () => {
+ describe('with inlineFindingsExpanded prop false', () => {
beforeEach(() => {
createComponent(singularCodeQualityFinding, true);
});
@@ -253,9 +253,9 @@ describe('EE CodeQualityGutterIcon', () => {
expect(wrapper.findComponent(GlIcon).props('name')).toBe('severity-low');
});
});
- describe('with codeQualityExpanded prop true', () => {
+ describe('with inlineFindingsExpanded prop true', () => {
beforeEach(() => {
- createComponent({ ...singularCodeQualityFinding, codeQualityExpanded: true }, true);
+ createComponent({ ...singularCodeQualityFinding, inlineFindingsExpanded: true }, true);
});
it('shows collapse icon', () => {