Show beta info in header (#340)

* Expose version from package.json to app

* Setup beta info component

* Update header with beta info + tweak for small screens

* Use latest commit hash instead of package.json version

Author: annavik

ui/src/components/header/beta-info/beta-info.module.scss

@@ -0,0 +1,24 @@
+@import 'src/design-system/variables/variables.scss';
+@import 'src/design-system/variables/colors.scss';
+@import 'src/design-system/variables/typography.scss';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.badge {
+  padding: 4px 16px;
+  border-radius: 4px;
+  background-color: $color-success-100;
+  color: $color-success-700;
+  text-align: center;
+  @include label();
+}
+
+.version {
+  @include paragraph-x-small();
+  white-space: nowrap;
+}

ui/src/components/header/beta-info/beta-info.tsx

@@ -0,0 +1,19 @@
+import { Tooltip } from 'design-system/components/tooltip/tooltip'
+import styles from './beta-info.module.scss'
+
+const COPY = {
+  LABEL: 'Beta',
+  INFO: 'All data is considered test data and may be changed or deleted at any time. Use with caution.',
+  VERSION: `Build ${__COMMIT_HASH__}`,
+}
+
+export const BetaInfo = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Tooltip content={COPY.INFO}>
+        <div className={styles.badge}>{COPY.LABEL}</div>
+      </Tooltip>
+      <span className={styles.version}>{COPY.VERSION}</span>
+    </div>
+  )
+}

ui/src/components/header/header.module.scss

@@ -8,7 +8,8 @@
   height: 64px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 32px;
   padding: 0 100px;
   background-color: $color-generic-white;
   border-bottom: 1px solid $color-neutral-100;
@@ -22,12 +23,18 @@
   vertical-align: middle;
 }
 
-.infoPages {
+.rightContent {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex: 1;
   gap: 4px;
 }
 
+.infoPages {
+  display: contents;
+}
+
 @media only screen and (max-width: $medium-screen-breakpoint) {
   .header {
     padding: 0 32px;
@@ -37,5 +44,10 @@
 @media only screen and (max-width: $small-screen-breakpoint) {
   .header {
     padding: 0 16px;
+    gap: 16px;
+  }
+
+  .infoPages {
+    display: none;
   }
 }

ui/src/components/header/header.tsx

@@ -8,6 +8,7 @@ import { STRING, translate } from 'utils/language'
 import { usePageTitle } from 'utils/usePageTitle'
 import { useUser } from 'utils/user/userContext'
 import ami from './ami.png'
+import { BetaInfo } from './beta-info/beta-info'
 import styles from './header.module.scss'
 import { UserInfoDialog } from './user-info-dialog/user-info-dialog'
 
@@ -31,10 +32,13 @@ export const Header = () => {
           className={styles.logo}
         />
       </Link>
-      <div className={styles.infoPages}>
-        {pages.map((page) => (
-          <InfoDialog key={page.id} name={page.name} slug={page.slug} />
-        ))}
+      <BetaInfo />
+      <div className={styles.rightContent}>
+        <div className={styles.infoPages}>
+          {pages.map((page) => (
+            <InfoDialog key={page.id} name={page.name} slug={page.slug} />
+          ))}
+        </div>
         <Button
           label={translate(STRING.SIGN_UP)}
           theme={ButtonTheme.Plain}

ui/tsconfig.json

@@ -18,5 +18,5 @@
     "baseUrl": "src",
     "types": ["vite/client", "vite-plugin-svgr/client"]
   },
-  "include": ["src"]
+  "include": ["src", "vite-env.d.ts"]
 }

ui/vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare const __COMMIT_HASH__: string

ui/vite.config.ts

@@ -1,9 +1,14 @@
 import react from '@vitejs/plugin-react'
+import childProcees from 'child_process'
 import { defineConfig } from 'vite'
 import eslint from 'vite-plugin-eslint'
 import svgr from 'vite-plugin-svgr'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 
+const commitHash = childProcees
+  .execSync('git rev-parse --short HEAD')
+  .toString()
+
 export default defineConfig({
   base: '/',
   build: {
@@ -15,6 +20,9 @@ export default defineConfig({
     svgr({ include: '**/*.svg?react' }),
     eslint({ exclude: ['/virtual:/**', 'node_modules/**'] }),
   ],
+  define: {
+    __COMMIT_HASH__: JSON.stringify(commitHash),
+  },
   server: {
     open: true,
     port: 3000,