-
Notifications
You must be signed in to change notification settings - Fork 356
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: version upgrade notification bug [CM-411] (#10069)
- Loading branch information
1 parent
935fa66
commit 22ad457
Showing
7 changed files
with
171 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<typeof import('hew/Theme')>()), | ||
useTheme, | ||
}; | ||
}); | ||
|
||
const setup = () => { | ||
render( | ||
<UIProvider theme={DefaultTheme.Light}> | ||
<ThemeProvider> | ||
<VersionChecker version={NEWER_VERSION} /> | ||
</ThemeProvider> | ||
</UIProvider>, | ||
); | ||
}; | ||
|
||
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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<Props> = ({ 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 = ( | ||
<Button type="primary" onClick={refreshPage}> | ||
Update Now | ||
</Button> | ||
); | ||
const message = 'New WebUI Version'; | ||
const description = ( | ||
<div> | ||
WebUI version <b>v{version}</b> is available. Check out what's new in our | ||
<Link external path={paths.docs('/release-notes.html')}> | ||
release notes | ||
</Link> | ||
. | ||
</div> | ||
); | ||
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters