adds translated user friendly string for files with no name

contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue

@@ -28,7 +28,8 @@
               <ActionLink
                 v-if="fileDisplay"
                 class="notranslate"
-                :text="fileDisplay.original_filename"
+                :text="formattedFileDisplay"
+                data-test="file-link"
                 @click="openFileDialog"
               />
               <ActionLink
@@ -133,6 +134,13 @@
         }
         return this.file;
       },
+      formattedFileDisplay() {
+        const fileName = this.fileDisplay.original_filename;
+        if (fileName === 'file' || !fileName) {
+          return this.$tr('unknownFile');
+        }
+        return fileName;
+      },
       erroredFile() {
         if (this.fileUpload && this.fileUpload.error) {
           return this.fileUpload;
@@ -166,6 +174,7 @@
       /* eslint-disable kolibri/vue-no-unused-translations */
       retryUpload: 'Retry upload',
       uploadFailed: 'Upload failed',
+      unknownFile: 'Unknown filename',
       /* eslint-enable kolibri/vue-no-unused-translations */
     },
   };

contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUploadItem.spec.js

@@ -29,6 +29,28 @@ function makeWrapper(props = {}, file = {}) {
 
 describe('fileUploadItem', () => {
   describe('render', () => {
+    it("'Unknown filename' should be displayed if original_filename is 'file'", () => {
+      let file = {
+        original_filename: 'file',
+      };
+      let wrapper = makeWrapper({}, file);
+      expect(wrapper.find('[data-test="file-link"]').text()).toBe('Unknown filename');
+    });
+    it("'Unknown filename' should be displayed if original_filename is ''", () => {
+      let file = {
+        original_filename: '',
+      };
+      let wrapper = makeWrapper({}, file);
+      expect(wrapper.find('[data-test="file-link"]').text()).toBe('Unknown filename');
+    });
+    it("original_filename should be displayed if its value is not 'file'", () => {
+      let file = {
+        id: 'file-1',
+        original_filename: 'SomeFileName',
+      };
+      let wrapper = makeWrapper({}, file);
+      expect(wrapper.find('[data-test="file-link"]').text()).toBe('SomeFileName');
+    });
     it('should show a status error if the file has an error', () => {
       let wrapper = makeWrapper({}, { error: true });
       expect(wrapper.find('[data-test="status"]').exists()).toBe(true);