Merge branch 'ph/fixRepositoryApolloId' into 'master'

Fix Apollo throwing error with specific path names

See merge request gitlab-org/gitlab!24810

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

 <script>
+import { escapeRegExp } from 'lodash';
 import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -105,7 +106,7 @@ export default {
       return this.isFolder ? 'router-link' : 'a';
     },
     fullPath() {
-      return this.path.replace(new RegExp(`^${this.currentPath}/`), '');
+      return this.path.replace(new RegExp(`^${escapeRegExp(this.currentPath)}/`), '');
     },
     shortSha() {
       return this.sha.slice(0, 8);

app/assets/javascripts/repository/graphql.js

@@ -48,7 +48,7 @@ const defaultClient = createDefaultClient(
           case 'TreeEntry':
           case 'Submodule':
           case 'Blob':
-            return `${obj.flatPath}-${obj.id}`;
+            return `${escape(obj.flatPath)}-${obj.id}`;
           default:
             // If the type doesn't match any of the above we fallback
             // to using the default Apollo ID

spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap

@@ -48,3 +48,52 @@ exports[`Repository table row component renders table row 1`] = `
   </td>
 </tr>
 `;
+
+exports[`Repository table row component renders table row for path with special character 1`] = `
+<tr
+  class="tree-item file_1"
+>
+  <td
+    class="tree-item-file-name"
+  >
+    <i
+      aria-label="file"
+      class="fa fa-fw fa-file-text-o"
+      role="img"
+    />
+     
+    <a
+      class="str-truncated"
+      href="https://test.com"
+    >
+      
+      test
+    
+    </a>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+  </td>
+   
+  <td
+    class="d-none d-sm-table-cell tree-commit"
+  >
+    <gl-skeleton-loading-stub
+      class="h-auto"
+      lines="1"
+    />
+  </td>
+   
+  <td
+    class="tree-time-ago text-right"
+  >
+    <gl-skeleton-loading-stub
+      class="ml-auto h-auto w-50"
+      lines="1"
+    />
+  </td>
+</tr>
+`;

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

@@ -51,6 +51,20 @@ describe('Repository table row component', () => {
     });
   });
 
+  it('renders table row for path with special character', () => {
+    factory({
+      id: '1',
+      sha: '123',
+      path: 'test$/test',
+      type: 'file',
+      currentPath: 'test$',
+    });
+
+    return vm.vm.$nextTick().then(() => {
+      expect(vm.element).toMatchSnapshot();
+    });
+  });
+
   it.each`
     type        | component         | componentName
     ${'tree'}   | ${RouterLinkStub} | ${'RouterLink'}