redhatinsights/insights-frontend-components

This repository is archived and moved to a new one RedHatInsights/frontend-components

Red Hat Insights Components for applications in a React.js environment

Usage

npm install: npm install @red-hat-insights/insights-frontend-components

Imports

Component import { Component } from 'node_modules/@red-hat-insights/insights-frontend-components

SCSS @import '~@red-hat-insights/insights-frontend-components/index.css';

Development

Create a component inside of the PresentationalComponent folder

Structure

PresentationalComponents
└───YourComponent
    ├─── index.js
    ├─── YourComponent.js
    └─── your-component.scss

Build: npm run build Test: npm run test

There is also a playground for any development npm run playground

Documentation Links

• Utils

  • Redux

• Components

  • Sample Component
  • Page Header
  • Section
  • Pagination
  • Dropdown
  • Table
  • Breadcrumbs
  • Notifications
  • Filters

Hot-loadable components

• Inventory
• Remediations

Conbribution

Adding to index.js

Make sure that when you finish your component, you import it in the src/index.js file

If you're using any kind of pixel variable, be sure to use the px converter inside the Utilities

Commit format

Semantic release is used in this project, so to trigger new release you should add specific format into your commit messages and new release will be triggered when PR is merged.

Used formatter

Commit analyzer wildcard is used for parsing commit messages so to trigger new release add one of these strings into your commit and new release is triggered

• Major - <x.x.x> or <x.x.?> or <x.?.x> or <x.?.?>
• Minor - <?.x.x> or <?.x.?>
• Bug - <?.?.x>
• No release - <no>

insights-frontend-components's Issues

Fix the title font size

Trying to replicate what PF does with their title in their page demo. Right now, the page-header-title does not have a larger font size.

Gauge flipFullColors red doesn't show up

<Gauge label='advisor' width={250} height={250} value={69}
                                identifier='advisor-gauge' flipFullColors/>

won't work. The arc will be black.

deprecate duplicate components that are shared with patternfly

We don't necessarily need to remove it, but just add a note for other developers to reference the patternfly components.

Thoughts? @karelhala

PageHeader imported twice

Pagination component page input needs debounce

Title says it all, on input, instantly whatever function is tied to the input, is executed, there should be a little pause on input so users can type long numbers 😋

Screen scrolls on inventory

When clicking on screen and inventory is present it will scroll to some element.

Cannot import CSS for Dropdown

According to https://github.com/RedHatInsights/insights-frontend-components/blob/master/doc/components/dropdown.md I should be importing a CSS file for Dropdown. I don't think that css file is available anymore, but even importing the CSS like it did, @import '~@patternfly/patternfly-next/components/Dropdown/styles.scss';, I get quite an odd button:

Notice the icon has no left padding, it's the same if I write some text instead of the icon, and the DropdownItems seem to render in a strange way.

Battery to support an undefined or unknown state

https://github.com/RedHatInsights/insights-frontend-components/blob/41a5930ebd091e98560447d5998e0c0421c2cb19/src/PresentationalComponents/Battery/Battery.js

needs to not blow up when passed a false or undefined or none or unknown

Inventory should not show all systems when items=[]

When providing "items" parameter, empty array should not be treated as "show all". It should show empty table instead or some kind of message that tells the user that there are no systems to be listed. ie. Vulnerability -> CVE -> affected systems table.

Inventory Table with starter app can be confusing to implement

I'll start by saying I am not sure if this is a bug or a docs issue when trying to use the inventory table component from a project that started with the insights-frontend-starter-app. I will give my best explanation and understanding of what I experienced.

The insights-frontend-starter-app includes a base integration with the ReducerRegistry for applications to get started registering their reducers with the store. Assuming an application begins using this integration, and decides to add the use of the insights-frontend-components inventory table per the instructions an error is encountered:

