-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
[Dashboard] [Controls] Load more options list suggestions on scroll #148331
Changes from 34 commits
861b994
0c74596
22580cd
1609cdb
5511e87
4d8bdd6
b78427b
33587c5
83db01d
f1911b5
d140942
6d26bf7
f68a3dd
9b04b01
c11f53e
bec4895
cbe46f4
23f9b1a
ec90a21
0a23660
0122f83
28a7dbc
a8a9814
4850500
d67ed5f
2905f17
3680011
3a0ad82
e87194a
8bf1d0f
cb4c905
9345d00
fe0a21d
cec4c06
31b2927
0a12e43
6222e32
6b7ab49
9d258da
eaa32bc
b87c5bd
3485cb9
01b35d5
6e7d205
88194a1
c366387
380de4d
5801d9d
7f3f5f7
a78459d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,15 +9,13 @@ | |
import React, { useEffect, useMemo, useState } from 'react'; | ||
import classNames from 'classnames'; | ||
import { | ||
EuiButtonEmpty, | ||
EuiButtonIcon, | ||
EuiFormControlLayout, | ||
EuiFormLabel, | ||
EuiFormRow, | ||
EuiIcon, | ||
EuiLink, | ||
EuiLoadingChart, | ||
EuiPopover, | ||
EuiText, | ||
EuiToolTip, | ||
} from '@elastic/eui'; | ||
|
||
|
@@ -40,25 +38,26 @@ interface ControlFrameErrorProps { | |
const ControlFrameError = ({ error }: ControlFrameErrorProps) => { | ||
const [isPopoverOpen, setPopoverOpen] = useState(false); | ||
const popoverButton = ( | ||
<EuiText className="errorEmbeddableCompact__button" size="xs"> | ||
<EuiLink | ||
className="eui-textTruncate" | ||
color="subdued" | ||
onClick={() => setPopoverOpen((open) => !open)} | ||
> | ||
<EuiIcon type="alert" color="danger" /> | ||
<FormattedMessage | ||
id="controls.frame.error.message" | ||
defaultMessage="An error has occurred. Read more" | ||
/> | ||
</EuiLink> | ||
</EuiText> | ||
<EuiButtonEmpty | ||
color="danger" | ||
iconSize="m" | ||
iconType={'alert'} | ||
onClick={() => setPopoverOpen((open) => !open)} | ||
className={'errorEmbeddableCompact__button'} | ||
textProps={{ className: 'errorEmbeddableCompact__text' }} | ||
> | ||
<FormattedMessage | ||
id="controls.frame.error.message" | ||
defaultMessage="An error has occurred. Read more" | ||
/> | ||
</EuiButtonEmpty> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 commentThe reason will be displayed to describe this comment to others. Learn more. Is it possible to say something more specific about the error in the message? Is "Read more" a link and if so, what does it link to? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The entire area is actually a button, and clicking on it will open a popover with a very brief description of the error. I could change this text to be something like |
||
); | ||
|
||
return ( | ||
<EuiPopover | ||
button={popoverButton} | ||
isOpen={isPopoverOpen} | ||
className="errorEmbeddableCompact__popover" | ||
anchorClassName="errorEmbeddableCompact__popoverAnchor" | ||
closePopover={() => setPopoverOpen(false)} | ||
> | ||
|
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.
Because we were adding the cardinality badge beside the search bar, the action bar was starting to get pretty messy (especially when you also had ignored selections). So, we decided to move the "Clear all selections" and "Show only selected" buttons to the footer, like so:
Previously, the
hideExcludes
property would hide the entire footer - however, now that some other buttons have been moved to this footer, that no longer makes sense. Since I know that consumers of theControlGroupRenderer
want control over which parts of the popover are shown, I went ahead and added thehideFooter
property, which should be used instead of thehideExcludes
property if you want the entire footer to be hidden:The
hideExcludes
property now literally just hides the include/exclude button group, like so:Note that there is no UI to set these properties - these are intended specifically for consumers.
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.
cc @logeekal
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.
Update: We have moved to the following design to display the cardinality rather than a badge:
So, I've modified the code to make
hideExclude
once again hide the entire footer, which makeshideFooter
no longer necessary. Resolved in 6b7ab49