From e92ec99664ad76ca4539b3e13dacc0740584ad59 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@dalibo.com>
Date: Wed, 21 Aug 2024 14:32:14 +0200
Subject: [PATCH] Replace deprecated text-muted bootstrap class

---
 example/src/views/AboutView.vue   |  2 +-
 example/src/views/HomeView.vue    | 16 ++++++++++------
 src/assets/scss/_base.scss        |  2 +-
 src/assets/scss/_plan-node.scss   |  2 +-
 src/assets/scss/_plan.scss        |  4 ++--
 src/components/Diagram.vue        |  4 ++--
 src/components/DiagramRow.vue     |  4 ++--
 src/components/GridRow.vue        | 20 ++++++++++----------
 src/components/MiscDetail.vue     |  2 +-
 src/components/NodeBadges.vue     |  2 +-
 src/components/PlanNode.vue       | 28 +++++++++++++++-------------
 src/components/PlanNodeDetail.vue | 20 ++++++++++----------
 src/components/PlanStats.vue      | 20 ++++++++++----------
 src/components/WorkersDetail.vue  |  2 +-
 src/filters.ts                    |  2 +-
 15 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/example/src/views/AboutView.vue b/example/src/views/AboutView.vue
index 1fc8b209..e6df7e4c 100644
--- a/example/src/views/AboutView.vue
+++ b/example/src/views/AboutView.vue
@@ -48,7 +48,7 @@ import MainLayout from "../layouts/MainLayout.vue"
       </p>
 
       <hr />
-      <div class="text-center text-muted">
+      <div class="text-center text-secondary">
         <b>pev2</b> is brought to you by
         <a href="https://dalibo.com">Dalibo</a>
       </div>
diff --git a/example/src/views/HomeView.vue b/example/src/views/HomeView.vue
index 858b5bab..465aaad8 100644
--- a/example/src/views/HomeView.vue
+++ b/example/src/views/HomeView.vue
@@ -163,7 +163,7 @@ function handleDrop(event: DragEvent) {
       </div>
       <div class="row mb-3">
         <div class="col d-flex">
-          <div class="text-muted">
+          <div class="text-secondary">
             For best results, use
             <code>
               EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)
