Refactor file list into separate components for items/overall list

webapp/cypress/e2e/editPage.cy.js

@@ -252,7 +252,7 @@ describe("Edit Page", () => {
     cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
 
-    cy.findByText("Upload files...").click();
+    cy.findByText("Upload files").click();
     cy.get(".uppy-Dashboard-AddFiles-title").should("contain.text", "Drop files here,");
     cy.get(".uppy-Dashboard-AddFiles-title").should("contain.text", "browse files");
     cy.get(".uppy-Dashboard-AddFiles-title").should("contain.text", "or import from:");

webapp/src/components/FileList.vue

@@ -3,77 +3,44 @@
     <label class="mr-2">Files</label>
     <div class="card">
       <div id="filearea" class="card-body overflow-auto">
-        <div v-for="(file, file_id) in stored_files" :key="file_id" class="file-group">
-          <a @click="deleteFile($event, file_id)">
-            <font-awesome-icon icon="times" fixed-width class="delete-file-button" />
-          </a>
-          <a class="filelink" target="_blank" :href="`${$API_URL}/files/${file_id}/${file.name}`">
-            {{ file.name }}
-          </a>
-          <font-awesome-icon
-            v-if="file.is_live == true"
-            v-show="true"
-            class="link-icon"
-            :icon="['fa', 'link']"
-          />
-          <font-awesome-icon
-            v-else-if="file.source_server_name != null"
-            v-show="true"
-            class="unlink-icon"
-            :icon="['fa', 'unlink']"
-          />
-          <span v-if="file.source_server_name != null">
-            <span class="server-name">
-              <font-awesome-icon :icon="['fas', 'hdd']" class="toplevel-icon" />
-              {{ file.source_server_name }}
-            </span>
-            <span class="last-updated-text">
-              (updated
-              {{
-                formatDistance(new Date(file.last_modified_remote), new Date(), {
-                  addSuffix: true,
-                })
-              }}, last synced
-              {{
-                formatDistance(new Date(file.last_modified), new Date(), {
-                  addSuffix: true,
-                })
-              }})
-            </span>
-          </span>
-          <span v-else class="last-updated-text">
-            (uploaded
-            {{
-              formatDistance(new Date(file.last_modified), new Date(), {
-                addSuffix: true,
-              })
-            }})
-          </span>
-        </div>
+        <FileListItem
+          v-for="(file, file_id) in stored_files"
+          :key="file_id"
+          :file="file"
+          :file-id="file_id"
+          @delete-file-from-sample="deleteFile"
+        />
       </div>
       <div class="row">
-        <button id="uppy-trigger" class="btn btn-default btn-sm mb-3 ml-4" type="button">
+        <button
+          id="uppy-trigger"
+          class="btn btn-default btn-sm mb-3 ml-4 text-start d-flex align-items-center"
+          type="button"
+        >
           <font-awesome-icon class="upload-icon" icon="file" fixed-width />
-          Upload files...</button
-        ><!-- Surrounding divs so that buttons  don't become full-width in the card -->
+          <span class="ms-1">Upload files</span>
+        </button>
         <button
-          class="btn btn-default btn-sm mb-3 ml-2"
+          class="btn btn-default btn-sm mb-3 ml-2 text-start d-flex align-items-center"
           type="button"
           @click="setFileSelectModalOpen"
         >
           <font-awesome-icon class="remote-upload-icon" icon="cloud-upload-alt" fixed-width />
-          Add files from server...
+          <span class="ms-1">Add files from server</span>
         </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import FileListItem from "./FileListItem.vue";
 import { deleteFileFromSample } from "@/server_fetch_utils";
-import { formatDistance } from "date-fns";
 
 export default {
+  components: {
+    FileListItem,
+  },
   props: {
     item_id: {
       type: String,
@@ -90,8 +57,7 @@ export default {
     };
   },
   methods: {
-    formatDistance,
-    deleteFile(event, file_id) {
+    deleteFile(file_id) {
       deleteFileFromSample(this.item_id, file_id);
       return false;
     },
@@ -120,7 +86,8 @@ export default {
 .unlink-icon,
 .upload-icon,
 .remote-upload-icon {
-  margin-left: 0.4rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
   color: #888;
   font-size: small;
 }
@@ -132,25 +99,5 @@ export default {
 
 #uppy-trigger {
   scroll-anchor: auto;
-  width: 8rem;
-}
-
-.last-updated-text {
-  font-size: 0.8em;
-  color: #888;
-  font-style: italic;
-  vertical-align: middle;
-}
-
-.server-name {
-  font-family: "Andalé Mono", monospace;
-  font-weight: 400;
-  /*font-style: italic;*/
-  color: teal;
-  border: solid 1px teal;
-  padding: 0.1rem 0.25rem;
-  margin-left: 0.5rem;
-  border-radius: 0.2rem;
-  font-size: 0.8em;
 }
 </style>

webapp/src/components/FileListItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="file-group">
+    <a @click="onDelete">
+      <font-awesome-icon icon="times" fixed-width class="delete-file-button" />
+    </a>
+    <a class="filelink" target="_blank" :href="`${$API_URL}/files/${fileId}/${file.name}`">
+      {{ file.name }}
+    </a>
+    <font-awesome-icon v-if="file.is_live === true" class="link-icon" :icon="['fa', 'link']" />
+    <font-awesome-icon
+      v-else-if="file.source_server_name != null"
+      class="unlink-icon"
+      :icon="['fa', 'unlink']"
+    />
+    <span v-if="file.source_server_name != null">
+      <span class="server-name">
+        <font-awesome-icon :icon="['fas', 'hdd']" class="toplevel-icon" />
+        {{ file.source_server_name }}
+      </span>
+      <span class="last-updated-text">
+        (updated
+        {{
+          formatDistance(new Date(file.last_modified_remote), new Date(), {
+            addSuffix: true,
+          })
+        }}, last synced
+        {{
+          formatDistance(new Date(file.last_modified), new Date(), {
+            addSuffix: true,
+          })
+        }})
+      </span>
+    </span>
+    <span v-else class="last-updated-text">
+      (uploaded
+      {{
+        formatDistance(new Date(file.last_modified), new Date(), {
+          addSuffix: true,
+        })
+      }})
+    </span>
+  </div>
+</template>
+
+<script>
+import { formatDistance } from "date-fns";
+
+export default {
+  name: "FileListItem",
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    fileId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["deleteFileFromSample"],
+  methods: {
+    formatDistance,
+    onDelete() {
+      this.$emit("deleteFileFromSample", this.fileId);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.file-group {
+  padding: 0.25rem 0rem;
+}
+
+.filelink {
+  color: #004175;
+  font-family: "Andalé Mono", monospace;
+}
+
+.filelink:hover {
+  text-decoration: none;
+}
+
+.delete-file-button {
+  color: #888;
+  margin-right: 0.1rem;
+}
+
+.delete-file-button:hover {
+  color: black;
+}
+
+.link-icon,
+.unlink-icon,
+.upload-icon,
+.remote-upload-icon {
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  color: #888;
+  font-size: small;
+}
+
+.last-updated-text {
+  font-size: 0.8em;
+  color: #888;
+  font-style: italic;
+  vertical-align: middle;
+}
+
+.server-name {
+  font-family: "Andalé Mono", monospace;
+  font-weight: 400;
+  /*font-style: italic;*/
+  color: teal;
+  border: solid 1px teal;
+  padding: 0.1rem 0.25rem;
+  margin-left: 0.5rem;
+  border-radius: 0.2rem;
+  font-size: 0.8em;
+}
+</style>