fix(side nav): Pass ref to SideNavBase and write a test

[aaryanporwal]

Done

• Passed the ref to SideNavigationBase component. This fixes the "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?" error while trying to access ref from SideNavigationLink component."
• Added a test to check if we're able to properly get value from ref.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Steps for QA.

Percy steps

• List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: WD-14589

[webteam-app]

Demo

Jenkins

demos.haus

[aaryanporwal]

@huwshimi I think in the last PR we forgot to add pass the ref further down to SideNavBase component, because in Anbox we were still getting the error Functional components can not be given ref.

This PR adds it, but it also presents with a type error. It works if I replace the generic type of forwardRef in SideNavLink and SideNavBase to HTMLAnchorElement.

Does this mean if we want to use ref, we have to use a base HTML element and that we can't pass a custom functional component in SideNavLink?

[edlerd]

LGTM

[github-actions]

🎉 This PR is included in version 1.2.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