redhatinsights/frontend-components

frontend-components's Issues

FilterDropdown is OUIA compatible

Is your feature request related to a problem? Please describe.
FilterDropdown should accept OUIA props to comply with OUIA spec.

Remove jest config from package.json

Our jest config is getting bigger and bigger, it would be better if we'd move it specific config file instead of bloating root package.json.

[BUG] Auto dismiss/close alert/notification is not working

Describe the bug
Alert/notification doesn't work auto close when we pass dismissable true.
There are two ways to close alert/notification.

1. User can close notification by click on close icon button
2. Auto close based on delay time

To Reproduce
Steps to reproduce the behavior:
use below stage url for reproduce this issue.
https://qaprodauth.cloud.redhat.com/beta/application-services/sr

1. Create/delete service registry by click on create button
2. Alert/notification will show but it will not auto close after 8 seconds as added delay time.

Expected behavior
Alert/notification must auto close after 8 seconds as added delay time.

Screenshots

Desktop (please complete the following information):

• OS: [Linux]
• Browser [chrome]

[BUG] Updating utilities to version 3.2.3 show error message

Describe the bug
Updating @redhat-cloud-services/frontend-components-utilities to 2.3.2 shows error message

To Reproduce
Steps to reproduce the behavior:

1. Update in package.json @redhat-cloud-services/frontend-components-utilities to 2.3.2
2. Run npm i
3. npm start
4. See error

Expected behavior
No error messages

Screenshots

icon-404.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/InvalidObject/icon-404.js

[BUG] fallback property is ignored by AsyncComponent

Describe the bug
When the fallback property is provided to the AsyncComponent component (@redhat-cloud-services/frontend-components/AsyncComponent), it will always show only the "loading" message instead of the sent fallback component.

To Reproduce
Steps to reproduce the behavior:

1. Import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent.'
2. Try to provide it with valid appName and module (e.g., I used appName="advisor" and module="./AdvisorReportDetails").
3. Also provide custom fallback component sent via fallback property (e.g. fallback={"test"}).
4. Render the component that imported AsyncComponent.
5. When a component is in the loading state, it will render 'loading' text instead of the provided custom fallback ("test" in my example).

Expected behavior
Custom fallback is rendered instead of "loading" text.

Desktop (please complete the following information):

• "@redhat-cloud-services/frontend-components": "3.3.5"

Additional context
While debugging, I have found the possible line that can be the source of the problem: https://github.com/scalprum/scaffloding/blob/main/packages/react-core/src/scalprum-component.tsx#L21. But TBH, properties are normally sent, and the "loading" text is here as a default parameter. So when I have fallback defined and sent via props, this default value should be ignored. Didn't have more time to debug it further, so mentioning the issue here.

BulkSelect.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/BulkSelect/BulkSelect.js

[BUG] conditional filter `false` value

Describe the bug
When using conditional filter and value is set to false this value is removed. We should check if value exists and not direct boolean cast.

Battery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/Battery.js

Display text translations in Components

Is your feature request related to a problem? Please describe.
Subscription Watch uses this library and all of the text ther is translated with i18n/i18next. We want to be able to use shared components from this library that contain standard text (in particular Maintenance and NotAuthorized). Unfortunately the text of those components is not translated, so using them would cause us to have a mix of translated and untranslated text.

Describe the solution you'd like
I would like for translations of all display text in components of this library to be built into the library somehow.

Describe alternatives you've considered
An alternative solution might be to have all text in components overwritable via props, so that we could replace every instance of text with similar text that's translated, but that would create unnecessary redundancy and diversion between apps using this library.

[BUG] Items per page not indicated in Inventory table

Describe the bug
Items per page not indicated in the Inventory table, it works fine in ci-stable, so it might be conencted with the Inventory component refactoring

To Reproduce
Go to CI-Beta
Navigate to Patch -> Systems
Change number of items per page
See no difference

Expected behavior
Do the same in any other environment

