From f3df336b1771d48bdbeeec4b55b3d892f25a92e4 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 4 Aug 2021 16:40:54 +0100 Subject: [PATCH] Select: Make portalling the menu opt-in, but opt-in *everywhere* (#37501) (#37552) * Select: Don't portal by default * Select: Portal all the Selects * Fix indendentation in this comment * Select: Remove @example docs until formatting is correct * Docs: Add some documentation for the Select changes * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update docs/sources/whatsnew/whats-new-in-v8-1.md Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update packages/grafana-ui/src/components/Select/types.ts Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Update public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> * Docs: Variants instead of varients * Update public/app/core/components/TransformersUI/configFromQuery/ConfigFromQueryTransformerEditor.tsx Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com> (cherry picked from commit 8aa3845f70c5e3c47997ec5b7305c102fe717437) --- docs/sources/whatsnew/whats-new-in-v8-1.md | 16 +++++++++++++++ .../grafana-e2e/src/flows/addDashboard.ts | 3 ++- .../src/components/DataSourcePicker.tsx | 1 + .../src/components/Cascader/Cascader.tsx | 1 + .../DataSourceHttpSettings.tsx | 1 + .../DateTimePickers/TimeZonePicker.tsx | 1 + .../src/components/Forms/Field.test.tsx | 2 +- .../src/components/Forms/Form.story.tsx | 2 +- .../components/Forms/InlineField.story.tsx | 1 + .../src/components/Forms/InlineField.test.tsx | 2 +- .../Legacy/Select/Select.story.internal.tsx | 1 + .../MatchersUI/FieldNameMatcherEditor.tsx | 2 +- .../components/MatchersUI/FieldNamePicker.tsx | 1 + .../MatchersUI/FieldNamesMatcherEditor.tsx | 2 +- .../MatchersUI/FieldTypeMatcherEditor.tsx | 2 +- .../MatchersUI/FieldsByFrameRefIdMatcher.tsx | 2 +- .../src/components/OptionsUI/fieldColor.tsx | 13 +++++++++--- .../src/components/Segment/SegmentSelect.tsx | 1 + .../src/components/Select/Select.story.tsx | 10 ++++++++++ .../src/components/Select/SelectBase.test.tsx | 20 +++++++++++-------- .../src/components/Select/SelectBase.tsx | 11 +++++----- .../grafana-ui/src/components/Select/types.ts | 12 +++++------ .../components/StatsPicker/StatsPicker.tsx | 1 + .../src/components/ThemeDemos/ThemeDemo.tsx | 7 ++++++- .../ValueMappingEditRow.tsx | 1 + .../components/ValuePicker/ValuePicker.tsx | 1 + .../grafana-ui/src/options/builder/axis.tsx | 1 + .../input-datasource/src/InputQueryEditor.tsx | 2 +- .../components/FolderFilter/FolderFilter.tsx | 1 + .../PanelTypeFilter/PanelTypeFilter.tsx | 2 +- .../PermissionList/AddPermission.tsx | 2 ++ .../DisabledPermissionListItem.tsx | 1 + .../PermissionList/PermissionListItem.tsx | 1 + .../components/Select/DashboardPicker.tsx | 1 + .../core/components/Select/FolderPicker.tsx | 1 + .../core/components/Select/MetricSelect.tsx | 1 + .../app/core/components/Select/OrgPicker.tsx | 1 + .../app/core/components/Select/SortPicker.tsx | 1 + .../app/core/components/Select/TeamPicker.tsx | 1 + .../app/core/components/Select/UserPicker.tsx | 1 + .../__snapshots__/FolderPicker.test.tsx.snap | 1 + .../SharedPreferences/SharedPreferences.tsx | 1 + .../core/components/TagFilter/TagFilter.tsx | 2 +- .../CalculateFieldTransformerEditor.tsx | 4 ++++ .../ConcatenateTransformerEditor.tsx | 1 + .../FilterByValueFilterEditor.tsx | 2 ++ .../GroupByTransformerEditor.tsx | 1 + .../LabelsToFieldsTransformerEditor.tsx | 1 + .../ReduceTransformerEditor.tsx | 1 + .../SeriesToFieldsTransformerEditor.tsx | 2 +- .../SortByTransformerEditor.tsx | 1 + .../ConfigFromQueryTransformerEditor.tsx | 19 +++++++++--------- .../FieldToConfigMappingEditor.tsx | 1 + .../PrepareTimeSeriesEditor.tsx | 7 ++++--- public/app/features/admin/OrgRolePicker.tsx | 1 + .../app/features/alerting/AlertRuleList.tsx | 1 + .../alerting/components/BasicSettings.tsx | 2 +- .../alerting/components/OptionElement.tsx | 2 +- .../unified/components/AlertManagerPicker.tsx | 1 + .../components/amroutes/AmRootRouteForm.tsx | 5 +++++ .../amroutes/AmRoutesExpandedForm.tsx | 5 +++++ .../receivers/form/ChannelSubForm.tsx | 8 +++++++- .../receivers/form/fields/OptionField.tsx | 1 + .../components/rule-editor/AlertTypeStep.tsx | 7 ++++++- .../rule-editor/CloudConditionsStep.tsx | 1 + .../components/rule-editor/ConditionField.tsx | 1 + .../rule-editor/GrafanaAlertStatePicker.tsx | 2 +- .../components/rule-editor/SelectWIthAdd.tsx | 1 + .../components/AnnotationResultMapper.tsx | 2 ++ .../LinksSettings/LinkSettingsEdit.tsx | 4 ++-- .../PanelEditor/getPanelFrameOptions.tsx | 1 + .../RepeatRowSelect/RepeatRowSelect.tsx | 2 +- .../components/ShareModal/ShareSnapshot.tsx | 8 +++++++- .../RichHistory/RichHistoryQueriesTab.tsx | 2 ++ .../RichHistory/RichHistorySettings.tsx | 7 ++++++- .../RichHistory/RichHistoryStarredTab.tsx | 2 ++ .../expressions/ExpressionQueryEditor.tsx | 8 +++++++- .../expressions/components/Condition.tsx | 2 ++ .../expressions/components/Reduce.tsx | 4 ++-- .../expressions/components/Resample.tsx | 18 ++++++++++++++--- .../features/inspector/InspectDataOptions.tsx | 1 + .../app/features/inspector/InspectJSONTab.tsx | 2 +- .../OpenLibraryPanelModal.tsx | 1 + .../features/plugins/admin/pages/Browse.tsx | 1 + public/app/features/teams/TeamMemberRow.tsx | 1 + .../__snapshots__/TeamMemberRow.test.tsx.snap | 2 ++ .../variables/editor/VariableSelectField.tsx | 1 + .../components/Aggregation.tsx | 1 + .../components/AlignmentFunction.tsx | 1 + .../components/AlignmentPeriod.tsx | 1 + .../components/ConfigEditor/ConfigEditor.tsx | 1 + .../cloud-monitoring/components/Fields.tsx | 1 + .../cloud-monitoring/components/GroupBy.tsx | 1 + .../components/LabelFilter.tsx | 4 ++++ .../cloud-monitoring/components/Metrics.tsx | 2 ++ .../cloud-monitoring/components/Project.tsx | 1 + .../components/QueryEditor.tsx | 1 + .../cloud-monitoring/components/SLO/SLO.tsx | 1 + .../components/SLO/Selector.tsx | 1 + .../components/SLO/Service.tsx | 1 + .../cloudwatch/components/LogsQueryField.tsx | 2 ++ .../dashboard/DashboardQueryEditor.tsx | 1 + .../DateHistogramSettingsEditor.tsx | 1 + .../SettingsEditor/TermsSettingsEditor.tsx | 3 +++ .../MovingAverageSettingsEditor.tsx | 1 + .../TopMetricsSettingsEditor.tsx | 2 ++ .../SettingsEditor/index.tsx | 2 ++ ...CreatableSelectPersistedBehaviour.test.tsx | 3 +++ .../configuration/ElasticDetails.tsx | 2 ++ .../components/AzureCredentialsForm.tsx | 3 +++ .../InsightsAnalyticsEditor/index.tsx | 1 + .../LogsQueryEditor/FormatAsField.tsx | 1 + .../MetricsQueryEditor/AggregationField.tsx | 1 + .../MetricsQueryEditor/DimensionFields.tsx | 1 + .../MetricsQueryEditor/MetricNameField.tsx | 1 + .../MetricNamespaceField.tsx | 1 + .../ResourceGroupsField.tsx | 1 + .../MetricsQueryEditor/ResourceNameField.tsx | 1 + .../MetricsQueryEditor/ResourceTypeField.tsx | 1 + .../MetricsQueryEditor/TimeGrainField.tsx | 1 + .../components/QueryEditor/QueryTypeField.tsx | 1 + .../components/SubscriptionField.tsx | 2 ++ .../AzureCredentialsForm.test.tsx.snap | 6 ++++++ .../components/AnnotationQueryEditor.tsx | 2 ++ .../grafana/components/QueryEditor.tsx | 3 +++ .../graphite/configuration/ConfigEditor.tsx | 2 ++ .../influxdb/components/ConfigEditor.tsx | 2 ++ .../influxdb/components/RawInfluxQLEditor.tsx | 1 + .../components/VisualInfluxQLEditor/Seg.tsx | 2 ++ .../__snapshots__/ConfigEditor.test.tsx.snap | 8 ++++++++ .../jaeger/components/SearchForm.tsx | 2 ++ .../opentsdb/components/OpenTsdbDetails.tsx | 2 ++ .../prometheus/components/PromQueryEditor.tsx | 2 ++ .../PromQueryEditor.test.tsx.snap | 2 ++ .../configuration/AzureCredentialsForm.tsx | 3 +++ .../prometheus/configuration/PromSettings.tsx | 1 + .../AzureCredentialsForm.test.tsx.snap | 6 ++++++ .../datasource/testdata/QueryEditor.tsx | 2 ++ .../testdata/components/CSVFileEditor.tsx | 1 + .../testdata/components/GrafanaLiveEditor.tsx | 1 + .../components/StreamingClientEditor.tsx | 2 +- .../testdata/components/USAQueryEditor.tsx | 3 +++ .../dims/editors/ColorDimensionEditor.tsx | 1 + .../dims/editors/ScaleDimensionEditor.tsx | 1 + .../geomap/editor/GazetteerPathEditor.tsx | 1 + .../panel/geomap/editor/LayerEditor.tsx | 1 + .../panel/geomap/editor/MapViewEditor.tsx | 2 +- .../plugins/panel/live/LiveChannelEditor.tsx | 9 ++++++++- public/app/plugins/panel/table/TablePanel.tsx | 7 ++++++- .../panel/timeseries/FillBelowToEditor.tsx | 1 + .../panel/timeseries/LineStyleEditor.tsx | 1 + .../timeseries/ThresholdsStyleEditor.tsx | 2 +- .../plugins/panel/xychart/XYDimsEditor.tsx | 2 ++ 153 files changed, 345 insertions(+), 71 deletions(-) diff --git a/docs/sources/whatsnew/whats-new-in-v8-1.md b/docs/sources/whatsnew/whats-new-in-v8-1.md index de03cccfdfb..7a9aa8b28c9 100644 --- a/docs/sources/whatsnew/whats-new-in-v8-1.md +++ b/docs/sources/whatsnew/whats-new-in-v8-1.md @@ -116,6 +116,22 @@ We’ve made some changes to the plugins UI to help make it easier to discover a New panel summaries and preview on the top level [Visualizations]({{< relref "../panels/visualizations/_index.md" >}}) page to help users pick or learn about specific visualizations more easily. +### Upcoming changes to the Select component + +The `@grafana/ui` exposes a `Select` component, and its variants `MultiSelect`, `AsyncSelect`, and `AsyncMultiSelect`. We have made some internal changes to these components to make the behavior and positioning more consistent in all scenarios. + +To test the changes, you can use the `menuShouldPortal` property: +```jsx +
{isSearching ? ( o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION} diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx index fb46150f984..ee848c69f62 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx @@ -43,6 +43,7 @@ export const TimeZonePicker: React.FC = (props) => { return ( {}} /> + } + render={({ field }) => { it('renders with the inputId of its children', () => { render( - {}} /> ); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx index 8b2fbd72eec..2f9a66737d0 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx @@ -69,6 +69,7 @@ export const Basic: Story = (args) => { {(value, updateValue) => { return ( ; + return ; } - return ; + return ; }); FieldNamesMatcherEditor.displayName = 'FieldNameMatcherEditor'; diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx index af422a6db07..fef563276d1 100644 --- a/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx +++ b/packages/grafana-ui/src/components/MatchersUI/FieldTypeMatcherEditor.tsx @@ -16,7 +16,7 @@ export const FieldTypeMatcherEditor = memo>((props) => { ); const selectedOption = selectOptions.find((v) => v.value === options); - return ; }); FieldTypeMatcherEditor.displayName = 'FieldTypeMatcherEditor'; diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx index 1f6a18b57f5..57c78198b80 100644 --- a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx +++ b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx @@ -23,7 +23,7 @@ export const FieldsByFrameRefIdMatcher = memo>((props) => ); const selectedOption = selectOptions.find((v) => v.value === options); - return ; }); FieldsByFrameRefIdMatcher.displayName = 'FieldsByFrameRefIdMatcher'; diff --git a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx index 4c51b77eac2..13bbbb40fee 100644 --- a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx +++ b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx @@ -74,7 +74,14 @@ export const FieldColorEditor: React.FC -
); @@ -90,7 +97,7 @@ export const FieldColorEditor: React.FC
-
@@ -99,7 +106,7 @@ export const FieldColorEditor: React.FC; + return = (args) => { return ( <> { @@ -144,6 +146,7 @@ export const SelectWithOptionDescriptions: Story = (args) => { return ( <> { @@ -294,6 +303,7 @@ export const CustomValueCreation: Story = (args) => { return ( <> { - setSelectValue(v?.value!)} + /> diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx index 6320bc05148..90d89a6ccfb 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingEditRow.tsx @@ -148,6 +148,7 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl )} {mapping.type === MappingType.SpecialValue && ( {value.type === ScaleDistribution.Log && ( + { Can {}} disabled={true} diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx index 74dba9950d4..2a14c5bfd60 100644 --- a/public/app/core/components/PermissionList/PermissionListItem.tsx +++ b/public/app/core/components/PermissionList/PermissionListItem.tsx @@ -75,6 +75,7 @@ export default class PermissionsListItem extends PureComponent { Can { return ( = ({ onChange, value, placeholder, filter }) const selected = options?.find((opt) => opt.value === value); return !loading ? ( dashboard.id === homeDashboardId)} getOptionValue={(i) => i.id} getOptionLabel={this.getFullDashName} diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx index e72ee56a1fb..cf0e35d1b9a 100644 --- a/public/app/core/components/TagFilter/TagFilter.tsx +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -107,7 +107,7 @@ export const TagFilter: FC = ({ Clear tags )} - } aria-label="Tag filter" /> + } aria-label="Tag filter" /> ); }; diff --git a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx index 9ca3eed260f..6f7c1d97e4c 100644 --- a/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx +++ b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx @@ -300,6 +300,7 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
v.value === mode)} diff --git a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx index 5f1f45258a7..0e7749234f0 100644 --- a/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx +++ b/public/app/core/components/TransformersUI/ConcatenateTransformerEditor.tsx @@ -57,6 +57,7 @@ export class ConcatenateTransformerEditor extends React.PureComponent
Name
= (props) => {
Match
Value field name
v.value === options.mode) || modes[0]} onChange={onSelectMode} diff --git a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx index ad3cf65ff2a..4146cfb24d1 100644 --- a/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx +++ b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx @@ -32,7 +32,7 @@ export const SeriesToFieldsTransformerEditor: React.FC
Field name
-
); diff --git a/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx b/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx index 4ac53bcd525..d23978972d2 100644 --- a/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx +++ b/public/app/core/components/TransformersUI/SortByTransformerEditor.tsx @@ -28,6 +28,7 @@ export const SortByTransformerEditor: React.FC + + onChange(val.value as OrgRole)} diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx index b44a2aba32a..a9735b87288 100644 --- a/public/app/features/alerting/AlertRuleList.tsx +++ b/public/app/features/alerting/AlertRuleList.tsx @@ -106,6 +106,7 @@ export class AlertRuleListUnconnected extends PureComponent {
} + render={({ field: { ref, ...field } }) => + = ({ ( onChange(mapSelectValueToString(value))} @@ -147,6 +150,7 @@ export const AmRootRouteForm: FC = ({ ( = ({ onCancel, ( onChange(mapSelectValueToString(value))} @@ -221,6 +224,7 @@ export const AmRoutesExpandedForm: FC = ({ onCancel, ( ({ name={name('type')} defaultValue={defaultValues.type} render={({ field: { ref, onChange, ...field } }) => ( - onChange(value?.value)} + /> )} control={control} rules={{ required: true }} diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx index 5111cd0f41e..55277037e81 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx @@ -96,6 +96,7 @@ const OptionInput: FC = ({ option, invalid, id, pathPref ( onChange(v?.value)} /> + onChange(value?.value)} diff --git a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx index 16f41f99ad5..75cc88d0fd4 100644 --- a/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx @@ -47,6 +47,7 @@ export const ConditionField: FC = () => { name="condition" render={({ field: { onChange, ref, ...field } }) => ( ; + return { {/* = ({ editLinkIdx, - {linkSettings.type === 'dashboards' && ( <> @@ -105,7 +105,7 @@ export const LinkSettingsEdit: React.FC = ({ editLinkIdx, - )} diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx index eee6f8d1944..375a716779e 100644 --- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx @@ -146,6 +146,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value })); return ( ; + return -
+
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx index 1c61618cc14..3570d0b3d47 100644 --- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx @@ -118,6 +118,7 @@ export function RichHistoryStarredTab(props: Props) { {!activeDatasourceOnly && (
+ = ({ condition, index, onChange, onRemoveCondi />
OF
+ + + - - diff --git a/public/app/features/inspector/InspectDataOptions.tsx b/public/app/features/inspector/InspectDataOptions.tsx index e0997cce6b0..b0b66e8ec40 100644 --- a/public/app/features/inspector/InspectDataOptions.tsx +++ b/public/app/features/inspector/InspectDataOptions.tsx @@ -104,6 +104,7 @@ export const InspectDataOptions: FC = ({ {data!.length > 1 && ( + {
{signedInUserIsTeamAdmin && ( = (props) => { return ( onChange({ ...query, perSeriesAligner: value! })} value={[...alignOptions, ...templateVariableOptions].find((s) => s.value === perSeriesAligner)} diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx index ed472a76b94..707cc12e6da 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx @@ -24,6 +24,7 @@ export const AlignmentPeriod: FC = ({ templateVariableOptions, onChange, return ( x.value === jsonData.authenticationType) || authTypes[0]} options={authTypes} diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx index fc8d4aa43d0..23990e54205 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx @@ -22,6 +22,7 @@ export const VariableQueryField: FC = ({ return ( @@ -77,6 +78,7 @@ export const LabelFilter: FunctionComponent = ({ {filters.map(({ key, operator, value, condition }, index) => ( @@ -100,6 +103,7 @@ export const LabelFilter: FunctionComponent = ({ renderControl={OperatorButton} /> s.value === service)} @@ -138,6 +139,7 @@ export function Metrics(props: Props) { `Use project: ${v}`} diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx index 9e07f353c9f..19f3004a914 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx @@ -76,6 +76,7 @@ export class QueryEditor extends PureComponent { } > = ({ query, templateVariableOptions, onCh return ( this.setSelectedRegion(v)} @@ -333,6 +334,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent {
Use results from panel
{ <> { dispatch(changeMetricSetting(metric, 'model', value.value!))} options={movingAvgModelOptions} value={metric.settings?.model} diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx index b9c679e1aaa..9b4db4d857d 100644 --- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx +++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx @@ -23,6 +23,7 @@ export const TopMetricsSettingsEditor: FunctionComponent = ({ metric }) = <> dispatch( changeMetricSetting( @@ -40,6 +41,7 @@ export const TopMetricsSettingsEditor: FunctionComponent = ({ metric }) = dispatch(changeMetricSetting(metric, 'unit', e.value))} options={rateAggUnitOptions} @@ -134,6 +135,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => { { const MyComp = () => ( { label="Pattern" inputEl={ { const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault( diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx index 7b23c3940ee..bdfa47550ef 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx @@ -157,6 +157,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => Authentication opt.value === credentials.azureCloud)} options={azureCloudOptions} @@ -252,6 +254,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => Default Subscription
= ({ query, variableOp return ( = ({ query, dimensionOptio {dimensionFilters.map((filter, index) => ( = ({ return ( = ({ return ( = ({ return ( = ({ return multiSelect ? ( = ({ ) : ( {
v.value === query.queryType) || this.queryTypes[0]} onChange={this.onQueryTypeChange} diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx index ca75f03c12e..e0cf7288c1d 100644 --- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx @@ -74,6 +74,7 @@ export class ConfigEditor extends PureComponent { Version type.value === options.jsonData.graphiteType)} width={8} diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx index 6baed92653d..6a7ae6ded1b 100644 --- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx @@ -215,6 +215,7 @@ export class ConfigEditor extends PureComponent { HTTP Method Format as v.value === query.operation) || null} onChange={(v) => diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx index 0457fe63db7..c6a0e5b125c 100644 --- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx +++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx @@ -29,6 +29,7 @@ export const OpenTsdbDetails = (props: Props) => {
Version resolution.value === value.jsonData.tsdbResolution) ?? diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx index 7075368260f..39443895823 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx @@ -163,6 +163,7 @@ export class PromQueryEditor extends PureComponent
Resolution
= (props: Props) => Authentication opt.value === credentials.azureCloud)} options={azureCloudOptions} @@ -244,6 +246,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => Default Subscription
o.value === options.jsonData.httpMethod)} onChange={onChangeHandler('httpMethod', options, onOptionsChange)} diff --git a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap b/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap index 12ea8b30e5a..4bf5b932f13 100644 --- a/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap +++ b/public/app/plugins/datasource/prometheus/configuration/__snapshots__/AzureCredentialsForm.test.tsx.snap @@ -36,6 +36,7 @@ exports[`Render should disable azure monitor secret input 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={ @@ -181,6 +182,7 @@ exports[`Render should disable azure monitor secret input 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={Array []} @@ -249,6 +251,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={ @@ -384,6 +387,7 @@ exports[`Render should enable azure monitor load subscriptions button 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={Array []} @@ -452,6 +456,7 @@ exports[`Render should render component 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={ @@ -587,6 +592,7 @@ exports[`Render should render component 1`] = ` isMulti={false} isSearchable={true} maxMenuHeight={300} + menuShouldPortal={true} onChange={[Function]} openMenuOnFocus={false} options={Array []} diff --git a/public/app/plugins/datasource/testdata/QueryEditor.tsx b/public/app/plugins/datasource/testdata/QueryEditor.tsx index 36a6cf22ba7..4b52f2b2c4e 100644 --- a/public/app/plugins/datasource/testdata/QueryEditor.tsx +++ b/public/app/plugins/datasource/testdata/QueryEditor.tsx @@ -170,6 +170,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props) { { return ( - {query?.stream?.type === 'signal' && streamingClientFields.map(({ label, id, min, step, placeholder }) => { diff --git a/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx b/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx index d546ed8e3e6..db733072c5e 100644 --- a/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx +++ b/public/app/plugins/datasource/testdata/components/USAQueryEditor.tsx @@ -14,6 +14,7 @@ export function USAQueryEditor({ query, onChange }: Props) { { onChange({ ...query, fields: vals.map((v) => v.value) }); @@ -47,6 +49,7 @@ export function USAQueryEditor({ query, onChange }: Props) {
onChange(v.value)} diff --git a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx index 5446380d6b8..97c4994dbdf 100644 --- a/public/app/plugins/panel/geomap/editor/LayerEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/LayerEditor.tsx @@ -164,6 +164,7 @@ export const LayerEditor: FC = ({ options, onChange, data, fil return (
+ s.value === scope)} onChange={this.onScopeChanged} /> + s.value === namespace) ?? @@ -130,6 +136,7 @@ export class LiveChannelEditor extends PureComponent {
+ { diff --git a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx index 93d2536228e..bc5448fef07 100644 --- a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx +++ b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx @@ -89,6 +89,7 @@ export const LineStyleEditor: React.FC> {value?.fill && value?.fill !== 'solid' && ( <> ; }; diff --git a/public/app/plugins/panel/xychart/XYDimsEditor.tsx b/public/app/plugins/panel/xychart/XYDimsEditor.tsx index a43234fc641..a002fe57685 100644 --- a/public/app/plugins/panel/xychart/XYDimsEditor.tsx +++ b/public/app/plugins/panel/xychart/XYDimsEditor.tsx @@ -90,6 +90,7 @@ export const XYDimsEditor: FC {