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
Bug 1860535: show project description #6163
Bug 1860535: show project description #6163
Conversation
/kind bug |
This is looking good to me! Thank you for starting the PR @debsmita1! |
@@ -0,0 +1,3 @@ | |||
.details-card__description { | |||
-webkit-line-clamp: 1 !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-webkit-line-clamp: 1 !important; | |
@include co-line-clamp(1); |
|
||
export const DetailsCard: React.FC = () => { | ||
const { obj } = React.useContext(ProjectDashboardContext); | ||
const keys = _.keys(obj.metadata.labels).sort(); | ||
const labelsSubset = _.take(keys, 3); | ||
const firstThreelabels = _.pick(obj.metadata.labels, labelsSubset); | ||
const description = obj?.metadata?.annotations?.['openshift.io/description']; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This would blow up above if obj
is null.
const description = obj?.metadata?.annotations?.['openshift.io/description']; | |
const description = obj.metadata.annotations?.['openshift.io/description']; |
@@ -44,6 +46,11 @@ export const DetailsCard: React.FC = () => { | |||
<GreenCheckCircleIcon /> Service Mesh Enabled | |||
</DetailItem> | |||
)} | |||
{description && ( | |||
<DetailItem isLoading={!obj} title="Description"> | |||
<span className="co-line-clamp details-card__description">{description}</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the CSS change above this can be
<span className="co-line-clamp details-card__description">{description}</span> | |
<span className="details-card__description">{description}</span> |
@@ -0,0 +1,3 @@ | |||
.details-card__description { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If this is specific to projects, that should go in the class name.
Description column is being added to the table in #6169 |
{displayName || 'No display name'} | ||
</dd> | ||
{<dt>Description</dt>} | ||
<dd |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We probably want line clamp here as well, even if it's set to a larger value like 10 lines. There's nothing in the API preventing a user from adding up to a 1MB description, which would blow up the layout.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd add co-pre-line
as well to preserve line breaks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We probably want line clamp here as well, even if it's set to a larger value like 10 lines. There's nothing in the API preventing a user from adding up to a 1MB description, which would blow up the layout.
should I set the max lines to 10? cc @lwrigh
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spadgett / @christianvogt This seems to be an issue with extremely long text:
There is no way for me to see the rest of the text baring going to the YAML... which doesn't sound like a good work around.
What's the standard for this, wouldn't we want a tooltip / expand in place? (cc @lwrigh / @openshift/team-devconsole-ux)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would suggest truncating at the 10 line limit like you're suggesting for the description section in the UI. Would it be possible to set a character limit for both the UI and the YAML? That would help to constraint the length of the description text in both views.
If it isn't an option, we could go the route of truncating the description text and then having it become clickable when the user hovers over it and they can expand it. We could use either a popover or add an expanding/collapsing caret to the description section. @debsmita1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@lwrigh There is a collapsible feature in the margin for the YAML editor. I don't think any change is needed there.
Not sure any character limit can be imposed here, but it is an openshift custom resource -- it is possible to think on that but not for 4.6 (as this would be a feature).
Would you be able to provide a quick mock what you're thinking of for the expand feature? I don't want us going crazy to support this -- again it's post feature freeze so it's limited what we can do here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@lwrigh for the serverless reason text in the table, the suggestion is currently a popover on hover IIRC? Wouldn't we want to have a similar experience in both cases.
Also the description shouldn't be hidden if it's of reasonable size.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes that's the current suggestion for the reason, We can go the popover route here too. The description here could truncate after 10 lines or so since there's more space around it.
Should I add |
No, we're adding it to the table as an extra customizable column. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/lgtm
Tagging for now since it's feature freeze day. We can address line-clamp and pre-line in a follow up.
/retest |
1 similar comment
/retest |
/retest Please review the full test history for this PR and help us cut down flakes. |
2 similar comments
/retest Please review the full test history for this PR and help us cut down flakes. |
/retest Please review the full test history for this PR and help us cut down flakes. |
/lgtm cancel This is consistently failing on the "has all fields populated" test. |
/test e2e-gcp-console |
b17245a
to
59189ad
Compare
/test e2e-gcp-console |
@lwrigh @jerolimov @andrewballantyne I have updated the screens in the PR description. PTAL |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The scrollbar update looks good to me!
Definitely a more elegant and to the point fix... @lwrigh this should be documented by UX so we draw a consistency around this. |
/lgtm |
/retest |
/assign @rohitkrai03 |
.co-namespace-summary__description { | ||
max-height: 15rem; | ||
overflow-y: auto; | ||
padding-right: var(--pf-global--spacer--sm); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@debsmita1 Sorry I have still the opinion that we should keep line breaks here. So we could you a markdown component or add just an additional css rule here:
white-space: pre-wrap;
Then also an description like this works:
annotations:
openshift.io/description: |
1 first line
2 second line
3 line with intent
4 line break above
5fasddfasdfafasd
65faasdfasfdsafasdf
.....
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I searched for white-space: pre
in console, there are also a class for that (co-pre-wrap
). Its up to you, I see other descriptions which uses this also.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
used the class co-pre-wrap
c98dc0f
to
6930f2b
Compare
/retest |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
/lgtm
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/approve
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: andrewballantyne, debsmita1, jerolimov, lwrigh, rohitkrai03 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 |
@debsmita1: This pull request references Bugzilla bug 1860535, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker. 3 validation(s) were run on this bug
In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
/test e2e-gcp-console |
@debsmita1: All pull requests linked via external trackers have merged: Bugzilla bug 1860535 has been moved to the MODIFIED state. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
fixes:
https://issues.redhat.com/browse/ODC-1854
Fixes #802
Root Analysis:
The project description that is being asked for during project creation is not being displayed anywhere in the console
Solution description:
No description
in the Details tab when there isn't oneScreenshots & GIF: