Fixed filter tags. Added clear all option.

components/metrics/FilterTags.js

@@ -1,22 +1,29 @@
+import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { safeDecodeURI } from 'next-basics';
-import { Button, Icon, Icons } from 'react-basics';
+import { Button, Icon, Icons, Text } from 'react-basics';
+import { labels } from 'components/messages';
 import styles from './FilterTags.module.css';
 
 export default function FilterTags({ className, params, onClick }) {
+  const { formatMessage } = useIntl();
+
   if (Object.keys(params).filter(key => params[key]).length === 0) {
     return null;
   }
+
   return (
-    <div className={classNames(styles.filters, 'col-12', className)}>
+    <div className={classNames(styles.filters, className)}>
       {Object.keys(params).map(key => {
         if (!params[key]) {
           return null;
         }
         return (
           <div key={key} className={styles.tag}>
-            <Button onClick={() => onClick(key)} variant="action" iconRight>
-              {`${key}: ${safeDecodeURI(params[key])}`}
+            <Button onClick={() => onClick(key)} variant="primary" size="sm">
+              <Text>
+                <b>{`${key}`}</b> — {`${safeDecodeURI(params[key])}`}
+              </Text>
               <Icon>
                 <Icons.Close />
               </Icon>
@@ -24,6 +31,12 @@ export default function FilterTags({ className, params, onClick }) {
           </div>
         );
       })}
+      <Button size="sm" variant="quiet" onClick={() => onClick(null)}>
+        <Icon>
+          <Icons.Close />
+        </Icon>
+        <Text>{formatMessage(labels.clearAll)}</Text>
+      </Button>
     </div>
   );
 }

components/metrics/WebsiteChart.js

@@ -34,7 +34,7 @@ export default function WebsiteChart({
   const {
     router,
     resolve,
-    query: { url, referrer, os, browser, device, country },
+    query: { view, url, referrer, os, browser, device, country },
   } = usePageQuery();
   const { get, useQuery } = useApi();
 
@@ -67,7 +67,11 @@ export default function WebsiteChart({
   }, [data, startDate, endDate, unit]);
 
   function handleCloseFilter(param) {
-    router.push(resolve({ [param]: undefined }));
+    if (param === null) {
+      router.push(`/websites/${websiteId}/?view=${view}`);
+    } else {
+      router.push(resolve({ [param]: undefined }));
+    }
   }
 
   async function handleDateChange(value) {
@@ -97,11 +101,11 @@ export default function WebsiteChart({
             </a>
           </Link>
         )}
-        <FilterTags
-          params={{ url, referrer, os, browser, device, country }}
-          onClick={handleCloseFilter}
-        />
       </WebsiteHeader>
+      <FilterTags
+        params={{ url, referrer, os, browser, device, country }}
+        onClick={handleCloseFilter}
+      />
       <StickyHeader stickyClassName={styles.sticky} enabled={stickyHeader}>
         <Row className={styles.header}>
           <Column xs={12} sm={12} md={12} defaultSize={10}>