feat: added Testing page in header trough VITE_APP_ENV_BADGE env conf…

…ig variable; optimized header appearance
codeworks-projects · Aug 22, 2023 · a18d0ab · a18d0ab
1 parent 22d0e0e
commit a18d0ab
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/databrowser/.env.example b/databrowser/.env.example
@@ -5,4 +5,5 @@ VITE_APP_KEYCLOAK_REDIRECT_URI=http://localhost:3000/silent-check-sso.html
 VITE_APP_IMAGE_UPLOAD_URL=https://api.tourism.testingmachine.eu/v1/FileUpload/Image
 VITE_APP_FILE_UPLOAD_URL=https://api.tourism.testingmachine.eu/v1/FileUpload
 VITE_APP_ODH_LOOKUP_BASE_URL=https://api.tourism.testingmachine.eu
-VITE_APP_HOTJAR_ID=123456
+VITE_APP_HOTJAR_ID=123456
+VITE_APP_ENV_BADGE=TESTING
diff --git a/databrowser/src/components/tag/TagCustom.vue b/databrowser/src/components/tag/TagCustom.vue
@@ -69,6 +69,11 @@ const types: Record<TagType, Color> = {
     text: 'text-black',
     dot: 'bg-black',
   },
+  pink: {
+    background: 'bg-pink-400',
+    text: 'text-black',
+    dot: 'bg-black',
+  },
 };
 
 const props = withDefaults(

diff --git a/databrowser/src/components/tag/types.ts b/databrowser/src/components/tag/types.ts
@@ -10,6 +10,7 @@ export type TagType =
   | 'green'
   | 'red'
   | 'yellow'
-  | 'info';
+  | 'info'
+  | 'pink';
 
 export type TagSize = 'xs' | 'md';
diff --git a/databrowser/src/env.d.ts b/databrowser/src/env.d.ts
@@ -21,6 +21,7 @@ interface ImportMetaEnv
   readonly VITE_APP_FILE_UPLOAD_URL: string;
   readonly VITE_APP_ODH_LOOKUP_BASE_URL: string;
   readonly VITE_APP_HOTJAR_ID: string;
+  readonly VITE_APP_ENV_BADGE: string;
 }
 
 interface ImportMeta {

diff --git a/databrowser/src/layouts/AppHeader.vue b/databrowser/src/layouts/AppHeader.vue
@@ -8,10 +8,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <div class="sticky top-0 z-10 w-full">
     <div class="bg-gray-50">
-      <ContentAlignmentX
-        class="m-auto flex justify-between px-4 py-1 xl:w-default 2xl:px-0"
-      >
+      <ContentAlignmentX class="m-auto flex w-full gap-2 px-4 py-2 2xl:px-0">
         <TagCustom class="text-sm" type="info" text="BETA" />
+        <TagCustom
+          v-if="envBadge"
+          class="text-sm"
+          type="pink"
+          :text="envBadge"
+        />
+        <div class="flex grow" />
         <ExternalLink
           href="https://opendatahub.com"
           variant="no-underline"
@@ -29,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </div>
     <div class="bg-white">
       <ContentAlignmentX
-        class="m-auto flex flex-col gap-x-20 gap-y-2 px-4 py-1 lg:flex-row xl:w-default 2xl:px-0"
+        class="m-auto flex flex-col gap-x-20 gap-y-2 px-4 py-2 lg:flex-row 2xl:px-0"
       >
         <div class="flex items-center">
           <router-link
@@ -86,6 +91,8 @@ const emit = defineEmits<{
   toggleMenu: [boolean];
 }>();
 
+const envBadge = import.meta.env.VITE_APP_ENV_BADGE;
+
 function toggleMenu() {
   emit('toggleMenu', !props.isMenuOpen);
 }

diff --git a/databrowser/tailwind.config.js b/databrowser/tailwind.config.js
@@ -48,6 +48,9 @@ module.exports = {
           700: '#494d50',
           900: '#3c4043',
         },
+        pink: {
+          400: '#FA00FF',
+        },
       },
       spacing: {
         default: '80rem',