IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

NewEditor: don't show field tabs for non data panels (#23487)

Browse Source
This commit is contained in:
Ryan McKinley 2020-04-09 21:26:37 -07:00 committed by GitHub
parent ba70b59f4c
commit bb357adcab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
View File

@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{
[data, plugin, panel, onFieldConfigsChange] [data, plugin, panel, onFieldConfigsChange]
); );
// When the panel has no query only show the main tab
const showMainTab = activeTab === 'options' || plugin.meta.skipDataQuery;
return ( return (
<div className={styles.panelOptionsPane}> <div className={styles.panelOptionsPane}>
{plugin && ( {plugin && (
@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{
<TabsBar className={styles.tabsBar}> <TabsBar className={styles.tabsBar}>
<TabsBarContent <TabsBarContent
width={width} width={width}
showFields={!plugin.meta.skipDataQuery}
isSearching={isSearching} isSearching={isSearching}
styles={styles} styles={styles}
activeTab={activeTab} activeTab={activeTab}
@ -91,7 +95,7 @@ export const OptionsPaneContent: React.FC<{
</TabsBar> </TabsBar>
<TabContent className={styles.tabContent}> <TabContent className={styles.tabContent}>
<CustomScrollbar> <CustomScrollbar>
{activeTab === 'options' && ( {showMainTab ? (
<PanelOptionsTab <PanelOptionsTab
panel={panel} panel={panel}
plugin={plugin} plugin={plugin}
@ -101,9 +105,12 @@ export const OptionsPaneContent: React.FC<{
onFieldConfigsChange={onFieldConfigsChange} onFieldConfigsChange={onFieldConfigsChange}
onPanelOptionsChanged={onPanelOptionsChanged} onPanelOptionsChanged={onPanelOptionsChanged}
/> />
) : (
<>
{activeTab === 'defaults' && renderFieldOptions(plugin)}
{activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
</>
)} )}
{activeTab === 'defaults' && renderFieldOptions(plugin)}
{activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
</CustomScrollbar> </CustomScrollbar>
</TabContent> </TabContent>
</div> </div>
@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{
export const TabsBarContent: React.FC<{ export const TabsBarContent: React.FC<{
width: number; width: number;
showFields: boolean;
isSearching: boolean; isSearching: boolean;
activeTab: string; activeTab: string;
styles: OptionsPaneStyles; styles: OptionsPaneStyles;
onClose: () => void; onClose: () => void;
setSearchMode: (mode: boolean) => void; setSearchMode: (mode: boolean) => void;
setActiveTab: (tab: string) => void; setActiveTab: (tab: string) => void;
}> = ({ width, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => { }> = ({ width, showFields, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => {
if (isSearching) { if (isSearching) {
const defaultStyles = { const defaultStyles = {
transition: 'width 50ms ease-in-out', transition: 'width 50ms ease-in-out',
@ -156,13 +164,21 @@ export const TabsBarContent: React.FC<{
); );
} }
// Show the appropriate tabs
let tabs = tabSelections;
let active = tabs.find(v => v.value === activeTab);
if (!showFields) {
active = tabSelections[0];
tabs = [active];
}
return ( return (
<> <>
{width < 352 ? ( {width < 352 ? (
<div className="flex-grow-1"> <div className="flex-grow-1">
<Select <Select
options={tabSelections} options={tabs}
value={tabSelections.find(v => v.value === activeTab)} value={active}
onChange={v => { onChange={v => {
setActiveTab(v.value); setActiveTab(v.value);
}} }}
@ -170,11 +186,11 @@ export const TabsBarContent: React.FC<{
</div> </div>
) : ( ) : (
<> <>
{tabSelections.map(item => ( {tabs.map(item => (
<Tab <Tab
key={item.value} key={item.value}
label={item.label} label={item.label}
active={activeTab === item.value} active={active.value === item.value}
onChangeTab={() => setActiveTab(item.value)} onChangeTab={() => setActiveTab(item.value)}
/> />
))} ))}
@ -182,6 +198,7 @@ export const TabsBarContent: React.FC<{
</> </>
)} )}
{/*
<div className={styles.tabsButton}> <div className={styles.tabsButton}>
<DashNavButton <DashNavButton
icon="search" icon="search"
@ -190,7 +207,7 @@ export const TabsBarContent: React.FC<{
classSuffix="search-options" classSuffix="search-options"
onClick={() => setSearchMode(true)} onClick={() => setSearchMode(true)}
/> />
</div> </div> */}
<div className={styles.tabsButton}> <div className={styles.tabsButton}>
<DashNavButton <DashNavButton
icon="angle-right" icon="angle-right"