Merge pull request #234 from mikecao/dev

v0.62.0 Prisma update and version check

components/common/DropDown.js

@@ -37,7 +37,7 @@ export default function DropDown({
   return (
     <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
       <div className={styles.value}>
-        {options.find(e => e.value === value)?.label || value}
+        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (

components/common/Dropdown.module.css

@@ -19,6 +19,10 @@
   min-width: 160px;
 }
 
+.text {
+  flex: 1;
+}
+
 .icon {
   padding-left: 20px;
 }

components/common/UpdateNotice.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import useVersion from 'hooks/useVersion';
+import styles from './UpdateNotice.module.css';
+import ButtonLayout from '../layout/ButtonLayout';
+import Button from './Button';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function UpdateNotice() {
+  const forceUpdte = useForceUpdate();
+  const { hasUpdate, latest, updateCheck } = useVersion();
+
+  function handleViewClick() {
+    location.href = 'https://github.com/mikecao/umami/releases';
+    updateCheck();
+    forceUpdte();
+  }
+
+  function handleDismissClick() {
+    updateCheck();
+    forceUpdte();
+  }
+
+  if (!hasUpdate) {
+    return null;
+  }
+
+  return (
+    <div className={styles.notice}>
+      <div className={styles.message}>
+        <FormattedMessage
+          id="message.new-version-available"
+          defaultMessage="A new version of umami {version} is available!"
+          values={{ version: `v${latest}` }}
+        />
+      </div>
+      <ButtonLayout>
+        <Button size="xsmall" variant="action" onClick={handleViewClick}>
+          <FormattedMessage id="button.view-details" defaultMessage="View details" />
+        </Button>
+        <Button size="xsmall" onClick={handleDismissClick}>
+          <FormattedMessage id="button.dismiss" defaultMessage="Dismiss" />
+        </Button>
+      </ButtonLayout>
+    </div>
+  );
+}

components/common/UpdateNotice.module.css

@@ -0,0 +1,13 @@
+.notice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.message {
+  text-align: center;
+  margin-right: 20px;
+}

components/layout/Header.js

@@ -6,6 +6,7 @@ import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
 import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
+import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
@@ -15,6 +16,7 @@ export default function Header() {
 
   return (
     <header className="container">
+      {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.title}>

components/layout/Page.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './Page.module.css';
 
-export default function Page({ children }) {
-  return <div className={styles.page}>{children}</div>;
+export default function Page({ className, children }) {
+  return <div className={classNames(styles.page, className)}>{children}</div>;
 }

components/layout/PageHeader.module.css

@@ -4,4 +4,5 @@
   align-items: center;
   align-content: center;
   min-height: 80px;
+  align-self: stretch;
 }

components/metrics/WebsiteChart.js

@@ -59,7 +59,7 @@ export default function WebsiteChart({
   }
 
   return (
-    <>
+    <div className={styles.container}>
       <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
@@ -92,7 +92,7 @@ export default function WebsiteChart({
           />
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

components/metrics/WebsiteChart.module.css

@@ -1,6 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
 }
 
 .title {

components/settings/Settings.js → components/pages/Settings.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
-import WebsiteSettings from './WebsiteSettings';
-import AccountSettings from './AccountSettings';
-import ProfileSettings from './ProfileSettings';
+import WebsiteSettings from '../settings/WebsiteSettings';
+import AccountSettings from '../settings/AccountSettings';
+import ProfileSettings from '../settings/ProfileSettings';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
@@ -26,7 +26,7 @@ export default function Settings() {
     {
       label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
       value: ACCOUNTS,
-      hidden: !user.is_admin,
+      hidden: !user?.is_admin,
     },
     {
       label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,

components/pages/Test.module.css

@@ -0,0 +1,5 @@
+.test {
+  border: 1px solid var(--gray200);
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+}

components/pages/TestConsole.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import Head from 'next/head';
+import Link from 'next/link';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import styles from './Test.module.css';
+import WebsiteChart from '../metrics/WebsiteChart';
+import EventsChart from '../metrics/EventsChart';
+import Button from '../common/Button';
+import EmptyPlaceholder from '../common/EmptyPlaceholder';
+
+export default function TestConsole() {
+  const user = useSelector(state => state.user);
+  const [website, setWebsite] = useState();
+  const { data } = useFetch('/api/websites');
+
+  if (!data || !user?.is_admin) {
+    return null;
+  }
+
+  const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+  const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
+
+  function handleSelect(value) {
+    setWebsite(data.find(({ website_id }) => website_id === value));
+  }
+
+  function handleClick() {
+    window.umami('event (default)');
+    window.umami.trackView('/page-view', 'https://www.google.com');
+    window.umami.trackEvent('event (custom)', 'custom-type');
+  }
+
+  return (
+    <Page>
+      <Head>
+        {typeof window !== 'undefined' && website && (
+          <script async defer data-website-id={website.website_uuid} src="/umami.js" />
+        )}
+      </Head>
+      <PageHeader>
+        <div>Test Console</div>
+        <DropDown
+          value={selectedValue || 'Select website'}
+          options={options}
+          onChange={handleSelect}
+        />
+      </PageHeader>
+      {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
+      {selectedValue && (
+        <>
+          <div className={classNames(styles.test, 'row')}>
+            <div className="col-4">
+              <PageHeader>Page links</PageHeader>
+              <div>
+                <Link href={`?page=1`}>
+                  <a>page one</a>
+                </Link>
+              </div>
+              <div>
+                <Link href={`?page=2`}>
+                  <a>page two</a>
+                </Link>
+              </div>
+            </div>
+            <div className="col-4">
+              <PageHeader>CSS events</PageHeader>
+              <Button id="primary-button" className="umami--click--primary-button" variant="action">
+                Send event
+              </Button>
+            </div>
+            <div className="col-4">
+              <PageHeader>Javascript events</PageHeader>
+              <Button id="manual-button" variant="action" onClick={handleClick}>
+                Run script
+              </Button>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-12">
+              <WebsiteChart websiteId={website.website_id} title={website.name} showLink />
+              <PageHeader>Events</PageHeader>
+              <EventsChart websiteId={website.website_id} />
+            </div>
+          </div>
+        </>
+      )}
+    </Page>
+  );
+}

components/WebsiteDetails.js → components/pages/WebsiteDetails.js

@@ -9,14 +9,14 @@ import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
-import PagesTable from './metrics/PagesTable';
-import ReferrersTable from './metrics/ReferrersTable';
-import BrowsersTable from './metrics/BrowsersTable';
-import OSTable from './metrics/OSTable';
-import DevicesTable from './metrics/DevicesTable';
-import CountriesTable from './metrics/CountriesTable';
-import EventsTable from './metrics/EventsTable';
-import EventsChart from './metrics/EventsChart';
+import PagesTable from '../metrics/PagesTable';
+import ReferrersTable from '../metrics/ReferrersTable';
+import BrowsersTable from '../metrics/BrowsersTable';
+import OSTable from '../metrics/OSTable';
+import DevicesTable from '../metrics/DevicesTable';
+import CountriesTable from '../metrics/CountriesTable';
+import EventsTable from '../metrics/EventsTable';
+import EventsChart from '../metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 
@@ -42,16 +42,17 @@ export default function WebsiteDetails({ websiteId, token }) {
   } = usePageQuery();
 
   const BackButton = () => (
-    <Link
-      key="back-button"
-      className={styles.backButton}
-      href={router.pathname}
-      as={resolve({ view: undefined })}
-      icon={<Arrow />}
-      size="small"
-    >
-      <FormattedMessage id="button.back" defaultMessage="Back" />
-    </Link>
+    <div className={styles.backButton}>
+      <Link
+        key="back-button"
+        href={router.pathname}
+        as={resolve({ view: undefined })}
+        icon={<Arrow />}
+        size="small"
+      >
+        <FormattedMessage id="button.back" defaultMessage="Back" />
+      </Link>
+    </div>
   );
 
   const menuOptions = [

components/WebsiteDetails.module.css → components/pages/WebsiteDetails.module.css

@@ -16,6 +16,9 @@
 }
 
 .backButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-bottom: 16px;
 }
 

components/WebsiteList.module.css → components/pages/WebsiteList.module.css

@@ -2,6 +2,7 @@
   padding-bottom: 30px;
   border-bottom: 1px solid var(--gray300);
   margin-bottom: 30px;
+  align-self: stretch;
 }
 
 .website:last-child {

components/settings/ProfileSettings.js

@@ -10,6 +10,7 @@ import TimezoneSetting from 'components/settings/TimezoneSetting';
 import Dots from 'assets/ellipsis-h.svg';
 import styles from './ProfileSettings.module.css';
 import DateRangeSetting from './DateRangeSetting';
+import useEscapeKey from 'hooks/useEscapeKey';
 
 export default function ProfileSettings() {
   const user = useSelector(state => state.user);
@@ -22,6 +23,10 @@ export default function ProfileSettings() {
     setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
   }
 
+  useEscapeKey(() => {
+    setChangePassword(false);
+  });
+
   return (
     <>
       <PageHeader>

hooks/useEscapeKey.js

@@ -0,0 +1,19 @@
+import { useEffect, useCallback } from 'react';
+
+export default function useEscapeKey(handler) {
+  const escFunction = useCallback(event => {
+    if (event.keyCode === 27) {
+      handler(event);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction, false);
+
+    return () => {
+      document.removeEventListener('keydown', escFunction, false);
+    };
+  }, [escFunction]);
+
+  return null;
+}

hooks/useVersion.js

@@ -0,0 +1,27 @@
+import { useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import semver from 'semver';
+import { getItem, setItem } from 'lib/web';
+import { checkVersion } from 'redux/actions/app';
+import { VERSION_CHECK } from 'lib/constants';
+
+export default function useVersion() {
+  const dispatch = useDispatch();
+  const versions = useSelector(state => state.app.versions);
+  const lastCheck = getItem(VERSION_CHECK);
+
+  const { current, latest } = versions;
+  const hasUpdate = latest && semver.gt(latest, current) && lastCheck?.version !== latest;
+
+  const updateCheck = useCallback(() => {
+    setItem(VERSION_CHECK, { version: latest, time: Date.now() });
+  }, [versions]);
+
+  useEffect(() => {
+    if (!versions.latest) {
+      dispatch(checkVersion());
+    }
+  }, [versions]);
+
+  return { ...versions, hasUpdate, updateCheck };
+}