feat(eslint-plugin-rules): checking for ouiaId in pf4 components only

[MariaAga]

This eslint rule failed in foreman core for components with the same name, that were imported from somewhere else, like from patternfly-react or just, for example import Text from '../Text'; .

[MariaAga]

@lfu @jeremylenz Can you take a look?

[MariaAga]

Added Tab to the list as it was requested by QE to have ouia-ids in it as well

[lfu]

@MariaAga How do I recreate the eslint rule failure?

[sjha4]

Tested with the katello PR to add ouia-Ids to tabs. Able to get missing ouia_id warnings with this PR when ouia-Id is missing. Ack based on my testing👍🏼

[MariaAga]

@lfu, have a React component named Text, and import it
the eslint rule before this change fails.
That can also cause issues as it might lead to errors it the component passes down all its props like in this example:
Text.js

import React from 'react';
export const Text = props = <div {...props)>Text</div>

index.js

import React from 'react';
import { Text } from './Text'

const Component = <Text />

[lfu]

@MariaAga I can't reproduce the eslint failure.

[vagrant@centos8-katello-devel test]$ pwd
/home/vagrant/foreman/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/test
[vagrant@centos8-katello-devel test]$ ll
total 8
-rw-rw-r--. 1 vagrant vagrant 117 Jun  9 15:12 index.js
-rw-rw-r--. 1 vagrant vagrant  85 Jun  9 15:04 Text.js
[vagrant@centos8-katello-devel test]$ more index.js 
import React from 'react';
import { Text } from './Text';

const Component = <Text name="lucy" />;
return Component;
[vagrant@centos8-katello-devel test]$ more Text.js 
import React from 'react';

export const Text = props => <div {...props}>Text</div>;
[vagrant@centos8-katello-devel test]$ npm run lint

> TheForemanDevDeps@3.8.0 lint /home/vagrant/foreman
> tfm-lint

> eslint finished without any errors!

[MariaAga]

@lfu looks like youre testing in foreman, foreman doesn't use the ouiaId rule yet, I want to add it to Foreman after this pr so when we add it we'll only add ids where needed. I pasted your example in Katello and got ouiaId property is missing

[lfu]

@MariaAga
I did see the warning ouiaId property is missing when testing inside Katello. And the message went away when ouiaId was added.
That was tested without your patch. So the eslint rule seems work well even with components with the same name, that were imported from somewhere else.
Maybe I have missed something.

[MariaAga]

@lfu from the Readme file, I see that we only want to add ouiaid to pf4 ouiaid complied components. So from what I understand we shouldn't add the ouiaid to other components, so the lint rule should not "make" us add the ouiaid

[adamruzicka]

Soo, is this good to go?

[github-actions]

🎉 This PR is included in version 12.2.0 🎉

The release is available on:

• GitHub release
  • 12.2.0
• npm package
  • @theforeman/builder (12.2.0)
  • @theforeman/eslint-plugin-foreman (12.2.0)
  • @theforeman/eslint-plugin-rules (12.2.0)
  • @theforeman/find-foreman (12.2.0)
  • @theforeman/stories (12.2.0)
  • @theforeman/test (12.2.0)
  • @theforeman/vendor-core (12.2.0)
  • @theforeman/vendor-dev (12.2.0)
  • @theforeman/vendor (12.2.0)

Thank you for your contribution, your foreman-js bot 🤖