add experimental tag for experimental versions (#923)

* add experimental tag for experimental versions

* apply formatting changes

---------

Co-authored-by: Logende <[email protected]>

Author: Logende

.github/workflows/github-pages.yml

@@ -18,6 +18,7 @@ jobs:
         env:
           USE_META_CONFIGURATOR_BASE_PATH: true  # Set to true for GitHub Pages deployment
           VITE_FRONTEND_HOSTNAME: https://metaconfigurator.github.io/meta-configurator
+          EXPERIMENTAL: true
         run: |
           cd meta_configurator
           npm ci

meta_configurator/env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="vite/client" />
 
 declare const __APP_VERSION__: string;
+declare const __APP_EXPERIMENTAL__: boolean;

meta_configurator/src/components/toolbar/dialogs/AboutDialog.vue

@@ -2,8 +2,9 @@
 Dialog that shows information about the application and the licenses of the used icons.
 Emits an update:visible event when the dialog is closed.
 -->
-<script setup lang="ts">
+<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
 import Dialog from 'primevue/dialog';
+import Tag from 'primevue/tag';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 defineProps<{visible: boolean}>();
@@ -13,6 +14,7 @@ defineEmits<{
 }>();
 
 const appVersion = __APP_VERSION__;
+const isExperimental = __APP_EXPERIMENTAL__;
 </script>
 
 <template>
@@ -26,7 +28,6 @@ const appVersion = __APP_VERSION__;
     </p>
     <p>It is currently in alpha stage, so expect bugs and missing features.</p>
     <p>MetaConfigurator is open source and licensed under the MIT license.</p>
-    <p class="text-sm text-gray-500">Version {{ appVersion }}</p>
     <p>
       Check our
       <a
@@ -39,6 +40,11 @@ const appVersion = __APP_VERSION__;
       for more information
     </p>
     <hr class="my-2" />
+    <p class="text-sm text-gray-500">
+      Version {{ appVersion }}
+      <Tag v-if="isExperimental" severity="warn" value="Experimental" class="ml-2 tag" />
+    </p>
+    <hr class="my-2" />
     <p>Felix Neubauer, Paul Bredl, Minye Xu, Keyuriben Patel, Jürgen Pleiss, Benjamin Uekermann</p>
     <p>Institute for Visualization and Interactive Systems, University of Stuttgart</p>
     <p>Universitätsstrasse 38D, 70569 Stuttgart, Germany</p>
@@ -67,4 +73,8 @@ const appVersion = __APP_VERSION__;
   </Dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.tag {
+  background-color: var(--p-primary-color);
+}
+</style>

meta_configurator/vite.config.js

@@ -11,12 +11,14 @@ const pkg = require('./package.json');
 
 // Use process.env.USE_BASE_PATH to determine if base path should be included
 const useMetaConfiguratorBasePath = process.env.USE_META_CONFIGURATOR_BASE_PATH === 'true';
+const isExperimental = process.env.EXPERIMENTAL !== 'false';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: useMetaConfiguratorBasePath ? '/meta-configurator/' : '/',
   define: {
     __APP_VERSION__: JSON.stringify(pkg.version),
+    __APP_EXPERIMENTAL__: JSON.stringify(isExperimental),
   },
   plugins: [vue(), vueJsx(),