No code changes in Patch were made.

HighBattery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/HighBattery.js

TableToolbar is OUIA compatible

Is your feature request related to a problem? Please describe.
TableToolbar should accept OUIA props to comply OUIA spec.

[BUG] Notifications package 2.2.0 includes path to travis

Describe the bug

Sources UI cannot run Notification 2.0.0

ERROR in ./node_modules/@redhat-cloud-services/frontend-components-notifications/cjs/NotificationPortal.js
Module not found: Error: Can't resolve 'home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Alert/Alert.js' in '/home/rvsianskz/insightsproject/sources-ui/node_modules/@redhat-cloud-services/frontend-components-notifications/cjs'
 @ ./node_modules/@redhat-cloud-services/frontend-components-notifications/cjs/NotificationPortal.js 1:517-650

bundled package:

@redhat-cloud-services/frontend-components-notifications/cjs/NotificationPortal.js

Alert_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Alert/Alert.js"),TextContent_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Text/TextContent.js"),Text_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Text/Text.js"),AlertActionCloseButton_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Alert/AlertActionCloseButton.js"),CloseIcon=_interopDefault(require("@patternfly/react-icons/dist/js/icons/close-icon")),Card_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Card/Card.js"),CardBody_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Card/CardBody.js"),Button_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Button/Button.js"),Pagination_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/components/Pagination/Pagination.js"),Level_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/layouts/Level/Level.js"),LevelItem_js=require("home/travis/build/RedHatInsights/frontend-components/node_modules/@patternfly/react-core/dist/js/layouts/Level/LevelItem.js"),

@karelhala

[BUG] The emptyStateIcon causes unit tests to fail

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

1. Writing a basic shallow snapshot test for the class that has RuleTable inside of it

const wrapper = shallow(<My Component  {...some props}/>) 
 it('component renders correctly', () => {
    expect(wrapper).toMatchSnapshot();
  });

3. The test is failing because

Failed prop type: Invalid prop `emptyStateIcon` supplied to `RuleTable`, expected a ReactNode.
        in RuleTable

4. I tried to solve it but the only way that helped is actually removing
   emptyStateIcon: SearchIcon
   from line 284

Expected behavior
Tests are working :)

Desktop (please complete the following information):

• OS: Fedora 33
• Browser Chrome Version 92.0.4515.131 (Official Build) (64-bit)

Additional context

Add const for debounce value

Is your feature request related to a problem? Please describe.
There are some magical constants among multiple applications used when debouncing user input. It would be good if we'd were to stick to one number used accross entire platform.

Describe the solution you'd like
A const is exported from @redhat-cloud-services/frontend-components-utilities

InventoryLoadError.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Inventory/InventoryLoadError.js

[BUG] Incorrect hard-coded AWS account number in SWatch source setup

Describe the bug
The sources for Subscription Watch has an AWS account hard-coded. This should always be dynamically loaded, and this is especially problematic because the hard-coded value only works for our current CI/QA environment but not for stage or prod. This means nobody can successfully register a Subscription Watch source in stage or prod.

To Reproduce
Steps to reproduce the behavior:

1. Enable the stage squid proxy settings in your browser (explanation here)
2. Go to https://cloud.stage.redhat.com/settings/sources
3. Click on "Add Source"
4. Give any valid name, and click "Next".
5. Open your browser's network inspector.
6. Select application "Subscription Watch", click source type "AWS", and click "Next".
7. Observe in the network inspector a request for GET | https://cloud.stage.redhat.com/api/cloudigrade/v2/sysconfig/
8. Observe in the response of that request the JSON attribute aws_account_id has value 998366406740
9. On the "Create IAM policy" screen, simply click "Next".
10. On the "Create IAM role" screen, observe the account number under "Select another AWS account from the list of trusted entities and paste the following value into the Account ID field" in the copiable text field. It incorrectly displays 372779871274.

