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

Variables: Prioritize showing adhoc variable key and operator #750

Merged
merged 2 commits into from
May 30, 2024
Merged

Variables: Prioritize showing adhoc variable key and operator #750

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05a9e5d
Prioritize showing adhoc variable key and operator
oscarkilhed May 27, 2024
909f1e2
Fix remove button having no width
oscarkilhed May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions packages/scenes/src/variables/adhoc/AdHocFilterRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useState } from 'react';
import { AdHocFiltersVariable, AdHocFilterWithLabels } from './AdHocFiltersVariable';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Field, Select, useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css';
import { css, cx } from '@emotion/css';
import { ControlsLabel } from '../../utils/ControlsLabel';

interface Props {
Expand Down Expand Up @@ -40,7 +40,7 @@ export function AdHocFilterRenderer({ filter, model }: Props) {
allowCreateWhileLoading
formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}
disabled={model.state.readOnly}
className={isKeysOpen ? styles.widthWhenOpen : undefined}
className={cx(styles.value, isKeysOpen ? styles.widthWhenOpen : undefined)}
width="auto"
value={valueValue}
placeholder={'Select value'}
Expand Down Expand Up @@ -72,7 +72,7 @@ export function AdHocFilterRenderer({ filter, model }: Props) {
// to ensure that the loaded values are shown after they are loaded
key={`${isValuesLoading ? 'loading' : 'loaded'}`}
disabled={model.state.readOnly}
className={isKeysOpen ? styles.widthWhenOpen : undefined}
className={cx(styles.key, isKeysOpen ? styles.widthWhenOpen : undefined)}
width="auto"
value={keyValue}
placeholder={'Select label'}
Expand Down Expand Up @@ -127,6 +127,7 @@ export function AdHocFilterRenderer({ filter, model }: Props) {
<div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>
{keySelect}
<Select
className={styles.operator}
value={filter.operator}
disabled={model.state.readOnly}
options={model._getOperators()}
Expand Down Expand Up @@ -191,6 +192,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
widthWhenOpen: css({
minWidth: theme.spacing(16),
}),
value: css({
flexShrink: 1,
}),
key: css({
flexShrink: 0,
Copy link
Member

Choose a reason for hiding this comment

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

why happens when the key is really long, will this stop ellipsis on the key? I would expect both to be ellipised with some min width.

Copy link
Member

Choose a reason for hiding this comment

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

+1

Copy link
Contributor Author

@oscarkilhed oscarkilhed May 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Hmm. You're right. Trying some stuff out I think having it set to flex-shrink: 1 and a relatively small min-width for the key as well looks best.

}),
operator: css({
flexShrink: 0,
}),
removeButton: css({
paddingLeft: theme.spacing(3 / 2),
paddingRight: theme.spacing(3 / 2),
Expand Down
Loading