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

Bug 1860535: show project description #6163

Merged
merged 1 commit into from Sep 10, 2020

Conversation

debsmita1
Copy link
Contributor

@debsmita1 debsmita1 commented Jul 30, 2020

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:

  • displaying the project description in the details card in the Project Overview tab
  • displaying the project description in the Project Details tab
  • added Popover if the description exceeds 10 lines
  • showing No description in the Details tab when there isn't one

Screenshots & GIF:
details
pd
project-des
detailscard
nodd
detailscard

@debsmita1
Copy link
Contributor Author

/kind bug

@openshift-ci-robot openshift-ci-robot added the kind/bug Categorizes issue or PR as related to a bug. label Jul 30, 2020
@openshift-ci-robot openshift-ci-robot added component/core Related to console core functionality component/dashboard Related to dashboard labels Jul 30, 2020
@lwrigh
Copy link

lwrigh commented Jul 30, 2020

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;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
-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'];
Copy link
Member

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.

Suggested change
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>
Copy link
Member

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

Suggested change
<span className="co-line-clamp details-card__description">{description}</span>
<span className="details-card__description">{description}</span>

@@ -0,0 +1,3 @@
.details-card__description {
Copy link
Member

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.

@spadgett
Copy link
Member

Description column is being added to the table in #6169

{displayName || 'No display name'}
</dd>
{<dt>Description</dt>}
<dd
Copy link
Member

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.

Copy link
Member

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.

Copy link
Contributor Author

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

Copy link
Contributor

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:
image

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.

image

What's the standard for this, wouldn't we want a tooltip / expand in place? (cc @lwrigh / @openshift/team-devconsole-ux)

Copy link

@lwrigh lwrigh Aug 17, 2020

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

Copy link
Contributor

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.

Copy link

Choose a reason for hiding this comment

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

Expandable description 1
Expandable description 2

I was thinking of something like this if we went the caret route.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copy link
Contributor

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.

Copy link

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.

@debsmita1
Copy link
Contributor Author

debsmita1 commented Jul 31, 2020

Description column is being added to the table in #6169

Should I add description next to the display name?

@spadgett
Copy link
Member

Description column is being added to the table in #6169

Should I add description next to the display name?

No, we're adding it to the table as an extra customizable column.

Copy link
Member

@spadgett spadgett left a 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.

@openshift-ci-robot openshift-ci-robot added lgtm Indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Jul 31, 2020
@spadgett
Copy link
Member

/retest

1 similar comment
@spadgett
Copy link
Member

/retest

@openshift-bot
Copy link
Contributor

/retest

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

2 similar comments
@openshift-bot
Copy link
Contributor

/retest

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

@openshift-bot
Copy link
Contributor

/retest

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

@spadgett
Copy link
Member

spadgett commented Aug 1, 2020

/lgtm cancel

This is consistently failing on the "has all fields populated" test.

@openshift-ci-robot openshift-ci-robot removed lgtm Indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Aug 1, 2020
@debsmita1
Copy link
Contributor Author

/test e2e-gcp-console

@debsmita1 debsmita1 force-pushed the project-desc branch 2 times, most recently from b17245a to 59189ad Compare August 4, 2020 08:20
@debsmita1
Copy link
Contributor Author

/test e2e-gcp-console

@debsmita1
Copy link
Contributor Author

@lwrigh @jerolimov @andrewballantyne I have updated the screens in the PR description. PTAL

Copy link

@lwrigh lwrigh left a 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!

@andrewballantyne
Copy link
Contributor

That's totally cool with me since it's a simpler solution. That would be easier to implement into other similar areas of the UI as well.

Definitely a more elegant and to the point fix... @lwrigh this should be documented by UX so we draw a consistency around this.

@andrewballantyne
Copy link
Contributor

/lgtm

@andrewballantyne
Copy link
Contributor

/retest

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

/assign @rohitkrai03

.co-namespace-summary__description {
max-height: 15rem;
overflow-y: auto;
padding-right: var(--pf-global--spacer--sm);
Copy link
Member

@jerolimov jerolimov Sep 10, 2020

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
      .....

Copy link
Member

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.

Copy link
Contributor Author

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

@openshift-ci-robot openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Sep 10, 2020
@debsmita1
Copy link
Contributor Author

/retest

Copy link
Member

@jerolimov jerolimov left a comment

Choose a reason for hiding this comment

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

👍
/lgtm

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

@rohitkrai03 rohitkrai03 left a comment

Choose a reason for hiding this comment

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

/approve

@openshift-ci-robot
Copy link
Contributor

[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 /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 Sep 10, 2020
@debsmita1 debsmita1 changed the title show project description Bug 1860535 : show project description Sep 10, 2020
@debsmita1 debsmita1 changed the title Bug 1860535 : show project description Bug 1860535: show project description Sep 10, 2020
@openshift-ci-robot openshift-ci-robot added bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. labels Sep 10, 2020
@openshift-ci-robot
Copy link
Contributor

@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
  • bug is open, matching expected state (open)
  • bug target release (4.6.0) matches configured target release for branch (4.6.0)
  • bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1860535: show project description

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.

@debsmita1
Copy link
Contributor Author

/test e2e-gcp-console

@openshift-merge-robot openshift-merge-robot merged commit 0bc62b4 into openshift:master Sep 10, 2020
@openshift-ci-robot
Copy link
Contributor

@debsmita1: All pull requests linked via external trackers have merged:

Bugzilla bug 1860535 has been moved to the MODIFIED state.

In response to this:

Bug 1860535: show project description

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.

@spadgett spadgett added this to the v4.6 milestone Sep 11, 2020
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. bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. component/core Related to console core functionality component/dashboard Related to dashboard kind/bug Categorizes issue or PR as related to a bug. lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Project display name and description unused
10 participants