Expected behavior
The AWS account number is populated from the earlier response's aws_account_id; in the case of stage, that should be 998366406740. This value is expected to be entirely dynamic and will change between environments.

Additional context
The root cause is here:
https://github.com/RedHatInsights/frontend-components/blob/master/packages/sources/src/addSourceWizard/hardcodedComponents/aws/subscriptionWatch.js#L40

That value should never have been hard-coded. It must be dynamically set from the /api/cloudigrade/v2/sysconfig/ response.

Add easy option to override main.yml

Is your feature request related to a problem? Please describe.
Want to serve cloud-services-config normally but just edit main.yml locally.

cc @brumik

Replace react content loader?

I have recently encountered a bug with content loader in safari browser (info here: danilowoz/react-content-loader#93)

The issue is that the content loader is using URL for the SVG fill attribute. The proposed fix with the baseUrl prop did fix it in Safari but broke it in Chrome on Linux. I was using a newer version than is used here in the utils package. Combine that with very limited responsiveness of SVG on different screen sizes, I decided to remove this dependency and implement the loader myself using just CSS. You can see the implementation in this PR: https://github.com/RedHatInsights/catalog-ui/pull/484/files#diff-07c73903e209a4a97b1f0a9c93a44f2fR26-R77

This approach is working very well, the issues with browser compatibility are gone and I can achieve much greater detail and customization than with SVG variant while keeping the loader responsive.

I would like to propose abandoning this dependency and CSS implementation to replace skeletons in the utils package. It does not have to be exactly the same as the one implemented in the catalog and there are probably some shapes missing, but that is something that can be very easily added.

@ryelo @karelhala @RedHatInsights/ui-reviewers Your thoughts?

[BUG] Module federation breaks in typescript when trying to import `react`

Describe the bug

I get the following error when loading the page, nothing else loads:

Uncaught (in promise) Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react
    at Object.__webpack_modules__.<computed> (consumes:137)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../src/bootstrap-dev.js (App.js:43)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at entry-dev.tsx:21

To Reproduce

I created a reproducer from the frontend-starter-app

Steps to reproduce the behavior:

1. Clone frontend-app-starter
2. Install typescript
3. Rename entry-dev.js to entry-dev.tsx and add a tsconfig file
4. Start and open in browser
5. See error in console

Or instead of steps 1-4 use this commit: RedHatInsights/frontend-starter-app@92ea132

Expected behavior
It should work show the starter application

Desktop (please complete the following information):

• OS: Fedora
• Browser Chrome
• Version Version 87.0.4280.66 (Official Build) (64-bit)

Additional context
There should be some step for the ts/tsx files that is missing in the config. Any hint on what to look would be appreciated.

DownloadButton is not OUIA compliant

Is your feature request related to a problem? Please describe.
DownloadButton should accept OUIA props to comply OUIA spec.

Rewrite doc Promise callbacks to `async`/`await`

Replace Promise callback

Since we are working with new Node we no longer need a Promise callback, but we can utilize async/await in doc generation. There are a few functions in packages/docs/functions-generator.js which are still using the older design.

PF4v4 Upgrade

The current progress of packages migration to PF4v4.
If anybody wants to help with migration, please add your name to the package in the list

Please use the PF4-update as a target branch when creating a PR. Note that tests and build for the whole monorepo will fail until all the packages are migrated. Just make sure the package you are working on build and tests pass.

• utils #558 @Hyperkid123
• components #558 @Hyperkid123
• charts (does not use PF)
• config (does not use PF)
• inventory #575 @karelhala
• inventory-compliance @bastilian
• inventory-general-info #576 @karelhala
• inventory-insights #580 @karelhala
• notifications #562 @Hyperkid123
• pdf-generator #566 @Hyperkid123
• remediations #567 @PanSpagetka
• rule-components #565 @Hyperkid123
• sources #564 @rvsia
• translations (does not use PF)

Note: updated packages should be released with 2.1.0-beta version for testing purposes before stable release

BullkSelect is OUIA compliant

Is your feature request related to a problem? Please describe.
BulkSelect should accept OUIA props to comply OUIA spec.

[BUG] Warning on console after upgrade to frontend-components v2.2.0 (or higher)

Describe the bug
The following warns appear in the console:

Warning: Unknown event handler property `onShowMore`. It will be ignored.
    in input (created by TextInputBase)
    in TextInputBase (created by ForwardRef)
    in ForwardRef (created by Text)
    in Text (created by ConditionalFilter)
    in div (created by SplitItem)
    in SplitItem (created by ConditionalFilter)
    in div (created by Split)
    in Split (created by ConditionalFilter)
    in ConditionalFilter (created by PrimaryToolbar)
    in div (created by ToolbarItem)
    in ToolbarItem (created by PrimaryToolbar)
    in div (created by ToolbarGroupWithRef)
    in ToolbarGroupWithRef (created by ForwardRef)
    in ForwardRef (created by PrimaryToolbar)
    in div (created by Context.Consumer)
    in div (created by ToolbarContent)
    in ToolbarContent (created by PrimaryToolbar)
    in div (created by Toolbar)
    in Toolbar (created by PrimaryToolbar)
    in PrimaryToolbar
    in Unknown (created by ListPage)
    in section (created by Section)
    in Section (created by ListPage)
    in section (created by Context.Consumer)
    in Main (created by Connect(Main))
    in Connect(Main) (created by ListPage)
    in ListPage (created by Context.Consumer)
    in Route (created by InsightsRoute)
    in ErrorBoundaryPage
    in Unknown (created by Context.Consumer)
    in withRouter() (created by InsightsRoute)
    in InsightsRoute
    in Switch
    in Unknown (created by App)
    in App (created by Context.Consumer)
    in withRouter(App)
    in ClientContextProvider
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider


react_devtools_backend.js:2273 Warning: React does not recognize the `showMoreTitle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showmoretitle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by TextInputBase)
    in TextInputBase (created by ForwardRef)
    in ForwardRef (created by Text)
    in Text (created by ConditionalFilter)
    in div (created by SplitItem)
    in SplitItem (created by ConditionalFilter)
    in div (created by Split)
    in Split (created by ConditionalFilter)
    in ConditionalFilter (created by PrimaryToolbar)
    in div (created by ToolbarItem)
    in ToolbarItem (created by PrimaryToolbar)
    in div (created by ToolbarGroupWithRef)
    in ToolbarGroupWithRef (created by ForwardRef)
    in ForwardRef (created by PrimaryToolbar)
    in div (created by Context.Consumer)
    in div (created by ToolbarContent)
    in ToolbarContent (created by PrimaryToolbar)
    in div (created by Toolbar)
    in Toolbar (created by PrimaryToolbar)
    in PrimaryToolbar
    in Unknown (created by ListPage)
    in section (created by Section)
    in Section (created by ListPage)
    in section (created by Context.Consumer)
    in Main (created by Connect(Main))
    in Connect(Main) (created by ListPage)
    in ListPage (created by Context.Consumer)
    in Route (created by InsightsRoute)
    in ErrorBoundaryPage
    in Unknown (created by Context.Consumer)
    in withRouter() (created by InsightsRoute)
    in InsightsRoute
    in Switch
    in Unknown (created by App)
    in App (created by Context.Consumer)
    in withRouter(App)
    in ClientContextProvider
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

To Reproduce

Not really sure, but looking at the logs, you have to add a PrimaryToolbar that eventually uses the ConditionalFilter

Expected behavior
No warnings in the console

Desktop (please complete the following information):

• OS: Fedora 29
• Browser Chrome
• Version 73.0.3683.103

[BUG] "Can't resolve..." error when import RuleTable component from rule-components

Describe the bug
When you follow the example of RuleTable component usage here https://clouddot.pages.redhat.com/frontend-components/dev/rule-components/index.html and import RuleTable to your app, you will run into the build error. The issue is found for the rule-components version = 3.2.1 (latest).

To Reproduce
Steps to reproduce the behavior:

1. Import to any of your project modules via import RuleTable from '@redhat-cloud-services/rule-components/RuleTable';
2. Build your project (npm run build / yarn build)
3. You will get the error Module not found: Error: Can't resolve './index.scss' in '/home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable'. See below for the full error stack.

Expected behavior
There is no build error related to the rule-components library.

Full error stack

ERROR in ./node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/RuleTable.js 40:0-48
Module not found: Error: Can't resolve './index.scss' in '/home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable'
resolve './index.scss' in '/home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable'
  using description file: /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/package.json (relative path: ./esm/RuleTable)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/package.json (relative path: ./esm/RuleTable/index.scss)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss.js doesn't exist
      .scss
        Field 'browser' doesn't contain a valid alias configuration
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss.scss doesn't exist
      as directory
        /home/gkaratae/ccx/ocp-advisor/node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.scss doesn't exist
 @ ./node_modules/@redhat-cloud-services/rule-components/esm/RuleTable/index.js 1:0-45 1:0-45 1:0-45
 @ ./src/PresentationalComponents/ClusterRecommendations/ClusterRecommendations.js 4:0-73 22:182-191
 @ ./src/PresentationalComponents/Clusters/ClusterDetails.js 13:0-86 44:38-60
 @ ./src/SmartComponents/Clusters/Clusters.js 6:9-8:59
 @ ./src/Routes.js 5:9-7:40
 @ ./src/App.js 4:0-34 25:158-164
 @ ./src/AppEntry.js 5:0-24 20:38-41
 @ container entry ./RootApp[0]

LowBattery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/LowBattery.js

ConditionalFilter.js: text input doesn't have an id or aria-label specified

It seems that <Text /> component under <div className="ins-c-conditional-filter"> (see code reference below) doesn't receive neither id or area-label. It causes an error in the console:
Text input: Text input requires either an id or aria-label to be specified

frontend-components/packages/components/src/ConditionalFilter/ConditionalFilter.js

Line 43 in 997a844

<Text { ...props }

[BUG] NotAuthorized component links to /beta/beta/settings/my-user-access in beta

Describe the bug

When the NotAuthorized component shows in a beta environment, it has an invalid link: /beta/beta/settings/my-user-access

To Reproduce
Steps to reproduce the behavior:

1. Go to a page that shows the NotAuthorized component in a beta environment.
2. See where the My User Access link points to.
3. Click it.
4. See 404 error.

Expected behavior
Link should be: /beta/settings/my-user-access

Desktop (please complete the following information):

• OS: Fedora 33
• Browse:r Chrome
• Version: 87.0.4280.66 (Official Build) (64-bit)

Additional context
I think the issue is because all the beta pages have the <base href=/beta/> and the component also adds the ./beta

useScreenSize.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/useScreenSize/useScreenSize.js

NullBattery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/NullBattery.js

CriticalBattery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/CriticalBattery.js

Primary toolbar - classes, OUIA

Describe the solution you'd like
Since all projects of RHCS will use Primary toolbar component we have to make them extensible and OUIA compatible. So we have to add classes and coresponding attributes to each toolbar item/group.

Additional context

• packages/components/src/Components/PrimaryToolbar affected

[BUG] Missing spaces between chips in primary toolbar?

Describe the bug

In the latest version, it seems that the primary toolbar's chips groups are missing spacers. Maybe it's a 'feature' in the latest PF, but it looks really weird to me.

Expected behavior

How it looked before

Official documentation (maybe obsolete)

https://www.patternfly.org/v4/design-guidelines/usage-and-behavior/filters

Desktop (please complete the following information):

• OS: fedora
• Browser chrome
• Version 81.0.4044.129

cc @karelhala @Hyperkid123

Better error message if you are not in the VPN

Is your feature request related to a problem? Please describe.
If for some reason you get kicked out of the VPN (or forget to connect) you will get a non-helpful message in your console: Uncaught TypeError: Cannot read property 'classList' of null.

Describe the solution you'd like
I would like a more helpful console message, maybe even explaining that you probably are not connected to the vpn.

breakpoints.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/useScreenSize/breakpoints.js

[Security] sanitize-html has a vuln and we need to update it.

Label here should be "View system in Inventory" not "View in Inventory"

frontend-components/packages/inventory/src/components/detail/TopBar.js

Line 43 in 4c5456b

title: 'View in Inventory',

Reasoning: "View in Inventory" is not precise, and could refer to, for example, "View this list of CVEs in the Inventory"; vs "View system in Inventory" tells the user exactly what to expect.

[BUG] AxiosInterceptor can't handle string errors

Describe the bug

Cost Management API returns <h1>Server Error (500)</h1>, "Source does not exist" when an error occurs.

This leads to TypeError: Cannot create property 'sentryId' on string 'Source does not exist' at errorInterceptor

To Reproduce
Steps to reproduce the behavior:

1. Send a request containing an error to billing_source cost management endpoint
2. See what happens

Expected behavior
String should be returned as a string

@karelhala

Have standalone show docker output

Is your feature request related to a problem? Please describe.
Frustrated with long docker load times

cc @brumik

[BUG] Advisor labels do not correspond PF labels (UX)

Describe the bug
The current styling of labels with a grey border doesn't reflect the new styling from PatternFly (https://www.patternfly.org/v4/components/label). The new filled labels should use a specific border color. These labels refer to total risk and risk of change.

To Reproduce
Critical total risk: (#c9190b)
--pf-global--palette--red-100

Important total risk: (#f4b678)
--pf-global--palette--orange-100

Moderate total risk: (#F9E0A2)
--pf-global--palette--gold-100

Low total risk: (#bee1f4)
--pf-global--palette--blue-100

Expected behavior
Filled labels should have specific border colors, not only a grey border color.

Screenshots
Current state:

How it should look like:

isSmallScreen.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/useScreenSize/isSmallScreen.js

[BUG] Primary action appears in the action kebab in normal screens

Describe the bug
When using the PrimaryToolbar and adding a primary action and several other actions, the primary action appears in the action kebab after the PF4 migration

Expected behavior
The primary action should only appear as the button and not inside the kebab menu (on normal screens)

Screenshots

Desktop (please complete the following information):

• OS: Fedora
• Browser Chrome
• Version 73.0.3683.103

Additional context

On low size screens, it seems fine, the primary appears in the kebab but not as a button, so i think that there was other change in the HTML.

[BUG] Notifications reappear after route change

Describe the bug
Displayed notification appears and disappears as it should, but then reappears again after a route change.

To Reproduce
Steps to reproduce the behavior:

1. Go to Vulnerability (https://cloud.redhat.com/rhel/vulnerability/cves)
2. Click on Kebab menu for any CVE
3. Click on Edit status
4. Click Save
5. Wait for the notification to appear and disappear
6. Navigate to any CVE detail page (click on any CVE id)
7. The notification will appear again

Expected behavior
The notification should not appear again after a route change.

Desktop (please complete the following information):
Chrome 80 on Fedora

Input is OUIA compatible

Is your feature request related to a problem? Please describe.
Input should accept OUIA props to comply with OUIA spec.

InvalidObject.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/InvalidObject/InvalidObject.js

getVariant.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/useScreenSize/getVariant.js

[BUG] Inventory row actions visible even without rows

Describe the bug
Inventory table row actions are visible even for a table that has zero rows to display.

To Reproduce
Steps to reproduce the behavior:

1. Have Inventory table with actions for each row
2. Filter/remove rows so that empty state is displayed
3. See error

Expected behavior
No action kebab visible

MediumBattery.js

file: https://github.com/RedHatInsights/frontend-components/tree/master/packages/components/src/Battery/MediumBattery.js