diff --git a/frontend/src/metabase/admin/settings/components/SettingsCustomMaps.jsx b/frontend/src/metabase/admin/settings/components/SettingsCustomMaps.jsx index c5d86c8cae1131db31d3346fb88e7df6b22fe377..95ece2da2647566d721fdcb2e613d1b6b6e3f03f 100644 --- a/frontend/src/metabase/admin/settings/components/SettingsCustomMaps.jsx +++ b/frontend/src/metabase/admin/settings/components/SettingsCustomMaps.jsx @@ -147,7 +147,7 @@ export default class SettingsCustomMaps extends Component { const ListMaps = ({ maps, onEditMap, onAddMap, onDeleteMap }) => <div> - <section className="PageHeader px2 clearfix"> + <section className="p2 clearfix"> <div className="inline-block"> <h2 className="PageTitle mb1">Custom Maps</h2> <span>Add your own GeoJSON files</span> @@ -212,11 +212,17 @@ const GeoJsonPropertySelect = ({ value, onChange, geoJson }) => { ) } +const SettingContainer = ({ name, description, className="py1", children }) => + <div className={className}> + { name && <div className="text-grey-4 text-bold text-uppercase my1">{name}</div>} + { description && <div className="text-grey-4 my1">{description}</div>} + {children} + </div> + const EditMap = ({ map, onMapChange, originalMap, geoJson, geoJsonLoading, geoJsonError, onLoadGeoJson, onCancel, onSave }) => - <div> + <div className="mx2"> <h2>{ !originalMap ? "Add a new map" : "Edit map" }</h2> - <div className="m2 mb4"> - <div className="text-grey-4 text-bold text-uppercase pb1">Map Name</div> + <SettingContainer description="What do you want to call this map?"> <div className="flex"> <input type="text" @@ -226,9 +232,8 @@ const EditMap = ({ map, onMapChange, originalMap, geoJson, geoJsonLoading, geoJs onChange={(e) => onMapChange({ ...map, "name": e.target.value })} /> </div> - </div> - <div className="m2 mb4"> - <div className="text-grey-4 text-bold text-uppercase pb1">GeoJSON URL</div> + </SettingContainer> + <SettingContainer description="URL for the GeoJSON file you want to use"> <div className="flex"> <input type="text" @@ -239,32 +244,30 @@ const EditMap = ({ map, onMapChange, originalMap, geoJson, geoJsonLoading, geoJs /> <button className={cx("Button ml1", { "Button--primary" : !geoJson })} onClick={onLoadGeoJson}>{geoJson ? "Refresh" : "Load"}</button> </div> - </div> + </SettingContainer> { (geoJson || geoJsonLoading || geoJsonError) && <LoadingAndErrorWrapper loading={geoJsonLoading} error={geoJsonError}> { () => <div> - <div className="m2 mb4"> - <div className="text-grey-4 text-bold text-uppercase pb1">Name Property</div> + <SettingContainer description="Which property specifies the region’s identifier?"> <GeoJsonPropertySelect value={map.region_name} onChange={(value) => onMapChange({ ...map, "region_name": value })} geoJson={geoJson} /> - </div> - <div className="m2 mb4"> - <div className="text-grey-4 text-bold text-uppercase pb1">Region Property</div> + </SettingContainer> + <SettingContainer description="Which property specifies the region’s display name?"> <GeoJsonPropertySelect value={map.region_key} onChange={(value) => onMapChange({ ...map, "region_key": value })} geoJson={geoJson} /> - </div> + </SettingContainer> </div> } </LoadingAndErrorWrapper> } - <div className="m2 mb4"> + <div className="py1"> <button className={cx("Button Button--borderless")} onClick={onCancel}>Cancel</button> <button className={cx("Button Button--primary ml1", { "disabled" : !map.name || !map.url || !map.region_name || !map.region_key })} onClick={onSave}> {originalMap ? "Save map" : "Add map"}