View linter messages in the compare view for versions

[kumar303]

User story:

As a code reviewer, I want to see linter messages shown in the version compare view to speed up the review process.

This will be similar to showing linter messages in the file viewer: #41

Example from the current site:

[kumar303]

We will need a way to link into the validation.json URL: mozilla/addons#6288

[kumar303]

The linter messages shown will be for the newer version in the compare view

[willdurand]

In the DiffView component, one can show inlined content using getWidgets():

+  getWidgets = (hunks) => {
+    return (
+      this.state.changesWithComments
+        .reduce((widgets, change) => {
+          const changeKey = getChangeKey(change);
+
+          return {
+            ...widgets,
+            [changeKey]: (
+              <Comment
+                comment={
+                  change.lineNumber === 39
+                    ? null
+                    : { content: 'This is not needed.' }
+                }
+              />
+            ),
+          };
+        }, {})
+    );
+  };

It also needs widgets={this.getWidgets(hunks)} to each Diff in render().

The diff above ha a list of comments stored in this.state.changesWithComments because a button was also added to add new comments. For linter results, we won't need the state, but it shows how to create a list of widgets. The lineNumber can be found via change.lineNumber but it could also be change.oldLineNumber or change.newLineNumber.

[kumar303]

I think we added needs: api because we wanted the results included in the main API response (mozilla/addons#6380) but we have a workaround in place.