Merge branch '276-mr-review-show-change-type-for-each-changed-file' into 'main'

feat(mr review): show change type for each changed file

See merge request gitlab-org/gitlab-vscode-extension!213

package-lock.json

@@ -1233,9 +1233,9 @@
       "dev": true
     },
     "@types/vscode": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.51.0.tgz",
-      "integrity": "sha512-C/jZ35OT5k/rsJyAK8mS1kM++vMcm89oSWegkzxRCvHllIq0cToZAkIDs6eCY4SKrvik3nrhELizyLcM0onbQA==",
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.55.0.tgz",
+      "integrity": "sha512-49hysH7jneTQoSC8TWbAi7nKK9Lc5osQNjmDHVosrcU8o3jecD9GrK0Qyul8q4aGPSXRfNGqIp9CBdb13akETg==",
       "dev": true
     },
     "@types/yargs": {

package.json

@@ -10,7 +10,7 @@
     "url": "https://gitlab.com/gitlab-org/gitlab-vscode-extension"
   },
   "engines": {
-    "vscode": "^1.51.0"
+    "vscode": "^1.52.0"
   },
   "categories": [
     "Other"
@@ -627,7 +627,7 @@
     "@types/request-promise": "^4.1.47",
     "@types/sinon": "^9.0.11",
     "@types/temp": "^0.8.34",
-    "@types/vscode": "^1.51.0",
+    "@types/vscode": "^1.52.0",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "conventional-changelog-cli": "^2.1.1",

src/__mocks__/vscode.js

@@ -40,4 +40,6 @@ module.exports = {
   Range: function Range(start, end) {
     return { start, end };
   },
+  CancellationTokenSource: jest.fn(),
+  ThemeColor: jest.fn(color => color),
 };

src/constants.ts

@@ -2,3 +2,7 @@ export const GITLAB_COM_URL = 'https://gitlab.com';
 export const REVIEW_URI_SCHEME = 'gl-review';
 export const CONFIG_NAMESPACE = 'gitlab';
 export const CONFIG_CUSTOM_QUERIES = 'customQueries';
+export const ADDED = 'added';
+export const DELETED = 'deleted';
+export const RENAMED = 'renamed';
+export const MODIFIED = 'modified';

src/data_providers/items/changed_file_item.ts

@@ -2,12 +2,15 @@ import { TreeItem, Uri } from 'vscode';
 import { posix as path } from 'path';
 import { toReviewUri } from '../../review/review_uri';
 import { PROGRAMMATIC_COMMANDS, VS_COMMANDS } from '../../command_names';
+import { ADDED, DELETED, RENAMED, MODIFIED } from '../../constants';
 
-const getChangeTypeIndicator = (diff: RestDiffFile): string => {
-  if (diff.new_file) return '[added] ';
-  if (diff.deleted_file) return '[deleted] ';
-  if (diff.renamed_file) return '[renamed] ';
-  return '';
+export type ChangeType = typeof ADDED | typeof DELETED | typeof RENAMED | typeof MODIFIED;
+
+const getChangeType = (file: RestDiffFile): ChangeType => {
+  if (file.new_file) return ADDED;
+  if (file.deleted_file) return DELETED;
+  if (file.renamed_file) return RENAMED;
+  return MODIFIED;
 };
 
 // Common image types https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
@@ -40,9 +43,14 @@ export class ChangedFileItem extends TreeItem {
     file: RestDiffFile,
     workspace: GitLabWorkspace,
   ) {
-    super(Uri.file(file.new_path));
-    // TODO add FileDecorationProvider once it is available in the 1.52 https://github.com/microsoft/vscode/issues/54938
-    this.description = `${getChangeTypeIndicator(file)}${path.dirname(`/${file.new_path}`)}`;
+    const changeType = getChangeType(file);
+    const query = new URLSearchParams([['changeType', changeType]]).toString();
+    super(Uri.file(file.new_path).with({ query }));
+    this.description = path
+      .dirname(`/${file.new_path}`)
+      .split('/')
+      .slice(1)
+      .join('/');
     this.mr = mr;
     this.mrVersion = mrVersion;
     this.workspace = workspace;

src/extension.js

@@ -26,6 +26,7 @@ const {
   cancelEdit,
   submitEdit,
 } = require('./commands/mr_discussion_commands');
+const { fileDecorationProvider } = require('./review/file_decoration_provider');
 
 vscode.gitLabWorkflow = {
   sidebarDataProviders: [],
@@ -115,6 +116,7 @@ const activate = context => {
   extensionState.init(tokenService);
   registerCiCompletion(context);
   gitExtensionWrapper.init();
+  vscode.window.registerFileDecorationProvider(fileDecorationProvider);
 };
 
 exports.activate = activate;

src/review/file_decoration_provider.test.ts

+import * as vscode from 'vscode';
+import { fileDecorationProvider, decorations } from './file_decoration_provider';
+import { ADDED, DELETED, RENAMED, MODIFIED } from '../constants';
+
+describe('FileDecoratorProvider', () => {
+  it.each`
+    changeType  | decoration
+    ${ADDED}    | ${decorations[ADDED]}
+    ${DELETED}  | ${decorations[DELETED]}
+    ${RENAMED}  | ${decorations[RENAMED]}
+    ${MODIFIED} | ${decorations[MODIFIED]}
+  `('Correctly maps changeType to decorator', ({ changeType, decoration }) => {
+    const uri: vscode.Uri = vscode.Uri.file(`./test?changeType=${changeType}`);
+    const { token } = new vscode.CancellationTokenSource();
+    const returnValue = fileDecorationProvider.provideFileDecoration(uri, token);
+
+    expect(returnValue).toEqual(decoration);
+  });
+});

src/review/file_decoration_provider.ts

+import * as vscode from 'vscode';
+import { ADDED, DELETED, RENAMED, MODIFIED } from '../constants';
+
+export const decorations: Record<string, vscode.FileDecoration | undefined> = {
+  [ADDED]: {
+    badge: 'A',
+    color: new vscode.ThemeColor('gitDecoration.addedResourceForeground'),
+  },
+  [MODIFIED]: {
+    badge: 'M',
+  },
+  [DELETED]: {
+    badge: 'D',
+    color: new vscode.ThemeColor('gitDecoration.deletedResourceForeground'),
+  },
+  [RENAMED]: {
+    badge: 'R',
+    color: new vscode.ThemeColor('gitDecoration.modifiedResourceForeground'),
+  },
+};
+
+export const fileDecorationProvider: vscode.FileDecorationProvider = {
+  provideFileDecoration: uri => {
+    if (uri.scheme === 'file') {
+      const params = new URLSearchParams(uri.query);
+      const changeType = params.get('changeType');
+      if (changeType) {
+        return decorations[changeType];
+      }
+    }
+    return undefined;
+  },
+};

src/test_utils/uri.ts

@@ -71,10 +71,10 @@ export class Uri implements vscode.Uri {
 
   static file(filePath: string) {
     return new Uri({
-      scheme: 'file://',
+      scheme: 'file',
       authority: '',
-      path: filePath,
-      query: '',
+      path: filePath.split('?')[0] || '',
+      query: filePath.split('?')[1] || '',
       fragment: '',
     });
   }

test/integration/mr_review.test.js

@@ -80,9 +80,10 @@ describe('MR Review', () => {
         '/Screenshot.png',
       ],
     );
+
     assert.deepStrictEqual(
       mrFiles.map(f => getTreeItem(f).description),
-      ['[deleted] /', '[renamed] /', '[added] /', '/src', '[added] /src/assets', '[renamed] /'],
+      ['', '', '', 'src', 'src/assets', ''],
     );
   });