From 73c47bd2ffa50aeaa079787afa9e1fe40e987569 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 4 Mar 2023 21:50:04 -0900
Subject: [PATCH] Add collapsable support to panel elements (#1601)

Closes #1312

Updates the `Panel` component to support collapsing

## Example



https://user-images.githubusercontent.com/64056131/222880570-6611fdd7-4577-4ed5-9798-fce829a4a752.mp4

---------

Co-authored-by: Anbraten <anton@ju60.de>
---
 web/src/components/layout/Panel.vue           | 57 ++++++++++++++-----
 .../views/repo/pipeline/PipelineConfig.vue    |  7 ++-
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index be7e3eed1..54da46ede 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,23 +1,54 @@
 <template>
   <div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
-    <div v-if="title" class="font-bold text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2">{{ title }}</div>
-    <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
-      <slot />
+    <component
+      :is="collapsable ? 'button' : 'div'"
+      v-if="title"
+      type="button"
+      class="flex w-full font-bold gap-2 text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2"
+      @click="collapsed && (_collapsed = !_collapsed)"
+    >
+      <Icon
+        v-if="collapsable"
+        name="chevron-right"
+        class="transition-transform duration-150 min-w-6 h-6"
+        :class="{ 'transform rotate-90': !collapsed }"
+      />
+      {{ title }}
+    </component>
+    <div
+      :class="{
+        'max-h-screen': !collapsed,
+        'max-h-0': collapsed,
+      }"
+      class="transition-height duration-150 overflow-hidden"
+    >
+      <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
 
-export default defineComponent({
-  name: 'Panel',
+import Icon from '~/components/atomic/Icon.vue';
 
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    collapsable?: boolean;
+  }>(),
+  {
+    title: '',
   },
-});
+);
+
+/**
+ * _collapsed is used to store the internal state of the panel, but is
+ * ignored if the panel is not collapsable.
+ */
+const _collapsed = ref(false);
+
+const collapsed = computed(() => props.collapsable && _collapsed.value);
 </script>
diff --git a/web/src/views/repo/pipeline/PipelineConfig.vue b/web/src/views/repo/pipeline/PipelineConfig.vue
index 01f795e11..b9136208d 100644
--- a/web/src/views/repo/pipeline/PipelineConfig.vue
+++ b/web/src/views/repo/pipeline/PipelineConfig.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-y-6">
-    <Panel v-for="pipelineConfig in pipelineConfigs || []" :key="pipelineConfig.hash" :title="pipelineConfig.name">
+    <Panel
+      v-for="pipelineConfig in pipelineConfigs || []"
+      :key="pipelineConfig.hash"
+      collapsable
+      :title="pipelineConfig.name"
+    >
       <SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
     </Panel>
   </div>