Report layout improvements patch

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

@@ -6,7 +6,6 @@ import * as metrics from '../reports/metrics'
 import ListReport from '../reports/list'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
-import { conversionsRoute } from '../../router'
 
 export default function Conversions({ afterFetchData, onGoalFilterClick }) {
   const site = useSiteContext()
@@ -50,10 +49,6 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       keyLabel="Goal"
       onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: conversionsRoute.path,
-        search: (search) => search
-      }}
       color="bg-red-50 group-hover/row:bg-red-100"
       colMinWidth={90}
     />

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

@@ -11,7 +11,6 @@ import {
 } from '../../util/filters'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
-import { customPropsRoute } from '../../router'
 
 export const SPECIAL_GOALS = {
   404: { title: '404 Pages', prop: 'path' },
@@ -87,11 +86,6 @@ function SpecialPropBreakdown({ prop, afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel={prop}
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: customPropsRoute.path,
-        params: { propKey: url.maybeEncodeRouteParam(prop) },
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrlFactory()}
       color="bg-red-50"
       colMinWidth={90}

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

@@ -6,7 +6,6 @@ import * as url from '../../util/url'
 import { EVENT_PROPS_PREFIX, hasConversionGoalFilter } from '../../util/filters'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
-import { customPropsRoute } from '../../router'
 
 export default function Properties({ propKey, afterFetchData }) {
   const { query } = useQueryContext()
@@ -47,11 +46,6 @@ export default function Properties({ propKey, afterFetchData }) {
         getFilterInfo={getFilterInfo}
         keyLabel={propKey}
         metrics={chooseMetrics()}
-        detailsLinkProps={{
-          path: customPropsRoute.path,
-          params: { propKey },
-          search: (search) => search
-        }}
         color="bg-red-50 group-hover/row:bg-red-100"
         colMinWidth={90}
       />

assets/js/dashboard/stats/locations/index.js

@@ -19,8 +19,9 @@ import { ReportLayout } from '../reports/report-layout'
 import { ReportHeader } from '../reports/report-header'
 import { TabButton, TabWrapper } from '../../components/tabs'
 import MoreLink from '../more-link'
+import { MoreLinkState } from '../more-link-state'
 
-function Countries({ query, site, onClick, afterFetchData, onListUpdate }) {
+function Countries({ query, site, onClick, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/countries'), query, { limit: 9 })
   }
@@ -54,18 +55,13 @@ function Countries({ query, site, onClick, afterFetchData, onListUpdate }) {
       onClick={onClick}
       keyLabel="Country"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: countriesRoute.path,
-        search: (search) => search
-      }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Regions({ query, site, onClick, afterFetchData, onListUpdate }) {
+function Regions({ query, site, onClick, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/regions'), query, { limit: 9 })
   }
@@ -99,15 +95,13 @@ function Regions({ query, site, onClick, afterFetchData, onListUpdate }) {
       onClick={onClick}
       keyLabel="Region"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: regionsRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
 
-function Cities({ query, site, afterFetchData, onListUpdate }) {
+function Cities({ query, site, afterFetchData }) {
   function fetchData() {
     return api.get(apiPath(site, '/cities'), query, { limit: 9 })
   }
@@ -140,10 +134,8 @@ function Cities({ query, site, afterFetchData, onListUpdate }) {
       getFilterInfo={getFilterInfo}
       keyLabel="City"
       metrics={chooseMetrics()}
-      detailsLinkProps={{ path: citiesRoute.path, search: (search) => search }}
       renderIcon={renderIcon}
       color="bg-orange-50 group-hover/row:bg-orange-100"
-      onListUpdate={onListUpdate}
     />
   )
 }
@@ -154,19 +146,13 @@ class Locations extends React.Component {
     this.onCountryFilter = this.onCountryFilter.bind(this)
     this.onRegionFilter = this.onRegionFilter.bind(this)
     this.afterFetchData = this.afterFetchData.bind(this)
-    this.onListUpdate = this.onListUpdate.bind(this)
-    this.onMapDataUpdate = this.onMapDataUpdate.bind(this)
     this.tabKey = `geoTab__${props.site.domain}`
     const storedTab = storage.getItem(this.tabKey)
     this.state = {
       mode: storedTab || 'map',
       loading: true,
       skipImportedReason: null,
-      listData: null,
-      linkProps: null,
-      listLoading: true,
-      mapData: null,
-      mapLoading: true
+      moreLinkState: MoreLinkState.LOADING
     }
   }
 
@@ -190,32 +176,17 @@ class Locations extends React.Component {
       this.props.query !== prevProps.query ||
       this.state.mode !== prevState.mode
     ) {
-      this.setState({ loading: true })
+      this.setState({ loading: true, moreLinkState: MoreLinkState.LOADING })
     }
   }
 
   setMode(mode) {
     return () => {
       storage.setItem(this.tabKey, mode)
-      this.setState({
-        mode,
-        listData: null,
-        linkProps: null,
-        listLoading: true,
-        mapData: null,
-        mapLoading: true
-      })
+      this.setState({ mode })
     }
   }
 
-  onListUpdate(list, linkProps, loading) {
-    this.setState({ listData: list, linkProps, listLoading: loading })
-  }
-
-  onMapDataUpdate(data, loading) {
-    this.setState({ mapData: data, mapLoading: loading })
-  }
-
   onCountryFilter(mode) {
     return () => {
       this.countriesRestoreMode = mode
@@ -228,8 +199,16 @@ class Locations extends React.Component {
   }
 
   afterFetchData(apiResponse) {
+    let newMoreLinkState
+
+    if (apiResponse.results && apiResponse.results.length > 0) {
+      newMoreLinkState = MoreLinkState.READY
+    } else {
+      newMoreLinkState = MoreLinkState.HIDDEN
+    }
     this.setState({
       loading: false,
+      moreLinkState: newMoreLinkState,
       skipImportedReason: apiResponse.skip_imported_reason
     })
   }
@@ -242,7 +221,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'regions':
@@ -252,7 +230,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'countries':
@@ -262,7 +239,6 @@ class Locations extends React.Component {
             site={this.props.site}
             query={this.props.query}
             afterFetchData={this.afterFetchData}
-            onListUpdate={this.onListUpdate}
           />
         )
       case 'map':
@@ -271,38 +247,23 @@ class Locations extends React.Component {
           <CountriesMap
             onCountrySelect={this.onCountryFilter('map')}
             afterFetchData={this.afterFetchData}
-            onDataUpdate={this.onMapDataUpdate}
           />
         )
     }
   }
 
-  getMoreLink() {
-    if (this.state.mode === 'map') {
-      const data = this.state.mapData?.results ?? []
-      return (
-        <MoreLink
-          list={data}
-          linkProps={{
-            path: countriesRoute.path,
-            search: (search) => search
-          }}
-          loading={this.state.mapLoading}
-          className=""
-          onClick={undefined}
-        />
-      )
+  getMoreLinkProps() {
+    let path
+
+    if (this.state.mode === 'regions') {
+      path = regionsRoute.path
+    } else if (this.state.mode === 'cities') {
+      path = citiesRoute.path
     } else {
-      return (
-        <MoreLink
-          list={this.state.listData}
-          linkProps={this.state.linkProps}
-          loading={this.state.listLoading}
-          className=""
-          onClick={undefined}
-        />
-      )
+      path = countriesRoute.path
     }
+
+    return { path: path, search: (search) => search }
   }
 
   render() {
@@ -333,7 +294,10 @@ class Locations extends React.Component {
               skipImportedReason={this.state.skipImportedReason}
             />
           </div>
-          {this.getMoreLink()}
+          <MoreLink
+            linkProps={this.getMoreLinkProps()}
+            state={this.state.moreLinkState}
+          />
         </ReportHeader>
         {this.renderContent()}
       </ReportLayout>

assets/js/dashboard/stats/locations/map.tsx

@@ -34,15 +34,10 @@ type WorldJsonCountryData = { properties: { name: string; a3: string } }
 
 const WorldMap = ({
   onCountrySelect,
-  afterFetchData,
-  onDataUpdate
+  afterFetchData
 }: {
   onCountrySelect: () => void
   afterFetchData: (response: unknown) => void
-  onDataUpdate?: (
-    data: { results: CountryData[] } | null,
-    loading: boolean
-  ) => void
 }) => {
   const navigate = useAppNavigate()
   const { mode } = useTheme()
@@ -91,10 +86,7 @@ const WorldMap = ({
     if (data) {
       afterFetchData(data)
     }
-    if (onDataUpdate) {
-      onDataUpdate(data ?? null, isFetching)
-    }
-  }, [afterFetchData, data, isFetching, onDataUpdate])
+  }, [afterFetchData, data, isFetching])
 
   const { maxValue, dataByCountryCode } = useMemo(() => {
     const dataByCountryCode: Map<string, CountryData> = new Map()

assets/js/dashboard/stats/more-link.js

@@ -20,7 +20,7 @@ function detailsIcon() {
   )
 }
 
-export default function MoreLink({ linkProps, state, onClick = undefined }) {
+export default function MoreLink({ linkProps, state }) {
   const portalRef = useRef(null)
 
   useEffect(() => {
@@ -47,11 +47,7 @@ export default function MoreLink({ linkProps, state, onClick = undefined }) {
 
   return (
     <Tooltip info="View details" containerRef={portalRef}>
-      <AppNavigationLink
-        {...linkProps}
-        className={baseClassName}
-        onClick={onClick}
-      >
+      <AppNavigationLink {...linkProps} className={baseClassName}>
         {icon}
       </AppNavigationLink>
     </Tooltip>

assets/js/dashboard/stats/pages/index.js

@@ -54,10 +54,6 @@ function EntryPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Entry page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: entryPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -102,10 +98,6 @@ function ExitPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Exit page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: exitPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />
@@ -146,10 +138,6 @@ function TopPages({ afterFetchData }) {
       getFilterInfo={getFilterInfo}
       keyLabel="Page"
       metrics={chooseMetrics()}
-      detailsLinkProps={{
-        path: topPagesRoute.path,
-        search: (search) => search
-      }}
       getExternalLinkUrl={getExternalLinkUrl}
       color="bg-orange-50 group-hover/row:bg-orange-100"
     />