ESLint rule to detect components contains prop href but not rel

[Marvin9]

Summary

First step to solve #3258 .
audit components containing bug.

Assuming all EUI components are functional component.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation examples

• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
  - [ ] A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[chandlerprall]

Nice! I think this is a good proxy for the issue, I couldn't find any affected components that this missed. Do you want to fix up the identified components as well? EuiLink and EuiButton are good examples.

For merging, we either need this PR to fix the components, or comment out the rule in .eslintplugin.js or make a follow up PR.

[Marvin9]

I want to fix up identified components 🤤 with help of your guidance.

[chandlerprall]

Sounds good! Your changes to EuiBadge look correct, which leaves

• src/components/header/header_logo.tsx
• src/components/key_pad_menu/key_pad_menu_item.tsx*
• src/components/list_group/list_group_item.tsx
• src/components/side_nav/side_nav_item.tsx
• src/components/side_nav/side_nav.test.tsx

The first 3 should have rel and target available on their props already through the TypeScript definitions, but EuiSideNavItem will need these added. Then those values will need to be passed to getSecureRel to get the desired rel value.

src/components/side_nav/side_nav.test.tsx is a test file and can be ignored with a // eslint-disable-next-line local/href-with-rel comment

[Marvin9]

I couldn't figure out why rel is empty in EuiSideNav snapshot

[Marvin9]

@chandlerprall Can you please check this?

[chandlerprall]

Changes look good to me; please re-enable the rule, and then there's one more change necessary:

src/components/side_nav/side_nav.test.tsx line 113 will need to disable the eslint rule:

        // eslint-disable-next-line local/href-with-rel
        const renderItem: RenderItem<{}> = ({ href, className, children }) => (

[chandlerprall]

Thanks for solving both sides of the issue!

I added (and fixed a conflict in) the changelog entry since I missed that on my earlier passes

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3272/