0.js:4959 Uncaught (in promise) TypeError: Cannot read property 'register' of undefined
    at SystemsTable._callee$ (0.js:4959)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(:1337/insights/platform/drift/anonymous function) [as next] (https://ci.foo.redhat.com:1337/insights/platform/drift/js/vendor.js:2696:21)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

This led me to re-read the integration page and see the following:

These examples count on using insight's registry, if you are using different make sure that you pass along correct one and don't use registryDecorator

To which I assumed, based on my use of the insights-frontend-starter-app I needed to use the registry created in store/index.js. If I switch to importing the local registry and attempting to register with it, a new error is encountered:

asyncToGenerator.js:6 Uncaught (in promise) TypeError: Cannot read property 'params' of undefined
    at o.value (Inventory.83193bc9.js:5)
    at commitLifeCycles (react-dom.development.js:14532)
    at commitAllLifeCycles (react-dom.development.js:15738)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at commitRoot (react-dom.development.js:15908)
    at completeRoot (react-dom.development.js:17296)
    at performWorkOnRoot (react-dom.development.js:17224)
    at performWork (react-dom.development.js:17128)

After some experimenting, turns out that what is missing a specific reducer in the registry from here. Which, if I add to to the insights-frontend-starter-app then everything links up and works, e.g.

    registry = new ReducerRegistry({}, [
        promiseMiddleware(),
        ...middleware
    ]);

    registry.register({
        routerData: (state, { type, payload }) => {
            return ({
                ...state,
                ...type === '@@INSIGHTS-CORE/NAVIGATION' ? payload : {}
            })
        }
    })

The other way I solved this was to switch away from ReducerRegistry per the starter app and instead use the registry directly. That is, changing the store.index.js code from the starter app to the following instead:

import promiseMiddleware from 'redux-promise-middleware';
import { getRegistry } from '@red-hat-insights/insights-frontend-components';

import { reducers } from '../SmartComponents/modules';

let registry;

export function init (...middleware) {
    if (registry) {
        throw new Error('store already initialized');
    }

    registry = getRegistry({}, [
        promiseMiddleware(),
        ...middleware
    ]);

    registry.register({
        compareReducer: reducers.compareReducer,
        statusReducer: reducers.statusReducer
    });

    return registry;
}

This then enabled me to use the inventory table instructions as is without any modification.

1. Is this a bug?
2. If not a bug, I would recommend updating either the store/index.js for the insights-frontend-stater-app to use getRegistry or the inventory table docs to expand on required changes to the registry in an app based on the starter app

The goal here being to improve the experience for developers and allow using the inventory components out of the box.

Add more variables

Now that the variables are working, let's communicate with teams what other variables they will need and add them.

For sure we need standardized colors (ROC, Severities, etc.)

Battery component option with middle aligned text

As per mockup shown below, the battery needs to be shown with pf-small text which is vertically aligned to the middle.
It is not possible to middle align it with the current component.

cc @AllenBW

[BUG] Inventory time doesn't match cloud services ux pattern

Describe the bug
In the inventory table, the time should be in the format laid out here: https://docs.google.com/document/d/1hivSfe48717VhlLRtjyqReS5twbSLuPC6MISJt3MTG4/edit?usp=sharing

Aka: "07 Jan 2019, 23:33 UTC"

To Reproduce
Open inventory

Expected behavior
Date should be formatted as:
07 Jan 2019, 23:33 UTC

Screenshots

File Naming

@karelhala @Kinlaw

How do we want to handle naming of files?

I was thinking:

PresentationalComponents
└───YourComponent
    ├─── index.js
    ├─── YourComponent.js
    └─── styles.scss <- literally named styles.scss

Add PropTypes for documentation and to use as validators

https://reactjs.org/docs/typechecking-with-proptypes.html

Add global variables

Based on feedback from other teams, they would like a set of global variables to easily reference. We'll just consume Patternfly variables into our own to serve to the apps.

Matrix Y labels not visible

We need to add a overflow: visible to the svg and then probably a margin on the right/left side of the wrapper.

ping @karelhala

Add widget types and IDs to Components

Charts

• Donut
• Gauge
• Matrix
• Pie

Components

• Ansible
  • won't need unique ID because it should be wrapped in a component with an ID already.
• Battery (needs unique ID)
• Breadcrumbs
• Dropdown (needs unique ID)
• Input (needs unique ID)
• PageHeader
• Pagination
• SimpleTableFilter (needs unique ID)
• TabLayout
• Table (needs unique ID)

Component: The Donut

Change TabLayout to allow to render outside of Header

Currently, the TabLayout header forces you to render a react-router route inside the same div as the Tabs themselves. This does not allow to put the tabs on the PageHeader and the content (react-router Switch in my case) outside, as far as I know.

Here's what I'm asked to do: (this is a mock made with Invision)

Notice the tabs are the ones from https://pf-next.com/components/Tabs/examples/, which are different from the Nav components in http://patternfly-react.surge.sh/patternfly-4/components/nav , but that's a secondary issue.

But the only 2 possible ways I can use the TabLayout component are the following:

Rewrite breadcrumbs to use proper accessibility structure

See: https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html

This will remove having to put an aria label on each element due to the ol tags

z index documentation

With components and chroming using different z indexes, we need docs to show what goes where and what indexes we should/should not be using.

Remove PF-4 Components and dependencies

export widget

I had previously opened #178 to create a common widget. What was implemented looks like my mocks. Yay! But my mocks were not PF4 approved. So sorry about that.

• Apparently in PF4 we are not using the caret when an icon as a dropdown. So the behavior should be like a kebab.
• We should also be using the font awesome file-export icon, not the download icon.

[BUG] Inventory (in vulnerability) toolbar wrapping strange

Describe the bug
Toolbar is wrapping incorrectly,
Mockup: https://redhat.invisionapp.com/share/YGOT8VL5HBU#/351085803_CVE_Detail_Page

To Reproduce
Open a CVE from Vulnerability

Expected behavior
Toolbar should wrap more sensibly. Paging should respond to collapse to the results count before wrapping. Actions on the left should stick together (not wrap as seen) until after the paging responds. See PF pagination: https://www.patternfly.org/v4/documentation/react/components/pagination/#examples

Screenshots

[BUG] Notification alert is reappearing after dismiss.

Describe the bug
When the notification is displayed and dismissed, redirecting to other page will cause the notification to appear again. This process duplicates the notifications multiple times and causes flooding by alerts.

To Reproduce
Steps to reproduce the behavior:

1. Dispatch "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION" action.
2. Dismiss the notification or wait for it to disappear
3. Navigate to other page withing single page APP
4. See notification again

Expected behavior
No reappearing of the notification

Desktop (please complete the following information):

• OS: Fedora 28
• Browser: Firefox
• Version: 64

Additional context
Should not be Vulnerability specific thing as I tried to reproduce using different apps and the behavior was identical.

Rework Battery component with no visible label

Section component should accept both single ReactElement and array of ReactElements

Add doc for notifications

Since we have easy way of adding notifications to app we should also document such thing

• Adding notifications to app
• Managing notifications trough middleware

Component: Breadcrumbs

Common export/download widget

Several of the apps on the platform have requirements to download tables in CSV and JSON formats (with other formats coming later). It would be nice to have a common widget for this use case that apps can pull in.

It's the download icon and a caret, no outline. Interaction should be the same as the kebab.

PageHeaderTitle should accept a string, ReactElement, or an array of ReactElements

Component: Ansible Icon

Component: ins-battery

Inventory table does not show columns with value 0

Inventory table probably treats columns with value 0 as non-existent which results in shifting the row.

[BUG] Casing issue in Inventory

Describe the bug
All text should be sentence case. There is an instance of title case in the inventory. (see pic)

To Reproduce
Open any inventory screen

Expected behavior
Should be sentence case: "Last sync"

Screenshots

Remove Storybook files

Moved everything to https://github.com/RedHatInsights/insights-frontend-storybook

Table uses grid-column: 2 on everything

insights-frontend-components/src/PresentationalComponents/Table/Table/styles.scss

Line 230 in 6706bda

grid-column: 2;

This is really messing things up when trying to put in a progress bar. Is there a need for this? It seems to only affect if there is a <div> inside the <td>

Set up environment for developing components

My thought is that if we want to develop a component, there should probably be a sandbox page where you can import whatever js and scss you want to test styling and interaction.

Something like
npm run sandbox will render a sandbox.js page and then throw it into localhost or something.

Thoughts @karelhala @jharting @Kinlaw ?

Fixes: Page-Header font-size