feat(ui): add full-screen button on drawer

close #2627
kestra-io · Mar 6, 2024 · ff78d3d · ff78d3d
1 parent 45d3e8c
commit ff78d3d
Show file tree

Hide file tree

Showing 19 changed files with 140 additions and 109 deletions.
diff --git a/ui/src/components/Drawer.vue b/ui/src/components/Drawer.vue
@@ -0,0 +1,61 @@
+<template>
+    <el-drawer
+        :model-value="props.modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        destroy-on-close
+        lock-scroll
+        size=""
+        :append-to-body="true"
+        :class="{'full-screen': fullScreen}"
+        ref="editorDomElement"
+    >
+        <template #header>
+            <span>
+                {{ title }}
+                <slot name="header" />
+            </span>
+            <el-button link class="full-screen">
+                <Fullscreen :title="$t('toggle fullscreen')" @click="toggleFullScreen" />
+            </el-button>
+        </template>
+
+        <template #footer>
+            <slot name="footer" />
+        </template>
+
+        <template #default>
+            <slot />
+        </template>
+    </el-drawer>
+</template>
+
+<script setup>
+    import {ref} from "vue";
+    import Fullscreen from "vue-material-design-icons/Fullscreen.vue"
+
+    const props = defineProps({
+        modelValue: {
+            type: Boolean,
+            required: true
+        },
+        title: {
+            type: String,
+            required: false,
+            default: undefined
+        },
+    });
+
+    const emit = defineEmits(["update:modelValue"])
+
+    const fullScreen = ref(false);
+
+    const toggleFullScreen = () => {
+        fullScreen.value = !fullScreen.value;
+    }
+</script>
+
+<style scoped lang="scss">
+    button.full-screen {
+        font-size: 24px;
+    }
+</style>
diff --git a/ui/src/components/executions/ExecutionOutput.vue b/ui/src/components/executions/ExecutionOutput.vue
@@ -28,13 +28,9 @@
             </el-form-item>
         </collapse>
 
-        <el-drawer
+        <drawer
             v-if="isModalOpen"
             v-model="isModalOpen"
-            destroy-on-close
-            lock-scroll
-            :append-to-body="true"
-            size=""
             :title="$t('eval.title')"
         >
             <template #footer>
@@ -52,7 +48,7 @@
                 <p><strong>{{ debugError }}</strong></p>
                 <pre class="mb-0">{{ debugStackTrace }}</pre>
             </el-alert>
-        </el-drawer>
+        </drawer>
 
         <el-table
             :data="outputsPaginated"
@@ -99,6 +95,7 @@
     import Pagination from "../layout/Pagination.vue";
     import {apiUrl} from "override/utils/route";
     import SubFlowLink from "../flows/SubFlowLink.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
@@ -107,6 +104,7 @@
             VarValue,
             Editor,
             Collapse,
