Remove bootstrap-icons dependency and update icon references to Font Awesome in various components

Author: johnsimons

src/Frontend/package-lock.json

@@ -26,7 +26,6 @@
     "@vue-flow/core": "^1.44.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "bootstrap": "^5.3.5",
-    "bootstrap-icons": "^1.13.1",
     "codemirror": "^6.0.1",
     "diff": "^7.0.0",
     "hex-to-css-filter": "^6.0.0",

src/Frontend/package.json

@@ -1,5 +1,4 @@
 @import "bootstrap/dist/css/bootstrap.css";
-@import "bootstrap-icons/font/bootstrap-icons.css";
 @import "font-awesome/css/font-awesome.css";
 @import "footer.css";
 @import "tabs.css";

src/Frontend/src/assets/main.css

@@ -85,10 +85,10 @@ onMounted(() => {
     <ul class="dropdown-menu">
       <span v-for="(sort, index) in getSortOptions()" :key="index">
         <li>
-          <button @click="sortUpdated(sort, SortDirection.Ascending)"><i class="bi" :class="`${sort.icon}up`"></i>{{ sort.description }}</button>
+          <button @click="sortUpdated(sort, SortDirection.Ascending)"><i class="fa" :class="`${sort.icon}asc`"></i>{{ sort.description }}</button>
         </li>
         <li>
-          <button @click="sortUpdated(sort, SortDirection.Descending)"><i class="bi" :class="`${sort.icon}down`"></i>{{ sort.description }}<span> (Descending)</span></button>
+          <button @click="sortUpdated(sort, SortDirection.Descending)"><i class="fa" :class="`${sort.icon}desc`"></i>{{ sort.description }}<span> (Descending)</span></button>
         </li>
       </span>
     </ul>
@@ -98,7 +98,7 @@ onMounted(() => {
 <style scoped>
 @import "@/assets/dropdown.css";
 
-.dropdown-menu .bi {
+.dropdown-menu .fa {
   padding-right: 5px;
 }
 

src/Frontend/src/components/OrderBy.vue

@@ -29,27 +29,27 @@ const sortOptions: SortOptions<GroupOperation>[] = [
   {
     description: "Name",
     selector: (group) => group.title,
-    icon: "bi-sort-alpha-",
+    icon: "fa-sort-alpha-",
   },
   {
     description: "Number of messages",
     selector: (group) => group.count,
-    icon: "bi-sort-numeric-",
+    icon: "fa-sort-numeric-",
   },
   {
     description: "First Failed Time",
     selector: (group) => group.first!,
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
   {
     description: "Last Failed Time",
     selector: (group) => group.last!,
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
   {
     description: "Last Retried Time",
     selector: (group) => group.last_operation_completion_time!,
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
 ];
 

src/Frontend/src/components/failedmessages/FailedMessageGroups.vue

@@ -36,11 +36,11 @@ const messages = ref<ExtendedFailedMessage[]>([]);
 const sortOptions: SortOptions<GroupOperation>[] = [
   {
     description: "Time of failure",
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
   {
     description: "Message Type",
-    icon: "bi-sort-alpha-",
+    icon: "fa-sort-alpha-",
   },
 ];
 

src/Frontend/src/components/failedmessages/FailedMessages.vue

@@ -111,16 +111,16 @@ const endpointColor = hexToCSSFilter("#929E9E").filter;
               <p class="lead break">{{ message.message_type || "Message Type Unknown - missing metadata EnclosedMessageTypes" }}</p>
               <p class="metadata">
                 <span v-if="message.submittedForRetrial" :title="'Message was submitted for retrying'" class="label sidebar-label label-info metadata-label">To retry</span>
-                <span v-if="message.retryInProgress" :title="'Message is being retried'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="bi-arrow-clockwise"></i> Retry in progress</span>
-                <span v-if="message.retried" :title="'Message is being retried'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="bi-arrow-clockwise"></i> Retried</span>
+                <span v-if="message.retryInProgress" :title="'Message is being retried'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="fa fa-repeat"></i> Retry in progress</span>
+                <span v-if="message.retried" :title="'Message is being retried'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="fa fa-repeat"></i> Retried</span>
                 <span v-if="message.resolved" class="label sidebar-label label-info metadata-label">Resolved</span>
 
-                <span v-if="message.deleteInProgress" :title="'Message is being deleted'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="bi-trash"></i> Scheduled for deletion</span>
-                <span v-if="message.archived" :title="'Message is being deleted'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="bi-trash"></i> Deleted</span>
+                <span v-if="message.deleteInProgress" :title="'Message is being deleted'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="fa fa-trash"></i> Scheduled for deletion</span>
+                <span v-if="message.archived" :title="'Message is being deleted'" class="label sidebar-label label-info metadata-label metadata in-progress"><i class="fa fa-trash"></i> Deleted</span>
                 <span v-if="message.number_of_processing_attempts > 1" :title="`This message has already failed ${message.number_of_processing_attempts} times`" class="label sidebar-label label-important metadata-label"
                   >{{ message.number_of_processing_attempts === 10 ? "9+" : message.number_of_processing_attempts - 1 }} Retry Failures</span
                 >
-                <span v-if="message.restoreInProgress" v-tippy="`Message is being restored`" class="label sidebar-label label-warning metadata-label metadata in-progress"><i class="bi-recycle"></i> Restore in progress</span>
+                <span v-if="message.restoreInProgress" v-tippy="`Message is being restored`" class="label sidebar-label label-warning metadata-label metadata in-progress"><i class="fa fa-recycle"></i> Restore in progress</span>
                 <span v-if="message.edited" :title="'Message was edited'" class="label sidebar-label label-info metadata-label">Edited</span>
 
                 <span class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :dateUtc="message.time_of_failure"></time-since></span>

src/Frontend/src/components/failedmessages/MessageList.vue

@@ -38,15 +38,15 @@ const isInitialLoad = ref(true);
 const sortOptions: SortOptions<GroupOperation>[] = [
   {
     description: "Time of failure",
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
   {
     description: "Message Type",
-    icon: "bi-sort-alpha-",
+    icon: "fa-sort-alpha-",
   },
   {
     description: "Time of retry request",
-    icon: "bi-sort-",
+    icon: "fa-sort-amount-",
   },
 ];
 const periodOptions = ["All Pending Retries", "Retried in the last 2 Hours", "Retried in the last 1 Day", "Retried in the last 7 Days"];

src/Frontend/src/components/failedmessages/PendingRetries.vue

@@ -52,10 +52,6 @@ export default defineConfig({
         find: "~bootstrap",
         replacement: path.resolve(__dirname, "node_modules/bootstrap"),
       },
-      {
-        find: "~bootstrap-icons",
-        replacement: path.resolve(__dirname, "node_modules/bootstrap-icons"),
-      },
     ],
   },
   base: "./",