From e4d27eb3f6ec53fece6e8b8d78e8eb984db4c684 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 9 Nov 2023 09:02:13 -0500
Subject: [PATCH] Refactor Heading collapse property to be open/closed/none, to
 avoid having separate 'collapsible' and 'collapsed' props.

---
 client/src/components/Common/Heading.vue      | 44 ++++++++++++-------
 .../src/components/JobMetrics/AwsEstimate.vue |  4 +-
 .../CarbonEmissions/CarbonEmissions.vue       |  2 +-
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 199446496de0..6e889839aae3 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -2,21 +2,25 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
-const props = defineProps<{
-    h1?: boolean;
-    h2?: boolean;
-    h3?: boolean;
-    h4?: boolean;
-    h5?: boolean;
-    h6?: boolean;
-    bold?: boolean;
-    separator?: boolean;
-    inline?: boolean;
-    size?: "xl" | "lg" | "md" | "sm" | "text";
-    icon?: string | [string, string];
-    collapsible?: boolean;
-    collapsed?: boolean;
-}>();
+const props = withDefaults(
+    defineProps<{
+        h1?: boolean;
+        h2?: boolean;
+        h3?: boolean;
+        h4?: boolean;
+        h5?: boolean;
+        h6?: boolean;
+        bold?: boolean;
+        separator?: boolean;
+        inline?: boolean;
+        size?: "xl" | "lg" | "md" | "sm" | "text";
+        icon?: string | [string, string];
+        collapse?: "open" | "closed" | "none";
+    }>(),
+    {
+        collapse: "none",
+    }
+);
 
 defineEmits(["click"]);
 
@@ -24,6 +28,14 @@ const sizeClass = computed(() => {
     return `h-${props.size ?? "lg"}`;
 });
 
+const collapsible = computed(() => {
+    return props.collapse !== "none";
+});
+
+const collapsed = computed(() => {
+    return props.collapse === "closed";
+});
+
 const element = computed(() => {
     for (const key of ["h1", "h2", "h3", "h4", "h5", "h6"]) {
         if (props[key as keyof typeof props]) {
@@ -39,7 +51,7 @@ const element = computed(() => {
         <div class="stripe"></div>
         <component
             :is="element"
-            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.collapsible ? 'collapsible' : '']"
+            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
             @click="$emit('click')">
             <slot />
             <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
diff --git a/client/src/components/JobMetrics/AwsEstimate.vue b/client/src/components/JobMetrics/AwsEstimate.vue
index ae8e4a686609..76170db0e990 100644
--- a/client/src/components/JobMetrics/AwsEstimate.vue
+++ b/client/src/components/JobMetrics/AwsEstimate.vue
@@ -56,7 +56,9 @@ const computedAwsEstimate = computed(() => {
 
 <template>
     <div v-if="computedAwsEstimate" id="aws-estimate" class="mt-4">
-        <Heading h2 size="md" separator collapsible :collapsed="toggled" @click="toggle()">AWS estimate</Heading>
+        <Heading h2 size="md" separator :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
+            AWS estimate
+        </Heading>
 
         <template v-if="!toggled">
             <strong id="aws-cost">{{ computedAwsEstimate.price }} USD</strong>
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
index aec2aac1f80f..8d4efc8314cc 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
@@ -274,7 +274,7 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
 
 <template v-if="carbonEmissions && carbonEmissionsComparisons">
     <div class="mt-4">
-        <Heading h2 separator size="md" inline collapsible :collapsed="toggled" @click="toggle()">
+        <Heading h2 separator size="md" inline :collapse="toggled ? 'closed' : 'open'" @click="toggle()">
             Carbon Footprint
         </Heading>