Refs #38822: update pf3 buttons to pf5

[kfamilonidis]

Upgrade common/ActionButtons and replace Enzyme tests with React Testing Library. Fix styling and replace bgStyle with equivalent variant props.

Acceptance Criteria:

• [x] ActionButtons: actions should appear in dropdown list when more than 1.
  • [x] /webhooks -> index table.
  • [x] /foreman_tasks/tasks -> index table

followed by #10766

[kfamilonidis]

This looks like a duplication of webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js Since common/actionButtons is used in plugins, I think the best way would be to move TableIndexPage/ActionButtons import to import from common, and combine the two components

It's not a duplicate, the WebhooksIndexPage uses ActionButtons as table/row, while JobsInvocationDetail page (that uses PF4/TableIndexPage/ActionButtons, through TableIndex) as toolbar. There are few more occurrences of TableIndexPage but haven't found other Button dependencies that relate to ActionButtons functionality. Also, the PF4/TableIndexPage/ActionButtons.js are using upgraded buttons already.

foreman_tasks/tasks also uses this change from import common/ActionButtons/ActionButtons in ForemanTasks/Components/common/ActionButtons/ActionButton.js

[MariaAga]

@MariSvirik Is it ok that in PF5 we will have 2 types of action buttons in the table? (kebab and button) or should we choose one, and which? (She is on PTO so we will probably get an answer next week)

[kfamilonidis]

I think that this PR with reduced scope of only one item in the list is safe to progress.

[MariaAga]

I talked to Maria S, who talked to other designers as well, and its ok to have the 2 different table buttons, so I will review this task as it is

[kfamilonidis]

All comments have been implemented.

[kfamilonidis]

uuidV1 was added to ouiaId to give buttons a unique identifier. This provides a foundation that future uses can adjust or extend as necessary.

[ofedoren]

BTW, could you please change the commit prefix to be Fixes instead of Refs, so at least this PR is treated as a "main" fix.

[ekohl]

BTW, could you please change the commit prefix to be Fixes instead of Refs, so at least this PR is treated as a "main" fix.

Is it? After this there are still PR there many files that use PF3 buttons:

$ rg 'Button.+patternfly-react'
webpack/assets/javascripts/react_app/routes/common/PageLayout/components/ExportButton/ExportButton.js
2:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokensList/PersonalAccessToken.js
3:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/index.js
3:import { Alert, Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/index.js
2:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/index.js
2:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js
3:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/common/forms/Actions.js
3:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/common/RedirectCancelButton/RedirectCancelButton.js
2:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js
2:import { Modal, Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
3:import { Dropdown, MenuItem, Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js
3:import { Modal, Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
5:import { Button, FormControl } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
3:import { Nav, Spinner, Alert, Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/ForemanModalFooter.test.js
3:import { Button, Modal } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js
2:import { Button } from 'patternfly-react';

webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js
2:import { Button } from 'patternfly-react';