Merge pull request #1955 from umami-software/dev

v2.1.0

.dockerignore

@@ -4,3 +4,4 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
+.idea

.eslintrc.json

@@ -46,6 +46,7 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "import/no-anonymous-default-export": "off",
+    "import/no-named-as-default": "off",
     "@next/next/no-img-element": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",

.github/workflows/cd-manual.yml

@@ -18,7 +18,7 @@ jobs:
         db-type: [postgresql, mysql]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - uses: mr-smithers-excellent/docker-build-push@v6
         name: Build & push Docker image for ${{ matrix.db-type }}

.github/workflows/cd.yml

@@ -3,7 +3,6 @@ name: Create docker images
 on: [create]
 
 jobs:
-
   build:
     name: Build, push, and deploy
     if: ${{ startsWith(github.ref, 'refs/tags/v') }}
@@ -14,7 +13,7 @@ jobs:
         db-type: [postgresql, mysql]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Set env
         run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV

.gitignore

@@ -17,6 +17,7 @@ node_modules
 /build
 /public/script.js
 /geo
+/dist
 
 # misc
 .DS_Store

.prettierignore

@@ -1 +1 @@
-/public/
+/public/script.js

components/common/EmptyPlaceholder.js

@@ -1,7 +1,7 @@
 import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
-function EmptyPlaceholder({ message, children }) {
+export function EmptyPlaceholder({ message, children }) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
       <Icon size="xl">

components/common/ErrorMessage.js

@@ -2,7 +2,7 @@ import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function ErrorMessage() {
+export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
 
   return (
@@ -14,3 +14,5 @@ export default function ErrorMessage() {
     </div>
   );
 }
+
+export default ErrorMessage;

components/common/Favicon.js

@@ -5,7 +5,7 @@ function getHostName(url) {
   return match && match.length > 1 ? match[1] : null;
 }
 
-function Favicon({ domain, ...props }) {
+export function Favicon({ domain, ...props }) {
   const hostName = domain ? getHostName(domain) : null;
 
   return hostName ? (

components/common/Favicon.module.css

@@ -1,3 +1,3 @@
 .favicon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }

components/common/FilterButtons.js

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 
-export default function FilterButtons({ items, selectedKey, onSelect }) {
+export function FilterButtons({ items, selectedKey, onSelect }) {
   return (
     <Flexbox justifyContent="center">
       <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
@@ -9,3 +9,5 @@ export default function FilterButtons({ items, selectedKey, onSelect }) {
     </Flexbox>
   );
 }
+
+export default FilterButtons;

components/common/FilterLink.js

@@ -6,7 +6,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export default function FilterLink({ id, value, label, externalUrl }) {
+export function FilterLink({ id, value, label, externalUrl }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
@@ -37,3 +37,5 @@ export default function FilterLink({ id, value, label, externalUrl }) {
     </div>
   );
 }
+
+export default FilterLink;

components/common/FilterLink.module.css

@@ -14,7 +14,7 @@
 
 .row .link {
   display: none;
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 .row .label {

components/common/HamburgerButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export default function HamburgerButton() {
+export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
   const { cloudMode } = useConfig();
@@ -57,3 +57,5 @@ export default function HamburgerButton() {
     </>
   );
 }
+
+export default HamburgerButton;

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export default function HoverTooltip({ tooltip }) {
+export function HoverTooltip({ tooltip }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -23,3 +23,5 @@ export default function HoverTooltip({ tooltip }) {
     </div>
   );
 }
+
+export default HoverTooltip;

components/common/MobileMenu.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
-export default function MobileMenu({ items = [], onClose }) {
+export function MobileMenu({ items = [], onClose }) {
   const { pathname } = useRouter();
 
   const Items = ({ items, className }) => (
@@ -34,3 +34,5 @@ export default function MobileMenu({ items = [], onClose }) {
     </div>
   );
 }
+
+export default MobileMenu;

components/common/NoData.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './NoData.module.css';
 import useMessages from 'hooks/useMessages';
 
-function NoData({ className }) {
+export function NoData({ className }) {
   const { formatMessage, messages } = useMessages();
 
   return (

components/common/SettingsTable.js

@@ -1,7 +1,7 @@
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
 import styles from './SettingsTable.module.css';
 
-export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
+export function SettingsTable({ columns = [], data = [], children, cellRender }) {
   return (
     <Table columns={columns} rows={data}>
       <TableHeader className={styles.header}>
@@ -34,3 +34,5 @@ export default function SettingsTable({ columns = [], data = [], children, cellR
     </Table>
   );
 }
+
+export default SettingsTable;

components/common/UpdateNotice.js

@@ -6,7 +6,7 @@ import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function UpdateNotice() {
+export function UpdateNotice() {
   const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
@@ -50,3 +50,5 @@ export default function UpdateNotice() {
     </Row>
   );
 }
+
+export default UpdateNotice;

components/common/WorldMap.js

@@ -3,16 +3,16 @@ import { useRouter } from 'next/router';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import useTheme from 'hooks/useTheme';
+import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
-import styles from './WorldMap.module.css';
+import useTheme from 'hooks/useTheme';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
-import HoverTooltip from './HoverTooltip';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
+import styles from './WorldMap.module.css';
 
-function WorldMap({ data, className }) {
+export function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
   const [theme] = useTheme();

components/input/DateFilter.js

@@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useMessages from 'hooks/useMessages';
 
-function DateFilter({ websiteId, value, className }) {
+export function DateFilter({ websiteId, value, className }) {
   const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);

components/input/LanguageButton.js

@@ -5,8 +5,8 @@ import useLocale from 'hooks/useLocale';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 
-export default function LanguageButton() {
-  const { locale, saveLocale } = useLocale();
+export function LanguageButton() {
+  const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
   function handleSelect(value) {
@@ -20,7 +20,7 @@ export default function LanguageButton() {
           <Icons.Globe />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment="end">
+      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (
@@ -43,3 +43,5 @@ export default function LanguageButton() {
     </PopupTrigger>
   );
 }
+
+export default LanguageButton;

components/input/LogoutButton.js

@@ -2,7 +2,7 @@ import { Button, Icon, Icons, Tooltip } from 'react-basics';
 import Link from 'next/link';
 import useMessages from 'hooks/useMessages';
 
-export default function LogoutButton({ tooltipPosition = 'top' }) {
+export function LogoutButton({ tooltipPosition = 'top' }) {
   const { formatMessage, labels } = useMessages();
   return (
     <Link href="/logout">
@@ -16,3 +16,5 @@ export default function LogoutButton({ tooltipPosition = 'top' }) {
     </Link>
   );
 }
+
+export default LogoutButton;

components/input/ProfileButton.js

@@ -5,12 +5,14 @@ import useMessages from 'hooks/useMessages';
 import useUser from 'hooks/useUser';
 import useConfig from 'hooks/useConfig';
 import styles from './ProfileButton.module.css';
+import useLocale from 'hooks/useLocale';
 
-export default function ProfileButton() {
+export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { cloudMode } = useConfig();
   const router = useRouter();
+  const { dir } = useLocale();
 
   const handleSelect = key => {
     if (key === 'profile') {
@@ -31,7 +33,7 @@ export default function ProfileButton() {
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment="end">
+      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         <Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
           <Item key="user" className={styles.item}>
             <Text>{user.username}</Text>
@@ -55,3 +57,5 @@ export default function ProfileButton() {
     </PopupTrigger>
   );
 }
+
+export default ProfileButton;

components/input/RefreshButton.js

@@ -4,7 +4,7 @@ import useDateRange from 'hooks/useDateRange';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
-function RefreshButton({ websiteId, isLoading }) {
+export function RefreshButton({ websiteId, isLoading }) {
   const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
 

components/input/SettingsButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import styles from './SettingsButton.module.css';
 
-export default function SettingsButton() {
+export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -33,3 +33,5 @@ export default function SettingsButton() {
     </PopupTrigger>
   );
 }
+
+export default SettingsButton;

components/input/ThemeButton.js

@@ -4,7 +4,7 @@ import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 
-export default function ThemeButton() {
+export function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
   const transitions = useTransition(theme, {
@@ -34,3 +34,5 @@ export default function ThemeButton() {
     </Button>
   );
 }
+
+export default ThemeButton;

components/input/WebsiteSelect.js

@@ -2,7 +2,7 @@ import { Dropdown, Item } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export default function WebsiteSelect({ websiteId, onSelect }) {
+export function WebsiteSelect({ websiteId, onSelect }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(['websites:me'], () => get('/me/websites'));
@@ -25,3 +25,5 @@ export default function WebsiteSelect({ websiteId, onSelect }) {
     </Dropdown>
   );
 }
+
+export default WebsiteSelect;

components/layout/AppLayout.js

@@ -5,9 +5,10 @@ import NavBar from 'components/layout/NavBar';
 import UpdateNotice from 'components/common/UpdateNotice';
 import useRequireLogin from 'hooks/useRequireLogin';
 import useConfig from 'hooks/useConfig';
+import { CURRENT_VERSION } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
-export default function AppLayout({ title, children }) {
+export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
   const { pathname } = useRouter();
@@ -19,7 +20,7 @@ export default function AppLayout({ title, children }) {
   const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/');
 
   return (
-    <div className={styles.layout}>
+    <div className={styles.layout} data-app-version={CURRENT_VERSION}>
       {allowUpdate && <UpdateNotice />}
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
@@ -33,3 +34,5 @@ export default function AppLayout({ title, children }) {
     </div>
   );
 }
+
+export default AppLayout;