Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add List component for detail properties #3889

Merged
merged 1 commit into from Jan 21, 2020
Merged

Add List component for detail properties #3889

merged 1 commit into from Jan 21, 2020

Conversation

jtomasek
Copy link

@jtomasek jtomasek commented Jan 8, 2020

This adds common component for lists in detail page properties.

  • Common styling
  • Semantic use of lists instead of spans and brs

Screenshot 2020-01-08 at 09 33 27

@openshift-ci-robot openshift-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jan 8, 2020
@openshift-ci-robot openshift-ci-robot added component/core Related to console core functionality component/metal3 Related to metal3-plugin component/shared Related to console-shared labels Jan 8, 2020
@jtomasek
Copy link
Author

jtomasek commented Jan 8, 2020

/assign @suomiy

atiratree
atiratree suggested changes Jan 8, 2020
View reviewed changes
frontend/packages/console-app/src/components/nodes/NodeIPList.tsx Outdated
@@ -12,15 +12,13 @@ const NodeIPList: React.FC<NodeIPListProps> = ({ ips, expand = false }) => (
{_.sortBy(ips, ['type']).map(
({ type, address }) =>
address && (
<div key={`{${type}/${address}`} className="co-node-ip">
<DetailPropertyList key={`{${type}/${address}`}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't this be wrapped arround all ips? and not for each item

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, yes, I think the div was here by mistake as well as it should not render when the address is not supposed to render.

frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss
@@ -0,0 +1,12 @@
ul.pf-c-list:not(.pf-m-inline).co-detail-property-list {
list-style-type: none;
list-style: none;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't these two result in the similar thing? Maybe we can use just list-style

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, removing.

frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss
list-style-type: none;
list-style: none;
padding-left: 0;
li + li {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to eliminate margin between lis defined in .pf-c-list li+li rule.

frontend/packages/console-shared/src/components/lists/DetailPropertyListItem.tsx
import { ListItem } from '@patternfly/react-core';

type Props = {
title?: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+ children?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

children is already included in React.FC via React.PropsWithChildren type (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L518)

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx
<li>NICs: {ips}</li>
<li>Boot Interface MAC: {getHostBootMACAddress(host)}</li>
</ul>
<DetailPropertyList>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 easier to use

@jtomasek
Copy link
Author

jtomasek commented Jan 9, 2020

/retest

1 similar comment
@jtomasek
Copy link
Author

jtomasek commented Jan 9, 2020

/retest

@jtomasek
Copy link
Author

/retest

5 similar comments
@jtomasek
Copy link
Author

/retest

@jtomasek
Copy link
Author

/retest

@jtomasek
Copy link
Author

/retest

@jtomasek
Copy link
Author

/retest

@jtomasek
Copy link
Author

/retest

@jtomasek
Copy link
Author

/retest

1 similar comment
@jtomasek
Copy link
Author

/retest

rawagner
rawagner suggested changes Jan 21, 2020
View reviewed changes
frontend/packages/console-shared/src/components/lists/DetailPropertyList.tsx Outdated

import './DetailPropertyList.scss';

const DetailPropertyList: React.FC<React.ComponentProps<typeof List>> = ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use ListProps directly

Suggested change
const DetailPropertyList: React.FC<React.ComponentProps<typeof List>> = ({
const DetailPropertyList: React.FC<ListProps> = ({

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

frontend/packages/console-shared/src/components/lists/DetailPropertyListItem.tsx

const DetailPropertyListItem: React.FC<Props> = ({ title, children }) => (
<ListItem>
{title && <span className="co-detail-property-list__item-title">{title}: </span>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing import './DetailPropertyList.scss'; import. There would be an issue with missing styles if we use DetailPropertyListItem without DetailPropertyList

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

frontend/packages/console-shared/src/components/lists/DetailPropertyListItem.tsx Outdated
import * as React from 'react';
import { ListItem } from '@patternfly/react-core';

type Props = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you name this better - such as DetailPropertyListItemProps and move to bottom as we usually do for type declarations ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've renamed the props but I'd prefer to keep them on top. Both conventions are used in console and I find putting props to the top more convenient as it's not necessary to scroll over the component body to see the props.

Add List component for detail properties
f36bf27 
This adds common component for lists in detail page properties.
- Common styling
- Semantic use of lists instead of spans and brs
@jtomasek
Copy link
Author

/retest

@rawagner
Copy link
Contributor

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jan 21, 2020
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jtomasek, rawagner, suomiy

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci-robot openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 21, 2020
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

1 similar comment
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-merge-robot openshift-merge-robot merged commit 6d41a71 into openshift:master Jan 21, 2020
@spadgett spadgett added this to the v4.4 milestone Jan 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rawagner rawagner rawagner requested changes

@atiratree atiratree atiratree approved these changes

@flofuchs flofuchs Awaiting requested review from flofuchs

@zherman0 zherman0 Awaiting requested review from zherman0

Assignees

@rawagner rawagner

@atiratree atiratree

Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/core Related to console core functionality component/metal3 Related to metal3-plugin component/shared Related to console-shared lgtm Indicates that a PR is ready to be merged. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.
Projects
None yet
Milestone
v4.4
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@jtomasek @rawagner @openshift-ci-robot @openshift-bot @atiratree @spadgett @openshift-merge-robot