1 files changed, 37 insertions, 9 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 1f5c9b4f2f5..3c9770864fa 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -141,6 +141,18 @@ export default {
     },
     (props) => [props.inline, props.line.right?.codequality?.length].join(':'),
   ),
+  showSecurityLeft: memoize(
+    (props) => {
+      return props.inline && props.line.left?.sast?.length > 0;
+    },
+    (props) => [props.inline, props.line.left?.sast?.length].join(':'),
+  ),
+  showSecurityRight: memoize(
+    (props) => {
+      return !props.inline && props.line.right?.sast?.length > 0;
+    },
+    (props) => [props.inline, props.line.right?.sast?.length].join(':'),
+  ),
   classNameMapCellLeft: memoize(
     (props) => {
       return utils.classNameMapCell({
@@ -180,10 +192,13 @@ export default {
       ].join(':'),
   ),
   shouldRenderCommentButton: memoize(
-    (props) => {
-      return isLoggedIn() && !props.line.isContextLineLeft && !props.line.isMetaLineLeft;
+    (props, side) => {
+      return (
+        isLoggedIn() && !props.line[`isContextLine${side}`] && !props.line[`isMetaLine${side}`]
+      );
     },
-    (props) => [props.line.isContextLineLeft, props.line.isMetaLineLeft].join(':'),
+    (props, side) =>
+      [props.line[`isContextLine${side}`], props.line[`isMetaLine${side}`]].join(':'),
   ),
   interopLeftAttributes(props) {
     if (props.inline) {
@@ -237,7 +252,7 @@ export default {
           <span
             v-if="
               !props.line.left.isConflictMarker &&
-              $options.shouldRenderCommentButton(props) &&
+              $options.shouldRenderCommentButton(props, 'Left') &&
               !props.line.hasDiscussionsLeft
             "
             class="add-diff-note tooltip-wrapper has-tooltip"
@@ -322,12 +337,17 @@ export default {
         >
           <component
             :is="$options.CodeQualityGutterIcon"
-            v-if="$options.showCodequalityLeft(props)"
+            v-if="$options.showCodequalityLeft(props) || $options.showSecurityLeft(props)"
             :code-quality-expanded="props.codeQualityExpanded"
             :codequality="props.line.left.codequality"
+            :sast="props.line.left.sast"
             :file-path="props.filePath"
             @showCodeQualityFindings="
-              listeners.toggleCodeQualityFindings(props.line.left.codequality[0].line)
+              listeners.toggleCodeQualityFindings(
+                props.line.left.codequality[0]
+                  ? props.line.left.codequality[0].line
+                  : props.line.left.sast[0].line,
+              )
             "
           />
         </div>
@@ -384,7 +404,10 @@ export default {
         <div :class="$options.classNameMapCellRight(props)" class="diff-td diff-line-num new_line">
           <template v-if="props.line.right.type !== $options.CONFLICT_MARKER_THEIR">
             <span
-              v-if="$options.shouldRenderCommentButton(props) && !props.line.hasDiscussionsRight"
+              v-if="
+                $options.shouldRenderCommentButton(props, 'Right') &&
+                !props.line.hasDiscussionsRight
+              "
               class="add-diff-note tooltip-wrapper has-tooltip"
               :title="props.line.right.addCommentTooltip"
             >
@@ -455,12 +478,17 @@ export default {
         >
           <component
             :is="$options.CodeQualityGutterIcon"
-            v-if="$options.showCodequalityRight(props)"
+            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="
-              listeners.toggleCodeQualityFindings(props.line.right.codequality[0].line)
+              listeners.toggleCodeQualityFindings(
+                props.line.right.codequality[0]
+                  ? props.line.right.codequality[0].line
+                  : props.line.right.sast[0].line,
+              )
             "
           />
         </div>