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

johnsimons · johnsimons · commit bc1f418e8be4 · 2025-06-06T16:00:51.000+10:00
diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
diff --git a/src/Frontend/package.json b/src/Frontend/package.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",
diff --git a/src/Frontend/src/assets/main.css b/src/Frontend/src/assets/main.css
@@ -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";
diff --git a/src/Frontend/src/components/failedmessages/FailedMessageGroups.vue b/src/Frontend/src/components/failedmessages/FailedMessageGroups.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-",
   },
 ];
 
diff --git a/src/Frontend/src/components/failedmessages/FailedMessages.vue b/src/Frontend/src/components/failedmessages/FailedMessages.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-",
   },
 ];
 
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.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>
@@ -312,7 +312,7 @@ p.metadata button {
 }
 
 .failed-message-data:hover .lead.break,
-.failed-message-group:hover .lead.break,
+.failed-message_group:hover .lead.break,
 .deleted-message-group:hover .lead.break {
   text-decoration: underline;
 }
diff --git a/src/Frontend/src/components/failedmessages/PendingRetries.vue b/src/Frontend/src/components/failedmessages/PendingRetries.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"];
diff --git a/src/Frontend/vite.config.ts b/src/Frontend/vite.config.ts
@@ -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: "./",

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`@import "bootstrap/dist/css/bootstrap.css";`
`2`		`-@import "bootstrap-icons/font/bootstrap-icons.css";`
`3`	`2`	`@import "font-awesome/css/font-awesome.css";`
`4`	`3`	`@import "footer.css";`
`5`	`4`	`@import "tabs.css";`
Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,11 @@ const messages = ref<ExtendedFailedMessage[]>([]);`
`36`	`36`	`const sortOptions: SortOptions<GroupOperation>[] = [`
`37`	`37`	`{`
`38`	`38`	`description: "Time of failure",`
`39`		`- icon: "bi-sort-",`
	`39`	`+ icon: "fa-sort-amount-",`
`40`	`40`	`},`
`41`	`41`	`{`
`42`	`42`	`description: "Message Type",`
`43`		`- icon: "bi-sort-alpha-",`
	`43`	`+ icon: "fa-sort-alpha-",`
`44`	`44`	`},`
`45`	`45`	`];`
`46`	`46`
Original file line number	Diff line number	Diff line change
`@@ -38,15 +38,15 @@ const isInitialLoad = ref(true);`
`38`	`38`	`const sortOptions: SortOptions<GroupOperation>[] = [`
`39`	`39`	`{`
`40`	`40`	`description: "Time of failure",`
`41`		`- icon: "bi-sort-",`
	`41`	`+ icon: "fa-sort-amount-",`
`42`	`42`	`},`
`43`	`43`	`{`
`44`	`44`	`description: "Message Type",`
`45`		`- icon: "bi-sort-alpha-",`
	`45`	`+ icon: "fa-sort-alpha-",`
`46`	`46`	`},`
`47`	`47`	`{`
`48`	`48`	`description: "Time of retry request",`
`49`		`- icon: "bi-sort-",`
	`49`	`+ icon: "fa-sort-amount-",`
`50`	`50`	`},`
`51`	`51`	`];`
`52`	`52`	`const periodOptions = ["All Pending Retries", "Retried in the last 2 Hours", "Retried in the last 1 Day", "Retried in the last 7 Days"];`