@@ -202,7 +202,7 @@ function handleDrop(event: DragEvent) {
           <form v-on:submit.prevent="submitPlan">
             <div class="mb-3">
               <label for="planInput" class="form-label">
-                Plan <span class="small text-muted">(text or JSON)</span>
+                Plan <span class="small text-secondary">(text or JSON)</span>
               </label>
               <textarea
                 :class="['form-control', draggingPlan ? 'dropzone-over' : '']"
@@ -218,7 +218,7 @@ function handleDrop(event: DragEvent) {
             </div>
             <div class="mb-3">
               <label for="queryInput" class="form-label">
-                Query <span class="small text-muted">(optional)</span>
+                Query <span class="small text-secondary">(optional)</span>
               </label>
               <textarea
                 :class="['form-control', draggingQuery ? 'dropzone-over' : '']"
@@ -234,7 +234,7 @@ function handleDrop(event: DragEvent) {
             </div>
             <div class="mb-3">
               <label for="queryName" class="form-label">
-                Plan Name <span class="small text-muted">(optional)</span>
+                Plan Name <span class="small text-secondary">(optional)</span>
               </label>
               <input
                 type="text"
@@ -282,7 +282,7 @@ function handleDrop(event: DragEvent) {
               </div>
               <div class="row">
                 <div class="col">
-                  <small class="text-muted">
+                  <small class="text-secondary">
                     created
                     <span :title="plan[3]?.toString()">
                       {{ time_ago(plan[3]) }}
@@ -293,7 +293,11 @@ function handleDrop(event: DragEvent) {
               </div>
             </li>
           </ul>
-          <p class="text-muted text-center" v-if="!savedPlans?.length" v-cloak>
+          <p
+            class="text-secondary text-center"
+            v-if="!savedPlans?.length"
+            v-cloak
+          >
             <em> You haven't saved any plan yet.</em>
           </p>
         </div>
diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
index c07b7e43..1719c6bb 100644
--- a/src/assets/scss/_base.scss
+++ b/src/assets/scss/_base.scss
@@ -23,7 +23,7 @@
     color: color-yiq($value);
     font-weight: bold;
 
-    .text-muted {
+    .text-secondary {
       color: color-yiq($value) !important;
       font-weight: normal;
     }
diff --git a/src/assets/scss/_plan-node.scss b/src/assets/scss/_plan-node.scss
index c1b0d475..36cdb28f 100644
--- a/src/assets/scss/_plan-node.scss
+++ b/src/assets/scss/_plan-node.scss
@@ -109,7 +109,7 @@ $bg-color: #fff;
     border: 0;
   }
 
-  .text-muted {
+  .text-secondary {
     color: $text-color-light;
   }
 
diff --git a/src/assets/scss/_plan.scss b/src/assets/scss/_plan.scss
index 196bcecd..71df7e2f 100644
--- a/src/assets/scss/_plan.scss
+++ b/src/assets/scss/_plan.scss
@@ -37,7 +37,7 @@ $connector-line: 2px solid darken($line-color, 10%);
     cursor : grabbing;
   }
 
-  .text-muted {
+  .text-secondary {
     color: $gray !important;
   }
 
@@ -81,7 +81,7 @@ $connector-line: 2px solid darken($line-color, 10%);
 .tippy-popper .tippy-tooltip {
   text-align: left;
 }
-.tippy-popper .text-muted {
+.tippy-popper .text-secondary {
   color: inherit !important;
 }
 
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
index b8865251..5cf19c79 100644
--- a/src/components/Diagram.vue
+++ b/src/components/Diagram.vue
@@ -269,7 +269,7 @@ provide("scrollTo", scrollTo)
           </ul>
           <FontAwesomeIcon
             :icon="faInfoCircle"
-            class="cursor-help d-inline-block text-muted"
+            class="cursor-help d-inline-block text-secondary"
             v-tippy="{
               content: getHelpMessage('hint track_io_timing'),
               allowHTML: true,
@@ -325,7 +325,7 @@ provide("scrollTo", scrollTo)
           </template>
         </tbody>
       </table>
-      <div class="p-2 text-center text-muted" v-else>
+      <div class="p-2 text-center text-secondary" v-else>
         <em> No data available </em>
       </div>
     </div>
diff --git a/src/components/DiagramRow.vue b/src/components/DiagramRow.vue
index 20fefb78..9ffc538d 100644
--- a/src/components/DiagramRow.vue
+++ b/src/components/DiagramRow.vue
@@ -193,7 +193,7 @@ watch(
         style="height: 10px"
         v-else-if="diagramViewOptions.metric == Metric.estimate_factor"
       >
-        <span class="text-muted small">
+        <span class="text-secondary small">
           <FontAwesomeIcon
             fixed-width
             :icon="faArrowDown"
@@ -241,7 +241,7 @@ watch(
           aria-valuemin="0"
           aria-valuemax="100"
         ></div>
-        <span class="text-muted small">
+        <span class="text-secondary small">
           <FontAwesomeIcon
             fixed-width
             :icon="faArrowUp"
diff --git a/src/components/GridRow.vue b/src/components/GridRow.vue
index 256dbdf9..1a281374 100644
--- a/src/components/GridRow.vue
+++ b/src/components/GridRow.vue
@@ -86,7 +86,7 @@ function formattedProp(propName: keyof typeof NodeProp) {
 </script>
 <template>
   <tr @click="showDetails = !showDetails" class="node">
-    <td class="node-index text-muted">
+    <td class="node-index text-secondary">
       <!-- node id -->
       <a :href="`#plan/node/${node.nodeId}`" @click.stop>
         <span class="font-weight-normal small">#{{ node.nodeId }} </span>
@@ -291,27 +291,27 @@ function formattedProp(propName: keyof typeof NodeProp) {
 
         <span class="text-body-secondary">
           <template v-if="node[NodeProp.RELATION_NAME]">
-            <span class="text-muted">on</span>
+            <span class="text-secondary">on</span>
             <span v-if="node[NodeProp.SCHEMA]"
               >{{ node[NodeProp.SCHEMA] }}.</span
             >{{ node[NodeProp.RELATION_NAME] }}
             <span v-if="node[NodeProp.ALIAS]">
-              <span class="text-muted">as</span>
+              <span class="text-secondary">as</span>
               {{ node[NodeProp.ALIAS] }}
             </span>
           </template>
           <template v-else-if="node[NodeProp.ALIAS]">
-            <span class="text-muted">on</span>
+            <span class="text-secondary">on</span>
             <span v-html="keysToString(node[NodeProp.ALIAS] as string)"></span>
           </template>
           <template v-if="node[NodeProp.GROUP_KEY]">
-            <span class="text-muted">by</span>
+            <span class="text-secondary">by</span>
             <span
               v-html="keysToString(node[NodeProp.GROUP_KEY] as string)"
             ></span>
           </template>
           <template v-if="node[NodeProp.SORT_KEY]">
-            <span class="text-muted">by</span>
+            <span class="text-secondary">by</span>
             <span
               v-html="
                       sortKeys(
@@ -323,23 +323,23 @@ function formattedProp(propName: keyof typeof NodeProp) {
           </template>
           <template v-if="node[NodeProp.JOIN_TYPE]">
             {{ node[NodeProp.JOIN_TYPE] }}
-            <span class="text-muted">join</span>
+            <span class="text-secondary">join</span>
           </template>
           <template v-if="node[NodeProp.INDEX_NAME]">
-            <span class="text-muted">using</span>
+            <span class="text-secondary">using</span>
             <span
               v-html="keysToString(node[NodeProp.INDEX_NAME] as string)"
             ></span>
           </template>
           <template v-if="node[NodeProp.HASH_CONDITION]">
-            <span class="text-muted">on</span>
+            <span class="text-secondary">on</span>
             <span
               v-html="keysToString(node[NodeProp.HASH_CONDITION] as string)"
             ></span>
           </template>
           <template v-if="node[NodeProp.CTE_NAME]">
             <span class="text-reset">
-              <span class="text-muted">CTE</span>
+              <span class="text-secondary">CTE</span>
               {{ node[NodeProp.CTE_NAME] }}
             </span>
           </template>
diff --git a/src/components/MiscDetail.vue b/src/components/MiscDetail.vue
index 183b206b..77320647 100644
--- a/src/components/MiscDetail.vue
+++ b/src/components/MiscDetail.vue
@@ -44,7 +44,7 @@ function calculateProps() {
     </template>
   </table>
 
-  <div class="text-muted text-end">
+  <div class="text-secondary text-end">
     <em>* Calculated value</em>
   </div>
 </template>
diff --git a/src/components/NodeBadges.vue b/src/components/NodeBadges.vue
index 107fe45e..51b21e08 100644
--- a/src/components/NodeBadges.vue
+++ b/src/components/NodeBadges.vue
@@ -81,7 +81,7 @@ const {
     <FontAwesomeIcon
       fixed-width
       :icon="faFilter"
-      class="text-muted"
+      class="text-secondary"
     ></FontAwesomeIcon>
   </span>
 </template>
diff --git a/src/components/PlanNode.vue b/src/components/PlanNode.vue
index ca0d6f5a..eefb6745 100644
--- a/src/components/PlanNode.vue
+++ b/src/components/PlanNode.vue
@@ -116,7 +116,7 @@ function centerCte() {
           {{ node[NodeProp.SUBPLAN_NAME] }}
         </b>
       </div>
-      <div class="workers text-muted py-0 px-1" v-if="workersPlannedCount">
+      <div class="workers text-secondary py-0 px-1" v-if="workersPlannedCount">
         <div
           v-for="index in workersPlannedCountReversed"
           :key="index"
@@ -140,7 +140,7 @@ function centerCte() {
               class="text-body overflow-hidden btn btn-light text-start py-0 px-1"
               @click.prevent.stop="showDetails = !showDetails"
             >
-              <span class="text-muted">
+              <span class="text-secondary">
                 <FontAwesomeIcon
                   fixed-width
                   :icon="faChevronUp"
@@ -170,12 +170,12 @@ function centerCte() {
               v-if="node[NodeProp.RELATION_NAME]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">on</span>
+              <span class="text-secondary">on</span>
               <span v-if="node[NodeProp.SCHEMA]"
                 >{{ node[NodeProp.SCHEMA] }}.</span
               >{{ node[NodeProp.RELATION_NAME] }}
               <span v-if="node[NodeProp.ALIAS]">
-                <span class="text-muted">as</span>
+                <span class="text-secondary">as</span>
                 {{ node[NodeProp.ALIAS] }}
               </span>
             </div>
@@ -183,7 +183,7 @@ function centerCte() {
               v-else-if="node[NodeProp.ALIAS]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">on</span>
+              <span class="text-secondary">on</span>
               <span
                 v-html="keysToString(node[NodeProp.ALIAS] as string)"
               ></span>
@@ -192,7 +192,7 @@ function centerCte() {
               v-if="node[NodeProp.GROUP_KEY]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">by</span>
+              <span class="text-secondary">by</span>
               <span
                 v-html="keysToString(node[NodeProp.GROUP_KEY] as string)"
               ></span>
@@ -201,7 +201,7 @@ function centerCte() {
               v-if="node[NodeProp.SORT_KEY]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">by</span>
+              <span class="text-secondary">by</span>
               <span
                 v-html="
                   sortKeys(
@@ -213,13 +213,13 @@ function centerCte() {
             </div>
             <div v-if="node[NodeProp.JOIN_TYPE]">
               {{ node[NodeProp.JOIN_TYPE] }}
-              <span class="text-muted">join</span>
+              <span class="text-secondary">join</span>
             </div>
             <div
               v-if="node[NodeProp.INDEX_NAME]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">using</span>
+              <span class="text-secondary">using</span>
               <span
                 v-html="keysToString(node[NodeProp.INDEX_NAME] as string)"
               ></span>
@@ -228,7 +228,7 @@ function centerCte() {
               v-if="node[NodeProp.HASH_CONDITION]"
               :class="{ 'line-clamp-2': !showDetails }"
             >
-              <span class="text-muted">on</span>
+              <span class="text-secondary">on</span>
               <span
                 v-html="keysToString(node[NodeProp.HASH_CONDITION] as string)"
               ></span>
@@ -237,9 +237,9 @@ function centerCte() {
               <a class="text-reset" href="" @click.prevent.stop="centerCte">
                 <FontAwesomeIcon
                   :icon="faSearch"
-                  class="text-muted"
+                  class="text-secondary"
                 ></FontAwesomeIcon>
-                <span class="text-muted">CTE</span>
+                <span class="text-secondary">CTE</span>
                 {{ node[NodeProp.CTE_NAME] }}
               </a>
             </div>
@@ -265,7 +265,9 @@ function centerCte() {
               ></div>
             </div>
             <span class="node-bar-label">
-              <span class="text-muted">{{ viewOptions.highlightType }}:</span>
+              <span class="text-secondary"
+                >{{ viewOptions.highlightType }}:</span
+              >
               <span v-html="highlightValue"></span>
             </span>
           </div>
diff --git a/src/components/PlanNodeDetail.vue b/src/components/PlanNodeDetail.vue
index b7f99475..6cbd6a68 100644
--- a/src/components/PlanNodeDetail.vue
+++ b/src/components/PlanNodeDetail.vue
@@ -197,7 +197,7 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           fixed-width
           :icon="faClock"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b>Timing:</b>
         <span
@@ -208,20 +208,20 @@ watch(activeTab, () => {
         <template v-if="executionTimePercent !== Infinity">
           |
           <strong>{{ executionTimePercent }}</strong
-          ><span class="text-muted">%</span>
+          ><span class="text-secondary">%</span>
         </template>
       </div>
       <div>
         <FontAwesomeIcon
           fixed-width
           :icon="faAlignJustify"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b>Rows:</b>
         <span class="px-1">{{
           tilde + formattedProp("ACTUAL_ROWS_REVISED")
         }}</span>
-        <span class="text-muted" v-if="node[NodeProp.PLAN_ROWS]"
+        <span class="text-secondary" v-if="node[NodeProp.PLAN_ROWS]"
           >(Planned: {{ tilde + formattedProp("PLAN_ROWS_REVISED") }})</span
         >
         <span
@@ -252,7 +252,7 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           fixed-width
           :icon="faFilter"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b> {{ NodeProp[rowsRemovedProp] }}: </b>
         <span>
@@ -267,7 +267,7 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           fixed-width
           :icon="faExchangeAlt"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b>Heap Fetches:</b>
         <span
@@ -278,7 +278,7 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           :icon="faInfoCircle"
           fixed-width
-          class="text-muted"
+          class="text-secondary"
           v-if="heapFetchesClass"
           v-tippy="{
             arrow: true,
@@ -291,13 +291,13 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           fixed-width
           :icon="faDollarSign"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b>Cost:</b>
         <span class="p-0 px-1 me-1 alert" :class="costClass">{{
           formattedProp("EXCLUSIVE_COST")
         }}</span>
-        <span class="text-muted"
+        <span class="text-secondary"
           >(Total: {{ formattedProp("TOTAL_COST") }})</span
         >
       </div>
@@ -305,7 +305,7 @@ watch(activeTab, () => {
         <FontAwesomeIcon
           fixed-width
           :icon="faUndo"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
         <b>Loops:</b>
         <span class="px-1">{{ formattedProp("ACTUAL_LOOPS") }} </span>
diff --git a/src/components/PlanStats.vue b/src/components/PlanStats.vue
index b1e393a4..8a20c79c 100644
--- a/src/components/PlanStats.vue
+++ b/src/components/PlanStats.vue
@@ -73,7 +73,7 @@ function averageIO(node: Node) {
     <div class="d-inline-block px-2">
       Execution time:
       <template v-if="!plan.planStats.executionTime">
-        <span class="text-muted">
+        <span class="text-secondary">
           N/A
           <FontAwesomeIcon
             :icon="faInfoCircle"
@@ -92,7 +92,7 @@ function averageIO(node: Node) {
     <div class="d-inline-block border-start px-2">
       Planning time:
       <template v-if="!plan.planStats.planningTime">
-        <span class="text-muted">
+        <span class="text-secondary">
           N/A
           <FontAwesomeIcon
             :icon="faInfoCircle"
@@ -153,7 +153,7 @@ function averageIO(node: Node) {
         >
           <FontAwesomeIcon
             icon="caret-down"
-            class="text-muted"
+            class="text-secondary"
           ></FontAwesomeIcon>
         </button>
         <div class="stat-dropdown-container text-start" v-if="showTriggers">
@@ -165,8 +165,8 @@ function averageIO(node: Node) {
           <div v-for="(trigger, index) in plan.planStats.triggers" :key="index">
             {{ trigger["Trigger Name"] }}
             <br />
-            <span class="text-muted">Called</span> {{ trigger["Calls"]
-            }}<span class="text-muted">&times;</span>
+            <span class="text-secondary">Called</span> {{ trigger["Calls"]
+            }}<span class="text-secondary">&times;</span>
             <span class="float-end">
               <span
                 :class="
@@ -176,10 +176,10 @@ function averageIO(node: Node) {
                 v-html="duration(trigger.Time)"
               ></span>
               | {{ triggerDurationPercent(trigger)
-              }}<span class="text-muted">%</span>
+              }}<span class="text-secondary">%</span>
             </span>
             <br />
-            <span class="text-muted" v-if="trigger.Relation">on</span>
+            <span class="text-secondary" v-if="trigger.Relation">on</span>
             {{ trigger.Relation }}
             <div class="clearfix"></div>
             <hr
@@ -192,7 +192,7 @@ function averageIO(node: Node) {
           </div>
         </div>
       </template>
-      <span v-else class="text-muted"> N/A </span>
+      <span v-else class="text-secondary"> N/A </span>
     </div>
     <div
       class="d-inline-block border-start px-2 position-relative"
@@ -210,7 +210,7 @@ function averageIO(node: Node) {
       >
         <FontAwesomeIcon
           :icon="faCaretDown"
-          class="text-muted"
+          class="text-secondary"
         ></FontAwesomeIcon>
       </button>
       <div class="stat-dropdown-container text-start" v-if="showSettings">
@@ -219,7 +219,7 @@ function averageIO(node: Node) {
           v-on:click="showSettings = false"
         ></button>
         <h3>PG Settings</h3>
-        <em class="text-muted d-block pb-2">
+        <em class="text-secondary d-block pb-2">
           Configuration parameters affecting query planning with value different
           from the built-in default value.
         </em>
diff --git a/src/components/WorkersDetail.vue b/src/components/WorkersDetail.vue
index aa58ab6e..cb082149 100644
--- a/src/components/WorkersDetail.vue
+++ b/src/components/WorkersDetail.vue
@@ -53,7 +53,7 @@ const { workersLaunchedCount } = useNode(plan, node, viewOptions)
   </div>
   <div
     v-if="!workersLaunchedCount && node[NodeProp.WORKERS_PLANNED_BY_GATHER]"
-    class="text-muted"
+    class="text-secondary"
   >
     <em>
       Detailed information is not available.
diff --git a/src/filters.ts b/src/filters.ts
index 532fbbda..f07edf3e 100644
--- a/src/filters.ts
+++ b/src/filters.ts
@@ -89,7 +89,7 @@ export function sortKeys(
     if (presort) {
       result +=
         presort.indexOf(v) !== -1
-          ? '&nbsp;<span class="text-muted">(presort)</span>'
+          ? '&nbsp;<span class="text-secondary">(presort)</span>'
           : ""
     }
     return result