Skip to content

Commit

Permalink
fix: code data-flow order [IDE-764] (#733)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DariusZdroba
DariusZdroba authored Dec 16, 2024
1 parent 37702c5 commit b7d3bc5
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 106 deletions.
6 changes: 3 additions & 3 deletions infrastructure/code/code_html_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ func Test_Code_Html_getCodeDetailsHtml(t *testing.T) {
assert.Contains(t, codePanelHtml, expectedDataFlowHeading)
assert.Contains(t, codePanelHtml, `<table class="data-flow-table">`)
assert.Contains(t, codePanelHtml, `main.ts`)
assert.Contains(t, codePanelHtml, `line:5`)
assert.Contains(t, codePanelHtml, `5`)
assert.Contains(t, codePanelHtml, `<code>import * as http from &#39;http&#39;;</code>`)

// assert Ignore Details section - Elements should not be present
Expand All @@ -80,7 +80,7 @@ func Test_Code_Html_getCodeDetailsHtml(t *testing.T) {

// assert Fixes section
assert.Contains(t, codePanelHtml, ` id="ai-fix-wrapper" class="hidden">`)
assert.Contains(t, codePanelHtml, ` id="no-ai-fix-wrapper" class="">`)
assert.Contains(t, codePanelHtml, ` id="no-ai-fix-wrapper"`)
assert.Contains(t, codePanelHtml, `<button id="generate-ai-fix" folder-path="" file-path=""
issue-id="" class="generate-ai-fix">✨ Generate AI fix</button>`)
expectedFixesDescription := fmt.Sprintf(`This type of vulnerability was fixed in %d open source projects.`, repoCount)
Expand Down Expand Up @@ -123,7 +123,7 @@ func Test_Code_Html_getCodeDetailsHtml_withAIfix(t *testing.T) {
// assert Fixes section
assert.Contains(t, codePanelHtml, ` id="ai-fix-wrapper" class="">`)
assert.Contains(t, codePanelHtml, `✨ Generate AI fix`)
assert.Contains(t, codePanelHtml, ` id="no-ai-fix-wrapper" class="hidden">`)
assert.Contains(t, codePanelHtml, ` id="no-ai-fix-wrapper"`)
assert.Contains(t, codePanelHtml, ` folder-path=""`)
}

Expand Down
176 changes: 89 additions & 87 deletions infrastructure/code/template/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,96 @@ <h2 class="severity-title">{{.IssueTitle}}</h2>
</div>
</div>
</section>
<!-- Data Flow and Fixed Code Examples -->
<div id="no-ai-fix-wrapper">
<!-- Data Flow -->
<section class="data-flow-section delimiter-top">
<h2 class="data-flow-header">
Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
</h2>
<div class="data-flow-body">
{{range $fileName := .DataFlowKeys}}
<div class="data-flow-file">
{{$.FileIcon}}
<span class="data-flow-file-name">{{$fileName}}</span>
</div>
<table class="data-flow-table">
<tbody>
{{range index $.DataFlowTable $fileName}}
<tr class="data-flow-row">
<td class="data-flow-number">
<div class="data-flow-circle">{{.Number}}</div>
<div class="data-flow-line"></div>
</td>
<td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
{{.StartLineValue}}
</td>
<td class="delimiter data-flow-delimiter">|</td>
<td class="data-flow-text">
<code>{{.Content}}</code>
</td>
</tr>
{{end}}
</tbody>

</table>
{{end}}
</div>
</section>

<!-- Fixed Code Examples -->
<section class="example-fixes delimiter-top {{if .HasAIFix}}hidden{{end}}">
<h2 class="example-fixes-header">Fixed Code Examples</h2>
{{if eq (len .ExampleCommitFixes) 0}}
<div id="info-no-examples" class="font-light">
No example fixes are available.
</div>
{{else}}
<p id="example-fixes-info-top" class="example-fixes-info-top font-light">
This type of vulnerability was fixed in {{.RepoCount}} open source projects.
</p>
<div id="example-top" class="row between">
<div id="current-example" class="repo clickable">
{{.GitHubIcon}}
<span id="example-link" class="example-repo-link">
<a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
rel="noopener noreferrer">
{{(index .ExampleCommitFixes 0).RepoName}}
</a>
</span>
</div>
<div class="examples-nav">
<span id="previous-example" class="arrow" title="Previous example">
{{.ArrowLeftDark}}
{{.ArrowLeftLight}}
</span>
<span id="example-text">
Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
</span>
<span id="next-example" class="arrow" title="Next example">
{{.ArrowRightDark}}
{{.ArrowRightLight}}
</span>
</div>
</div>

<div id="example" class="example">
{{range $index, $element := .ExampleCommitFixes}}
<div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
<div>
{{range $element.ExampleLines}}
<div class="example-line {{.LineChange}}">
<code>{{.Line}}</code>
</div>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}
</section>
</div>
<!-- AI Fix -->
<div id="ai-fix-wrapper" class="{{if not .HasAIFix}}hidden{{end}}">
<!-- AI fix buttons -->
Expand Down Expand Up @@ -225,93 +314,6 @@ <h2 class="ai-fix-header">
</div>
</section>
</div>

<!-- Data Flow and Fixed Code Examples -->
<div id="no-ai-fix-wrapper" class="{{if .HasAIFix}}hidden{{end}}">
<!-- Data Flow -->
<section class="data-flow-section delimiter-top">
<h2 class="data-flow-header">
Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
</h2>
<div class="data-flow-body">
{{range $fileName := .DataFlowKeys}}
<div class="data-flow-file">
{{$.FileIcon}}
<span class="data-flow-file-name">{{$fileName}}</span>
</div>
<table class="data-flow-table">
<tbody>
{{range index $.DataFlowTable $fileName}}
<tr class="data-flow-row">
<td class="data-flow-number">{{.Number}}</td>
<td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
line:{{.StartLineValue}}
</td>
<td class="delimiter data-flow-delimiter">|</td>
<td class="data-flow-text">
<code>{{.Content}}</code>
</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}
</div>
</section>

<!-- Fixed Code Examples -->
<section class="example-fixes delimiter-top">
<h2 class="example-fixes-header">Fixed Code Examples</h2>
{{if eq (len .ExampleCommitFixes) 0}}
<div id="info-no-examples" class="font-light">
No example fixes are available.
</div>
{{else}}
<p id="example-fixes-info-top" class="example-fixes-info-top font-light">
This type of vulnerability was fixed in {{.RepoCount}} open source projects.
</p>
<div id="example-top" class="row between">
<div id="current-example" class="repo clickable">
{{.GitHubIcon}}
<span id="example-link" class="example-repo-link">
<a id="example-repo-anchor" href="{{(index .ExampleCommitFixes 0).RepoLink}}"
rel="noopener noreferrer">
{{(index .ExampleCommitFixes 0).RepoName}}
</a>
</span>
</div>
<div class="examples-nav">
<span id="previous-example" class="arrow" title="Previous example">
{{.ArrowLeftDark}}
{{.ArrowLeftLight}}
</span>
<span id="example-text">
Example <strong id="example-counter">1</strong>/<span id="example-number2">{{.ExampleCount}}</span>
</span>
<span id="next-example" class="arrow" title="Next example">
{{.ArrowRightDark}}
{{.ArrowRightLight}}
</span>
</div>
</div>

<div id="example" class="example">
{{range $index, $element := .ExampleCommitFixes}}
<div class="example-detail {{if ne $index 0}}hidden{{end}}" data-index=" {{$index}}">
<div>
{{range $element.ExampleLines}}
<div class="example-line {{.LineChange}}">
<code>{{.Line}}</code>
</div>
{{end}}
</div>
</div>
{{end}}
</div>
{{end}}
</section>
</div>
</div>
<!-- End Fix Analysis section -->

Expand Down
66 changes: 50 additions & 16 deletions infrastructure/code/template/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,15 @@
--horizontal-border-color: var();
--code-background-color: var(--vscode-editor-background);
--tab-active-background-color: var(--vscode-tab-activeBackground);
--input-border: var(--vscode-input-border)
--input-border: var(--vscode-input-border);
--input-background: var(--vscode-input-background);
/* This doesn't exist yet in VSCode*/
--border-color: var(--vscode-border-color);
--example-line-removed-color: var(--vscode-line-removed-color);
--example-line-added-color: var(--vscode-line-added-color);
--generated-ai-fix-button-background-color: var(--vscode-button-background);
--disabled-background-color: var(--vscode-foreground);
--circle-color: var(--vscode-badge-background);
}

