Merge branch 'dev' into analytics

src/app/(main)/websites/[id]/WebsiteDetails.tsx

@@ -33,8 +33,8 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (
         <>
-          {!view && <WebsiteTableView websiteId={websiteId} />}
-          {view && <WebsiteExpandedView websiteId={websiteId} />}
+          {!view && <WebsiteTableView websiteId={websiteId} domainName={website.domain} />}
+          {view && <WebsiteExpandedView websiteId={websiteId} domainName={website.domain} />}
         </>
       )}
     </>

src/app/(main)/websites/[id]/WebsiteExpandedView.tsx

@@ -35,10 +35,10 @@ const views = {
 
 export default function WebsiteExpandedView({
   websiteId,
-  websiteDomain,
+  domainName,
 }: {
   websiteId: string;
-  websiteDomain?: string;
+  domainName?: string;
 }) {
   const { formatMessage, labels } = useMessages();
   const {
@@ -143,7 +143,7 @@ export default function WebsiteExpandedView({
       <div className={styles.content}>
         <DetailsComponent
           websiteId={websiteId}
-          websiteDomain={websiteDomain}
+          domainName={domainName}
           animate={false}
           virtualize={true}
           itemCount={25}

src/app/(main)/websites/[id]/WebsiteTableView.tsx

@@ -10,10 +10,17 @@ import CountriesTable from 'components/metrics/CountriesTable';
 import EventsTable from 'components/metrics/EventsTable';
 import EventsChart from 'components/metrics/EventsChart';
 
-export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
+export default function WebsiteTableView({
+  websiteId,
+  domainName,
+}: {
+  websiteId: string;
+  domainName: string;
+}) {
   const [countryData, setCountryData] = useState();
   const tableProps = {
     websiteId,
+    domainName,
     limit: 10,
   };
 

src/components/metrics/FilterTags.tsx

@@ -19,11 +19,11 @@ export function FilterTags({ params }) {
   }
 
   function handleCloseFilter(param?: string) {
-    if (!param) {
-      router.push(makeUrl({ view }, true));
-    } else {
-      router.push(makeUrl({ [param]: undefined }));
-    }
+    router.push(makeUrl({ [param]: undefined }));
+  }
+
+  function handleResetFilter() {
+    router.push(makeUrl({ view }, true));
   }
 
   return (
@@ -44,7 +44,7 @@ export function FilterTags({ params }) {
           </div>
         );
       })}
-      <Button size="sm" variant="quiet" onClick={handleCloseFilter}>
+      <Button size="sm" variant="quiet" onClick={handleResetFilter}>
         <Icon>
           <Icons.Close />
         </Icon>

src/components/metrics/MetricsTable.tsx

@@ -17,6 +17,7 @@ import styles from './MetricsTable.module.css';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
+  domainName: string;
   type?: string;
   className?: string;
   dataFilter?: (data: any) => any;

src/components/metrics/PagesTable.tsx

@@ -9,7 +9,7 @@ export interface PagesTableProps extends MetricsTableProps {
   allowFilter?: boolean;
 }
 
-export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
+export function PagesTable({ allowFilter, domainName, ...props }: PagesTableProps) {
   const {
     router,
     makeUrl,
@@ -17,7 +17,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const handleSelect = key => {
+  const handleSelect = (key: any) => {
     router.push(makeUrl({ view: key }), { scroll: true });
   };
 
@@ -33,12 +33,20 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
   ];
 
   const renderLink = ({ x }) => {
-    return <FilterLink id={view} value={x} label={!x && formatMessage(labels.none)} />;
+    return (
+      <FilterLink
+        id={view}
+        value={x}
+        label={!x && formatMessage(labels.none)}
+        externalUrl={`${domainName.startsWith('http') ? domainName : `https://${domainName}`}${x}`}
+      />
+    );
   };
 
   return (
     <MetricsTable
       {...props}
+      domainName={domainName}
       title={formatMessage(labels.pages)}
       type={view}
       metric={formatMessage(labels.views)}