Merge branch 'ph/useWebPathDescriptionHTMLInRepo' into 'master'

Uses webPath and descriptionHTML in repository browser

Closes #230426

See merge request gitlab-org/gitlab!38047

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -9,9 +9,9 @@ import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '../../locale';
 import Icon from '../../vue_shared/components/icon.vue';
 import getRefMixin from '../mixins/get_ref';
-import getProjectShortPath from '../queries/getProjectShortPath.query.graphql';
-import getProjectPath from '../queries/getProjectPath.query.graphql';
-import getPermissions from '../queries/getPermissions.query.graphql';
+import projectShortPathQuery from '../queries/project_short_path.query.graphql';
+import projectPathQuery from '../queries/project_path.query.graphql';
+import permissionsQuery from '../queries/permissions.query.graphql';
 
 const ROW_TYPES = {
   header: 'header',
@@ -28,13 +28,13 @@ export default {
   },
   apollo: {
     projectShortPath: {
-      query: getProjectShortPath,
+      query: projectShortPathQuery,
     },
     projectPath: {
-      query: getProjectPath,
+      query: projectPathQuery,
     },
     userPermissions: {
-      query: getPermissions,
+      query: permissionsQuery,
       variables() {
         return {
           projectPath: this.projectPath,

app/assets/javascripts/repository/components/last_commit.vue

@@ -8,8 +8,8 @@ import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import getRefMixin from '../mixins/get_ref';
-import getProjectPath from '../queries/getProjectPath.query.graphql';
-import pathLastCommit from '../queries/pathLastCommit.query.graphql';
+import projectPathQuery from '../queries/project_path.query.graphql';
+import pathLastCommitQuery from '../queries/path_last_commit.query.graphql';
 
 export default {
   components: {
@@ -28,10 +28,10 @@ export default {
   mixins: [getRefMixin],
   apollo: {
     projectPath: {
-      query: getProjectPath,
+      query: projectPathQuery,
     },
     commit: {
-      query: pathLastCommit,
+      query: pathLastCommitQuery,
       variables() {
         return {
           projectPath: this.projectPath,
@@ -102,7 +102,7 @@ export default {
     <template v-else-if="commit">
       <user-avatar-link
         v-if="commit.author"
-        :link-href="commit.author.webUrl"
+        :link-href="commit.author.webPath"
         :img-src="commit.author.avatarUrl"
         :img-size="40"
         class="avatar-cell"
@@ -118,13 +118,13 @@ export default {
       <div class="commit-detail flex-list">
         <div class="commit-content qa-commit-content">
           <gl-link
-            :href="commit.webUrl"
+            :href="commit.webPath"
             :class="{ 'font-italic': !commit.message }"
             class="commit-row-message item-title"
             v-html="commit.titleHtml"
           />
           <gl-deprecated-button
-            v-if="commit.description"
+            v-if="commit.descriptionHtml"
             :class="{ open: showDescription }"
             :aria-label="__('Show commit description')"
             class="text-expander"
@@ -135,7 +135,7 @@ export default {
           <div class="committer">
             <gl-link
               v-if="commit.author"
-              :href="commit.author.webUrl"
+              :href="commit.author.webPath"
               class="commit-author-link js-user-link"
             >
               {{ commit.author.name }}
@@ -147,11 +147,11 @@ export default {
             <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
           </div>
           <pre
-            v-if="commit.description"
+            v-if="commit.descriptionHtml"
             :class="{ 'd-block': showDescription }"
             class="commit-row-description gl-mb-3"
-            >{{ commit.description }}</pre
-          >
+            v-html="commit.descriptionHtml"
+          ></pre>
         </div>
         <div class="commit-actions flex-row">
           <div v-if="commit.signatureHtml" v-html="commit.signatureHtml"></div>

app/assets/javascripts/repository/components/preview/index.vue

@@ -3,15 +3,15 @@ import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { handleLocationHash } from '~/lib/utils/common_utils';
-import getReadmeQuery from '../../queries/getReadme.query.graphql';
+import readmeQuery from '../../queries/readme.query.graphql';
 
 export default {
   apollo: {
     readme: {
-      query: getReadmeQuery,
+      query: readmeQuery,
       variables() {
         return {
-          url: this.blob.webUrl,
+          url: this.blob.webPath,
         };
       },
       loadingKey: 'loading',

app/assets/javascripts/repository/components/table/index.vue

@@ -2,7 +2,7 @@
 import { GlSkeletonLoading } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
 import getRefMixin from '../../mixins/get_ref';
-import getProjectPath from '../../queries/getProjectPath.query.graphql';
+import projectPathQuery from '../../queries/project_path.query.graphql';
 import TableHeader from './header.vue';
 import TableRow from './row.vue';
 import ParentRow from './parent_row.vue';
@@ -17,7 +17,7 @@ export default {
   mixins: [getRefMixin],
   apollo: {
     projectPath: {
-      query: getProjectPath,
+      query: projectPathQuery,
     },
   },
   props: {
@@ -96,7 +96,7 @@ export default {
               :name="entry.name"
               :path="entry.flatPath"
               :type="entry.type"
-              :url="entry.webUrl"
+              :url="entry.webUrl || entry.webPath"
               :mode="entry.mode"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"

app/assets/javascripts/repository/components/table/row.vue

@@ -12,7 +12,7 @@ import { escapeFileUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import getRefMixin from '../../mixins/get_ref';
-import getCommit from '../../queries/getCommit.query.graphql';
+import commitQuery from '../../queries/commit.query.graphql';
 
 export default {
   components: {
@@ -29,7 +29,7 @@ export default {
   },
   apollo: {
     commit: {
-      query: getCommit,
+      query: commitQuery,
       variables() {
         return {
           fileName: this.name,

app/assets/javascripts/repository/components/tree_content.vue

@@ -3,8 +3,8 @@ import createFlash from '~/flash';
 import { __ } from '../../locale';
 import FileTable from './table/index.vue';
 import getRefMixin from '../mixins/get_ref';
-import getFiles from '../queries/getFiles.query.graphql';
-import getProjectPath from '../queries/getProjectPath.query.graphql';
+import filesQuery from '../queries/files.query.graphql';
+import projectPathQuery from '../queries/project_path.query.graphql';
 import FilePreview from './preview/index.vue';
 import { readmeFile } from '../utils/readme';
 
@@ -18,7 +18,7 @@ export default {
   mixins: [getRefMixin],
   apollo: {
     projectPath: {
-      query: getProjectPath,
+      query: projectPathQuery,
     },
   },
   props: {
@@ -70,7 +70,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: getFiles,
+          query: filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,

app/assets/javascripts/repository/log_tree.js

 import { normalizeData } from 'ee_else_ce/repository/utils/commit';
 import axios from '~/lib/utils/axios_utils';
-import getCommits from './queries/getCommits.query.graphql';
-import getProjectPath from './queries/getProjectPath.query.graphql';
-import getRef from './queries/getRef.query.graphql';
+import commitsQuery from './queries/commits.query.graphql';
+import projectPathQuery from './queries/project_path.query.graphql';
+import refQuery from './queries/ref.query.graphql';
 
 let fetchpromise;
 let resolvers = [];
@@ -22,8 +22,8 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
 
   if (fetchpromise) return fetchpromise;
 
-  const { projectPath } = client.readQuery({ query: getProjectPath });
-  const { escapedRef } = client.readQuery({ query: getRef });
+  const { projectPath } = client.readQuery({ query: projectPathQuery });
+  const { escapedRef } = client.readQuery({ query: refQuery });
 
   fetchpromise = axios
     .get(
@@ -36,10 +36,10 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
     )
     .then(({ data, headers }) => {
       const headerLogsOffset = headers['more-logs-offset'];
-      const { commits } = client.readQuery({ query: getCommits });
+      const { commits } = client.readQuery({ query: commitsQuery });
       const newCommitData = [...commits, ...normalizeData(data, path)];
       client.writeQuery({
-        query: getCommits,
+        query: commitsQuery,
         data: { commits: newCommitData },
       });
 

app/assets/javascripts/repository/mixins/get_ref.js

-import getRef from '../queries/getRef.query.graphql';
+import refQuery from '../queries/ref.query.graphql';
 
 export default {
   apollo: {
     ref: {
-      query: getRef,
+      query: refQuery,
       manual: true,
       result({ data, loading }) {
         if (!loading) {

app/assets/javascripts/repository/mixins/preload.js

-import getFiles from '../queries/getFiles.query.graphql';
+import filesQuery from '../queries/files.query.graphql';
 import getRefMixin from './get_ref';
-import getProjectPath from '../queries/getProjectPath.query.graphql';
+import projectPathQuery from '../queries/project_path.query.graphql';
 
 export default {
   mixins: [getRefMixin],
   apollo: {
     projectPath: {
-      query: getProjectPath,
+      query: projectPathQuery,
     },
   },
   data() {
@@ -21,7 +21,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: getFiles,
+          query: filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,

app/assets/javascripts/repository/queries/getFiles.query.graphql → app/assets/javascripts/repository/queries/files.query.graphql

@@ -22,7 +22,7 @@ query getFiles(
           edges {
             node {
               ...TreeEntry
-              webUrl
+              webPath
             }
           }
           pageInfo {
@@ -46,7 +46,7 @@ query getFiles(
             node {
               ...TreeEntry
               mode
-              webUrl
+              webPath
               lfsOid
             }
           }

app/assets/javascripts/repository/queries/pathLastCommit.query.graphql → app/assets/javascripts/repository/queries/path_last_commit.query.graphql

@@ -6,7 +6,7 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!) {
           sha
           title
           titleHtml
-          description
+          descriptionHtml
           message
           webUrl
           authoredDate

changelogs/unreleased/ph-useWebPathDescriptionHTMLInRepo.yml

+---
+title: Fix HTML not rendering in last commit widget
+merge_request: 38047
+author:
+type: fixed

spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
     imgcssclasses=""
     imgsize="40"
     imgsrc="https://test.com"
-    linkhref="https://test.com/test"
+    linkhref="/test"
     tooltipplacement="top"
     tooltiptext=""
     username=""
@@ -24,7 +24,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
     >
       <gl-link-stub
         class="commit-row-message item-title"
-        href="https://test.com/commit/123"
+        href="/commit/123"
       >
         Commit title
       </gl-link-stub>
@@ -36,7 +36,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
       >
         <gl-link-stub
           class="commit-author-link js-user-link"
-          href="https://test.com/test"
+          href="/test"
         >
           
             Test
@@ -110,7 +110,7 @@ exports[`Repository last commit component renders the signature HTML as returned
     imgcssclasses=""
     imgsize="40"
     imgsrc="https://test.com"
-    linkhref="https://test.com/test"
+    linkhref="/test"
     tooltipplacement="top"
     tooltiptext=""
     username=""
@@ -124,7 +124,7 @@ exports[`Repository last commit component renders the signature HTML as returned
     >
       <gl-link-stub
         class="commit-row-message item-title"
-        href="https://test.com/commit/123"
+        href="/commit/123"
       >
         Commit title
       </gl-link-stub>
@@ -136,7 +136,7 @@ exports[`Repository last commit component renders the signature HTML as returned
       >
         <gl-link-stub
           class="commit-author-link js-user-link"
-          href="https://test.com/test"
+          href="/test"
         >
           
             Test

spec/frontend/repository/components/last_commit_spec.js

@@ -11,12 +11,12 @@ function createCommitData(data = {}) {
     title: 'Commit title',
     titleHtml: 'Commit title',
     message: 'Commit message',
-    webUrl: 'https://test.com/commit/123',
+    webPath: '/commit/123',
     authoredDate: '2019-01-01',
     author: {
       name: 'Test',
       avatarUrl: 'https://test.com',
-      webUrl: 'https://test.com/test',
+      webPath: '/test',
     },
     pipeline: {
       detailedStatus: {
@@ -108,7 +108,7 @@ describe('Repository last commit component', () => {
   });
 
   it('does not render description expander when description is null', () => {
-    factory(createCommitData({ description: null }));
+    factory(createCommitData({ descriptionHtml: null }));
 
     return vm.vm.$nextTick(() => {
       expect(vm.find('.text-expander').exists()).toBe(false);
@@ -117,7 +117,7 @@ describe('Repository last commit component', () => {
   });
 
   it('expands commit description when clicking expander', () => {
-    factory(createCommitData({ description: 'Test description' }));
+    factory(createCommitData({ descriptionHtml: 'Test description' }));
 
     return vm.vm
       .$nextTick()

spec/frontend/repository/components/table/index_spec.js

@@ -13,7 +13,7 @@ const MOCK_BLOBS = [
     flatPath: 'blob',
     name: 'blob.md',
     type: 'blob',
-    webUrl: 'http://test.com',
+    webPath: '/blob',
   },
   {
     id: '124abc',