refactor(catalog): introduce usePathname hook, remove React Router dependency from the Catalog

[vgeorge]

Related Ticket: Contributes to #1108

Description of Changes

• Remove react-router dependency from the Catalog components
• Introduce custom usePathname hook
• Remove prop drilling of pathname from the Catalog

Notes & Questions About Changes

The pathname prop is passed down for two things:

1. Generating a link to the dataset at

   veda-ui/app/scripts/components/common/catalog/catalog-card.tsx

   Line 126 in 820730f

   const linkTo = getDatasetPath(dataset, pathname);

2. Controlling scroll in the filters control at

   veda-ui/app/scripts/components/common/catalog/filters-control.tsx

   Line 57 in 820730f

   const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader(pathname);

I suspect that the usage on item 1 was intented to cover the use case of an instance running on a subpath (e.g. https://myinstance.org/veda), why is hard to replicate locally but this change shouldn't affect that.

Validation / Testing

Using veda-config:

1. Visit the data catalog page
2. Clicking on cards should open the proper URL (same as before)
3. Visit Explorer page, clicking on cards selected them, instead of visiting an URL (same as before)

Using next-veda-ui instance:

1. Link the source of this PR to the Next.js instance
2. Visit the catalog page
3. Clicking on cards should open the proper URL (same as before)
4. Visit Explorer page, clicking on cards selected them, instead of visiting an URL (same as before)

This is ready for review.

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	2807db6
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/6745e5e9a24e4e0009eac349
😎 Deploy Preview	https://deploy-preview-1276--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vgeorge]

The ts-check failure made me realized this is also used in the datasets modal in the Exploration page. I added a fix and udpated the validation steps above.

[dzole0311]

I tested the changes in both the Veda UI and the Next.js repository as well as on the GHG Center side. Everything works as expected with no regressions.

[dzole0311]

👍

[dzole0311]

I suspect that the usage on item 1 was intented to cover the use case of an instance running on a subpath (e.g. https://myinstance.org/veda), why is hard to replicate locally but this change shouldn't affect that.

Yeah, that seems likely. For example the GHG Center instance is running under https://earth.gov/ghgcenter/ subpath and the Veda routes are appended to it.

[vgeorge]

@dzole0311 thanks for the review! Let's keep an eye on that instance once we roll out the changes.