+            Drawer
         },
         data() {
             return {

diff --git a/ui/src/components/executions/FilePreview.vue b/ui/src/components/executions/FilePreview.vue
@@ -2,16 +2,12 @@
     <el-button size="small" type="primary" :icon="EyeOutline" @click="getFilePreview">
         Preview
     </el-button>
-    <el-drawer
+    <drawer
         v-if="selectedPreview === value && filePreview"
         v-model="isPreviewOpen"
-        destroy-on-close
-        lock-scroll
-        size=""
-        :append-to-body="true"
     >
         <template #header>
-            <h3>{{ $t("preview") }}</h3>
+            {{ $t("preview") }}
         </template>
         <template #default>
             <el-alert v-if="filePreview.truncated" show-icon type="warning" :closable="false" class="mb-2">
@@ -58,7 +54,7 @@
                 </el-form-item>
             </el-form>
         </template>
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -70,9 +66,10 @@
     import ListPreview from "../ListPreview.vue";
     import {mapGetters, mapState} from "vuex";
     import Markdown from "../layout/Markdown.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
-        components: {Markdown, ListPreview, Editor},
+        components: {Markdown, ListPreview, Editor, Drawer},
         props: {
             value: {
                 type: String,

diff --git a/ui/src/components/executions/Metrics.vue b/ui/src/components/executions/Metrics.vue
@@ -6,17 +6,13 @@
         {{ $t('metrics') }}
     </el-dropdown-item>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
         :title="$t('metrics')"
-        destroy-on-close
-        :append-to-body="true"
-        size=""
-        direction="ltr"
     >
         <metrics-table ref="table" :task-run-id="taskRun.id" :execution="execution" />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -26,10 +22,12 @@
 
 <script>
     import MetricsTable from "./MetricsTable.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
-            MetricsTable
+            MetricsTable,
+            Drawer
         },
         data() {
             return {

diff --git a/ui/src/components/executions/Outputs.vue b/ui/src/components/executions/Outputs.vue
@@ -7,21 +7,17 @@
         {{ $t('outputs') }}
     </el-dropdown-item>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
         :title="$t('outputs')"
-        destroy-on-close
-        :append-to-body="true"
-        size=""
-        direction="ltr"
     >
         <vars
             :execution="execution"
             class="table-unrounded mt-1"
             :data="outputs"
         />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -30,10 +26,12 @@
 
 <script>
     import Vars from "../executions/Vars.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
         components: {
             Vars,
+            Drawer,
         },
         props: {
             outputs: {

diff --git a/ui/src/components/flows/FlowRevisions.vue b/ui/src/components/flows/FlowRevisions.vue
@@ -74,13 +74,13 @@
             :show-doc="false"
         />
 
-        <el-drawer v-if="isModalOpen" v-model="isModalOpen" destroy-on-close :append-to-body="true" size="">
+        <drawer v-if="isModalOpen" v-model="isModalOpen">
             <template #header>
                 <h5>{{ $t("revision") + `: ` + revision }}</h5>
             </template>
 
             <editor v-model="revisionYaml" lang="yaml" />
-        </el-drawer>
+        </drawer>
     </div>
     <div v-else>
         <el-alert class="mb-0" show-icon :closable="false">
@@ -99,10 +99,11 @@
     import YamlUtils from "../../utils/yamlUtils";
     import Editor from "../../components/inputs/Editor.vue";
     import Crud from "override/components/auth/Crud.vue";
+    import Drawer from "../Drawer.vue";
     import {saveFlowTemplate} from "../../utils/flowTemplate";
 
     export default {
-        components: {Editor, Crud},
+        components: {Editor, Crud, Drawer},
         created() {
             this.load();
         },

diff --git a/ui/src/components/flows/FlowTriggers.vue b/ui/src/components/flows/FlowTriggers.vue
@@ -158,21 +158,17 @@
         </template>
     </el-dialog>
 
-    <el-drawer
+    <drawer
         v-if="isOpen"
         v-model="isOpen"
-        destroy-on-close
-        lock-scroll
-        size=""
-        :append-to-body="true"
     >
         <template #header>
             <code>{{ triggerId }}</code>
         </template>
 
         <markdown v-if="triggerDefinition && triggerDefinition.description" :source="triggerDefinition.description" />
         <vars :data="modalData" />
-    </el-drawer>
+    </drawer>
 </template>
 
 <script setup>
@@ -193,12 +189,13 @@
     import Kicon from "../Kicon.vue"
     import DateAgo from "../layout/DateAgo.vue";
     import Vars from "../executions/Vars.vue";
+    import Drawer from "../Drawer.vue";
     import permission from "../../models/permission";
     import action from "../../models/action";
     import moment from "moment";
 
     export default {
-        components: {Markdown, Kicon, DateAgo, Vars},
+        components: {Markdown, Kicon, DateAgo, Vars, Drawer},
         data() {
             return {
                 triggerId: undefined,

diff --git a/ui/src/components/flows/MetadataInputs.vue b/ui/src/components/flows/MetadataInputs.vue
@@ -1,11 +1,8 @@
 <template>
     <div class="w-100 d-flex flex-column align-items-center">
-        <el-drawer
+        <drawer
             v-if="isEditOpen"
             v-model="isEditOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>inputs</code>
@@ -40,7 +37,7 @@
                     :definitions="inputSchema.schema.definitions"
                 />
             </div>
-        </el-drawer>
+        </drawer>
         <div class="w-100">
             <div>
                 <div class="d-flex w-100" v-for="(input, index) in newInputs" :key="index">
@@ -74,8 +71,10 @@
 </script>
 <script>
     import {mapState} from "vuex";
+    import Drawer from "../Drawer.vue";
 
     export default {
+        components: {Drawer},
         emits: ["update:modelValue"],
         props: {
             inputs: {

diff --git a/ui/src/components/flows/MetadataVariables.vue b/ui/src/components/flows/MetadataVariables.vue
@@ -1,11 +1,8 @@
 <template>
     <div class="w-100">
-        <el-drawer
+        <drawer
             v-if="isEditOpen"
             v-model="isEditOpen"
-            destroy-on-close
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>variables</code>
@@ -43,7 +40,7 @@
                     />
                 </el-form-item>
             </el-form>
-        </el-drawer>
+        </drawer>
         <div class="w-100">
             <div v-if="variables">
                 <div class="d-flex w-100" v-for="(value, index) in newVariables" :key="index">
@@ -83,9 +80,10 @@
 
 <script>
     import Editor from "../inputs/Editor.vue";
+    import Drawer from "../Drawer.vue";
 
     export default {
-        components: {Editor},
+        components: {Editor, Drawer},
         emits: ["update:modelValue"],
         props: {
             variables: {

diff --git a/ui/src/components/flows/TaskEdit.vue b/ui/src/components/flows/TaskEdit.vue
@@ -6,13 +6,9 @@
         ref="taskEdit"
     >
         <span v-if="component !== 'el-button' && !isHidden">{{ $t("show task source") }}</span>
-        <el-drawer
+        <drawer
             v-if="isModalOpen"
             v-model="isModalOpen"
-            destroy-on-close
-            lock-scroll
-            size=""
-            :append-to-body="true"
         >
             <template #header>
                 <code>{{ taskId || task?.id || $t("add task") }}</code>
@@ -81,7 +77,7 @@
                     </div>
                 </el-tab-pane>
             </el-tabs>
-        </el-drawer>
+        </drawer>
     </component>
 </template>
 
@@ -94,6 +90,7 @@
     import YamlUtils from "../../utils/yamlUtils";
     import Editor from "../inputs/Editor.vue";
     import TaskEditor from "./TaskEditor.vue";
+    import Drawer from "../Drawer.vue";
     import {canSaveFlowTemplate, saveFlowTemplate} from "../../utils/flowTemplate";
     import {mapGetters, mapState} from "vuex";
     import Utils from "../../utils/utils";
@@ -102,7 +99,7 @@
     import {SECTIONS} from "../../utils/constants";
 
     export default {
-        components: {Editor, TaskEditor, Markdown, ValidationError},
+        components: {Editor, TaskEditor, Drawer, Markdown, ValidationError},
         emits: ["update:task", "close"],
         props: {
             component: {