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 support for edit action in DetailsItem component #5862

Merged
merged 1 commit into from
Jul 6, 2020
Merged

Add support for edit action in DetailsItem component #5862

merged 1 commit into from
Jul 6, 2020

Conversation

TheRealJon
Copy link
Member

  • Add editModal prop to DetailsItem component, which accepts a callback to trigger an edit modal. If defined, a left-justified edit button will appear next to the detail label, and the detail value will be surrounded by a light gray border.
  • Use the new editModal prop to make 'Labels' field on details pages editable.

screenshot-localhost_9000-2020 06 30-14_49_28

@openshift-ci-robot openshift-ci-robot added the component/core Related to console core functionality label Jun 30, 2020
@TheRealJon
Copy link
Member Author

/assign @rawagner

@TheRealJon
Copy link
Member Author

cc @itsptk @openshift/team-ux-review

@TheRealJon TheRealJon changed the title Add support for edit action and arbitrary descriptions in DetailsItem component Add support for edit action in DetailsItem component Jun 30, 2020
spadgett
spadgett reviewed Jun 30, 2020
View reviewed changes
frontend/public/components/utils/details-item.tsx Outdated
label
)}
</SplitItem>
{editModal && (
Copy link
Member

Choose a reason for hiding this comment

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

We might want the component to support the both edit styles, the inline edit links like annotations and groups. The styling could be controlled by a prop. Maybe onEdit: (e) => void and editGroup: boolean? Then if we ever need to change it, we can change it in one place. (I'm open to better suggestions for the prop names.)

Then we can slowly switch the existing modal links over to DetailsItem.

Copy link
Member Author

Choose a reason for hiding this comment

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

Fixed

frontend/public/components/utils/details-item.tsx Outdated
</>
);
};

export type DetailsItemProps = {
defaultValue?: React.ReactNode;
editModal?: any;
Copy link
Member

Choose a reason for hiding this comment

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

We should improve the type here.

Copy link
Member Author

Choose a reason for hiding this comment

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

Fixed

@TheRealJon TheRealJon force-pushed the CONSOLE-2300 branch 2 times, most recently from d41baa5 to 516260d Compare July 2, 2020 19:43
@TheRealJon
Copy link
Member Author

@spadgett I also updated the border color to a darker gray as per UXD recommendation.

spadgett
spadgett approved these changes Jul 2, 2020
View reviewed changes
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.

/approve
/lgtm

@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 2, 2020
@openshift-bot
Copy link
Contributor

/retest

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

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

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

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

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

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

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

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

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

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

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

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

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

@openshift-bot
Copy link
Contributor

/retest

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

@TheRealJon
Copy link
Member Author

/hold

Testing issues

@openshift-ci-robot openshift-ci-robot added do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. labels Jul 4, 2020
@openshift-ci-robot openshift-ci-robot removed lgtm Indicates that a PR is ready to be merged. needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. labels Jul 6, 2020
@TheRealJon
Copy link
Member Author

/hold cancel

@openshift-ci-robot openshift-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Jul 6, 2020
spadgett
spadgett approved these changes Jul 6, 2020
View reviewed changes
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

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

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rebeccaalpert, spadgett, TheRealJon

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-merge-robot openshift-merge-robot merged commit de305a2 into openshift:master Jul 6, 2020
@spadgett spadgett mentioned this pull request Jul 7, 2020
Merged
@spadgett spadgett added this to the v4.6 milestone Jul 8, 2020
@TheRealJon TheRealJon deleted the CONSOLE-2300 branch January 27, 2022 20:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@spadgett spadgett spadgett approved these changes

@rebeccaalpert rebeccaalpert rebeccaalpert approved these changes

@rhamilto rhamilto Awaiting requested review from rhamilto

@zherman0 zherman0 Awaiting requested review from zherman0

Assignees

@spadgett spadgett

@rawagner rawagner

Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/core Related to console core functionality lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Milestone
v4.6
Development

Successfully merging this pull request may close these issues.
7 participants
@TheRealJon @openshift-bot @openshift-ci-robot @spadgett @rebeccaalpert @rawagner @openshift-merge-robot