NewPanelEdit: Fixed missing react keys in list error

This commit is contained in:
Torkel Ödegaard 2020-04-05 15:21:53 +02:00
parent 3ec88a013f
commit 09bcdc1020
4 changed files with 49 additions and 46 deletions

View File

@ -184,11 +184,14 @@ export const TabsBarContent: React.FC<{
</div>
) : (
<>
{tabSelections.map(item => {
return (
<Tab label={item.label} active={activeTab === item.value} onChangeTab={() => setActiveTab(item.value)} />
);
})}
{tabSelections.map(item => (
<Tab
key={item.value}
label={item.label}
active={activeTab === item.value}
onChangeTab={() => setActiveTab(item.value)}
/>
))}
<div className="flex-grow-1" />
</>
)}
@ -219,7 +222,7 @@ const tabSelections: Array<SelectableValue<string>> = [
value: 'options',
},
{
label: 'Data',
label: 'Fields',
value: 'defaults',
},
{

View File

@ -96,49 +96,50 @@ export const PanelOptionsTab: FC<Props> = ({
}
elements.push(
<>
<OptionsGroup title="Panel links" key="panel links" defaultToClosed={true}>
<DataLinksInlineEditor
links={panel.links}
onChange={links => onPanelConfigChange('links', links)}
suggestions={linkVariablesSuggestions}
data={[]}
/>
</OptionsGroup>
<OptionsGroup title="Panel repeats" key="panel repeats" defaultToClosed={true}>
<Forms.Field
label="Repeat by variable"
description="Repeat this panel for each value in the selected variable.
<OptionsGroup title="Panel links" key="panel links" defaultToClosed={true}>
<DataLinksInlineEditor
links={panel.links}
onChange={links => onPanelConfigChange('links', links)}
suggestions={linkVariablesSuggestions}
data={[]}
/>
</OptionsGroup>
);
elements.push(
<OptionsGroup title="Panel repeats" key="panel repeats" defaultToClosed={true}>
<Forms.Field
label="Repeat by variable"
description="Repeat this panel for each value in the selected variable.
This is not visible while in edit mode. You need to go back to dashboard and then update the variable or
reload the dashboard."
>
<Select
value={panel.repeat}
onChange={value => onPanelConfigChange('repeat', value.value)}
options={variableOptions}
>
<Select
value={panel.repeat}
onChange={value => onPanelConfigChange('repeat', value.value)}
options={variableOptions}
/>
</Forms.Field>
{panel.repeat && (
<Forms.Field label="Repeat direction">
<Forms.RadioButtonGroup
options={directionOptions}
value={panel.repeatDirection || 'h'}
onChange={value => onPanelConfigChange('repeatDirection', value)}
/>
</Forms.Field>
{panel.repeat && (
<Forms.Field label="Repeat direction">
<Forms.RadioButtonGroup
options={directionOptions}
value={panel.repeatDirection || 'h'}
onChange={value => onPanelConfigChange('repeatDirection', value)}
/>
</Forms.Field>
)}
)}
{panel.repeat && panel.repeatDirection === 'h' && (
<Forms.Field label="Max per row">
<Select
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={value => onPanelConfigChange('maxPerRow', value.value)}
/>
</Forms.Field>
)}
</OptionsGroup>
</>
{panel.repeat && panel.repeatDirection === 'h' && (
<Forms.Field label="Max per row">
<Select
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={value => onPanelConfigChange('maxPerRow', value.value)}
/>
</Forms.Field>
)}
</OptionsGroup>
);
return <>{elements}</>;

View File

@ -20,6 +20,6 @@ export class TablePanel extends Component<Props> {
return <div>No Table Data...</div>;
}
return <Table height={height} width={width} data={data.series[0]} noHeader={!options.showHeader} />;
return <Table height={height - 16} width={width} data={data.series[0]} noHeader={!options.showHeader} />;
}
}

View File

@ -15,7 +15,6 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
min: 20,
max: 300,
},
defaultValue: 1,
})
.addSelect({
id: 'displayMode',