::-webkit-scrollbar {
Expand Down Expand Up @@ -261,32 +263,66 @@ table {
}
table td {
background: var(--container-background-color);
border-top: 1px solid var(--border-color);
padding: 3px;
padding: 8px 8px 0 4px;
}

.data-flow-table {
background-color: var(--code-background-color);
margin-top: 5px;
margin-left: 15px;
margin-top: 4px;
}

.data-flow-row {
border-collapse: collapse;
vertical-align: baseline;
}

.data-flow-number {
padding-left: 14px;
padding-right: 14px;
width: 0.9375rem;
text-align: right;
/* Data flow number bubbles */
tr .data-flow-number {
position: relative;
background-color: var(--background-color);
text-align: center;
padding: 4px;
}
.data-flow-circle{
width: 16px;
height: 16px;
font-size: 12px;
font-weight: 600;
border-radius: 50%;
background-color: var(--circle-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
position: inherit;
left: 0;
top: 50%;
z-index: 1;
}


.data-flow-line {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
transform: translateX(-50%);
border-left: 1px dashed var(--text-color);
z-index: 0;
}
table > tbody > tr:first-child > td:first-child .data-flow-line {
top: 50%;
height: 50%;
}

table > tbody > tr:last-child > td:first-child .data-flow-line {
top: 0;
height: 10%;
}

.data-flow-clickable-row {
color: var(--link-color);
font-weight: 400;
width: 3.9375rem;
text-align: right;
}

Expand Down Expand Up @@ -355,13 +391,11 @@ code {
text-transform: uppercase;
}

.data-flow-number,
.data-flow-clickable-row,
.data-flow-delimiter,
.data-flow-text {
background-color: transparent;
border-color: transparent;
padding-top: 0px;
padding-bottom: 0px;
}

Expand Down Expand Up @@ -440,7 +474,7 @@ code {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075));
box-shadow: 0 -1px 3px rgba(0, 0, 0, .05);
border-top: 1px solid var(--border-color);

z-index: 1;
}

#ignore-actions {
Expand Down Expand Up @@ -528,7 +562,7 @@ button {

button.generate-ai-fix,
button.sn-apply-fix {
border-radius: 3px;
border-radius: 4px;
background-color: var(--generated-ai-fix-button-background-color);
color: white;
cursor: pointer;
Expand Down Expand Up @@ -614,7 +648,7 @@ button.sn-apply-fix:hover {
}

.sn-fix-wrapper {
padding: 2rem;
padding: 16px;
margin-top: 1rem;
border-radius: 4px;
overflow: hidden;
Expand Down

0 comments on commit b7d3bc5

Please sign in to comment.