From 550dd637bf10aabb6425de00faa5334af5189da9 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Wed, 31 Jan 2024 21:37:47 +0100 Subject: [PATCH 1/6] Expose version from package.json to app --- ui/package.json | 1 + ui/vite.config.ts | 2 ++ ui/yarn.lock | 10 ++++++++++ 3 files changed, 13 insertions(+) diff --git a/ui/package.json b/ui/package.json index ed3112a1a..a5789f66e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -36,6 +36,7 @@ "react-router-dom": "^6.8.2", "typescript": "^4.4.2", "vite": "^4.5.0", + "vite-plugin-package-version": "^1.1.0", "vite-tsconfig-paths": "^4.2.1" }, "scripts": { diff --git a/ui/vite.config.ts b/ui/vite.config.ts index 3066f870d..e8e0ba412 100644 --- a/ui/vite.config.ts +++ b/ui/vite.config.ts @@ -1,6 +1,7 @@ import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' import eslint from 'vite-plugin-eslint' +import version from 'vite-plugin-package-version' import svgr from 'vite-plugin-svgr' import viteTsconfigPaths from 'vite-tsconfig-paths' @@ -14,6 +15,7 @@ export default defineConfig({ viteTsconfigPaths(), svgr({ include: '**/*.svg?react' }), eslint({ exclude: ['/virtual:/**', 'node_modules/**'] }), + version(), ], server: { open: true, diff --git a/ui/yarn.lock b/ui/yarn.lock index 32c4b2f7c..d37d4ab50 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -6583,6 +6583,7 @@ __metadata: typescript: "npm:^4.4.2" vite: "npm:^4.5.0" vite-plugin-eslint: "npm:^1.8.1" + vite-plugin-package-version: "npm:^1.1.0" vite-plugin-svgr: "npm:^4.1.0" vite-tsconfig-paths: "npm:^4.2.1" languageName: unknown @@ -15894,6 +15895,15 @@ __metadata: languageName: node linkType: hard +"vite-plugin-package-version@npm:^1.1.0": + version: 1.1.0 + resolution: "vite-plugin-package-version@npm:1.1.0" + peerDependencies: + vite: ">=2.0.0-beta.69" + checksum: fb646bcc666746579cdb96dd81bc91c989f99176071d43b66588ed554f3d3c492b10a3b27ef715a2d6a5a2a52d2f776dd7365ccc6034dc65f2c65208236af38a + languageName: node + linkType: hard + "vite-plugin-svgr@npm:^4.1.0": version: 4.1.0 resolution: "vite-plugin-svgr@npm:4.1.0" From bff517817830d7ad75489c54b45726b1a973b5ff Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Wed, 31 Jan 2024 21:38:13 +0100 Subject: [PATCH 2/6] Setup beta info component --- .../header/beta-info/beta-info.module.scss | 23 +++++++++++++++++++ .../components/header/beta-info/beta-info.tsx | 19 +++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 ui/src/components/header/beta-info/beta-info.module.scss create mode 100644 ui/src/components/header/beta-info/beta-info.tsx diff --git a/ui/src/components/header/beta-info/beta-info.module.scss b/ui/src/components/header/beta-info/beta-info.module.scss new file mode 100644 index 000000000..627873f47 --- /dev/null +++ b/ui/src/components/header/beta-info/beta-info.module.scss @@ -0,0 +1,23 @@ +@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; + @include label(); +} + +.version { + @include paragraph-x-small(); + white-space: nowrap; +} diff --git a/ui/src/components/header/beta-info/beta-info.tsx b/ui/src/components/header/beta-info/beta-info.tsx new file mode 100644 index 000000000..a2f5f77cf --- /dev/null +++ b/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: 'More info about beta status goes here?', + VERSION: import.meta.env.PACKAGE_VERSION, // Read version from package.json +} + +export const BetaInfo = () => { + return ( +
+ +
{COPY.LABEL}
+ + Version {COPY.VERSION} +
+ ) +} From c5a322abbeadb1ec674406fa0c1d6ba5251d7755 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Wed, 31 Jan 2024 21:38:30 +0100 Subject: [PATCH 3/6] Update header with beta info + tweak for small screens --- ui/src/components/header/header.module.scss | 16 ++++++++++++++-- ui/src/components/header/header.tsx | 12 ++++++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/ui/src/components/header/header.module.scss b/ui/src/components/header/header.module.scss index f4c9c3a5d..915474f18 100644 --- a/ui/src/components/header/header.module.scss +++ b/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; } } diff --git a/ui/src/components/header/header.tsx b/ui/src/components/header/header.tsx index f3f31d9eb..6d01a9a6f 100644 --- a/ui/src/components/header/header.tsx +++ b/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} /> -
- {pages.map((page) => ( - - ))} + +
+
+ {pages.map((page) => ( + + ))} +
) } diff --git a/ui/tsconfig.json b/ui/tsconfig.json index ea83dc4fb..9ce6beeeb 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -18,5 +18,5 @@ "baseUrl": "src", "types": ["vite/client", "vite-plugin-svgr/client"] }, - "include": ["src"] + "include": ["src", "vite-env.d.ts"] } diff --git a/ui/vite-env.d.ts b/ui/vite-env.d.ts index 11f02fe2a..ea0f70cb8 100644 --- a/ui/vite-env.d.ts +++ b/ui/vite-env.d.ts @@ -1 +1,3 @@ /// + +declare const __COMMIT_HASH__: string diff --git a/ui/vite.config.ts b/ui/vite.config.ts index e8e0ba412..e18387773 100644 --- a/ui/vite.config.ts +++ b/ui/vite.config.ts @@ -1,10 +1,14 @@ import react from '@vitejs/plugin-react' +import childProcees from 'child_process' import { defineConfig } from 'vite' import eslint from 'vite-plugin-eslint' -import version from 'vite-plugin-package-version' 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,8 +19,10 @@ export default defineConfig({ viteTsconfigPaths(), svgr({ include: '**/*.svg?react' }), eslint({ exclude: ['/virtual:/**', 'node_modules/**'] }), - version(), ], + define: { + __COMMIT_HASH__: JSON.stringify(commitHash), + }, server: { open: true, port: 3000, diff --git a/ui/yarn.lock b/ui/yarn.lock index d37d4ab50..32c4b2f7c 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -6583,7 +6583,6 @@ __metadata: typescript: "npm:^4.4.2" vite: "npm:^4.5.0" vite-plugin-eslint: "npm:^1.8.1" - vite-plugin-package-version: "npm:^1.1.0" vite-plugin-svgr: "npm:^4.1.0" vite-tsconfig-paths: "npm:^4.2.1" languageName: unknown @@ -15895,15 +15894,6 @@ __metadata: languageName: node linkType: hard -"vite-plugin-package-version@npm:^1.1.0": - version: 1.1.0 - resolution: "vite-plugin-package-version@npm:1.1.0" - peerDependencies: - vite: ">=2.0.0-beta.69" - checksum: fb646bcc666746579cdb96dd81bc91c989f99176071d43b66588ed554f3d3c492b10a3b27ef715a2d6a5a2a52d2f776dd7365ccc6034dc65f2c65208236af38a - languageName: node - linkType: hard - "vite-plugin-svgr@npm:^4.1.0": version: 4.1.0 resolution: "vite-plugin-svgr@npm:4.1.0" From 5530250873ef073fa22c0d386f9368325e321b1b Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Wed, 31 Jan 2024 22:20:31 +0100 Subject: [PATCH 5/6] Tweak copy --- ui/src/components/header/beta-info/beta-info.module.scss | 1 + ui/src/components/header/beta-info/beta-info.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/src/components/header/beta-info/beta-info.module.scss b/ui/src/components/header/beta-info/beta-info.module.scss index 627873f47..00dcaf0cd 100644 --- a/ui/src/components/header/beta-info/beta-info.module.scss +++ b/ui/src/components/header/beta-info/beta-info.module.scss @@ -14,6 +14,7 @@ border-radius: 4px; background-color: $color-success-100; color: $color-success-700; + text-align: center; @include label(); } diff --git a/ui/src/components/header/beta-info/beta-info.tsx b/ui/src/components/header/beta-info/beta-info.tsx index 1956c314c..2321496ab 100644 --- a/ui/src/components/header/beta-info/beta-info.tsx +++ b/ui/src/components/header/beta-info/beta-info.tsx @@ -2,8 +2,8 @@ import { Tooltip } from 'design-system/components/tooltip/tooltip' import styles from './beta-info.module.scss' const COPY = { - LABEL: 'Beta', - INFO: 'More info about beta status goes here?', + LABEL: 'Preview release', + INFO: 'All data is considered test data and may change or be deleted at any time. Use with caution.', VERSION: `Build ${__COMMIT_HASH__}`, } From 6b60e85c77b348b9506310c634b98eb1f18ddd3e Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Wed, 31 Jan 2024 22:51:58 +0100 Subject: [PATCH 6/6] Tweak copy --- ui/src/components/header/beta-info/beta-info.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/header/beta-info/beta-info.tsx b/ui/src/components/header/beta-info/beta-info.tsx index 2321496ab..1e4aef75d 100644 --- a/ui/src/components/header/beta-info/beta-info.tsx +++ b/ui/src/components/header/beta-info/beta-info.tsx @@ -2,8 +2,8 @@ import { Tooltip } from 'design-system/components/tooltip/tooltip' import styles from './beta-info.module.scss' const COPY = { - LABEL: 'Preview release', - INFO: 'All data is considered test data and may change or be deleted at any time. Use with caution.', + 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__}`, }