Fix new tab links + shared links losing URL context

assets/js/dashboard.js

@@ -31,7 +31,8 @@ if (container) {
     background: container.dataset.background,
     isDbip: container.dataset.isDbip === 'true',
     flags: JSON.parse(container.dataset.flags),
-    validIntervalsByPeriod: JSON.parse(container.dataset.validIntervalsByPeriod)
+    validIntervalsByPeriod: JSON.parse(container.dataset.validIntervalsByPeriod),
+    shared: !!container.dataset.sharedLinkAuth,
   }
 
   const loggedIn = container.dataset.loggedIn === 'true'

assets/js/dashboard/filters.js

@@ -84,7 +84,7 @@ function filterDropdownOption(site, option) {
     <Menu.Item key={option}>
       {({ active }) => (
         <Link
-          to={{ pathname: `/${encodeURIComponent(site.domain)}/filter/${option}`, search: window.location.search }}
+          to={{ pathname: `/filter/${option}`, search: window.location.search }}
           className={classNames(
             active ? 'bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100' : 'text-gray-800 dark:text-gray-300',
             'block px-4 py-2 text-sm font-medium'
@@ -101,7 +101,7 @@ function DropdownContent({ history, site, query, wrapped }) {
   const [addingFilter, setAddingFilter] = useState(false);
 
   if (wrapped === WRAPSTATE.unwrapped || addingFilter) {
-    let filterModals = {...FILTER_MODAL_TO_FILTER_GROUP}
+    let filterModals = { ...FILTER_MODAL_TO_FILTER_GROUP }
     if (!site.propsAvailable) delete filterModals.props
 
     return Object.keys(filterModals).map((option) => filterDropdownOption(site, option))
@@ -193,7 +193,7 @@ function Filters(props) {
           title={`Edit filter: ${formattedFilters[type]}`}
           className="flex w-full h-full items-center py-2 pl-3"
           to={{
-            pathname: `/${encodeURIComponent(site.domain)}/filter/${FILTER_GROUP_TO_MODAL_TYPE[type]}`,
+            pathname: `/filter/${FILTER_GROUP_TO_MODAL_TYPE[type]}`,
             search: window.location.search
           }}
         >
@@ -231,7 +231,7 @@ function Filters(props) {
   }
 
   function trackFilterMenu() {
-    window.plausible && window.plausible('Filter Menu: Open', {u: `${window.location.protocol}//${window.location.hostname}/:dashboard`})
+    window.plausible && window.plausible('Filter Menu: Open', { u: `${window.location.protocol}//${window.location.hostname}/:dashboard` })
   }
 
   function renderDropDown() {

assets/js/dashboard/router.js

@@ -28,50 +28,50 @@ function ScrollToTop() {
 
 export default function Router({ site, loggedIn, currentUserRole }) {
   return (
-    <BrowserRouter>
-      <Route path="/:domain">
+    <BrowserRouter basename={site.shared ? `/share/${encodeURIComponent(site.domain)}` : encodeURIComponent(site.domain)}>
+      <Route path="/">
         <ScrollToTop />
         <Dash site={site} loggedIn={loggedIn} currentUserRole={currentUserRole} />
         <Switch>
-          <Route exact path={["/:domain/sources", "/:domain/utm_mediums", "/:domain/utm_sources", "/:domain/utm_campaigns", "/:domain/utm_contents", "/:domain/utm_terms"]}>
+          <Route exact path={["/sources", "/utm_mediums", "/utm_sources", "/utm_campaigns", "/utm_contents", "/utm_terms"]}>
             <SourcesModal site={site} />
           </Route>
-          <Route exact path="/:domain/referrers/Google">
+          <Route exact path="/referrers/Google">
             <GoogleKeywordsModal site={site} />
           </Route>
-          <Route exact path="/:domain/referrers/:referrer">
+          <Route exact path="/referrers/:referrer">
             <ReferrersDrilldownModal site={site} />
           </Route>
-          <Route path="/:domain/pages">
+          <Route path="/pages">
             <PagesModal site={site} />
           </Route>
-          <Route path="/:domain/entry-pages">
+          <Route path="/entry-pages">
             <EntryPagesModal site={site} />
           </Route>
-          <Route path="/:domain/exit-pages">
+          <Route path="/exit-pages">
             <ExitPagesModal site={site} />
           </Route>
-          <Route path="/:domain/countries">
-            <ModalTable title="Top countries" site={site} endpoint={url.apiPath(site, '/countries')} filterKey="country" keyLabel="Country" renderIcon={renderCountryIcon} showPercentage={true}/>
+          <Route path="/countries">
+            <ModalTable title="Top countries" site={site} endpoint={url.apiPath(site, '/countries')} filterKey="country" keyLabel="Country" renderIcon={renderCountryIcon} showPercentage={true} />
           </Route>
-          <Route path="/:domain/regions">
+          <Route path="/regions">
             <ModalTable title="Top regions" site={site} endpoint={url.apiPath(site, '/regions')} filterKey="region" keyLabel="Region" renderIcon={renderRegionIcon} />
           </Route>
-          <Route path="/:domain/cities">
+          <Route path="/cities">
             <ModalTable title="Top cities" site={site} endpoint={url.apiPath(site, '/cities')} filterKey="city" keyLabel="City" renderIcon={renderCityIcon} />
           </Route>
-          <Route path="/:domain/custom-prop-values/:prop_key">
+          <Route path="/custom-prop-values/:prop_key">
             <PropsModal site={site} />
           </Route>
-          <Route path="/:domain/conversions">
+          <Route path="/conversions">
             <ConversionsModal site={site} />
           </Route>
-          <Route path={["/:domain/filter/:field"]}>
+          <Route path={["/filter/:field"]}>
             <FilterModal site={site} />
           </Route>
         </Switch>
       </Route>
-    </BrowserRouter>
+    </BrowserRouter >
   );
 }
 

assets/js/dashboard/stats/behaviours/conversions.js

@@ -34,7 +34,7 @@ export default function Conversions(props) {
         BUILD_EXTRA && { name: 'total_revenue', label: 'Revenue', hiddenOnMobile: true },
         BUILD_EXTRA && { name: 'average_revenue', label: 'Average', hiddenOnMobile: true }
       ]}
-      detailsLink={url.sitePath(site, '/conversions')}
+      detailsLink={url.sitePath('conversions')}
       maybeHideDetails={true}
       query={query}
       color="bg-red-50"

assets/js/dashboard/stats/behaviours/goal-conversions.js

@@ -64,7 +64,7 @@ function SpecialPropBreakdown(props) {
         { name: 'events', label: 'Events', hiddenOnMobile: true },
         CR_METRIC
       ]}
-      detailsLink={url.sitePath(site, `/custom-prop-values/${prop}`)}
+      detailsLink={url.sitePath(`custom-prop-values/${prop}`)}
       externalLinkDest={externalLinkDest()}
       maybeHideDetails={true}
       query={query}

assets/js/dashboard/stats/behaviours/props.js

@@ -98,7 +98,7 @@ export default function Properties(props) {
           BUILD_EXTRA && { name: 'total_revenue', label: 'Revenue', hiddenOnMobile: true },
           BUILD_EXTRA && { name: 'average_revenue', label: 'Average', hiddenOnMobile: true }
         ]}
-        detailsLink={url.sitePath(site, `/custom-prop-values/${propKey}`)}
+        detailsLink={`/custom-prop-values/${propKey}`}
         maybeHideDetails={true}
         query={query}
         color="bg-red-50"

assets/js/dashboard/stats/graph/stats-export.js

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import * as api from '../../api'
 import { getCurrentInterval } from "./interval-picker"
 
-export default function StatsExport({site, query}) {  
+export default function StatsExport({ site, query }) {
   const [exporting, setExporting] = useState(false)
 
   function startExport() {
@@ -50,4 +50,4 @@ export default function StatsExport({site, query}) {
       {!exporting && renderExportLink()}
     </div>
   )
-}
+}