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.

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

tablecolumnclass updates public plugin PR 4 #9234

Merged
merged 1 commit into from Jun 28, 2021

Conversation

abhinandan13jan
Copy link
Contributor

@abhinandan13jan abhinandan13jan commented Jun 14, 2021

Addresses

https://issues.redhat.com/browse/ODC-5816

Screenshot

tableclass4

Test

No changes

Browser conformance

Chrome

@openshift-ci openshift-ci bot added the component/core Related to console core functionality label Jun 14, 2021
@openshift-ci openshift-ci bot added the component/monitoring Related to monitoring label Jun 14, 2021
@abhinandan13jan abhinandan13jan changed the title tablecolumnclass update PR 4 tablecolumnclass updates public plugin PR 4 Jun 14, 2021
Copy link
Contributor

@karthikjeeyar karthikjeeyar left a comment

Choose a reason for hiding this comment

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

@abhinandan13jan The PF classes that are added works well with All Projects being selected in the project dropdown, which will add Namespace column as the second row. when you select a project then Namespace column will be hidden, then the classes doesn't work in some pages.

Comment on lines 47 to 48
'pf-m-hidden pf-m-visible-on-lg pf-u-w-8-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-8-on-lg',
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
'pf-m-hidden pf-m-visible-on-lg pf-u-w-8-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-8-on-lg',
'pf-m-hidden pf-m-visible-on-lg pf-u-w-16-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-16-on-lg',

with pf-u-w-8-on-lg :
image

after changing to pf-u-w-16-on-lg:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

classNames('col-lg-1', 'hidden-sm', 'hidden-xs', 'pf-u-w-10-on-lg'),
classNames('col-lg-1', 'col-sm-2', 'col-xs-3', 'pf-u-w-10-on-lg'),
classNames('pf-u-w-25-on-lg pf-u-w-33-on-md pf-u-w-50-on-sm'),
classNames('pf-m-hidden pf-m-visible-on-xl pf-u-w-40-on-xl'),
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
classNames('pf-m-hidden pf-m-visible-on-xl pf-u-w-40-on-xl'),
classNames('pf-m-hidden pf-m-visible-on-xl pf-u-w-50-on-xl'),

with pf-u-w-40-on-xl

image

with pf-u-w-50-on-xl:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

You could also remove classNames from this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

classNames('col-md-7', 'col-xs-6'),
Kebab.columnClass,
];
const tableColumnClasses = ['pf-u-w-42-on-lg', 'pf-u-w-58-on-lg', Kebab.columnClass];
Copy link
Contributor

Choose a reason for hiding this comment

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

above change works well for All Projects, but not if you are in a namespace

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, I changed accordingly

Screenshot from 2021-06-21 16-31-51
Screenshot from 2021-06-21 16-32-02

frontend/public/components/machine-autoscaler.tsx Outdated Show resolved Hide resolved
Comment on lines 115 to 116
'pf-m-hidden pf-m-visible-on-lg pf-u-w-16-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-16-on-md',
Copy link
Contributor

Choose a reason for hiding this comment

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

These classnames doesn't map with the existing classnames

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Well, it does I believe. breakpoint sm in bootstrap is md in patternfly andmd is lg
So, first two r default width columns and the second two have corresponding classes
Screenshot from 2021-06-21 20-01-05

Copy link
Contributor

Choose a reason for hiding this comment

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

If you are in a namespaced page, then secret and created column is pushed to its right (originally it was evenly spaced)
image

so if you are in 980px then the column names are getting truncated even though there is a room to show two column names

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for pointing it out...Well, I tried a bit and a direct conversion of the existing classes doesn't quite work well, so I fine tuned keeping in mind various viewport sizes

Screenshot from 2021-06-22 15-25-04
Screenshot from 2021-06-22 15-25-18
Screenshot from 2021-06-22 15-25-37

@abhinandan13jan abhinandan13jan force-pushed the tableclass4 branch 4 times, most recently from 0967712 to 21f789b Compare June 22, 2021 10:54
@karthikjeeyar
Copy link
Contributor

Thanks @abhinandan13jan for updating the classnames, looks good to me
/lgtm

@openshift-ci openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jun 22, 2021
@jerolimov
Copy link
Member

/retest

Comment on lines 113 to 117
'pf-u-w-50-on-sm pf-u-w-33-on-md pf-u-w-25-on-lg',
'pf-u-w-25-on-md',
'pf-m-hidden pf-m-visible-on-lg pf-u-w-25-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-25-on-md',
`${Kebab.columnClass} pull-right`,
Copy link
Member

@jerolimov jerolimov Jun 28, 2021

Choose a reason for hiding this comment

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

@abhinandan13jan I think pull-right is an indicator that we waste space for the kebab/action icon column. I like that the most other changes has at least one column without a width, which takes over "all leftover" space.

Service accounts on a big screen before:
image

On a small screen before:
image

With this PR on a big screen (wastes space on the right side):
image

With this PR on a small screen (you can see the 25% space for the action column again and the date breaks without a "visible reason"):
image

I would suggest a css without styling for the name and without pull-right.

Suggested change
'pf-u-w-50-on-sm pf-u-w-33-on-md pf-u-w-25-on-lg',
'pf-u-w-25-on-md',
'pf-m-hidden pf-m-visible-on-lg pf-u-w-25-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-25-on-md',
`${Kebab.columnClass} pull-right`,
'',
'',
'pf-m-hidden pf-m-visible-on-lg pf-u-w-25-on-lg',
'pf-m-hidden pf-m-visible-on-md pf-u-w-25-on-md',
Kebab.columnClass,

It looks like this then (yes, also not similar to the original design) on a big screen:
image

And like this on a small screen:
image

Wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

Comment on lines 76 to 78
'pf-u-w-42-on-lg',
'pf-u-w-58-on-lg',
`${Kebab.columnClass} pull-right`,
Copy link
Member

@jerolimov jerolimov Jun 28, 2021

Choose a reason for hiding this comment

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

Similar here. pull-right is only required because the namespace column is not shown when a namespace is selected. And the other one has a fix width. So the kebab column will take over the rest of the space.

This means on a ~ 1100px browser window, most space is wasted for the action menu and we have less then 300px for the name column. Which is many cases more then enough. But I personally would prefer an automatic width calculation from the browser instead of a hardcoded 5:7 (name to namespace) column width, which makes problem when the namespace is not shown.

image

Suggested change
'pf-u-w-42-on-lg',
'pf-u-w-58-on-lg',
`${Kebab.columnClass} pull-right`,
'',
'',
Kebab.columnClass,

Wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

@openshift-ci openshift-ci bot removed the lgtm Indicates that a PR is ready to be merged. label Jun 28, 2021
@jerolimov
Copy link
Member

jerolimov commented Jun 28, 2021

Re-adding lgtm from @karthikjeeyar since the latest changes to fixes my comments above. Latest code change in service account and resource quota was small.
/lgtm

Thanks for fixing the service account and resource quota pull-right issues mentioned above. Tested them locally again and lgtm.
/approve

@openshift-ci openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jun 28, 2021
@openshift-ci
Copy link
Contributor

openshift-ci bot commented Jun 28, 2021

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: abhinandan13jan, jerolimov, karthikjeeyar

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 openshift-ci bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jun 28, 2021
@openshift-merge-robot openshift-merge-robot merged commit d3b71bd into openshift:master Jun 28, 2021
@spadgett spadgett added this to the v4.9 milestone Jul 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/core Related to console core functionality component/monitoring Related to monitoring lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants