feat: add demo page for EE only features (#7003)

* update errors file

* feat: add IAM page

* add layout page and empty template

* feat: tenants demo page

* refactor: store context state in vuex

* feat: make docs open automagically

* feat: add missing admin empty pages

* chore: update "cluster" into "instance" in side menu

* feat: add namespace empty pages + some placeholder text

* add custom blueprints empty page

* chore(translations): auto generate values for languages other than english

* fix a bunch of warnings

* fix blueprints title

* feat: add missing link to kestra apps

* chore(translations): auto generate values for languages other than english

* feat: marketing text

* chore(translations): auto generate values for languages other than english

---------

Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: Anna Geller <[email protected]>

ui/src/components/ContextInfoBar.vue

@@ -33,7 +33,7 @@
     </div>
     <div class="panelWrapper" :class="{panelTabResizing: resizing}" :style="{width: activeTab?.length ? `${panelWidth}px` : 0}">
         <div :style="{overflow: 'hidden'}">
-            <button v-if="activeTab.length" class="closeButton" @click="activeTab = ''">
+            <button v-if="activeTab.length" class="closeButton" @click="setActiveTab('')">
                 <Close />
             </button>
             <ContextDocs v-if="activeTab === 'docs'" />
@@ -68,7 +68,8 @@
 
     const store = useStore();
 
-    const configs = computed(() => store.state.misc.configs);
+    const configs = computed(() => store.getters["misc/configs"]);
+    const activeTab = computed(() => store.getters["misc/contextInfoBarOpenTab"])
 
     const lastNewsReadDate = useStorage<string | null>("feeds", null)
 
@@ -117,8 +118,6 @@
 
     const panelWidth = ref(640)
 
-    const activeTab = ref("")
-
     const {startResizing, resizing} = useResizablePanel(activeTab)
 
     function useResizablePanel(localActiveTab: Ref<string>) {
@@ -155,9 +154,9 @@
 
     function setActiveTab(tab: string) {
         if (activeTab.value === tab) {
-            activeTab.value = ""
+            store.commit("misc/setContextInfoBarOpenTab", "")
         } else {
-            activeTab.value = tab
+            store.commit("misc/setContextInfoBarOpenTab", tab)
         }
     }
 </script>

ui/src/components/demo/Apps.vue

@@ -0,0 +1,23 @@
+<template>
+    <Layout
+        :title="t(`demos.apps.title`)"
+        :image="{source: sourceImg, alt: t(`demos.apps.title`)}"
+    >
+        <template #message>
+            {{ $t(`demos.apps.message`) }}
+        </template>
+        <template #buttons>
+            <el-button target="_blank" href="https://kestra.io/demo" type="primary" size="large">
+                {{ $t("demos.get_a_demo_button") }}
+            </el-button>
+        </template>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+    import {useI18n} from "vue-i18n";
+    import Layout from "./Layout.vue";
+    import sourceImg from "../../assets/demo/apps.png";
+
+    const {t} = useI18n();
+</script>

ui/src/components/demo/AuditLogs.vue

@@ -0,0 +1,38 @@
+<template>
+    <top-nav-bar :title="routeInfo.title" v-if="!isFullScreen()" />
+    <Layout
+        :title="t('demos.audit-logs.title')"
+        :image="{source: sourceImg, alt: t('demos.audit-logs.title')}"
+    >
+        <template #message>
+            {{ $t('demos.audit-logs.message') }}
+        </template>
+        <template #buttons>
+            <el-button v-if="!isFullScreen()" target="_blank" href="https://kestra.io/demo" type="primary" size="large">
+                {{ $t("demos.get_a_demo_button") }}
+            </el-button>
+        </template>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+    import {ref} from "vue";
+    import {useI18n} from "vue-i18n";
+    import Layout from "./Layout.vue";
+    // @ts-expect-error no types in TopNavBar yet
+    import TopNavBar from "../../components/layout/TopNavBar.vue";
+    import sourceImg from "../../assets/demo/audit-logs.png";
+    import useRouteContext from "../../mixins/useRouteContext";
+
+    const {t} = useI18n();
+
+    const routeInfo = ref({
+        title: t("demos.audit-logs.title"),
+    });
+
+    useRouteContext(routeInfo);
+
+    function isFullScreen() {
+        return document.getElementsByTagName("html")[0].classList.contains("full-screen");
+    }
+</script>

ui/src/components/demo/Blueprints.vue

@@ -0,0 +1,23 @@
+<template>
+    <Layout
+        :title="t(`demos.blueprints.title`)"
+        :image="{source: sourceImg, alt: t(`demos.blueprints.title`)}"
+    >
+        <template #message>
+            {{ $t(`demos.blueprints.message`) }}
+        </template>
+        <template #buttons>
+            <el-button target="_blank" href="https://kestra.io/demo" type="primary" size="large">
+                {{ $t("demos.get_a_demo_button") }}
+            </el-button>
+        </template>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+    import {useI18n} from "vue-i18n";
+    import Layout from "./Layout.vue";
+    import sourceImg from "../../assets/demo/blueprints.png";
+
+    const {t} = useI18n();
+</script>

ui/src/components/demo/IAM.vue

@@ -0,0 +1,38 @@
+<template>
+    <top-nav-bar :title="routeInfo.title" v-if="!isFullScreen()" />
+    <Layout
+        :title="$t('demos.IAM.title')"
+        :image="{source: sourceImg, alt: t('demos.IAM.title')}"
+    >
+        <template #message>
+            {{ $t('demos.IAM.message') }}
+        </template>
+        <template #buttons>
+            <el-button v-if="!isFullScreen()" target="_blank" href="https://kestra.io/demo" type="primary" size="large">
+                {{ $t("demos.get_a_demo_button") }}
+            </el-button>
+        </template>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+    import {ref} from "vue";
+    import {useI18n} from "vue-i18n";
+    import Layout from "./Layout.vue";
+    // @ts-expect-error no types in TopNavBar yet
+    import TopNavBar from "../../components/layout/TopNavBar.vue";
+    import sourceImg from "../../assets/demo/IAM.png";
+    import useRouteContext from "../../mixins/useRouteContext";
+
+    const {t} = useI18n();
+
+    const routeInfo = ref({
+        title: t("demos.IAM.title"),
+    });
+
+    useRouteContext(routeInfo);
+
+    function isFullScreen() {
+        return document.getElementsByTagName("html")[0].classList.contains("full-screen");
+    }
+</script>

ui/src/components/demo/Instance.vue

@@ -0,0 +1,38 @@
+<template>
+    <top-nav-bar :title="routeInfo.title" v-if="!isFullScreen()" />
+    <Layout
+        :title="t('demos.instance.title')"
+        :image="{source: sourceImg, alt: t('demos.instance.title')}"
+    >
+        <template #message>
+            {{ $t('demos.instance.message') }}
+        </template>
+        <template #buttons>
+            <el-button v-if="!isFullScreen()" target="_blank" href="https://kestra.io/demo" type="primary" size="large">
+                {{ $t("demos.get_a_demo_button") }}
+            </el-button>
+        </template>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+    import {ref} from "vue";
+    import {useI18n} from "vue-i18n";
+    import Layout from "./Layout.vue";
+    // @ts-expect-error no types in TopNavBar yet
+    import TopNavBar from "../../components/layout/TopNavBar.vue";
+    import sourceImg from "../../assets/demo/instance.png";
+    import useRouteContext from "../../mixins/useRouteContext";
+
+    const {t} = useI18n();
+
+    const routeInfo = ref({
+        title: t("demos.instance.title"),
+    });
+
+    useRouteContext(routeInfo);
+
+    function isFullScreen() {
+        return document.getElementsByTagName("html")[0].classList.contains("full-screen");
+    }
+</script>

ui/src/components/demo/Layout.vue

@@ -0,0 +1,99 @@
+<template>
+    <EmptyTemplate>
+        <img :src="image.source" :alt="image.alt" class="img">
+        <div class="message-block">
+            <div class="enterprise-tag">
+                {{ $t('demos.enterprise_edition') }}
+            </div>
+            <h2>{{ title }}</h2>
+            <p><slot name="message" /></p>
+            <slot name="buttons" />
+        </div>
+    </EmptyTemplate>
+</template>
+
+<script lang="ts" setup>
+    import {onMounted, nextTick} from "vue";
+    import {useStore} from "vuex";
+    import EmptyTemplate from "../layout/EmptyTemplate.vue";
+
+    const store = useStore();
+
+    onMounted(() => {
+        store.commit("doc/setDocPath", "<reset>")
+        nextTick(() => {
+            store.commit("doc/setDocPath", "")
+            store.commit("misc/setContextInfoBarOpenTab", "docs")
+        })
+    });
+
+    defineProps<{
+        title: string;
+        image: {
+            source: string;
+            alt: string;
+        };
+    }>();
+</script>
+
+<style lang="scss" scoped>
+    @import "@kestra-io/ui-libs/src/scss/color-palette.scss";
+
+    .img {
+        width: 400px;
+    }
+
+    .message-block{
+        text-align: left;
+        width: 400px;
+        margin: 0 auto;
+        .enterprise-tag::before,
+        .enterprise-tag::after{
+            content: "";
+            display: block;
+            position: absolute;
+            border-radius: 1rem;
+        }
+
+        .enterprise-tag::before{
+            z-index: -2;
+            background-image: linear-gradient(138.8deg, #CCE8FE 5.7%, #CDA0FF 27.03%, #8489F5 41.02%, #CDF1FF 68.68%, #B591E9 94%);
+            top: -2px;
+            bottom: -2px;
+            left: -2px;
+            right: -2px;
+        }
+
+        .enterprise-tag::after{
+            z-index: -1;
+            background: $base-gray-200;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
+        }
+
+        .enterprise-tag{
+            position: relative;
+            background: $base-gray-200;
+            border: 1px solid transparent;
+            padding: 0 1rem;
+            border-radius: 1rem;
+            display: inline-block;
+            z-index: 2;
+        }
+
+        h2 {
+            margin-top: 1rem;
+            line-height: 30px;
+            font-size: 20px;
+            font-weight: 600;
+        }
+
+        p {
+            line-height: 22px;
+            font-size: 14px;
+        }
+    }
+
+</style>