+
{enabled ? (
<>
diff --git a/webui/react/src/components/VersionChecker.test.tsx b/webui/react/src/components/VersionChecker.test.tsx
new file mode 100644
index 00000000000..f1fe09163e3
--- /dev/null
+++ b/webui/react/src/components/VersionChecker.test.tsx
@@ -0,0 +1,81 @@
+import { render, waitFor } from '@testing-library/react';
+import UIProvider, { DefaultTheme } from 'hew/Theme';
+
+import VersionChecker from 'components/VersionChecker';
+
+import { ThemeProvider } from './ThemeProvider';
+
+const THEME_CLASS = 'ui-provider-test';
+const OLDER_VERSION = '1';
+const NEWER_VERSION = '2';
+
+const mockWarning = vi.hoisted(() => vi.fn());
+vi.mock('hew/Toast', () => ({
+ notification: {
+ warning: mockWarning,
+ },
+}));
+
+vi.mock('hew/Theme', async (importOriginal) => {
+ const useTheme = () => {
+ return {
+ themeSettings: {
+ className: THEME_CLASS,
+ },
+ };
+ };
+
+ return {
+ __esModule: true,
+ ...(await importOriginal()),
+ useTheme,
+ };
+});
+
+const setup = () => {
+ render(
+
+
+
+ ,
+ );
+};
+
+describe('VersionChecker', () => {
+ afterEach(() => {
+ vi.unstubAllEnvs();
+ mockWarning.mockReset();
+ });
+
+ it('shows warning if version mismatch in production mode', async () => {
+ vi.stubEnv('IS_DEV', 'false');
+ vi.stubEnv('VERSION', OLDER_VERSION);
+ setup();
+ await waitFor(() => {
+ expect(mockWarning).toHaveBeenCalledWith(
+ expect.objectContaining({
+ className: THEME_CLASS,
+ duration: 0,
+ key: 'version-mismatch',
+ message: 'New WebUI Version',
+ placement: 'bottomRight',
+ }),
+ );
+ });
+ });
+
+ it('does not show warning in development mode', () => {
+ vi.stubEnv('IS_DEV', 'true');
+ vi.stubEnv('VERSION', OLDER_VERSION);
+ setup();
+ expect(mockWarning).not.toBeCalled();
+ });
+
+ it('does not show warning if version matches', () => {
+ vi.stubEnv('IS_DEV', 'false');
+ vi.stubEnv('VERSION', NEWER_VERSION);
+ setup();
+ expect(mockWarning).not.toBeCalled();
+ });
+});
diff --git a/webui/react/src/components/VersionChecker.tsx b/webui/react/src/components/VersionChecker.tsx
new file mode 100644
index 00000000000..833e8766ed1
--- /dev/null
+++ b/webui/react/src/components/VersionChecker.tsx
@@ -0,0 +1,62 @@
+import Button from 'hew/Button';
+import { useTheme } from 'hew/Theme';
+import { notification } from 'hew/Toast';
+import { useState } from 'react';
+
+import Link from 'components/Link';
+import { paths } from 'routes/utils';
+import { refreshPage } from 'utils/browser';
+import { isBoolean } from 'utils/data';
+
+interface Props {
+ version: string;
+}
+
+const VersionChecker: React.FC = ({ version }: Props) => {
+ const {
+ themeSettings: { className: themeClass },
+ } = useTheme();
+ const [closed, setClosed] = useState(false);
+ // process.env.IS_DEV must be string type for vi.stubEnv, otherwise is boolean:
+ const isDev = isBoolean(process.env.IS_DEV) ? process.env.IS_DEV : process.env.IS_DEV === 'true';
+
+ /*
+ * Check to make sure the WebUI version matches the platform version.
+ * Skip this check for development version.
+ */
+ if (!isDev && version !== process.env.VERSION) {
+ const btn = (
+
+ );
+ const message = 'New WebUI Version';
+ const description = (
+
+ WebUI version v{version} is available. Check out what's new in our
+
+ release notes
+
+ .
+
+ );
+ if (!closed) {
+ setTimeout(() => {
+ notification.warning({
+ btn,
+ className: themeClass,
+ description,
+ duration: 0,
+ key: 'version-mismatch',
+ message,
+ onClose: () => setClosed(true),
+ placement: 'bottomRight',
+ });
+ }, 0); // 0ms setTimeout needed to make sure UIProvider is available.
+ }
+ }
+
+ return null;
+};
+
+export default VersionChecker;
diff --git a/webui/react/src/pages/SignIn.tsx b/webui/react/src/pages/SignIn.tsx
index 1da1ee7d6a1..6fe5b103fcb 100644
--- a/webui/react/src/pages/SignIn.tsx
+++ b/webui/react/src/pages/SignIn.tsx
@@ -1,6 +1,8 @@
import Button from 'hew/Button';
+import CodeSample from 'hew/CodeSample';
import Divider from 'hew/Divider';
import Form from 'hew/Form';
+import { useTheme } from 'hew/Theme';
import { notification } from 'hew/Toast';
import { useObservable } from 'micro-observables';
import React, { useEffect, useMemo, useState } from 'react';
@@ -8,7 +10,6 @@ import { useLocation } from 'react-router-dom';
import LogoGoogle from 'assets/images/logo-sso-google-white.svg?url';
import LogoOkta from 'assets/images/logo-sso-okta-white.svg?url';
-import AuthToken from 'components/AuthToken';
import DeterminedAuth from 'components/DeterminedAuth';
import Logo from 'components/Logo';
import Page from 'components/Page';
@@ -41,7 +42,9 @@ const SignIn: React.FC = () => {
const info = useObservable(determinedStore.info);
const [canceler] = useState(new AbortController());
const { rbacEnabled } = useObservable(determinedStore.info);
-
+ const {
+ themeSettings: { className: themeClass },
+ } = useTheme();
const queries = useMemo(() => new URLSearchParams(location.search), [location.search]);
const ssoQueries = handleRelayState(queries);
@@ -74,9 +77,10 @@ const SignIn: React.FC = () => {
// Show auth token via notification if requested via query parameters.
if (queries.get('cli') === 'true')
notification.open({
- description: