Commit bb357adc by Ryan McKinley Committed by GitHub

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

parent ba70b59f
......@@ -74,6 +74,9 @@ export const OptionsPaneContent: React.FC<{
[data, plugin, panel, onFieldConfigsChange]
);
// When the panel has no query only show the main tab
const showMainTab = activeTab === 'options' || plugin.meta.skipDataQuery;
return (
<div className={styles.panelOptionsPane}>
{plugin && (
......@@ -81,6 +84,7 @@ export const OptionsPaneContent: React.FC<{
<TabsBar className={styles.tabsBar}>
<TabsBarContent
width={width}
showFields={!plugin.meta.skipDataQuery}
isSearching={isSearching}
styles={styles}
activeTab={activeTab}
......@@ -91,7 +95,7 @@ export const OptionsPaneContent: React.FC<{
</TabsBar>
<TabContent className={styles.tabContent}>
<CustomScrollbar>
{activeTab === 'options' && (
{showMainTab ? (
<PanelOptionsTab
panel={panel}
plugin={plugin}
......@@ -101,9 +105,12 @@ export const OptionsPaneContent: React.FC<{
onFieldConfigsChange={onFieldConfigsChange}
onPanelOptionsChanged={onPanelOptionsChanged}
/>
)}
) : (
<>
{activeTab === 'defaults' && renderFieldOptions(plugin)}
{activeTab === 'overrides' && renderFieldOverrideOptions(plugin)}
</>
)}
</CustomScrollbar>
</TabContent>
</div>
......@@ -114,13 +121,14 @@ export const OptionsPaneContent: React.FC<{
export const TabsBarContent: React.FC<{
width: number;
showFields: boolean;
isSearching: boolean;
activeTab: string;
styles: OptionsPaneStyles;
onClose: () => void;
setSearchMode: (mode: boolean) => void;
setActiveTab: (tab: string) => void;
}> = ({ width, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => {
}> = ({ width, showFields, isSearching, activeTab, onClose, setSearchMode, setActiveTab, styles }) => {
if (isSearching) {
const defaultStyles = {
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 (
<>
{width < 352 ? (
<div className="flex-grow-1">
<Select
options={tabSelections}
value={tabSelections.find(v => v.value === activeTab)}
options={tabs}
value={active}
onChange={v => {
setActiveTab(v.value);
}}
......@@ -170,11 +186,11 @@ export const TabsBarContent: React.FC<{
</div>
) : (
<>
{tabSelections.map(item => (
{tabs.map(item => (
<Tab
key={item.value}
label={item.label}
active={activeTab === item.value}
active={active.value === item.value}
onChangeTab={() => setActiveTab(item.value)}
/>
))}
......@@ -182,6 +198,7 @@ export const TabsBarContent: React.FC<{
</>
)}
{/*
<div className={styles.tabsButton}>
<DashNavButton
icon="search"
......@@ -190,7 +207,7 @@ export const TabsBarContent: React.FC<{
classSuffix="search-options"
onClick={() => setSearchMode(true)}
/>
</div>
</div> */}
<div className={styles.tabsButton}>
<DashNavButton
icon="angle-right"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment