From 62fd5599e2285c741bad3019c2c8eb9467e8eb6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20Ledoux?= <ledouxb@me.com>
Date: Thu, 21 Nov 2024 10:46:25 +0100
Subject: [PATCH] fix: after context docs, some light fixes and cleanup (#6030)

---
 ui/src/components/ContextInfoBar.vue     |  12 +-
 ui/src/components/docs/ContextDocs.vue   |   8 +-
 ui/src/components/layout/ContextNews.vue |   8 +-
 ui/src/components/layout/News.vue        | 153 -----------------------
 ui/src/components/layout/TopNavBar.vue   |  75 -----------
 5 files changed, 13 insertions(+), 243 deletions(-)
 delete mode 100644 ui/src/components/layout/News.vue

diff --git a/ui/src/components/ContextInfoBar.vue b/ui/src/components/ContextInfoBar.vue
index 48debec4e6..652be3c551 100644
--- a/ui/src/components/ContextInfoBar.vue
+++ b/ui/src/components/ContextInfoBar.vue
@@ -32,8 +32,6 @@
 
     const panelWidth = ref(640)
 
-    const panel = ref<HTMLElement | null>(null)
-
     const activeTab = ref("")
 
     const {startResizing, resizing} = useResizablePanel(activeTab)
@@ -70,12 +68,6 @@
         return {startResizing, resizing}
     }
 
-    function scrollToTop(){
-        if(panel.value) {
-            panel.value.scrollTop = 0
-        }
-    }
-
     function setActiveTab(tab: string){
         if(activeTab.value === tab){
             activeTab.value = ""
@@ -120,12 +112,12 @@
             <span class="commitNumber">{{ configs?.commitId }}</span>
         </el-tooltip>
     </div>
-    <div ref="panel" class="panelWrapper" :class="{panelTabResizing: resizing}" :style="{width: activeTab?.length ? `${panelWidth}px` : 0}">
+    <div class="panelWrapper" :class="{panelTabResizing: resizing}" :style="{width: activeTab?.length ? `${panelWidth}px` : 0}">
         <div :style="{overflow: 'hidden', width:`${panelWidth}px`}">
             <button v-if="activeTab.length" class="closeButton" @click="activeTab = ''">
                 <Close />
             </button>
-            <ContextDocs v-if="activeTab === 'docs'" @update:doc-path="scrollToTop" />
+            <ContextDocs v-if="activeTab === 'docs'" />
             <ContextNews v-else-if="activeTab === 'news'" />
             <template v-else>
                 {{ activeTab }}
diff --git a/ui/src/components/docs/ContextDocs.vue b/ui/src/components/docs/ContextDocs.vue
index 9e3748c7f8..87111ade06 100644
--- a/ui/src/components/docs/ContextDocs.vue
+++ b/ui/src/components/docs/ContextDocs.vue
@@ -17,14 +17,14 @@
     const store = useStore();
     const {t} = useI18n();
 
+    const docWrapper = ref<HTMLDivElement | null>(null);
+
     const pageMetadata = computed(() => store.getters["doc/pageMetadata"]);
     const docPath = computed(() => store.getters["doc/docPath"]);
     const routeInfo = computed(() => ({
         title: pageMetadata.value?.title ?? t("docs"),
     }))
 
-    const emit = defineEmits(["update:docPath"]);
-
     onUnmounted(() => {
         ast.value = undefined
         store.commit("doc/setDocPath", undefined);
@@ -42,7 +42,7 @@
     watch(docPath, async (val) => {
         refreshPage(val);
         nextTick(() => {
-            emit("update:docPath", val);
+            docWrapper.value?.scrollTo(0, 0);
         });
     }, {immediate: true});
 
@@ -58,7 +58,7 @@
 </script>
 
 <template>
-    <div class="docWrapper">
+    <div class="docWrapper" ref="docWrapper">
         <h2 class="docTitle">
             <router-link
                 :to="{
diff --git a/ui/src/components/layout/ContextNews.vue b/ui/src/components/layout/ContextNews.vue
index e7e90cb57e..8d34d45d60 100644
--- a/ui/src/components/layout/ContextNews.vue
+++ b/ui/src/components/layout/ContextNews.vue
@@ -25,7 +25,9 @@
 
 <template>
     <div class="allContextNews">
-        <h3>{{ t("feeds.title") }}</h3>
+        <h2 class="newsTitle">
+            {{ t("feeds.title") }}
+        </h2>
         <el-divider style="margin: var(--spacer) 0;" />
         <div class="post" :class="{lastPost: index === 0, expanded: expanded[feed.id]}" v-for="(feed, index) in feeds" :key="feed.id">
             <div v-if="feed.image" class="mr-2">
@@ -70,6 +72,10 @@
         padding: var(--spacer);
     }
 
+    .newsTitle{
+        font-size: 18px;
+    }
+
     .post {
         h5 {
             font-weight: medium;
diff --git a/ui/src/components/layout/News.vue b/ui/src/components/layout/News.vue
deleted file mode 100644
index b958168b30..0000000000
--- a/ui/src/components/layout/News.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-    <el-button data-component="FILENAME_PLACEHOLDER#button" class="news-link" @click="show">
-        <bell title="" />
-        <CheckboxBlankCircle v-if="hasUnread" class="new" title="" />
-    </el-button>
-
-    <drawer data-component="FILENAME_PLACEHOLDER#drawer" v-if="isOpen" v-model="isOpen" :title="$t('feeds.title')">
-        <div class="post" v-for="(feed, index) in feeds" :key="feed.id">
-            <div v-if="feed.image" class="mt-2">
-                <img class="float-end" :src="feed.image" alt="">
-            </div>
-            <h5>
-                {{ feed.title }}
-            </h5>
-            <date-ago class-name="news-date small" :inverted="true" :date="feed.publicationDate" format="LL" />
-
-            <markdown class="markdown-tooltip mt-3" :source="feed.description" />
-
-            <div class="d-flex w-100 justify-content-end">
-                <a class="el-button el-button--primary mt-3 " :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
-            </div>
-
-            <el-divider v-if="index !== feeds.length - 1" />
-        </div>
-    </drawer>
-</template>
-
-<script>
-    import {mapState} from "vuex";
-    import Bell from "vue-material-design-icons/Bell.vue";
-    import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
-    import CheckboxBlankCircle from "vue-material-design-icons/CheckboxBlankCircle.vue";
-    import Markdown from "./Markdown.vue";
-    import DateAgo from "./DateAgo.vue";
-    import Drawer from "../Drawer.vue";
-    import {pageFromRoute} from "../../utils/eventsRouter";
-
-    export default {
-        components: {
-            Bell,
-            OpenInNew,
-            CheckboxBlankCircle,
-            Markdown,
-            DateAgo,
-            Drawer
-        },
-        data() {
-            return {
-                hasUnread: false,
-                isOpen: false,
-            };
-        },
-        mounted() {
-            this.hasUnread = this.isUnread();
-        },
-        watch: {
-            feeds: {
-                handler() {
-                    this.hasUnread = this.isUnread();
-                },
-                deep: true
-            },
-        },
-        methods: {
-            show(event) {
-                event.preventDefault();
-
-                this.$store.dispatch("api/events", {
-                    type: "PAGE", 
-                    news: {opened: true, hasUnread: this.isUnread()}, 
-                    page: pageFromRoute(this.$router.currentRoute.value)
-                });
-
-                localStorage.setItem("feeds", this.feeds[0].publicationDate)
-                this.hasUnread = this.isUnread();
-                this.isOpen = !this.isOpen;
-            },
-            isUnread() {
-                let storage = localStorage.getItem("feeds");
-                return (
-                    storage === null ||
-                    (this.feeds && this.feeds[0] && this.$moment(storage).isBefore(this.feeds[0].publicationDate))
-                );
-            },
-        },
-        computed: {
-            ...mapState("misc", ["configs"]),
-            ...mapState("api", ["feeds"]),
-        }
-    };
-</script>
-
-<style lang="scss" scoped>
-    .new {
-        font-size: calc(var(--font-size-sm) * 0.7) !important;
-        color: var(--el-color-error);
-        position: absolute;
-        margin-left: 10px;
-        margin-top: -12px;
-
-        animation-name: grow;
-        animation-duration: 1.5s;
-        animation-iteration-count: infinite;
-        animation-timing-function: ease-in;
-    }
-
-    @keyframes grow {
-        0% {
-            transform: scale(0.8);
-        }
-        50%  {
-            transform: scale(1.2);
-        }
-        100% {
-            transform: scale(0.8);
-        }
-    }
-
-    .post {
-        h5 {
-            font-weight: bold;
-            margin-bottom: 0;
-        }
-
-        img {
-            max-height: 120px;
-            max-width: 240px;
-            padding-left: 20px;
-            padding-bottom: 20px;
-        }
-
-        hr {
-            border-top-color: var(--bs-gray-700);
-            margin-top: calc(var(--spacer) * 2);
-            margin-bottom: calc(var(--spacer) * 2);
-        }
-
-        .small {
-            font-size:  var(--font-size-sm);
-            opacity: 0.7;
-        }
-
-        a.el-button {
-            font-weight: bold;
-        }
-    }
-</style>
-
-<style style="scss">
-.news-date {
-    color: var(--bs-gray-700);
-}
-</style>
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index 13a1bf2019..701cadf16f 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -33,67 +33,6 @@
             </div>
             <slot name="additional-right" />
             <div class="d-flex fixed-buttons icons">
-                <el-dropdown popper-class="">
-                    <el-button class="no-focus dropdown-button">
-                        <HelpBox />
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <a
-                                href="https://kestra.io/slack?utm_source=app&utm_campaign=slack&utm_content=top-nav-bar"
-                                target="_blank"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <HelpBox class="align-middle" /> {{ $t("live help") }}
-                            </a>
-                            <a
-                                v-if="tourEnabled"
-                                @click="restartGuidedTour"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <ProgressQuestion class="align-middle" /> {{ $t('Reset guided tour') }}
-                            </a>
-
-                            <router-link
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                                :to="{name: 'docs/view'}"
-                            >
-                                <BookMultipleOutline class="align-middle" /> {{ $t("documentation.documentation") }}
-                            </router-link>
-
-                            <a
-                                href="https://github.com/kestra-io/kestra/issues"
-                                target="_blank"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <Github class="align-middle" /> {{ $t("documentation.github") }}
-                            </a>
-                            <a
-                                href="https://kestra.io/slack?utm_source=app&utm_campaign=slack&utm_content=top-nav-bar"
-                                target="_blank"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <Slack class="align-middle" /> {{ $t("join community") }}
-                            </a>
-                            <a
-                                href="https://kestra.io/demo?utm_source=app&utm_campaign=sales&utm_content=top-nav-bar"
-                                target="_blank"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <EmailHeartOutline class="align-middle" /> {{ $t("reach us") }}
-                            </a>
-                            <a
-                                v-if="version"
-                                :href="version.url"
-                                target="_blank"
-                                class="d-flex gap-2 el-dropdown-menu__item"
-                            >
-                                <Update class="align-middle text-danger" /> <span class="text-danger">{{ $t("new version", {"version": version.latest}) }}</span>
-                            </a>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-
                 <impersonating />
                 <auth />
             </div>
@@ -105,13 +44,6 @@
     import {mapState, mapGetters} from "vuex";
     import Auth from "override/components/auth/Auth.vue";
     import Impersonating from "override/components/auth/Impersonating.vue";
-    import HelpBox from "vue-material-design-icons/HelpBox.vue";
-    import BookMultipleOutline from "vue-material-design-icons/BookMultipleOutline.vue";
-    import Github from "vue-material-design-icons/Github.vue";
-    import Slack from "vue-material-design-icons/Slack.vue";
-    import EmailHeartOutline from "vue-material-design-icons/EmailHeartOutline.vue";
-    import Update from "vue-material-design-icons/Update.vue";
-    import ProgressQuestion from "vue-material-design-icons/ProgressQuestion.vue";
     import GlobalSearch from "./GlobalSearch.vue";
     import TrashCan from "vue-material-design-icons/TrashCan.vue";
     import StarOutlineIcon from "vue-material-design-icons/StarOutline.vue";
@@ -121,13 +53,6 @@
     export default {
         components: {
             Auth,
-            HelpBox,
-            BookMultipleOutline,
-            Github,
-            Slack,
-            EmailHeartOutline,
-            Update,
-            ProgressQuestion,
             GlobalSearch,
             TrashCan,
             Impersonating