Merge branch '266-fix-gitlab-uploaded-avatars' into 'main'

fix: avatars uploaded to GitLab don't show correctly

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

src/gitlab/gitlab_new_service.ts

@@ -7,6 +7,7 @@ import * as assert from 'assert';
 import { tokenService } from '../services/token_service';
 import { FetchError } from '../errors/fetch_error';
 import { getUserAgentHeader } from '../utils/get_user_agent_header';
+import { getAvatarUrl } from '../utils/get_avatar_url';
 
 interface Node<T> {
   pageInfo?: {
@@ -284,6 +285,10 @@ export class GitLabNewService {
     const prependHost = (note: GqlNote): GqlNote => ({
       ...note,
       bodyHtml: note.bodyHtml.replace(/href="\//, `href="${this.instanceUrl}/`),
+      author: {
+        ...note.author,
+        avatarUrl: getAvatarUrl(this.instanceUrl, note.author.avatarUrl),
+      },
     });
     return {
       ...discussion,

src/gitlab_service.ts

@@ -11,6 +11,7 @@ import { handleError, logError } from './log';
 import { getUserAgentHeader } from './utils/get_user_agent_header';
 import { CustomQueryType } from './gitlab/custom_query_type';
 import { CustomQuery } from './gitlab/custom_query';
+import { getAvatarUrl } from './utils/get_avatar_url';
 
 interface GitLabProject {
   id: number;
@@ -33,18 +34,29 @@ interface GitLabJob {
   created_at: string;
 }
 
+const normalizeAvatarUrl = (instanceUrl: string) => (issuable: RestIssuable): RestIssuable => ({
+  ...issuable,
+  author: {
+    ...issuable.author,
+    avatar_url: getAvatarUrl(instanceUrl, issuable.author.avatar_url),
+  },
+});
+
 const projectCache: Record<string, GitLabProject> = {};
 let versionCache: string | null = null;
 
-async function fetch(path: string, method = 'GET', data?: Record<string, unknown>) {
-  const { ignoreCertificateErrors, ca, cert, certKey } = vscode.workspace.getConfiguration(
-    'gitlab',
-  );
-  const instanceUrl = await createGitService(
+const getInstanceUrl = async () =>
+  await createGitService(
     // fetching of instanceUrl is the only GitService method that doesn't need workspaceFolder
     // TODO: remove this default value once we implement https://gitlab.com/gitlab-org/gitlab-vscode-extension/-/issues/260
     (await getCurrentWorkspaceFolder()) || '',
   ).fetchCurrentInstanceUrl();
+
+async function fetch(path: string, method = 'GET', data?: Record<string, unknown>) {
+  const { ignoreCertificateErrors, ca, cert, certKey } = vscode.workspace.getConfiguration(
+    'gitlab',
+  );
+  const instanceUrl = await getInstanceUrl();
   const { proxy } = vscode.workspace.getConfiguration('http');
   const apiRoot = `${instanceUrl}/api/v4`;
   const glToken = tokenService.getToken(instanceUrl);
@@ -358,7 +370,7 @@ export async function fetchIssuables(params: CustomQuery, workspaceFolder: strin
     const { response } = await fetch(path);
     issuable = response;
   }
-  return issuable;
+  return issuable.map(normalizeAvatarUrl(await getInstanceUrl()));
 }
 
 export async function fetchLastJobsForCurrentBranch(

src/utils/get_avatar_url.ts

+import * as vscode from 'vscode';
+
+export const getAvatarUrl = (instanceUrl: string, avatarUrl: string): string => {
+  if (!avatarUrl.startsWith('/')) {
+    return avatarUrl;
+  }
+  return vscode.Uri.parse(instanceUrl)
+    .with({ path: avatarUrl })
+    .toString();
+};

src/webview/src/components/UserAvatar.test.js

+import { mount } from '@vue/test-utils';
+import UserAvatar from './UserAvatar';
+
+describe('UserAvatar', () => {
+  describe('shows avatar picture', () => {
+    it.each`
+      responseType | avatarUrlPropName
+      ${'REST'}    | ${'avatar_url'}
+      ${'GraphQL'} | ${'avatarUrl'}
+    `(
+      'contains correct url for $responseType response ($avatarUrlPropName)',
+      ({ avatarUrlPropName }) => {
+        const wrapper = mount(UserAvatar, {
+          propsData: {
+            user: {
+              name: 'John Doe',
+              username: 'johndoe',
+              [avatarUrlPropName]: 'https://example.com/avatar.jpg',
+            },
+          },
+        });
+        const avatarImg = wrapper.find('.js-avatar');
+        expect(avatarImg.attributes().src).toBe('https://example.com/avatar.jpg');
+      },
+    );
+  });
+});

src/webview/src/components/UserAvatar.vue

@@ -38,6 +38,9 @@ export default {
     userUrl() {
       return this.user.webUrl || this.user.web_url; // labels contain snake_case variables
     },
+    avatarUrl() {
+      return this.user.avatarUrl || this.user.avatar_url;
+    },
   },
 };
 </script>
@@ -45,7 +48,7 @@ export default {
 <template>
   <span>
     <component :is="showLink ? 'a' : 'span'" :href="userUrl" target="_blank">
-      <img v-if="showAvatar" :src="user.avatarUrl" :class="sizeClass" class="avatar" />
+      <img v-if="showAvatar" :src="avatarUrl" :class="sizeClass" class="avatar js-avatar" />
       <span v-if="showUsername" class="author">
         <strong> {{ user.name }}</strong>
         <span v-if="showHandle"> @{{ user.username }}</span>

test/integration/fixtures/rest/open_mr.json

@@ -27,7 +27,7 @@
     }
   ],
   "author": {
-    "avatar_url": "https://secure.gravatar.com/avatar/6042a9152ada74d9fb6a0cdce895337e?s=80&d=identicon",
+    "avatar_url": "/uploads/-/system/user/avatar/2398164/avatar.png",
     "id": 3457201,
     "name": "Tomas Vik",
     "state": "active",

test/integration/tree_view.test.js

@@ -150,7 +150,7 @@ describe('GitLab tree view', () => {
     assert.strictEqual(mrItem.label, '!33824 · Web IDE - remove unused actions (mappings)');
     assert.strictEqual(
       mrItem.iconPath.toString(true),
-      'https://secure.gravatar.com/avatar/6042a9152ada74d9fb6a0cdce895337e?s=80&d=identicon',
+      `${GITLAB_URL}/uploads/-/system/user/avatar/2398164/avatar.png`,
     );
 
     const mrContent = await dataProvider.getChildren(mrItemModel);