BXC-4796 - Limit bulk download access (#1838)

* Disentangling bulk download from file list to make it easier to get access to needed data * Styling updates to button * Limit zip download to authenticated or oncampus users. Server returns a property if the user has permission * Fix test * Fixing up style issues and getting more parts working with bulma 1.0 * Fix test and update readme * Convert search clearing links to buttons
UNC-Libraries · Nov 27, 2024 · 3984c4e · 3984c4e
1 parent 5c7ac30
commit 3984c4e
Show file tree

Hide file tree

Showing 25 changed files with 264 additions and 193 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ mvn -pl '!clamav-java' verify
 ### Running JavaScript tests
 ```
 # JavaScript Tests
-npm --prefix static/js/admin/vue-permissions-editor run test
+npm --prefix static/js/admin/vue-cdr-admin run test
 npm --prefix static/js/vue-cdr-access run test
 ```
 

diff --git a/auth-api/src/main/java/edu/unc/lib/boxc/auth/api/AccessPrincipalConstants.java b/auth-api/src/main/java/edu/unc/lib/boxc/auth/api/AccessPrincipalConstants.java
@@ -23,6 +23,7 @@ public class AccessPrincipalConstants {
     public final static String PATRON_NAMESPACE = "unc:patron:";
     public final static String IP_PRINC_NAMESPACE = PATRON_NAMESPACE + "ipp:";
     public final static String ADMIN_ACCESS_PRINC = "admin_access";
+    public final static String ON_CAMPUS_PRINC = "unc:patron:ipp:on_campus";
 
     public final static Pattern PATRON_PRINC_PATTERN =
             Pattern.compile("(" + PUBLIC_PRINC

diff --git a/static/css/sass/cdr_ui_styles.scss b/static/css/sass/cdr_ui_styles.scss
@@ -125,7 +125,7 @@ $box-shadow: inset 3px 3px 10px -1px $box-shadow-color, 0px 16px 22px -15px $box
 *
 **/
 .search-query-text {
-  margin: 40px 20px 40px 25px;
+  margin: 40px 20px 20px 25px;
   font-size: 24px;
 
   h2 {
@@ -147,13 +147,6 @@ form.search {
   }
 }
 
-.browse-search {
-  .button.is-focused,
-  .button:focus {
-    color: #363636;
-  }
-}
-
 a.search-result-num {
   background-color: $container-blue;
   color: white !important;
@@ -435,14 +428,18 @@ img.data-thumb {
   max-width: 60px;
 }
 
-.child-records {
-  font-size: 16px;
-  margin: 30px 50px 25px 50px;
+.file-list-header {
+  margin: 30px 0 5px;
 
   h3 {
     font-size: 16px;
-    margin-bottom: 30px;
+    margin: 0;
+    padding: 0;
   }
+}
+
+.child-records {
+  font-size: 16px;
 
   .fa.default-img-icon {
     font-size: 32px;
@@ -455,14 +452,6 @@ img.data-thumb {
     }
   }
 
-  .is-icon {
-    background-color: $container-blue;
-    border: 1px solid $container-blue;
-    border-radius: 5px;
-    color: white;
-    padding: 7px;
-  }
-
   .no-download {
     background-color: #B8B8B8;
     border-color: #B8B8B8;
@@ -822,11 +811,6 @@ table.dataTable {
   margin-bottom: 10px;
 }
 
-.button.is-focused,
-.button:focus {
-  color: white;
-}
-
 /* MODs display for work and file pages, plus modalMetadata.vue component */
 #mods_data_display {
   margin: auto;
@@ -1156,7 +1140,7 @@ iframe {
 
 .clover-viewer {
   margin: auto;
-  width: 90%;
+  width: 95%;
 }
 
 #information-toggle {

diff --git a/static/js/vue-cdr-access/src/assets/common-styles.css b/static/js/vue-cdr-access/src/assets/common-styles.css
@@ -35,17 +35,13 @@ a.button.is-link span {
     background-color: white;
 }
 
-.image-download-options button {
+.button.is-primary {
     background-color: #1A698C;
     color: white;
-    font-family: 'Open Sans', sans-serif;
-    height: 48px;
 }
 
-.image-download-options button:hover,
-.image-download-options button:focus {
+.button.is-primary:hover {
     background-color: #084b6b;
-    color: white;
 }
 
 .image-download-options a {

diff --git a/static/js/vue-cdr-access/src/components/clearFacetsButton.vue b/static/js/vue-cdr-access/src/components/clearFacetsButton.vue
@@ -2,9 +2,9 @@
 Button for clearing all currently active facets limiting the search.
 -->
 <template>
-    <a v-if="showButton" class="clear-all-facets button is-link is-small" @click.prevent="clearAllFacets()">{{ $t('facets.clear')}}
-        <i class="fas fa-times"></i>
-    </a>
+    <button v-if="showButton" class="clear-all-facets button is-primary" @click.prevent="clearAllFacets()"><span>{{ $t('facets.clear')}}</span>
+        <span class="icon"><i class="fas fa-times"></i></span>
+    </button>
 </template>
 <script>
 import routeUtils from '../mixins/routeUtils';
@@ -27,13 +27,4 @@ export default {
         }
     }
 };
-</script>
-
-<style scoped  lang="scss">
-    a {
-        margin-left: 5px;
-    }
-    i {
-        padding-left: 10px;
-    }
-</style>
+</script>
diff --git a/static/js/vue-cdr-access/src/components/clearFilters.vue b/static/js/vue-cdr-access/src/components/clearFilters.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="clear-options">
-        <a id="clear-results" class="button is-link is-small" v-bind:class="{ 'disabled' : !this.enableStartOverButton}"
-           href="#" @click.prevent="clearSearch">
-                {{ $t('search.clear_search')}} <i class="fas fa-times"></i></a>
+    <div class="clear-options field is-grouped">
+        <button id="clear-results" class="button is-primary"
+                v-bind:class="{ 'disabled' : !this.enableStartOverButton}"
+                @click.prevent="clearSearch">
+            <span>{{ $t('search.clear_search')}}</span><span class="icon"><i class="fas fa-times"></i></span>
+        </button>
         <clear-facets-button></clear-facets-button>
         <filter-tags :filter-parameters="filterParameters"></filter-tags>
     </div>
@@ -56,14 +58,10 @@ export default {
 </script>
 
 <style scoped  lang="scss">
-    i {
-        padding-left: 10px;
-    }
     .clear-options {
         display: inline-flex;
         flex-wrap: wrap;
-        margin-bottom: 10px;
-        margin-left: 35px;
-        margin-top: -20px
+        margin-bottom: 30px;
+        margin-left: 25px;
     }
 </style>
diff --git a/static/js/vue-cdr-access/src/components/filterTags.vue b/static/js/vue-cdr-access/src/components/filterTags.vue
@@ -2,18 +2,18 @@
 Displays tags for currently active filters in a search result, with the option to remove them
 -->
 <template>
-    <div>
-        <ul @click="updateQueryUrl">
-            <li data-type="anywhere" class="search-text" v-if="$route.query.anywhere">{{ $route.query.anywhere }}
-                <i class="fas fa-times" data-type="anywhere"></i></li>
-            <template v-for="searchText in searchQueryDisplay">
-                <li :data-type="searchText.type" :data-value="searchText.original_value" class="search-text" :title="searchText.value_text">
+    <div @click="updateQueryUrl" class="field is-grouped">
+        <button data-type="anywhere" class="button search-text" v-if="$route.query.anywhere"><span>{{ $route.query.anywhere }}</span>
+            <span class="icon"><i class="fas fa-times"></i></span></button>
+        <template v-for="searchText in searchQueryDisplay">
+            <button :data-type="searchText.type" :data-value="searchText.original_value" class="search-text button" :title="searchText.value_text">
+                <span>
                     {{ searchText.type_text }} <i class="fas fa-greater-than"></i>
                     {{ truncateText(searchText.value_text) }}
-                    <i class="fas fa-times" :data-type="searchText.type" :data-value="searchText.original_value"></i>
-                </li>
-            </template>
-        </ul>
+                </span>
+                <span class="icon"><i class="fas fa-times"></i></span>
+            </button>
+        </template>
     </div>
 </template>
 
@@ -66,7 +66,13 @@ export default {
         },
 
         _updateParams(event) {
-            const query_param = event.target.getAttribute('data-type');
+            // Find the button that was clicked, to deal with the button containing child elements
+            const button = event.target.closest('button');
+            if (!button) {
+                return;
+            }
+
+            const query_param = button.getAttribute('data-type');
             const params = Object.assign({}, this.$route.query);
             const tag = decodeURIComponent(params[query_param]).split('||');
 
@@ -147,38 +153,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    ul {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 10px;
-
-        &:hover {
-            cursor: pointer;
-        }
-
-        .search-text {
-            border: 1px solid lightgray;
-            border-radius: 5px;
-            font-size: .85rem;
-            margin-left: 5px;
-            padding-left: 7px;
-            text-indent: 0;
-            text-transform: capitalize;
-        }
-    }
-
-    i.fa-times {
-        background-color: #1A698C;
-        border: 1px solid #1A698C;
-        border-bottom-right-radius: 5px;
-        border-top-right-radius: 5px;
-        color: white;
-        margin-left: 5px;
-        padding: 7px;
-    }
-
     i.fa-greater-than {
-        color: #B0B0B0;
         font-size: .6rem;
     }
+
+    .delete.is-small {
+        margin-left: 6px;
+        margin-right: -5px;
+    }
 </style>
diff --git a/static/js/vue-cdr-access/src/components/full_record/adminUnit.vue b/static/js/vue-cdr-access/src/components/full_record/adminUnit.vue
@@ -1,8 +1,10 @@
 <template>
     <div>
         <div class="columns browse-top">
-            <div class="column">
+            <div class="column is-narrow">
                 <thumbnail :thumbnail-data="recordData"></thumbnail>
+            </div>
+            <div class="column">
                 <h2 :class="isDeleted">
                     {{ recordData.briefObject.title }}
                 </h2>

diff --git a/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue b/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue
@@ -62,16 +62,22 @@
                 </div>
             </div>
         </div>
-        <div class="full_record_bottom">
+        <div class="full_record_bottom container is-fluid">
             <player :record-data="recordData"></player>
-            <file-list v-if="childCount > 0" id="file-display"
-                       :child-count="childCount"
-                       :work-id="recordData.briefObject.id"
-                       :total-download-size="recordData.totalDownloadSize"
-                       :download-access="hasDownloadAccess(recordData)"
-                       :view-original-access="hasPermission(recordData, 'viewOriginal')"
-                       :edit-access="hasPermission(recordData,'editDescription')">
-            </file-list>
+            <template v-if="childCount > 0">
+                <div class="file-list-header columns is-vcentered">
+                    <h3 class="column">{{ $t('full_record.item_list') }} ({{ childCount }})</h3>
+                    <bulk-download :has-bulk-download-access="recordData.canBulkDownload"
+                                   :total-download-size="recordData.totalDownloadSize"
+                                   :work-id="recordData.briefObject.id">
+                    </bulk-download>
+                </div>
+                <file-list id="file-display"
+                           :work-id="recordData.briefObject.id"
+                           :download-access="hasDownloadAccess(recordData)"
+                           :edit-access="hasPermission(recordData,'editDescription')">
+                </file-list>
+            </template>
             <metadata-display :uuid="recordData.briefObject.id"
                               :can-view-metadata="hasPermission(recordData, 'viewMetadata')">
             </metadata-display>
@@ -91,11 +97,12 @@ import metadataDisplay from '@/components/full_record/metadataDisplay.vue';
 import neighborList from '@/components/full_record/neighborList.vue';
 import player from '@/components/full_record/player.vue';
 import restrictedContent from '@/components/full_record/restrictedContent.vue';
+import bulkDownload from "@/components/full_record/bulkDownload.vue";
 
 export default {
     name: 'aggregateRecord',
 
-    components: {abstract, fileList, neighborList, metadataDisplay, player, restrictedContent},
+    components: {bulkDownload, abstract, fileList, neighborList, metadataDisplay, player, restrictedContent},
 
     mixins: [fileUtils, fullRecordUtils],
 

diff --git a/static/js/vue-cdr-access/src/components/full_record/bulkDownload.vue b/static/js/vue-cdr-access/src/components/full_record/bulkDownload.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="hasDownloadableContent" class="actionlink column pr-0 is-justify-content-flex-end">
-        <a v-if="showTotalFilesize" class="bulk-download bulk-download-link button action" :href="downloadBulkUrl(workId)">
+    <div v-if="hasDownloadableContent" class="column pr-0 has-text-right">
+        <a v-if="showTotalFilesize" class="bulk-download bulk-download-link button action is-primary" :href="downloadBulkUrl(workId)">
                     <span class="icon">
                         <i class="fa fa-archive"></i>
                     </span>
@@ -31,7 +31,7 @@ export default {
             default: null,
             type: Number
         },
-        viewOriginalAccess: {
+        hasBulkDownloadAccess: {
             default: false,
             type: Boolean
         },
@@ -40,11 +40,11 @@ export default {
 
     computed: {
         hasDownloadableContent() {
-            return this.viewOriginalAccess && this.totalDownloadSize !== null;
+            return this.hasBulkDownloadAccess && this.totalDownloadSize !== null;
         },
 
         showTotalFilesize() {
-            return this.hasDownloadableContent && this.totalDownloadSize <= ONE_GIGABYTE;
+            return this.hasBulkDownloadAccess && this.totalDownloadSize <= ONE_GIGABYTE;
         }
     }
 }

diff --git a/static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue b/static/js/vue-cdr-access/src/components/full_record/collectionRecord.vue
@@ -1,8 +1,10 @@
 <template>
     <div class="content-wrap full_record">
         <div class="columns browse-top">
-            <div class="column" :class="{restrictedContent: 'is-8'}">
+            <div class="column is-narrow" :class="{restrictedContent: 'is-8'}">
                 <thumbnail :thumbnail-data="recordData"></thumbnail>
+            </div>
+            <div class="column">
                 <h2 :class="isDeleted">
                     {{ recordData.briefObject.title }}
                     <span class="item_container_count">{{ displayChildCount }}</span>