diff --git a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
index f2cf04d98736f1fd8322998c779f98a1185c6e18..61557e48bf82bb07ef5c5cd8b45c5dcc4c3ff0d2 100644
--- a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
+++ b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
@@ -4,7 +4,6 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import title from "metabase/hoc/Title";
-import cx from "classnames";
import { t } from "c-3po";
import MetabaseSettings from "metabase/lib/settings";
@@ -13,10 +12,9 @@ import DatabaseEditForms from "../components/DatabaseEditForms.jsx";
import DatabaseSchedulingForm from "../components/DatabaseSchedulingForm";
import ActionButton from "metabase/components/ActionButton.jsx";
import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
+import Radio from "metabase/components/Radio.jsx";
import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import colors from "metabase/lib/colors";
-
import {
getEditingDatabase,
getFormState,
@@ -43,35 +41,6 @@ const mapStateToProps = (state, props) => ({
formState: getFormState(state),
});
-export const Tab = ({ name, setTab, currentTab }) => {
- const isCurrentTab = currentTab === name.toLowerCase();
-
- return (
- <div
- className={cx("cursor-pointer py2", { "text-brand": isCurrentTab })}
- // TODO Use css classes instead?
- style={
- isCurrentTab ? { borderBottom: `3px solid ${colors["brand"]}` } : {}
- }
- onClick={() => setTab(name)}
- >
- <h3>{name}</h3>
- </div>
- );
-};
-
-export const Tabs = ({ tabs, currentTab, setTab }) => (
- <div className="border-bottom">
- <ol className="Form-offset flex align center">
- {tabs.map((tab, index) => (
- <li key={index} className="mr3">
- <Tab name={tab} setTab={setTab} currentTab={currentTab} />
- </li>
- ))}
- </ol>
- </div>
-);
-
const mapDispatchToProps = {
reset,
initializeDatabase,
@@ -84,18 +53,26 @@ const mapDispatchToProps = {
selectEngine,
};
+type TabName = "connection" | "scheduling";
+type TabOption = { name: string, value: TabName };
+
+const TABS: TabOption[] = [
+ { name: t`Connection`, value: "connection" },
+ { name: t`Scheduling`, value: "scheduling" },
+];
+
@connect(mapStateToProps, mapDispatchToProps)
@title(({ database }) => database && database.name)
export default class DatabaseEditApp extends Component {
state: {
- currentTab: "connection" | "scheduling",
+ currentTab: TabName,
};
constructor(props, context) {
super(props, context);
this.state = {
- currentTab: "connection",
+ currentTab: TABS[0].value,
};
}
@@ -156,13 +133,14 @@ export default class DatabaseEditApp extends Component {
<div className="Grid-cell">
<div className="Form-new bordered rounded shadowed pt0">
{showTabs && (
- <Tabs
- tabs={[t`Connection`, t`Scheduling`]}
- currentTab={currentTab}
- setTab={tab =>
- this.setState({ currentTab: tab.toLowerCase() })
- }
- />
+ <div className="Form-offset border-bottom">
+ <Radio
+ value={currentTab}
+ options={TABS}
+ onChange={currentTab => this.setState({ currentTab })}
+ underlined
+ />
+ </div>
)}
<LoadingAndErrorWrapper loading={!database} error={null}>
{() => (
diff --git a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
index dee048a4d68e9459d5841e528b123aa99164599a..837e2aac14889fe03b730a7888bab952743bed45 100644
--- a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
@@ -435,15 +435,19 @@ export default class PeopleListingApp extends Component {
let title = t`People`;
if (deactivated.length > 0) {
title = (
- <Radio
- className="h6"
- value={!!showDeactivated}
- options={[
- { name: t`Active`, value: false },
- { name: t`Deactivated`, value: true },
- ]}
- onChange={showDeactivated => this.setState({ showDeactivated })}
- />
+ <div className="mb2">
+ <Radio
+ className="h6"
+ value={!!showDeactivated}
+ options={[
+ { name: t`Active`, value: false },
+ { name: t`Deactivated`, value: true },
+ ]}
+ underlined
+ py={1}
+ onChange={showDeactivated => this.setState({ showDeactivated })}
+ />
+ </div>
);
}
diff --git a/frontend/src/metabase/components/Radio.info.js b/frontend/src/metabase/components/Radio.info.js
index f9d165e45bf86b65274724157fe2c0cc81ed8d71..bbc53a33e911219ccbd87535cb6f0ed5e1fda543 100644
--- a/frontend/src/metabase/components/Radio.info.js
+++ b/frontend/src/metabase/components/Radio.info.js
@@ -14,6 +14,7 @@ const PROPS = {
export const examples = {
default: <Radio {...PROPS} />,
+ underlined: <Radio {...PROPS} underlined />,
"show buttons": <Radio {...PROPS} showButtons />,
- vertical: <Radio {...PROPS} isVertical />,
+ vertical: <Radio {...PROPS} vertical />,
};
diff --git a/frontend/src/metabase/components/Radio.jsx b/frontend/src/metabase/components/Radio.jsx
index 53843c39b7b6f5767e6a2cc91542926cd2d77dc7..d4d42a7202ce61b40869d7a4640680118cd34637 100644
--- a/frontend/src/metabase/components/Radio.jsx
+++ b/frontend/src/metabase/components/Radio.jsx
@@ -1,6 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
+import colors from "metabase/lib/colors";
+
import cx from "classnames";
import _ from "underscore";
@@ -12,15 +14,18 @@ export default class Radio extends Component {
optionNameFn: PropTypes.func,
optionValueFn: PropTypes.func,
optionKeyFn: PropTypes.func,
- isVertical: PropTypes.bool,
+ vertical: PropTypes.bool,
+ underlined: PropTypes.bool,
showButtons: PropTypes.bool,
+ py: PropTypes.number,
};
static defaultProps = {
optionNameFn: option => option.name,
optionValueFn: option => option.value,
optionKeyFn: option => option.value,
- isVertical: false,
+ vertical: false,
+ underlined: false,
};
constructor(props, context) {
@@ -36,45 +41,56 @@ export default class Radio extends Component {
optionNameFn,
optionValueFn,
optionKeyFn,
- isVertical,
+ vertical,
+ underlined,
className,
+ py,
} = this.props;
// show buttons for vertical only by default
const showButtons =
- this.props.showButtons != undefined ? this.props.showButtons : isVertical;
+ this.props.showButtons != undefined ? this.props.showButtons : vertical;
return (
<ul
className={cx(className, "flex", {
- "flex-column": isVertical,
+ "flex-column": vertical,
"text-bold h3": !showButtons,
})}
>
- {options.map(option => (
- <li
- key={optionKeyFn(option)}
- className={cx("flex align-center cursor-pointer mt1 mr2", {
- "text-brand-hover": !showButtons,
- })}
- onClick={e => onChange(optionValueFn(option))}
- >
- <input
- className="Form-radio"
- type="radio"
- name={this._id}
- value={optionValueFn(option)}
- checked={value === optionValueFn(option)}
- id={this._id + "-" + optionKeyFn(option)}
- />
- {showButtons && (
- <label htmlFor={this._id + "-" + optionKeyFn(option)} />
- )}
- <span
- className={cx({ "text-brand": value === optionValueFn(option) })}
+ {options.map(option => {
+ const selected = value === optionValueFn(option);
+
+ return (
+ <li
+ key={optionKeyFn(option)}
+ className={cx(
+ "flex align-center cursor-pointer mr2",
+ { "text-brand-hover": !showButtons },
+ py != undefined ? `py${py}` : underlined ? "py2" : "pt1",
+ )}
+ style={{
+ borderBottom: underlined ? `3px solid transparent` : undefined,
+ borderColor:
+ selected && underlined ? colors["brand"] : "transparent",
+ }}
+ onClick={e => onChange(optionValueFn(option))}
>
- {optionNameFn(option)}
- </span>
- </li>
- ))}
+ <input
+ className="Form-radio"
+ type="radio"
+ name={this._id}
+ value={optionValueFn(option)}
+ checked={selected}
+ id={this._id + "-" + optionKeyFn(option)}
+ />
+ {showButtons && (
+ <label htmlFor={this._id + "-" + optionKeyFn(option)} />
+ )}
+ <span className={cx({ "text-brand": selected })}>
+ {optionNameFn(option)}
+ </span>
+ </li>
+ );
+ })}
</ul>
);
}
diff --git a/frontend/src/metabase/containers/SaveQuestionModal.jsx b/frontend/src/metabase/containers/SaveQuestionModal.jsx
index 950495ea9ebacfe1cfa102a59b5804105a540b2b..aade70fcee6d146a130f14eaec8f8401b789bc17 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal.jsx
+++ b/frontend/src/metabase/containers/SaveQuestionModal.jsx
@@ -177,7 +177,7 @@ export default class SaveQuestionModal extends Component {
},
{ name: t`Save as new question`, value: "create" },
]}
- isVertical
+ vertical
/>
</FormField>
);
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
index 2311f840c63f5b99193da57b4cecf9ab177097f2..42cfb4a172f102dbbf60b243533d324ad9f7f577 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettings.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -6,6 +6,7 @@ import { t } from "c-3po";
import Warnings from "metabase/query_builder/components/Warnings.jsx";
import Button from "metabase/components/Button";
+import Radio from "metabase/components/Radio";
import Visualization from "metabase/visualizations/components/Visualization.jsx";
import { getSettingsWidgets } from "metabase/visualizations/lib/settings";
@@ -138,21 +139,14 @@ class ChartSettings extends Component {
<div className="flex flex-column spread">
{tabNames.length > 1 && (
<div className="border-bottom flex flex-no-shrink pl4">
- {tabNames.map(tabName => (
- <div
- className={cx(
- "h3 py2 mr2 border-bottom cursor-pointer text-brand-hover border-brand-hover",
- {
- "text-brand border-brand": currentTab === tabName,
- "border-transparent": currentTab !== tabName,
- },
- )}
- style={{ borderWidth: 3 }}
- onClick={() => this.handleSelectTab(tabName)}
- >
- {tabName}
- </div>
- ))}
+ <Radio
+ value={currentTab}
+ onChange={this.handleSelectTab}
+ options={tabNames}
+ optionNameFn={v => v}
+ optionValueFn={v => v}
+ underlined
+ />
</div>
)}
<div className="full-height relative">
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
index 57e6a351449705bf5953d354985abaede2b3dfd1..4b0d8c79cb44c5ae649e2ec64dde278ef5326b97 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
@@ -8,7 +8,7 @@ const ChartSettingRadio = ({ value, onChange, options = [], className }) => (
value={value}
onChange={onChange}
options={options}
- isVertical
+ vertical
/>
);
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index b541141eb70567489ec242a342aa6cc0a0f53001..b4107be8bbd15ea23d3bbe16ad1c7e0598af6416 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -305,7 +305,7 @@ const RuleEditor = ({ rule, cols, isNew, onChange, onDone, onRemove }) => (
{ name: t`Color range`, value: "range" },
]}
onChange={type => onChange({ ...DEFAULTS_BY_TYPE[type], ...rule, type })}
- isVertical
+ vertical
/>
{rule.type === "single" ? (
<div>
@@ -355,7 +355,7 @@ const RuleEditor = ({ rule, cols, isNew, onChange, onDone, onRemove }) => (
},
]
).concat([{ name: t`Custom value`, value: "custom" }])}
- isVertical
+ vertical
/>
{rule.min_type === "custom" && (
<NumericInput
@@ -377,7 +377,7 @@ const RuleEditor = ({ rule, cols, isNew, onChange, onDone, onRemove }) => (
},
]
).concat([{ name: t`Custom value`, value: "custom" }])}
- isVertical
+ vertical
/>
{rule.max_type === "custom" && (
<NumericInput
diff --git a/frontend/test/admin/databases/DatabaseEditApp.integ.spec.js b/frontend/test/admin/databases/DatabaseEditApp.integ.spec.js
index c451d0a729551023461e1e7352a96852cd192dd4..9fd0f52ca8ead3b5586de79c8fd626b2eedecfa7 100644
--- a/frontend/test/admin/databases/DatabaseEditApp.integ.spec.js
+++ b/frontend/test/admin/databases/DatabaseEditApp.integ.spec.js
@@ -14,9 +14,7 @@ import {
MIGRATE_TO_NEW_SCHEDULING_SETTINGS,
DEFAULT_SCHEDULES,
} from "metabase/admin/databases/database";
-import DatabaseEditApp, {
- Tab,
-} from "metabase/admin/databases/containers/DatabaseEditApp";
+import DatabaseEditApp from "metabase/admin/databases/containers/DatabaseEditApp";
import DatabaseEditForms from "metabase/admin/databases/components/DatabaseEditForms";
import DatabaseSchedulingForm, {
SyncOption,
@@ -26,6 +24,7 @@ import Toggle from "metabase/components/Toggle";
import { TestModal } from "metabase/components/Modal";
import Select from "metabase/components/Select";
import ColumnarSelector from "metabase/components/ColumnarSelector";
+import Radio from "metabase/components/Radio";
import { click, clickButton } from "__support__/enzyme_utils";
import { MetabaseApi } from "metabase/services";
import _ from "underscore";
@@ -75,14 +74,14 @@ describe("DatabaseEditApp", () => {
click(letUserControlSchedulingField.find(Toggle));
// Connection and Scheduling tabs shouldn't be visible yet
- expect(dbEditApp.find(Tab).length).toBe(0);
+ expect(dbEditApp.find(Radio).find("li").length).toBe(0);
clickButton(editForm.find('button[children="Save"]'));
await store.waitForActions([UPDATE_DATABASE]);
// Tabs should be now visible as user-controlled scheduling is enabled
- expect(dbEditApp.find(Tab).length).toBe(2);
+ expect(dbEditApp.find(Radio).find("li").length).toBe(2);
});
// NOTE Atte Keinänen 8/17/17: See migrateDatabaseToNewSchedulingSettings for more information about migration process
@@ -122,7 +121,7 @@ describe("DatabaseEditApp", () => {
expect(letUserControlSchedulingField.find(Toggle).props().value).toBe(
false,
);
- expect(dbEditApp.find(Tab).length).toBe(0);
+ expect(dbEditApp.find(Radio).find("li").length).toBe(0);
});
it("shows the analysis toggle correctly for non-migrated analysis settings when `is_full_sync` is false", async () => {
@@ -153,7 +152,7 @@ describe("DatabaseEditApp", () => {
expect(letUserControlSchedulingField.find(Toggle).props().value).toBe(
true,
);
- expect(dbEditApp.find(Tab).length).toBe(2);
+ expect(dbEditApp.find(Radio).find("li").length).toBe(2);
});
afterAll(async () => {
@@ -192,7 +191,12 @@ describe("DatabaseEditApp", () => {
const editForm = dbEditApp.find(DatabaseEditForms);
expect(editForm.length).toBe(1);
- click(dbEditApp.find(Tab).last());
+ click(
+ dbEditApp
+ .find(Radio)
+ .find("li")
+ .last(),
+ );
const schedulingForm = dbEditApp.find(DatabaseSchedulingForm);
expect(schedulingForm.length).toBe(1);
@@ -218,7 +222,12 @@ describe("DatabaseEditApp", () => {
const dbEditApp = mount(store.connectContainer(<DatabaseEditApp />));
await store.waitForActions([INITIALIZE_DATABASE]);
- click(dbEditApp.find(Tab).last());
+ click(
+ dbEditApp
+ .find(Radio)
+ .find("li")
+ .last(),
+ );
const schedulingForm = dbEditApp.find(DatabaseSchedulingForm);
const dbSyncSelect = schedulingForm.find(Select).first();
click(dbSyncSelect);
@@ -244,7 +253,12 @@ describe("DatabaseEditApp", () => {
const dbEditApp = mount(store.connectContainer(<DatabaseEditApp />));
await store.waitForActions([INITIALIZE_DATABASE]);
- click(dbEditApp.find(Tab).last());
+ click(
+ dbEditApp
+ .find(Radio)
+ .find("li")
+ .last(),
+ );
const schedulingForm = dbEditApp.find(DatabaseSchedulingForm);
const dbSyncSelect = schedulingForm.find(Select).first();
click(dbSyncSelect);
@@ -266,7 +280,12 @@ describe("DatabaseEditApp", () => {
const dbEditApp = mount(store.connectContainer(<DatabaseEditApp />));
await store.waitForActions([INITIALIZE_DATABASE]);
- click(dbEditApp.find(Tab).last());
+ click(
+ dbEditApp
+ .find(Radio)
+ .find("li")
+ .last(),
+ );
const schedulingForm = dbEditApp.find(DatabaseSchedulingForm);
expect(schedulingForm.length).toBe(1);
diff --git a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
index ebc915037917c734879c958ea50fcfc7d7b2d3cd..9147621ed6bf1f9ef5d452fae16201f77972a497 100644
--- a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
+++ b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
@@ -481,8 +481,14 @@ exports[`Radio should render "default" correctly 1`] = `
className="flex text-bold h3"
>
<li
- className="flex align-center cursor-pointer mt1 mr2 text-brand-hover"
+ className="flex align-center cursor-pointer mr2 text-brand-hover pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={true}
@@ -499,8 +505,14 @@ exports[`Radio should render "default" correctly 1`] = `
</span>
</li>
<li
- className="flex align-center cursor-pointer mt1 mr2 text-brand-hover"
+ className="flex align-center cursor-pointer mr2 text-brand-hover pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={false}
@@ -524,19 +536,25 @@ exports[`Radio should render "show buttons" correctly 1`] = `
className="flex"
>
<li
- className="flex align-center cursor-pointer mt1 mr2"
+ className="flex align-center cursor-pointer mr2 pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={true}
className="Form-radio"
- id="radio-2-0"
- name="radio-2"
+ id="radio-3-0"
+ name="radio-3"
type="radio"
value={0}
/>
<label
- htmlFor="radio-2-0"
+ htmlFor="radio-3-0"
/>
<span
className="text-brand"
@@ -545,19 +563,80 @@ exports[`Radio should render "show buttons" correctly 1`] = `
</span>
</li>
<li
- className="flex align-center cursor-pointer mt1 mr2"
+ className="flex align-center cursor-pointer mr2 pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={false}
className="Form-radio"
- id="radio-2-1"
- name="radio-2"
+ id="radio-3-1"
+ name="radio-3"
type="radio"
value={1}
/>
<label
- htmlFor="radio-2-1"
+ htmlFor="radio-3-1"
+ />
+ <span
+ className=""
+ >
+ Gizmo
+ </span>
+ </li>
+</ul>
+`;
+
+exports[`Radio should render "underlined" correctly 1`] = `
+<ul
+ className="flex text-bold h3"
+>
+ <li
+ className="flex align-center cursor-pointer mr2 text-brand-hover py2"
+ onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": "3px solid transparent",
+ "borderColor": "#509EE3",
+ }
+ }
+ >
+ <input
+ checked={true}
+ className="Form-radio"
+ id="radio-2-0"
+ name="radio-2"
+ type="radio"
+ value={0}
+ />
+ <span
+ className="text-brand"
+ >
+ Gadget
+ </span>
+ </li>
+ <li
+ className="flex align-center cursor-pointer mr2 text-brand-hover py2"
+ onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": "3px solid transparent",
+ "borderColor": "transparent",
+ }
+ }
+ >
+ <input
+ checked={false}
+ className="Form-radio"
+ id="radio-2-1"
+ name="radio-2"
+ type="radio"
+ value={1}
/>
<span
className=""
@@ -573,19 +652,25 @@ exports[`Radio should render "vertical" correctly 1`] = `
className="flex flex-column"
>
<li
- className="flex align-center cursor-pointer mt1 mr2"
+ className="flex align-center cursor-pointer mr2 pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={true}
className="Form-radio"
- id="radio-3-0"
- name="radio-3"
+ id="radio-4-0"
+ name="radio-4"
type="radio"
value={0}
/>
<label
- htmlFor="radio-3-0"
+ htmlFor="radio-4-0"
/>
<span
className="text-brand"
@@ -594,19 +679,25 @@ exports[`Radio should render "vertical" correctly 1`] = `
</span>
</li>
<li
- className="flex align-center cursor-pointer mt1 mr2"
+ className="flex align-center cursor-pointer mr2 pt1"
onClick={[Function]}
+ style={
+ Object {
+ "borderBottom": undefined,
+ "borderColor": "transparent",
+ }
+ }
>
<input
checked={false}
className="Form-radio"
- id="radio-3-1"
- name="radio-3"
+ id="radio-4-1"
+ name="radio-4"
type="radio"
value={1}
/>
<label
- htmlFor="radio-3-1"
+ htmlFor="radio-4-1"
/>
<span
className=""