Ap 587 update dependencies (#25)

* Updated CHANGES.md

* fixes issue with vue rendering icons in production environment

Author: davezuckerman

app/javascript/items/components/ItemRow.vue

@@ -1,7 +1,7 @@
 <template>
   <tr class="item">
     <td class="control">
-      <a :href="item.edit_url" class="icon-link" target="_blank" :title="`Edit “${item.title}”`"><img src="/assets/icons/edit.svg" :alt="`Edit “${item.title}”`" class="action"></a>
+      <a :href="item.edit_url" class="icon-link" target="_blank" :title="`Edit “${item.title}”`"><img :src="icons.edit" :alt="`Edit “${item.title}”`" class="action"></a>
     </td>
     <td>
       <p class="title">
@@ -16,10 +16,10 @@
       </p>
     </td>
     <td class="control">
-      <a :href="item.show_url" class="icon-link" target="_blank" :title="`Admin view of “${item.title}”`"><img src="/assets/icons/eye.svg" :alt="`Admin view of “${item.title}”`" class="action"></a>
+      <a :href="item.show_url" class="icon-link" target="_blank" :title="`Admin view of “${item.title}”`"><img :src="icons.eye" :alt="`Admin view of “${item.title}”`" class="action"></a>
     </td>
     <td class="control">
-      <a :href="item.view_url" class="icon-link" target="_blank" :title="`Permalink to “${item.title}” patron view`"><img src="/assets/icons/link.svg" :alt="`Permalink to “${item.title}” patron view`" class="action"></a>
+      <a :href="item.view_url" class="icon-link" target="_blank" :title="`Permalink to “${item.title}” patron view`"><img :src="icons.link" :alt="`Permalink to “${item.title}” patron view`" class="action"></a>
     </td>
     <td class="date">{{ formatDateTime(item.updated_at) }}</td>
     <td v-if="item.complete" class="control">Yes</td>
@@ -56,7 +56,7 @@
     </td>
     <td class="control">
       <button class="delete" :disabled="item.complete" :title="item.complete ? 'Only incomplete items can be deleted.' : `Delete “${item.title}”`" @click="deleteItem">
-        <img class="action" :alt="`Delete “${item.title}”`" src="/assets/icons/trash-alt.svg">
+        <img class="action" :alt="`Delete “${item.title}”`" :src="icons.trash_alt">
       </button>
     </td>
   </tr>
@@ -65,8 +65,23 @@
 <script>
 import i18n from '../../shared/mixins/i18n.js'
 
+const iconPath = function (name) {
+  const icons = window.UCBEARS_ASSETS?.icons
+  return icons?.[name] || `/assets/icons/${name}.svg`
+}
+
 export default {
   mixins: [i18n],
+  data: function () {
+    return {
+      icons: {
+        edit: iconPath('edit'),
+        eye: iconPath('eye'),
+        link: iconPath('link'),
+        trash_alt: iconPath('trash_alt')
+      }
+    }
+  },
   props: {
     item: { type: Object, default: () => {} },
     allTerms: { type: Array, default: () => [] }

app/javascript/shared/components/FlashAlerts.vue

@@ -11,7 +11,7 @@
       >
       <div :class="`flash ${message.level}`">
         <label :for="`flash-dismiss-${index}`" class="flash-dismiss-label">
-          <img src="/assets/icons/times-circle.svg" class="flash-dismiss-icon" alt="Hide alert">
+          <img :src="timesCircleIcon" class="flash-dismiss-icon" alt="Hide alert">
         </label>
         <p class="flash" role="alert">{{ message.text }}</p>
       </div>
@@ -21,7 +21,17 @@
 
 <script>
 
+const iconPath = function (name) {
+  const icons = window.UCBEARS_ASSETS?.icons
+  return icons?.[name] || `/assets/icons/${name}.svg`
+}
+
 export default {
+  data: function () {
+    return {
+      timesCircleIcon: iconPath('times_circle')
+    }
+  },
   props: {
     messages: { type: Array, default: () => [] }
   },

app/javascript/terms/components/TermRow.vue

@@ -57,7 +57,7 @@
     <td class="control">{{ term.item_count }}</td>
     <td class="control">
       <button :id="`term-${term.id}-delete`" :disabled="term.default_term" class="delete" :title="term.default_term ? 'The current default term cannot be deleted.' : `Delete term “${term.name}”`" @click="deleteTerm">
-        <img class="action" :alt="`Delete “${term.name}”`" src="/assets/icons/trash-alt.svg">
+        <img class="action" :alt="`Delete “${term.name}”`" :src="trashIcon">
       </button>
     </td>
   </tr>
@@ -66,13 +66,19 @@
 <script>
 import i18n from '../../shared/mixins/i18n.js'
 
+const iconPath = function (name) {
+  const icons = window.UCBEARS_ASSETS?.icons
+  return icons?.[name] || `/assets/icons/${name}.svg`
+}
+
 export default {
   mixins: [i18n],
   props: {
     term: { type: Object, default: () => ({}) }
   },
   data: function () {
     return ({
+      trashIcon: iconPath('trash_alt'),
       shadowStartDate: this.term.start_date,
       shadowEndDate: this.term.end_date
     })

app/views/layouts/application.html.erb

@@ -9,6 +9,16 @@
     <%= csp_meta_tag %>
 
     <link rel="stylesheet" href="https://use.typekit.net/rxa5jay.css">
+    <% icon_assets = {
+      edit: asset_path('icons/edit.svg'),
+      eye: asset_path('icons/eye.svg'),
+      link: asset_path('icons/link.svg'),
+      times_circle: asset_path('icons/times-circle.svg'),
+      trash_alt: asset_path('icons/trash-alt.svg')
+    } %>
+    <%= javascript_tag nonce: true do %>
+      window.UCBEARS_ASSETS = <%= raw json_escape({ icons: icon_assets }.to_json) %>;
+    <% end %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true, type: "module" %>
     <%= javascript_include_tag "items", "data-turbo-track": "reload", defer: true %>
     <%= javascript_include_tag "terms", "data-turbo-track": "reload", defer: true %>