Only show previewable files in Vue file listing

Closes https://gitlab.com/gitlab-org/gitlab/issues/36150

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

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <template>
-  <article class="file-holder js-hide-on-navigation limited-width-container readme-holder">
+  <article class="file-holder limited-width-container readme-holder">
     <div class="file-title">
       <i aria-hidden="true" class="fa fa-file-text-o fa-fw"></i>
       <gl-link :href="blob.webUrl">

app/assets/javascripts/repository/utils/readme.js

@@ -3,7 +3,11 @@ const ASCIIDOC_EXTENSIONS = ['adoc', 'ad', 'asciidoc'];
 const OTHER_EXTENSIONS = ['textile', 'rdoc', 'org', 'creole', 'wiki', 'mediawiki', 'rst'];
 const EXTENSIONS = [...MARKDOWN_EXTENSIONS, ...ASCIIDOC_EXTENSIONS, ...OTHER_EXTENSIONS];
 const PLAIN_FILENAMES = ['readme', 'index'];
-const FILE_REGEXP = new RegExp(`^(${PLAIN_FILENAMES.join('|')})`, 'i');
+const FILE_REGEXP = new RegExp(
+  `^(${PLAIN_FILENAMES.join('|')})(.(${EXTENSIONS.join('|')}))?$`,
+  'i',
+);
+const PLAIN_FILE_REGEXP = new RegExp(`^(${PLAIN_FILENAMES.join('|')})`, 'i');
 const EXTENSIONS_REGEXP = new RegExp(`.(${EXTENSIONS.join('|')})$`, 'i');
 
 // eslint-disable-next-line import/prefer-default-export
@@ -11,7 +15,7 @@ export const readmeFile = blobs => {
   const readMeFiles = blobs.filter(f => f.name.search(FILE_REGEXP) !== -1);
 
   const previewableReadme = readMeFiles.find(f => f.name.search(EXTENSIONS_REGEXP) !== -1);
-  const plainReadme = readMeFiles.find(f => f.name.search(FILE_REGEXP) !== -1);
+  const plainReadme = readMeFiles.find(f => f.name.search(PLAIN_FILE_REGEXP) !== -1);
 
   return previewableReadme || plainReadme;
 };

spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Repository file preview component renders file HTML 1`] = `
 <article
-  class="file-holder js-hide-on-navigation limited-width-container readme-holder"
+  class="file-holder limited-width-container readme-holder"
 >
   <div
     class="file-title"

spec/frontend/repository/components/tree_content_spec.js

@@ -28,7 +28,7 @@ describe('Repository table component', () => {
   it('renders file preview', () => {
     factory('/');
 
-    vm.setData({ entries: { blobs: [{ name: 'README.md ' }] } });
+    vm.setData({ entries: { blobs: [{ name: 'README.md' }] } });
 
     expect(vm.find(FilePreview).exists()).toBe(true);
   });

spec/frontend/repository/utils/readme_spec.js

+import { readmeFile } from '~/repository/utils/readme';
+
+describe('readmeFile', () => {
+  describe('markdown files', () => {
+    it('returns markdown file', () => {
+      expect(readmeFile([{ name: 'README' }, { name: 'README.md' }])).toEqual({
+        name: 'README.md',
+      });
+
+      expect(readmeFile([{ name: 'README' }, { name: 'index.md' }])).toEqual({
+        name: 'index.md',
+      });
+    });
+  });
+
+  describe('plain files', () => {
+    it('returns plain file', () => {
+      expect(readmeFile([{ name: 'README' }, { name: 'TEST.md' }])).toEqual({
+        name: 'README',
+      });
+
+      expect(readmeFile([{ name: 'readme' }, { name: 'TEST.md' }])).toEqual({
+        name: 'readme',
+      });
+    });
+  });
+
+  describe('non-previewable file', () => {
+    it('returns undefined', () => {
+      expect(readmeFile([{ name: 'index.js' }, { name: 'TEST.md' }])).toBe(undefined);
+    });
+  });
+});