ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix update notice.

pull/1825/head
Mike Cao 2023-03-01 23:59:01 -08:00
parent 82f0bc3d2b
commit 5262d19c8b
6 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/common/UpdateNotice.js
View File

@ -1,13 +1,14 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'react-intl'; import { useIntl } from 'react-intl';
import { Button, Banner, Row, Column, Flexbox } from 'react-basics';
import { setItem } from 'next-basics'; import { setItem } from 'next-basics';
import ButtonLayout from 'components/layout/ButtonLayout';
import useStore, { checkVersion } from 'store/version'; import useStore, { checkVersion } from 'store/version';
import { REPO_URL, VERSION_CHECK } from 'lib/constants'; import { REPO_URL, VERSION_CHECK } from 'lib/constants';
import { Button } from 'react-basics'; import { labels, messages } from 'components/messages';
import styles from './UpdateNotice.module.css'; import styles from './UpdateNotice.module.css';
export default function UpdateNotice() { export default function UpdateNotice() {
const { formatMessage } = useIntl();
const { latest, checked, hasUpdate, releaseUrl } = useStore(); const { latest, checked, hasUpdate, releaseUrl } = useStore();
const [dismissed, setDismissed] = useState(false); const [dismissed, setDismissed] = useState(false);
@ -37,22 +38,16 @@ export default function UpdateNotice() {
} }
return ( return (
<div className={styles.notice}> <Row className={styles.notice}>
<div className={styles.message}> <Column variant="two" className={styles.message}>
<FormattedMessage {formatMessage(messages.newVersionAvailable, { version: `v${latest}` })}
id="message.new-version-available" </Column>
defaultMessage="A new version of umami {version} is available!" <Column className={styles.buttons}>
values={{ version: `v${latest}` }} <Button variant="primary" onClick={handleViewClick}>
/> {formatMessage(labels.viewDetails)}
</div>
<ButtonLayout className={styles.buttons}>
<Button size="xsmall" variant="action" onClick={handleViewClick}>
<FormattedMessage id="label.view-details" defaultMessage="View details" />
</Button> </Button>
<Button size="xsmall" onClick={handleDismissClick}> <Button onClick={handleDismissClick}>{formatMessage(labels.dismiss)}</Button>
<FormattedMessage id="label.dismiss" defaultMessage="Dismiss" /> </Column>
</Button> </Row>
</ButtonLayout>
</div>
); );
} }

30
components/common/UpdateNotice.module.css
View File

@ -1,17 +1,33 @@
.notice { .notice {
display: flex; position: absolute;
justify-content: center; max-width: 800px;
align-items: center; gap: 20px;
padding-top: 20px; margin: 20px auto;
justify-self: center;
background: #fff;
padding: 20px;
border: 1px solid var(--base300);
border-radius: var(--border-radius);
z-index: 1000;
} }
.message { .message {
display: flex;
justify-content: center;
align-items: center;
font-weight: 600; font-weight: 600;
flex: 1;
text-align: center;
margin-right: 20px;
} }
.buttons { .buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 10px;
flex: 0; flex: 0;
} }
@media only screen and (max-width: 992px) {
.message {
height: 80px;
}
}

6
components/layout/AppLayout.js
View File

@ -1,6 +1,8 @@
import { Container } from 'react-basics'; import { Container } from 'react-basics';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router';
import NavBar from 'components/layout/NavBar'; import NavBar from 'components/layout/NavBar';
import UpdateNotice from 'components/common/UpdateNotice';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
import useConfig from 'hooks/useConfig'; import useConfig from 'hooks/useConfig';
import { UI_LAYOUT_BODY } from 'lib/constants'; import { UI_LAYOUT_BODY } from 'lib/constants';
@ -9,13 +11,17 @@ import styles from './AppLayout.module.css';
export default function AppLayout({ title, children }) { export default function AppLayout({ title, children }) {
const { user } = useRequireLogin(); const { user } = useRequireLogin();
const config = useConfig(); const config = useConfig();
const { pathname } = useRouter();
if (!user || !config) { if (!user || !config) {
return null; return null;
} }
const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/');
return ( return (
<div className={styles.layout}> <div className={styles.layout}>
{allowUpdate && <UpdateNotice />}
<Head> <Head>
<title>{title ? `${title} | umami` : 'umami'}</title> <title>{title ? `${title} | umami` : 'umami'}</title>
</Head> </Head>

8
components/layout/Header.js
View File

@ -1,15 +1,15 @@
import { useRouter } from 'next/router';
import { Column, Row } from 'react-basics';
import classNames from 'classnames';
import HamburgerButton from 'components/common/HamburgerButton'; import HamburgerButton from 'components/common/HamburgerButton';
import UpdateNotice from 'components/common/UpdateNotice'; import UpdateNotice from 'components/common/UpdateNotice';
import LanguageButton from 'components/input/LanguageButton'; import LanguageButton from 'components/input/LanguageButton';
import ThemeButton from 'components/input/ThemeButton'; import ThemeButton from 'components/input/ThemeButton';
import UserButton from 'components/input/UserButton'; import UserButton from 'components/input/UserButton';
import SettingsButton from 'components/input/SettingsButton';
import useConfig from 'hooks/useConfig'; import useConfig from 'hooks/useConfig';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import { useRouter } from 'next/router';
import { Column, Row } from 'react-basics';
import SettingsButton from '../input/SettingsButton';
import styles from './Header.module.css'; import styles from './Header.module.css';
import classNames from 'classnames';
export default function Header({ className }) { export default function Header({ className }) {
const { user } = useUser(); const { user } = useUser();

1
components/layout/NavBar.js
View File

@ -22,7 +22,6 @@ export default function NavBar() {
const analytics = [ const analytics = [
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> }, { label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> }, { label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
{ label: formatMessage(labels.queries), url: '/queries', icon: <Icons.Search /> },
]; ];
const settings = [ const settings = [

5
components/messages.js
View File

@ -98,6 +98,7 @@ export const labels = defineMessages({
sessions: { id: 'label.sessions', defaultMessage: 'Sessions' }, sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' }, pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
logs: { id: 'label.activity-log', defaultMessage: 'Activity log' }, logs: { id: 'label.activity-log', defaultMessage: 'Activity log' },
dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' },
}); });
export const messages = defineMessages({ export const messages = defineMessages({
@ -177,6 +178,10 @@ export const messages = defineMessages({
id: 'message.event-log', id: 'message.event-log',
defaultMessage: '{event} on {url}', defaultMessage: '{event} on {url}',
}, },
newVersionAvailable: {
id: 'new-version-available',
defaultMessage: 'A new version of Umami {version} is available!',
},
}); });
export const devices = defineMessages({ export const devices = defineMessages({