From 5e8ff50d5ed3f0d569ce4e196fcd272d594eabb7 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Fri, 30 Aug 2019 11:29:51 -0700
Subject: [PATCH] Various frontend cleanup (#10450)
* Remove .jsx extension from imports
* Use color() function instead of colors[...]
* Remove depreacted MBQL from frontned
* Remove more deprecated MBQL
* Revert a couple removals of .jsx due to flow conflict with .css files
* Fix reference/utils tests
* Fix color conflict
---
frontend/src/metabase/App.jsx | 2 +-
.../components/CreatedDatabaseModal.jsx | 2 +-
.../components/DatabaseEditForms.jsx | 2 +-
.../components/DatabaseSchedulingForm.jsx | 6 +-
.../components/DeleteDatabaseModal.jsx | 2 +-
.../databases/containers/DatabaseEditApp.jsx | 12 +-
.../databases/containers/DatabaseListApp.jsx | 8 +-
.../components/ObjectActionSelect.jsx | 8 +-
.../components/ObjectRetireModal.jsx | 4 +-
.../components/PartialQueryBuilder.jsx | 12 +-
.../components/UpdateCachedFieldValues.jsx | 2 +-
.../components/database/ColumnItem.jsx | 4 +-
.../components/database/ColumnsList.jsx | 2 +-
.../components/database/MetadataHeader.jsx | 10 +-
.../database/MetadataSchemaList.jsx | 2 +-
.../components/database/MetadataTable.jsx | 8 +-
.../components/database/MetadataTableList.jsx | 2 +-
.../database/MetadataTablePicker.jsx | 4 +-
.../components/database/MetricItem.jsx | 2 +-
.../components/database/MetricsList.jsx | 2 +-
.../components/database/SegmentItem.jsx | 2 +-
.../components/database/SegmentsList.jsx | 2 +-
.../components/revisions/QueryDiff.jsx | 6 +-
.../components/revisions/Revision.jsx | 4 +-
.../components/revisions/RevisionDiff.jsx | 6 +-
.../components/revisions/RevisionHistory.jsx | 6 +-
.../admin/datamodel/containers/FieldApp.jsx | 11 +-
.../containers/MetadataEditorApp.jsx | 10 +-
.../admin/datamodel/containers/MetricApp.jsx | 2 +-
.../admin/datamodel/containers/MetricForm.jsx | 12 +-
.../containers/RevisionHistoryApp.jsx | 2 +-
.../admin/datamodel/containers/SegmentApp.jsx | 2 +-
.../datamodel/containers/SegmentForm.jsx | 12 +-
.../datamodel/containers/TableSettingsApp.jsx | 2 +-
.../admin/people/components/GroupDetail.jsx | 30 ++---
.../admin/people/components/GroupSelect.jsx | 2 +-
.../admin/people/components/GroupsListing.jsx | 24 ++--
.../people/components/UserGroupSelect.jsx | 12 +-
.../people/containers/AdminPeopleApp.jsx | 7 +-
.../people/containers/GroupDetailApp.jsx | 2 +-
.../people/containers/GroupsListingApp.jsx | 2 +-
.../people/containers/PeopleListingApp.jsx | 16 ++-
.../components/PermissionsEditor.jsx | 14 +--
.../components/PermissionsGrid.jsx | 24 ++--
.../containers/CollectionPermissionsModal.jsx | 2 +-
.../containers/CollectionsPermissionsApp.jsx | 4 +-
.../containers/DataPermissionsApp.jsx | 2 +-
.../containers/DatabasesPermissionsApp.jsx | 2 +-
.../permissions/containers/PermissionsApp.jsx | 4 +-
.../containers/SchemasPermissionsApp.jsx | 2 +-
.../containers/TablesPermissionsApp.jsx | 2 +-
.../src/metabase/admin/permissions/routes.jsx | 10 +-
.../metabase/admin/permissions/selectors.js | 14 +--
frontend/src/metabase/admin/routes.jsx | 28 ++---
.../settings/components/SettingsSetting.jsx | 14 +--
.../settings/components/SettingsSetupList.jsx | 12 +-
.../components/SettingsSingleSignOnForm.jsx | 4 +-
.../settings/components/SettingsSlackForm.jsx | 4 +-
.../components/SettingsUpdatesForm.jsx | 2 +-
.../widgets/CustomGeoJSONWidget.jsx | 14 +--
.../components/widgets/SettingInput.jsx | 2 +-
.../components/widgets/SettingPassword.jsx | 2 +-
.../components/widgets/SettingSelect.jsx | 2 +-
.../components/widgets/SettingToggle.jsx | 2 +-
.../settings/containers/SettingsEditorApp.jsx | 18 +--
.../src/metabase/admin/settings/selectors.js | 6 +-
.../admin/tasks/containers/JobInfoApp.jsx | 2 +-
.../tasks/containers/JobTriggersModal.jsx | 2 +-
.../metabase/admin/tasks/containers/Logs.jsx | 18 +--
.../tasks/containers/TroubleshootingApp.jsx | 7 +-
frontend/src/metabase/alert/alert.js | 2 +-
frontend/src/metabase/app-embed.js | 2 +-
frontend/src/metabase/app-main.js | 2 +-
frontend/src/metabase/app-public.js | 2 +-
.../auth/components/GoogleNoAccount.jsx | 6 +-
.../auth/containers/ForgotPasswordApp.jsx | 14 +--
.../src/metabase/auth/containers/LoginApp.jsx | 12 +-
.../auth/containers/PasswordResetApp.jsx | 12 +-
.../src/metabase/components/AccordionList.jsx | 4 +-
.../components/AdminAwareEmptyState.jsx | 2 +-
.../src/metabase/components/AdminHeader.jsx | 2 +-
.../src/metabase/components/AdminLayout.jsx | 2 +-
frontend/src/metabase/components/Alert.jsx | 2 +-
.../src/metabase/components/ArchivedItem.jsx | 6 +-
.../src/metabase/components/Breadcrumbs.jsx | 4 +-
.../src/metabase/components/BrowserCrumbs.jsx | 4 +-
frontend/src/metabase/components/Button.jsx | 2 +-
frontend/src/metabase/components/Card.jsx | 10 +-
.../metabase/components/ChannelSetupModal.jsx | 2 +-
frontend/src/metabase/components/CheckBox.jsx | 4 +-
.../metabase/components/CollectionItem.jsx | 20 ++--
.../metabase/components/CollectionLanding.jsx | 18 ++-
.../metabase/components/CollectionList.jsx | 6 +-
.../metabase/components/ColumnarSelector.jsx | 2 +-
frontend/src/metabase/components/Confirm.jsx | 4 +-
.../metabase/components/ConfirmContent.jsx | 2 +-
.../components/DatabaseDetailsForm.jsx | 8 +-
.../components/DeleteModalWithConfirm.jsx | 4 +-
.../metabase/components/DirectionalButton.jsx | 6 +-
.../metabase/components/DownloadButton.jsx | 10 +-
.../src/metabase/components/EntityItem.jsx | 6 +-
.../src/metabase/components/EntityLayout.js | 8 +-
.../metabase/components/EntityMenuItem.jsx | 10 +-
.../src/metabase/components/EntityPage.jsx | 6 +-
.../src/metabase/components/ExplorePane.jsx | 4 +-
frontend/src/metabase/components/Header.jsx | 8 +-
.../src/metabase/components/HistoryModal.jsx | 4 +-
frontend/src/metabase/components/Icon.jsx | 6 +-
.../src/metabase/components/IconWrapper.jsx | 4 +-
.../metabase/components/ItemTypeFilterBar.jsx | 12 +-
.../src/metabase/components/LabelIcon.jsx | 2 +-
frontend/src/metabase/components/ListItem.jsx | 4 +-
.../components/LoadingAndErrorWrapper.jsx | 2 +-
frontend/src/metabase/components/Modal.jsx | 2 +-
.../src/metabase/components/ModalContent.jsx | 2 +-
.../metabase/components/ModalWithTrigger.jsx | 4 +-
.../metabase/components/NewsletterForm.jsx | 8 +-
.../src/metabase/components/NumericInput.jsx | 2 +-
.../metabase/components/PasswordReveal.jsx | 4 +-
.../components/PopoverWithTrigger.jsx | 4 +-
.../src/metabase/components/ProgressBar.jsx | 6 +-
.../src/metabase/components/QueryButton.jsx | 2 +-
.../components/QuestionSavedModal.jsx | 2 +-
.../src/metabase/components/SaveStatus.jsx | 4 +-
.../metabase/components/SchedulePicker.jsx | 2 +-
frontend/src/metabase/components/Select.jsx | 6 +-
.../src/metabase/components/SelectButton.jsx | 2 +-
.../src/metabase/components/SidebarItem.jsx | 2 +-
.../metabase/components/StackedCheckBox.jsx | 2 +-
.../metabase/components/StepIndicators.jsx | 6 +-
frontend/src/metabase/components/Text.jsx | 4 +-
.../components/TitleAndDescription.jsx | 4 +-
frontend/src/metabase/components/Tooltip.jsx | 2 +-
.../metabase/components/TooltipPopover.jsx | 2 +-
.../src/metabase/components/Triggerable.jsx | 2 +-
.../src/metabase/components/UserAvatar.jsx | 4 +-
.../components/icons/FullscreenIcon.jsx | 2 +-
.../components/icons/NightModeIcon.jsx | 2 +-
.../containers/AddToDashSelectDashModal.jsx | 2 +-
.../src/metabase/containers/ItemPicker.jsx | 4 +-
.../src/metabase/containers/Overworld.jsx | 28 ++---
.../metabase/containers/SaveQuestionModal.jsx | 6 +-
.../src/metabase/containers/UndoListing.jsx | 6 +-
.../containers/UserCollectionList.jsx | 4 +-
.../dashboard/components/AddSeriesModal.jsx | 20 ++--
.../AddToDashSelectQuestionModal.jsx | 2 +-
.../dashboard/components/DashCard.jsx | 10 +-
.../components/DashCardParameterMapper.jsx | 8 +-
.../dashboard/components/Dashboard.jsx | 8 +-
.../dashboard/components/DashboardGrid.jsx | 12 +-
.../components/DashboardMoveModal.jsx | 4 +-
.../dashboard/components/RefreshWidget.jsx | 10 +-
.../dashboard/components/grid/GridLayout.jsx | 10 +-
.../containers/AutomaticDashboardApp.jsx | 10 +-
.../DashCardCardParameterMapper.jsx | 8 +-
.../dashboard/containers/DashboardApp.jsx | 2 +-
frontend/src/metabase/entities/collections.js | 6 +-
frontend/src/metabase/entities/dashboards.js | 4 +-
frontend/src/metabase/entities/metrics.js | 4 +-
frontend/src/metabase/entities/pulses.js | 4 +-
frontend/src/metabase/entities/questions.js | 4 +-
frontend/src/metabase/entities/segments.js | 4 +-
frontend/src/metabase/entities/tables.js | 4 +-
.../src/metabase/home/components/Activity.jsx | 20 ++--
.../metabase/home/components/ActivityItem.jsx | 10 +-
.../home/components/ActivityStory.jsx | 6 +-
.../components/NewUserOnboardingModal.jsx | 6 +-
.../src/metabase/home/components/NextStep.jsx | 2 +-
.../metabase/home/components/RecentViews.jsx | 10 +-
.../home/components/SidebarSection.jsx | 6 +-
.../metabase/home/containers/SearchApp.jsx | 12 +-
frontend/src/metabase/lib/colors.js | 3 +
frontend/src/metabase/lib/dataset.js | 3 -
frontend/src/metabase/lib/formatting.js | 2 +-
frontend/src/metabase/lib/query_time.js | 2 +-
.../components/actions/CountByTimeAction.jsx | 7 +-
frontend/src/metabase/modes/lib/actions.js | 13 +--
.../src/metabase/nav/containers/Navbar.jsx | 17 +--
.../new_query/components/NewQueryOption.jsx | 6 +-
.../components/ParameterValueWidget.jsx | 20 ++--
.../parameters/components/ParameterWidget.jsx | 4 +-
.../parameters/components/Parameters.jsx | 6 +-
.../components/widgets/CategoryWidget.jsx | 2 +-
.../widgets/DateAllOptionsWidget.jsx | 6 +-
.../widgets/DateMonthYearWidget.jsx | 2 +-
.../widgets/DateQuarterYearWidget.jsx | 2 +-
.../components/widgets/DateRangeWidget.jsx | 2 +-
.../components/widgets/DateSingleWidget.jsx | 2 +-
.../components/widgets/YearPicker.jsx | 2 +-
.../widgets/AdvancedSettingsPane.jsx | 4 +-
.../components/widgets/EmbedModalContent.jsx | 4 +-
.../pulse/components/PulseCardPreview.jsx | 12 +-
.../metabase/pulse/components/PulseEdit.jsx | 18 +--
.../pulse/components/PulseEditCards.jsx | 6 +-
.../pulse/components/PulseEditChannels.jsx | 12 +-
.../pulse/components/PulseEditSkip.jsx | 2 +-
.../pulse/containers/PulseEditApp.jsx | 2 +-
.../components/AddClauseButton.jsx | 4 +-
.../components/AggregationPopover.jsx | 14 +--
.../query_builder/components/BreakoutName.jsx | 2 +-
.../components/BreakoutPopover.jsx | 2 +-
.../query_builder/components/Clearable.jsx | 2 +-
.../query_builder/components/DataSelector.jsx | 7 +-
.../components/ExtendedOptions.jsx | 12 +-
.../query_builder/components/FieldName.jsx | 2 +-
.../query_builder/components/FieldWidget.jsx | 6 +-
.../query_builder/components/Filter.jsx | 2 +-
.../query_builder/components/FilterList.jsx | 2 +-
.../components/GuiQueryEditor.jsx | 16 +--
.../components/QueryDefinitionTooltip.jsx | 6 +-
.../components/QueryDownloadWidget.jsx | 8 +-
.../components/SavedQuestionIntroModal.jsx | 2 +-
.../components/SelectionModule.jsx | 6 +-
.../query_builder/components/SortWidget.jsx | 6 +-
.../components/TimeGroupingPopover.jsx | 1 -
.../components/VisualizationResult.jsx | 2 +-
.../components/dataref/DatabasePane.jsx | 2 +-
.../components/dataref/DetailPane.jsx | 4 +-
.../components/dataref/FieldPane.jsx | 6 +-
.../components/dataref/MainPane.jsx | 2 +-
.../components/dataref/MetricPane.jsx | 6 +-
.../components/dataref/QueryDefinition.jsx | 4 +-
.../components/dataref/SegmentPane.jsx | 8 +-
.../components/dataref/TablePane.jsx | 4 +-
.../components/dataref/UseForButton.jsx | 2 +-
.../expressions/ExpressionEditorTextfield.jsx | 4 +-
.../expressions/ExpressionWidget.jsx | 2 +-
.../components/expressions/Expressions.jsx | 6 +-
.../components/expressions/TokenizedInput.jsx | 2 +-
.../components/filters/FilterWidget.jsx | 6 +-
.../components/filters/FilterWidgetList.jsx | 2 +-
.../filters/pickers/HoursMinutesInput.jsx | 2 +-
.../filters/pickers/NumberPicker.jsx | 2 +-
.../filters/pickers/RelativeDatePicker.jsx | 2 +-
.../filters/pickers/SelectPicker.jsx | 4 +-
.../components/notebook/NotebookStep.jsx | 28 ++---
.../components/notebook/steps/SortStep.jsx | 2 +-
.../template_tags/TagEditorHelp.jsx | 2 +-
.../template_tags/TagEditorParam.jsx | 8 +-
.../components/view/QuestionSummaries.jsx | 6 +-
.../components/view/ViewButton.jsx | 4 +-
.../components/view/ViewFooter.jsx | 9 +-
.../components/view/ViewPill.jsx | 4 +-
.../questions/containers/AddToDashboard.jsx | 2 +-
.../reference/components/EditButton.jsx | 2 +-
.../reference/components/EditHeader.jsx | 2 +-
.../components/EditableReferenceHeader.jsx | 14 +--
.../metabase/reference/components/Field.jsx | 4 +-
.../reference/components/FieldToGroupBy.jsx | 2 +-
.../reference/components/FieldTypeDetail.jsx | 2 +-
.../reference/components/FieldsToGroupBy.jsx | 2 +-
.../metabase/reference/components/Formula.jsx | 4 +-
.../components/GuideDetailEditor.jsx | 6 +-
.../reference/components/GuideEditSection.jsx | 2 +-
.../reference/components/GuideHeader.jsx | 2 +-
.../MetricImportantFieldsDetail.jsx | 4 +-
.../reference/components/ReferenceHeader.jsx | 10 +-
.../components/RevisionMessageModal.jsx | 4 +-
.../reference/components/UsefulQuestions.jsx | 2 +-
.../reference/databases/DatabaseDetail.jsx | 10 +-
.../databases/DatabaseDetailContainer.jsx | 6 +-
.../reference/databases/DatabaseList.jsx | 8 +-
.../databases/DatabaseListContainer.jsx | 6 +-
.../reference/databases/DatabaseSidebar.jsx | 4 +-
.../reference/databases/FieldDetail.jsx | 14 +--
.../databases/FieldDetailContainer.jsx | 6 +-
.../reference/databases/FieldList.jsx | 12 +-
.../databases/FieldListContainer.jsx | 6 +-
.../reference/databases/TableDetail.jsx | 12 +-
.../databases/TableDetailContainer.jsx | 6 +-
.../reference/databases/TableList.jsx | 10 +-
.../databases/TableListContainer.jsx | 6 +-
.../reference/databases/TableQuestions.jsx | 10 +-
.../databases/TableQuestionsContainer.jsx | 6 +-
.../metabase/reference/guide/BaseSidebar.jsx | 4 +-
.../reference/guide/GettingStartedGuide.jsx | 6 +-
.../guide/GettingStartedGuideContainer.jsx | 4 +-
.../guide/GettingStartedGuideEditForm.jsx | 12 +-
.../reference/metrics/MetricDetail.jsx | 16 +--
.../metrics/MetricDetailContainer.jsx | 6 +-
.../metabase/reference/metrics/MetricList.jsx | 10 +-
.../reference/metrics/MetricListContainer.jsx | 6 +-
.../reference/metrics/MetricQuestions.jsx | 10 +-
.../metrics/MetricQuestionsContainer.jsx | 6 +-
.../reference/metrics/MetricRevisions.jsx | 8 +-
.../metrics/MetricRevisionsContainer.jsx | 6 +-
.../reference/segments/SegmentDetail.jsx | 14 +--
.../segments/SegmentDetailContainer.jsx | 6 +-
.../reference/segments/SegmentFieldDetail.jsx | 14 +--
.../segments/SegmentFieldDetailContainer.jsx | 6 +-
.../reference/segments/SegmentFieldList.jsx | 12 +-
.../segments/SegmentFieldListContainer.jsx | 6 +-
.../segments/SegmentFieldSidebar.jsx | 4 +-
.../reference/segments/SegmentList.jsx | 10 +-
.../segments/SegmentListContainer.jsx | 6 +-
.../reference/segments/SegmentQuestions.jsx | 10 +-
.../segments/SegmentQuestionsContainer.jsx | 6 +-
.../reference/segments/SegmentRevisions.jsx | 8 +-
.../segments/SegmentRevisionsContainer.jsx | 6 +-
frontend/src/metabase/reference/utils.js | 6 +-
frontend/src/metabase/routes-embed.jsx | 6 +-
frontend/src/metabase/routes-public.jsx | 6 +-
frontend/src/metabase/routes.jsx | 68 ++++++------
.../setup/components/CollapsedStep.jsx | 2 +-
.../components/DatabaseConnectionStep.jsx | 8 +-
.../components/DatabaseSchedulingStep.jsx | 4 +-
.../setup/components/PreferencesStep.jsx | 6 +-
.../src/metabase/setup/components/Setup.jsx | 10 +-
.../metabase/setup/components/StepTitle.jsx | 2 +-
.../metabase/setup/components/UserStep.jsx | 10 +-
.../metabase/setup/containers/SetupApp.jsx | 2 +-
.../user/components/SetUserPassword.jsx | 6 +-
.../user/containers/UserSettingsApp.jsx | 2 +-
.../components/CardRenderer.jsx | 2 +-
.../components/ChartSettings.jsx | 4 +-
.../components/ChartTooltip.jsx | 2 +-
.../components/ChartWithLegend.jsx | 6 +-
.../components/ChoroplethMap.jsx | 8 +-
.../visualizations/components/FunnelBar.jsx | 2 +-
.../components/FunnelNormal.jsx | 2 +-
.../components/LeafletChoropleth.jsx | 6 +-
.../components/LeafletGridHeatMap.jsx | 10 +-
.../components/LeafletHeatMap.jsx | 2 +-
.../components/LeafletMarkerPinMap.jsx | 2 +-
.../components/LeafletTilePinMap.jsx | 2 +-
.../components/LegendHorizontal.jsx | 2 +-
.../visualizations/components/LegendItem.jsx | 6 +-
.../components/LegendVertical.jsx | 4 +-
.../components/LineAreaBarChart.jsx | 6 +-
.../visualizations/components/MiniBar.jsx | 4 +-
.../components/TableInteractive.jsx | 6 +-
.../visualizations/components/TableSimple.jsx | 6 +-
.../components/TitleLegendHeader.jsx | 2 +-
.../components/Visualization.jsx | 14 +--
.../settings/ChartSettingColorsPicker.jsx | 2 +-
.../settings/ChartSettingFieldPicker.jsx | 2 +-
.../settings/ChartSettingFieldsPicker.jsx | 2 +-
.../settings/ChartSettingGaugeSegments.jsx | 10 +-
.../settings/ChartSettingInputGroup.jsx | 2 +-
.../components/settings/ChartSettingRadio.jsx | 2 +-
.../settings/ChartSettingSelect.jsx | 2 +-
.../settings/ChartSettingToggle.jsx | 2 +-
.../settings/ChartSettingsTableFormatting.jsx | 10 +-
frontend/src/metabase/visualizations/index.js | 32 +++---
.../lib/LineAreaBarPostRender.js | 4 +-
.../metabase/visualizations/lib/settings.js | 22 ++--
.../visualizations/visualizations/Gauge.jsx | 18 +--
.../visualizations/visualizations/Map.jsx | 4 +-
.../visualizations/ObjectDetail.jsx | 8 +-
.../visualizations/PieChart.jsx | 10 +-
.../visualizations/Progress.jsx | 8 +-
.../visualizations/SmartScalar.jsx | 23 ++--
.../visualizations/visualizations/Table.jsx | 6 +-
.../visualizations/visualizations/Text.jsx | 2 +-
frontend/test/__support__/mocks.js | 2 +-
.../metabase-lib/lib/Dimension.unit.spec.js | 28 +++--
.../StructuredQuery-nesting.unit.spec.js | 2 +-
.../containers/PeopleListingApp.integ.spec.js | 2 +-
.../SettingsAuthenticationOptions.e2e.spec.js | 4 +-
.../metabase/dashboard/DashCard.unit.spec.js | 2 +-
.../metabase/dashboard/dashboard.e2e.spec.js | 2 +-
.../test/metabase/lib/dataset.unit.spec.js | 4 +-
.../test/metabase/lib/formatting.unit.spec.js | 2 +-
frontend/test/metabase/lib/query.unit.spec.js | 103 ++++++++----------
.../metabase/lib/query/query.unit.spec.js | 29 +++--
.../test/metabase/lib/query_time.unit.spec.js | 24 ++--
frontend/test/metabase/meta/Card.unit.spec.js | 12 +-
.../actions/CountByTimeAction.unit.spec.js | 7 +-
.../drill/UnderlyingRecordsDrill.unit.spec.js | 15 +--
.../components/drill/ZoomDrill.unit.spec.js | 15 +--
.../metabase/modes/lib/actions.unit.spec.js | 2 +-
.../test/metabase/public/public.e2e.spec.js | 4 +-
.../components/FieldName.unit.spec.js | 7 +-
.../metabase/reference/databases.e2e.spec.js | 10 +-
.../test/metabase/reference/guide.e2e.spec.js | 4 +-
.../metabase/reference/segments.e2e.spec.js | 2 +-
.../metabase/reference/utils.unit.spec.js | 16 +--
.../components/LegendVertical.unit.spec.js | 2 +-
.../components/LineAreaBarChart.unit.spec.js | 2 +-
.../components/Visualization.unit.spec.js | 30 ++---
.../visualizations/lib/utils.unit.spec.js | 5 +-
381 files changed, 1289 insertions(+), 1318 deletions(-)
diff --git a/frontend/src/metabase/App.jsx b/frontend/src/metabase/App.jsx
index 32d4d78077e..527e4e7ee1e 100644
--- a/frontend/src/metabase/App.jsx
+++ b/frontend/src/metabase/App.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import ScrollToTop from "metabase/hoc/ScrollToTop";
-import Navbar from "metabase/nav/containers/Navbar.jsx";
+import Navbar from "metabase/nav/containers/Navbar";
import UndoListing from "metabase/containers/UndoListing";
diff --git a/frontend/src/metabase/admin/databases/components/CreatedDatabaseModal.jsx b/frontend/src/metabase/admin/databases/components/CreatedDatabaseModal.jsx
index 56663669856..d1f683e8d02 100644
--- a/frontend/src/metabase/admin/databases/components/CreatedDatabaseModal.jsx
+++ b/frontend/src/metabase/admin/databases/components/CreatedDatabaseModal.jsx
@@ -6,7 +6,7 @@ import { t } from "ttag";
import MetabaseSettings from "metabase/lib/settings";
import Button from "metabase/components/Button";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
type Props = {
databaseId: number,
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseEditForms.jsx b/frontend/src/metabase/admin/databases/components/DatabaseEditForms.jsx
index 8cbf4a565bc..04c5001cf2a 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseEditForms.jsx
+++ b/frontend/src/metabase/admin/databases/components/DatabaseEditForms.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
-import DatabaseDetailsForm from "metabase/components/DatabaseDetailsForm.jsx";
+import DatabaseDetailsForm from "metabase/components/DatabaseDetailsForm";
import { t } from "ttag";
export default class DatabaseEditForms extends Component {
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseSchedulingForm.jsx b/frontend/src/metabase/admin/databases/components/DatabaseSchedulingForm.jsx
index 6be60668a1b..af9654bae0a 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseSchedulingForm.jsx
+++ b/frontend/src/metabase/admin/databases/components/DatabaseSchedulingForm.jsx
@@ -9,7 +9,7 @@ import SchedulePicker from "metabase/components/SchedulePicker";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import MetabaseAnalytics from "metabase/lib/analytics";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export const SyncOption = ({ selected, name, children, select }) => (
<div
@@ -22,7 +22,7 @@ export const SyncOption = ({ selected, name, children, select }) => (
width: 18,
height: 18,
borderWidth: 2,
- borderColor: selected ? colors["brand"] : colors["text-light"],
+ borderColor: selected ? color("brand") : color("text-light"),
borderStyle: "solid",
}}
>
@@ -32,7 +32,7 @@ export const SyncOption = ({ selected, name, children, select }) => (
style={{
width: 8,
height: 8,
- backgroundColor: selected ? colors["brand"] : colors["text-light"],
+ backgroundColor: selected ? color("brand") : color("text-light"),
}}
/>
)}
diff --git a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
index d0e72281b83..471f31402ac 100644
--- a/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
+++ b/frontend/src/metabase/admin/databases/components/DeleteDatabaseModal.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { t } from "ttag";
import Button from "metabase/components/Button";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
export default class DeleteDatabaseModal extends Component {
constructor(props, context) {
diff --git a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
index f047ef7a2bd..ed65466c735 100644
--- a/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
+++ b/frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx
@@ -7,13 +7,13 @@ import title from "metabase/hoc/Title";
import { t } from "ttag";
import MetabaseSettings from "metabase/lib/settings";
-import DeleteDatabaseModal from "../components/DeleteDatabaseModal.jsx";
-import DatabaseEditForms from "../components/DatabaseEditForms.jsx";
+import DeleteDatabaseModal from "../components/DeleteDatabaseModal";
+import DatabaseEditForms from "../components/DatabaseEditForms";
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 ActionButton from "metabase/components/ActionButton";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import Radio from "metabase/components/Radio";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
import {
getEditingDatabase,
diff --git a/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx b/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
index 372956fa7c6..3d255df31a3 100644
--- a/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
+++ b/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
@@ -9,12 +9,12 @@ import { t } from "ttag";
import cx from "classnames";
import MetabaseSettings from "metabase/lib/settings";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
import FormMessage from "metabase/components/form/FormMessage";
-import CreatedDatabaseModal from "../components/CreatedDatabaseModal.jsx";
-import DeleteDatabaseModal from "../components/DeleteDatabaseModal.jsx";
+import CreatedDatabaseModal from "../components/CreatedDatabaseModal";
+import DeleteDatabaseModal from "../components/DeleteDatabaseModal";
import Database from "metabase/entities/databases";
diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx b/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
index 03d3eb83d13..96d54afea25 100644
--- a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
@@ -2,11 +2,11 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
-import Icon from "metabase/components/Icon.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
+import Icon from "metabase/components/Icon";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
import { t } from "ttag";
-import ObjectRetireModal from "./ObjectRetireModal.jsx";
+import ObjectRetireModal from "./ObjectRetireModal";
import { capitalize } from "metabase/lib/formatting";
diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx b/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
index 63e929c66fd..bee4564245c 100644
--- a/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
-import ActionButton from "metabase/components/ActionButton.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ActionButton from "metabase/components/ActionButton";
+import ModalContent from "metabase/components/ModalContent";
import { t } from "ttag";
import cx from "classnames";
diff --git a/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx b/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx
index 09367576675..cbd99ae08d8 100644
--- a/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/PartialQueryBuilder.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import GuiQueryEditor from "metabase/query_builder/components/GuiQueryEditor.jsx";
+import GuiQueryEditor from "metabase/query_builder/components/GuiQueryEditor";
import { t } from "ttag";
import * as Urls from "metabase/lib/urls";
@@ -57,15 +57,7 @@ export default class PartialQueryBuilder extends Component {
}).query();
const previewCard = {
- dataset_query: {
- ...datasetQuery,
- query: {
- aggregation: ["rows"],
- breakout: [],
- filter: [],
- ...datasetQuery.query,
- },
- },
+ dataset_query: datasetQuery,
};
const previewUrl = Urls.question(null, previewCard);
diff --git a/frontend/src/metabase/admin/datamodel/components/UpdateCachedFieldValues.jsx b/frontend/src/metabase/admin/datamodel/components/UpdateCachedFieldValues.jsx
index 272ed82f91b..3c624998553 100644
--- a/frontend/src/metabase/admin/datamodel/components/UpdateCachedFieldValues.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/UpdateCachedFieldValues.jsx
@@ -2,7 +2,7 @@ import React from "react";
import { t } from "ttag";
-import ActionButton from "metabase/components/ActionButton.jsx";
+import ActionButton from "metabase/components/ActionButton";
export default class UpdateCachedFieldValues extends React.Component {
render() {
diff --git a/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx b/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
index 9dd28f2a1d3..2c3438adf54 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx
@@ -2,8 +2,8 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link, withRouter } from "react-router";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
-import Select, { Option } from "metabase/components/Select.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
+import Select, { Option } from "metabase/components/Select";
import Icon from "metabase/components/Icon";
import { t } from "ttag";
import * as MetabaseCore from "metabase/lib/core";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
index 62763d4a27e..4c10806f7ec 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import ColumnItem from "./ColumnItem.jsx";
+import ColumnItem from "./ColumnItem";
export default class ColumnsList extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
index 2f39d34d19e..12d58b0a88f 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
@@ -2,11 +2,11 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link, withRouter } from "react-router";
import { t } from "ttag";
-import SaveStatus from "metabase/components/SaveStatus.jsx";
-import Toggle from "metabase/components/Toggle.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import ColumnarSelector from "metabase/components/ColumnarSelector.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import SaveStatus from "metabase/components/SaveStatus";
+import Toggle from "metabase/components/Toggle";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import ColumnarSelector from "metabase/components/ColumnarSelector";
+import Icon from "metabase/components/Icon";
import Databases from "metabase/entities/databases";
@withRouter
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataSchemaList.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataSchemaList.jsx
index 3b64300ac9a..8cc488974a8 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataSchemaList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataSchemaList.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import { t, ngettext, msgid } from "ttag";
import _ from "underscore";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
index eb175bd54da..727f90e5e95 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
@@ -1,11 +1,11 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import MetricsList from "./MetricsList.jsx";
-import ColumnsList from "./ColumnsList.jsx";
-import SegmentsList from "./SegmentsList.jsx";
+import MetricsList from "./MetricsList";
+import ColumnsList from "./ColumnsList";
+import SegmentsList from "./SegmentsList";
import { t } from "ttag";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
import Databases from "metabase/entities/databases";
import Tables from "metabase/entities/tables";
import withTableMetadataLoaded from "metabase/admin/datamodel/withTableMetadataLoaded";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx
index 9567e13e5ec..0b4111f3879 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import { t, ngettext, msgid } from "ttag";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataTablePicker.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataTablePicker.jsx
index 8ad5296c73e..05be829c1d0 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataTablePicker.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataTablePicker.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import MetadataTableList from "./MetadataTableList.jsx";
-import MetadataSchemaList from "./MetadataSchemaList.jsx";
+import MetadataTableList from "./MetadataTableList";
+import MetadataSchemaList from "./MetadataSchemaList";
import Tables from "metabase/entities/tables";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetricItem.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetricItem.jsx
index 9bafb2ba22b..493d2d994ff 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetricItem.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetricItem.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import ObjectActionSelect from "../ObjectActionSelect.jsx";
+import ObjectActionSelect from "../ObjectActionSelect";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
index caa1dc1e378..5130d5b2ec9 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { t } from "ttag";
-import MetricItem from "./MetricItem.jsx";
+import MetricItem from "./MetricItem";
export default class MetricsList extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/admin/datamodel/components/database/SegmentItem.jsx b/frontend/src/metabase/admin/datamodel/components/database/SegmentItem.jsx
index 6b4832445bf..3fbf1c6ab4e 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/SegmentItem.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/SegmentItem.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import ObjectActionSelect from "../ObjectActionSelect.jsx";
+import ObjectActionSelect from "../ObjectActionSelect";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
index eb7b24adb3b..40c2eb74bcb 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { t } from "ttag";
-import SegmentItem from "./SegmentItem.jsx";
+import SegmentItem from "./SegmentItem";
export default class SegmentsList extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/QueryDiff.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/QueryDiff.jsx
index 11dd6bd6df3..3bf2eef36d9 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/QueryDiff.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/QueryDiff.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import FilterList from "metabase/query_builder/components/FilterList.jsx";
-import AggregationWidget from "metabase/query_builder/components/AggregationWidget.jsx";
+import FilterList from "metabase/query_builder/components/FilterList";
+import AggregationWidget from "metabase/query_builder/components/AggregationWidget";
import * as Query from "metabase/lib/query/query";
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
index 20aa1f7e567..d0698fd9344 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import RevisionDiff from "./RevisionDiff.jsx";
+import RevisionDiff from "./RevisionDiff";
import { t } from "ttag";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
+import UserAvatar from "metabase/components/UserAvatar";
import moment from "moment";
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.jsx
index 0574a0a9325..4e2b03cf07b 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionDiff.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import TextDiff from "./TextDiff.jsx";
-import QueryDiff from "./QueryDiff.jsx";
+import TextDiff from "./TextDiff";
+import QueryDiff from "./QueryDiff";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
export default class RevisionDiff extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx
index 457bbe71962..59f3ea01465 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/RevisionHistory.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Revision from "./Revision.jsx";
+import Revision from "./Revision";
import { t } from "ttag";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import Tables from "metabase/entities/tables";
import { assignUserColors } from "metabase/lib/formatting";
diff --git a/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx b/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
index eb0c7f8b91d..66d559604b1 100644
--- a/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
@@ -22,11 +22,8 @@ import SaveStatus from "metabase/components/SaveStatus";
import Breadcrumbs from "metabase/components/Breadcrumbs";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import AdminLayout from "metabase/components/AdminLayout.jsx";
-import {
- LeftNavPane,
- LeftNavPaneItem,
-} from "metabase/components/LeftNavPane.jsx";
+import AdminLayout from "metabase/components/AdminLayout";
+import { LeftNavPane, LeftNavPaneItem } from "metabase/components/LeftNavPane";
import Section, { SectionHeader } from "../components/Section";
import SelectSeparator from "../components/SelectSeparator";
@@ -47,7 +44,7 @@ import { rescanFieldValues, discardFieldValues } from "../field";
// LIB
import Metadata from "metabase-lib/lib/metadata/Metadata";
import { has_field_values_options } from "metabase/lib/core";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { getGlobalSettingsForColumn } from "metabase/visualizations/lib/settings/column";
import { isCurrency } from "metabase/lib/schema_metadata";
@@ -392,7 +389,7 @@ export const BackButton = ({
<Link
to={`/admin/datamodel/database/${databaseId}/table/${tableId}`}
className="circle text-white p2 flex align-center justify-center inline"
- style={{ backgroundColor: colors["bg-dark"] }}
+ style={{ backgroundColor: color("bg-dark") }}
>
<Icon name="arrow_back" />
</Link>
diff --git a/frontend/src/metabase/admin/datamodel/containers/MetadataEditorApp.jsx b/frontend/src/metabase/admin/datamodel/containers/MetadataEditorApp.jsx
index 6599ed65e4e..4cf2b35b856 100644
--- a/frontend/src/metabase/admin/datamodel/containers/MetadataEditorApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/MetadataEditorApp.jsx
@@ -6,11 +6,11 @@ import { push } from "react-router-redux";
import { t } from "ttag";
import MetabaseAnalytics from "metabase/lib/analytics";
-import AdminEmptyText from "metabase/components/AdminEmptyText.jsx";
-import MetadataHeader from "../components/database/MetadataHeader.jsx";
-import MetadataTablePicker from "../components/database/MetadataTablePicker.jsx";
-import MetadataTable from "../components/database/MetadataTable.jsx";
-import MetadataSchema from "../components/database/MetadataSchema.jsx";
+import AdminEmptyText from "metabase/components/AdminEmptyText";
+import MetadataHeader from "../components/database/MetadataHeader";
+import MetadataTablePicker from "../components/database/MetadataTablePicker";
+import MetadataTable from "../components/database/MetadataTable";
+import MetadataSchema from "../components/database/MetadataSchema";
import {
metrics as Metrics,
segments as Segments,
diff --git a/frontend/src/metabase/admin/datamodel/containers/MetricApp.jsx b/frontend/src/metabase/admin/datamodel/containers/MetricApp.jsx
index 676f98d985d..ae887c13d7b 100644
--- a/frontend/src/metabase/admin/datamodel/containers/MetricApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/MetricApp.jsx
@@ -10,7 +10,7 @@ import Tables from "metabase/entities/tables";
import { updatePreviewSummary } from "../datamodel";
import { getPreviewSummary } from "../selectors";
import withTableMetadataLoaded from "../withTableMetadataLoaded";
-import MetricForm from "./MetricForm.jsx";
+import MetricForm from "./MetricForm";
const mapDispatchToProps = {
updatePreviewSummary,
diff --git a/frontend/src/metabase/admin/datamodel/containers/MetricForm.jsx b/frontend/src/metabase/admin/datamodel/containers/MetricForm.jsx
index 0c146be8714..7705071da85 100644
--- a/frontend/src/metabase/admin/datamodel/containers/MetricForm.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/MetricForm.jsx
@@ -1,11 +1,11 @@
import React, { Component } from "react";
import { Link } from "react-router";
-import FormLabel from "../components/FormLabel.jsx";
-import FormInput from "../components/FormInput.jsx";
-import FormTextArea from "../components/FormTextArea.jsx";
-import FieldSet from "metabase/components/FieldSet.jsx";
-import PartialQueryBuilder from "../components/PartialQueryBuilder.jsx";
+import FormLabel from "../components/FormLabel";
+import FormInput from "../components/FormInput";
+import FormTextArea from "../components/FormTextArea";
+import FieldSet from "metabase/components/FieldSet";
+import PartialQueryBuilder from "../components/PartialQueryBuilder";
import { t } from "ttag";
import { formatValue } from "metabase/lib/formatting";
@@ -57,7 +57,7 @@ export default class MetricForm extends Component {
this.props.updatePreviewSummary({
...datasetQuery,
query: {
- aggregation: ["count"],
+ aggregation: [["count"]],
...datasetQuery.query,
},
});
diff --git a/frontend/src/metabase/admin/datamodel/containers/RevisionHistoryApp.jsx b/frontend/src/metabase/admin/datamodel/containers/RevisionHistoryApp.jsx
index 9fbe93a3bef..313d76887bf 100644
--- a/frontend/src/metabase/admin/datamodel/containers/RevisionHistoryApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/RevisionHistoryApp.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
-import RevisionHistory from "../components/revisions/RevisionHistory.jsx";
+import RevisionHistory from "../components/revisions/RevisionHistory";
import Metrics from "metabase/entities/metrics";
import Segments from "metabase/entities/segments";
diff --git a/frontend/src/metabase/admin/datamodel/containers/SegmentApp.jsx b/frontend/src/metabase/admin/datamodel/containers/SegmentApp.jsx
index ec0c94d8d25..07fc554995b 100644
--- a/frontend/src/metabase/admin/datamodel/containers/SegmentApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/SegmentApp.jsx
@@ -4,7 +4,7 @@ import { push } from "react-router-redux";
import MetabaseAnalytics from "metabase/lib/analytics";
-import SegmentForm from "./SegmentForm.jsx";
+import SegmentForm from "./SegmentForm";
import { updatePreviewSummary } from "../datamodel";
import { getPreviewSummary } from "../selectors";
diff --git a/frontend/src/metabase/admin/datamodel/containers/SegmentForm.jsx b/frontend/src/metabase/admin/datamodel/containers/SegmentForm.jsx
index 8c1dfe72e42..ea6b470d130 100644
--- a/frontend/src/metabase/admin/datamodel/containers/SegmentForm.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/SegmentForm.jsx
@@ -1,11 +1,11 @@
import React, { Component } from "react";
import { Link } from "react-router";
-import FormLabel from "../components/FormLabel.jsx";
-import FormInput from "../components/FormInput.jsx";
-import FormTextArea from "../components/FormTextArea.jsx";
-import FieldSet from "metabase/components/FieldSet.jsx";
-import PartialQueryBuilder from "../components/PartialQueryBuilder.jsx";
+import FormLabel from "../components/FormLabel";
+import FormInput from "../components/FormInput";
+import FormTextArea from "../components/FormTextArea";
+import FieldSet from "metabase/components/FieldSet";
+import PartialQueryBuilder from "../components/PartialQueryBuilder";
import { t } from "ttag";
import { formatValue } from "metabase/lib/formatting";
@@ -64,7 +64,7 @@ export default class SegmentForm extends Component {
...datasetQuery,
query: {
...datasetQuery.query,
- aggregation: ["count"],
+ aggregation: [["count"]],
},
});
}
diff --git a/frontend/src/metabase/admin/datamodel/containers/TableSettingsApp.jsx b/frontend/src/metabase/admin/datamodel/containers/TableSettingsApp.jsx
index 24c6c3e6246..34a65c92438 100644
--- a/frontend/src/metabase/admin/datamodel/containers/TableSettingsApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/TableSettingsApp.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { t } from "ttag";
import Breadcrumbs from "metabase/components/Breadcrumbs";
import { BackButton } from "metabase/admin/datamodel/containers/FieldApp";
-import ActionButton from "metabase/components/ActionButton.jsx";
+import ActionButton from "metabase/components/ActionButton";
import Section, { SectionHeader } from "../components/Section";
import Databases from "metabase/entities/databases";
diff --git a/frontend/src/metabase/admin/people/components/GroupDetail.jsx b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
index cb2f5d4b0b9..033b586a7ff 100644
--- a/frontend/src/metabase/admin/people/components/GroupDetail.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
@@ -10,22 +10,22 @@ import {
getGroupNameLocalized,
} from "metabase/lib/groups";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { PermissionsApi } from "metabase/services";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
-import Popover from "metabase/components/Popover.jsx";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
-import AdminEmptyText from "metabase/components/AdminEmptyText.jsx";
-import Alert from "metabase/components/Alert.jsx";
+import Icon from "metabase/components/Icon";
+import Popover from "metabase/components/Popover";
+import UserAvatar from "metabase/components/UserAvatar";
+import AdminEmptyText from "metabase/components/AdminEmptyText";
+import Alert from "metabase/components/Alert";
-import AdminContentTable from "metabase/components/AdminContentTable.jsx";
-import AdminPaneLayout from "metabase/components/AdminPaneLayout.jsx";
+import AdminContentTable from "metabase/components/AdminContentTable";
+import AdminPaneLayout from "metabase/components/AdminPaneLayout";
-import Typeahead from "metabase/hoc/Typeahead.jsx";
+import Typeahead from "metabase/hoc/Typeahead";
-import AddRow from "./AddRow.jsx";
+import AddRow from "./AddRow";
const GroupDescription = ({ group }) =>
isDefaultGroup(group) ? (
@@ -71,11 +71,11 @@ const AddMemberAutocompleteSuggestion = ({
);
const COLORS = [
- colors["brand"],
- colors["accent1"],
- colors["accent2"],
- colors["accent3"],
- colors["accent4"],
+ color("brand"),
+ color("accent1"),
+ color("accent2"),
+ color("accent3"),
+ color("accent4"),
];
const AddMemberTypeahead = Typeahead({
diff --git a/frontend/src/metabase/admin/people/components/GroupSelect.jsx b/frontend/src/metabase/admin/people/components/GroupSelect.jsx
index 34b3eb36f2b..5ab714823a3 100644
--- a/frontend/src/metabase/admin/people/components/GroupSelect.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupSelect.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import CheckBox from "metabase/components/CheckBox.jsx";
+import CheckBox from "metabase/components/CheckBox";
import {
isDefaultGroup,
diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.jsx b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
index 980a1351200..a94a1a2e2ea 100644
--- a/frontend/src/metabase/admin/people/components/GroupsListing.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
@@ -13,18 +13,18 @@ import {
import { KEYCODE_ENTER } from "metabase/lib/keyboard";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
-import Alert from "metabase/components/Alert.jsx";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
-
-import AdminContentTable from "metabase/components/AdminContentTable.jsx";
-import AdminPaneLayout from "metabase/components/AdminPaneLayout.jsx";
-
-import AddRow from "./AddRow.jsx";
+import Icon from "metabase/components/Icon";
+import InputBlurChange from "metabase/components/InputBlurChange";
+import ModalContent from "metabase/components/ModalContent";
+import Alert from "metabase/components/Alert";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import UserAvatar from "metabase/components/UserAvatar";
+
+import AdminContentTable from "metabase/components/AdminContentTable";
+import AdminPaneLayout from "metabase/components/AdminPaneLayout";
+
+import AddRow from "./AddRow";
// ------------------------------------------------------------ Add Group ------------------------------------------------------------
diff --git a/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx b/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
index 67cc0dbbf28..537a1a229f5 100644
--- a/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
+++ b/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
@@ -3,13 +3,13 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import CheckBox from "metabase/components/CheckBox.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import Icon from "metabase/components/Icon";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import CheckBox from "metabase/components/CheckBox";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
-import GroupSelect from "./GroupSelect.jsx";
-import GroupSummary from "./GroupSummary.jsx";
+import GroupSelect from "./GroupSelect";
+import GroupSummary from "./GroupSummary";
const GroupOption = ({ name, color, selected, disabled, onChange }) => (
<div
diff --git a/frontend/src/metabase/admin/people/containers/AdminPeopleApp.jsx b/frontend/src/metabase/admin/people/containers/AdminPeopleApp.jsx
index 463f62c8390..cd3b9efbb2a 100644
--- a/frontend/src/metabase/admin/people/containers/AdminPeopleApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/AdminPeopleApp.jsx
@@ -3,12 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import {
- LeftNavPane,
- LeftNavPaneItem,
-} from "metabase/components/LeftNavPane.jsx";
+import { LeftNavPane, LeftNavPaneItem } from "metabase/components/LeftNavPane";
-import AdminLayout from "metabase/components/AdminLayout.jsx";
+import AdminLayout from "metabase/components/AdminLayout";
export default class AdminPeopleApp extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/admin/people/containers/GroupDetailApp.jsx b/frontend/src/metabase/admin/people/containers/GroupDetailApp.jsx
index d716d6a9f60..95c244b9787 100644
--- a/frontend/src/metabase/admin/people/containers/GroupDetailApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/GroupDetailApp.jsx
@@ -6,7 +6,7 @@ import Group from "metabase/entities/groups";
import { getUsersWithMemberships } from "../selectors";
import { getUser } from "metabase/selectors/user";
-import GroupDetail from "../components/GroupDetail.jsx";
+import GroupDetail from "../components/GroupDetail";
@User.loadList()
@Group.load({ id: (state, props) => props.params.groupId })
diff --git a/frontend/src/metabase/admin/people/containers/GroupsListingApp.jsx b/frontend/src/metabase/admin/people/containers/GroupsListingApp.jsx
index 048d8588013..925c5e0abdc 100644
--- a/frontend/src/metabase/admin/people/containers/GroupsListingApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/GroupsListingApp.jsx
@@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux";
import Group from "metabase/entities/groups";
-import GroupsListing from "../components/GroupsListing.jsx";
+import GroupsListing from "../components/GroupsListing";
import { getGroupsWithoutMetabot } from "../selectors";
@Group.loadList()
diff --git a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
index 95d91db640e..a77ac3272ba 100644
--- a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
@@ -7,19 +7,19 @@ import { t } from "ttag";
import _ from "underscore";
import moment from "moment";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import * as Urls from "metabase/lib/urls";
-import AdminPaneLayout from "metabase/components/AdminPaneLayout.jsx";
+import AdminPaneLayout from "metabase/components/AdminPaneLayout";
import EntityMenu from "metabase/components/EntityMenu";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
import Radio from "metabase/components/Radio";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
+import Tooltip from "metabase/components/Tooltip";
+import UserAvatar from "metabase/components/UserAvatar";
-import UserGroupSelect from "../components/UserGroupSelect.jsx";
+import UserGroupSelect from "../components/UserGroupSelect";
import { loadMemberships, createMembership, deleteMembership } from "../people";
import {
@@ -142,9 +142,7 @@ export default class PeopleListingApp extends Component {
<span className="text-white inline-block">
<UserAvatar
bg={
- user.is_superuser
- ? colors["accent2"]
- : colors["brand"]
+ user.is_superuser ? color("accent2") : color("brand")
}
user={user}
/>
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx
index ef72e327408..0efc85327fa 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx
@@ -1,12 +1,12 @@
import React from "react";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import Confirm from "metabase/components/Confirm.jsx";
-import PermissionsGrid from "../components/PermissionsGrid.jsx";
-import PermissionsConfirm from "../components/PermissionsConfirm.jsx";
-import PermissionsTabs from "../components/PermissionsTabs.jsx";
-import EditBar from "metabase/components/EditBar.jsx";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import Confirm from "metabase/components/Confirm";
+import PermissionsGrid from "../components/PermissionsGrid";
+import PermissionsConfirm from "../components/PermissionsConfirm";
+import PermissionsTabs from "../components/PermissionsTabs";
+import EditBar from "metabase/components/EditBar";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
import Button from "metabase/components/Button";
import { t } from "ttag";
import cx from "classnames";
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
index d7c21cba8cf..ace4ff30d9a 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
@@ -5,23 +5,23 @@ import { connect } from "react-redux";
import { Link } from "react-router";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import ConfirmContent from "metabase/components/ConfirmContent.jsx";
-import Modal from "metabase/components/Modal.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import Tooltip from "metabase/components/Tooltip";
+import Icon from "metabase/components/Icon";
+import ConfirmContent from "metabase/components/ConfirmContent";
+import Modal from "metabase/components/Modal";
-import FixedHeaderGrid from "./FixedHeaderGrid.jsx";
+import FixedHeaderGrid from "./FixedHeaderGrid";
import { AutoSizer } from "react-virtualized";
import { isAdminGroup, getGroupNameLocalized } from "metabase/lib/groups";
import cx from "classnames";
import _ from "underscore";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
-const LIGHT_BORDER = colors["text-light"];
-const DARK_BORDER = colors["text-medium"];
+const LIGHT_BORDER = color("text-light");
+const DARK_BORDER = color("text-medium");
const BORDER_RADIUS = 4;
const getBorderStyles = ({
@@ -48,8 +48,8 @@ const HEADER_WIDTH = 240;
const DEFAULT_OPTION = {
icon: "unknown",
- iconColor: colors["text-medium"],
- bgColor: colors["bg-medium"],
+ iconColor: color("text-medium"),
+ bgColor: color("bg-medium"),
};
const PermissionsHeader = ({ permissions, isFirst, isLast }) => (
@@ -274,7 +274,7 @@ class GroupPermissionCell extends Component {
size={28}
style={{
color: this.state.hovered
- ? colors["text-white"]
+ ? color("text-white")
: option.iconColor,
}}
/>
diff --git a/frontend/src/metabase/admin/permissions/containers/CollectionPermissionsModal.jsx b/frontend/src/metabase/admin/permissions/containers/CollectionPermissionsModal.jsx
index bba51b9de7d..a1d25ef06de 100644
--- a/frontend/src/metabase/admin/permissions/containers/CollectionPermissionsModal.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/CollectionPermissionsModal.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
import ModalContent from "metabase/components/ModalContent";
import Button from "metabase/components/Button";
import Link from "metabase/components/Link";
-import PermissionsGrid from "../components/PermissionsGrid.jsx";
+import PermissionsGrid from "../components/PermissionsGrid";
import fitViewport from "metabase/hoc/FitViewPort";
import { CollectionsApi } from "metabase/services";
diff --git a/frontend/src/metabase/admin/permissions/containers/CollectionsPermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/CollectionsPermissionsApp.jsx
index cd5c6735a81..12ece333133 100644
--- a/frontend/src/metabase/admin/permissions/containers/CollectionsPermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/CollectionsPermissionsApp.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import { connect } from "react-redux";
-import PermissionsEditor from "../components/PermissionsEditor.jsx";
-import PermissionsApp from "./PermissionsApp.jsx";
+import PermissionsEditor from "../components/PermissionsEditor";
+import PermissionsApp from "./PermissionsApp";
import fitViewport from "metabase/hoc/FitViewPort";
import { CollectionsApi } from "metabase/services";
diff --git a/frontend/src/metabase/admin/permissions/containers/DataPermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/DataPermissionsApp.jsx
index 1ef7ec0d75b..e00095eb2c6 100644
--- a/frontend/src/metabase/admin/permissions/containers/DataPermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/DataPermissionsApp.jsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
import fitViewport from "metabase/hoc/FitViewPort";
-import PermissionsApp from "./PermissionsApp.jsx";
+import PermissionsApp from "./PermissionsApp";
import { PermissionsApi } from "metabase/services";
import { fetchRealDatabases } from "metabase/redux/metadata";
diff --git a/frontend/src/metabase/admin/permissions/containers/DatabasesPermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/DatabasesPermissionsApp.jsx
index d3dce2903c9..c5a1849fee1 100644
--- a/frontend/src/metabase/admin/permissions/containers/DatabasesPermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/DatabasesPermissionsApp.jsx
@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { push } from "react-router-redux";
-import PermissionsEditor from "../components/PermissionsEditor.jsx";
+import PermissionsEditor from "../components/PermissionsEditor";
import {
getDatabasesPermissionsGrid,
diff --git a/frontend/src/metabase/admin/permissions/containers/PermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/PermissionsApp.jsx
index c2bac3e9588..acbc88dceba 100644
--- a/frontend/src/metabase/admin/permissions/containers/PermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/PermissionsApp.jsx
@@ -7,8 +7,8 @@ import { push } from "react-router-redux";
import { initialize } from "../permissions";
import { getIsDirty } from "../selectors";
import { t } from "ttag";
-import ConfirmContent from "metabase/components/ConfirmContent.jsx";
-import Modal from "metabase/components/Modal.jsx";
+import ConfirmContent from "metabase/components/ConfirmContent";
+import Modal from "metabase/components/Modal";
const mapStateToProps = (state, props) => ({
isDirty: getIsDirty(state, props),
diff --git a/frontend/src/metabase/admin/permissions/containers/SchemasPermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/SchemasPermissionsApp.jsx
index 717755aacfc..fd699545d0e 100644
--- a/frontend/src/metabase/admin/permissions/containers/SchemasPermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/SchemasPermissionsApp.jsx
@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { push } from "react-router-redux";
-import PermissionsEditor from "../components/PermissionsEditor.jsx";
+import PermissionsEditor from "../components/PermissionsEditor";
import {
getSchemasPermissionsGrid,
diff --git a/frontend/src/metabase/admin/permissions/containers/TablesPermissionsApp.jsx b/frontend/src/metabase/admin/permissions/containers/TablesPermissionsApp.jsx
index 097f54a53c0..f415a377771 100644
--- a/frontend/src/metabase/admin/permissions/containers/TablesPermissionsApp.jsx
+++ b/frontend/src/metabase/admin/permissions/containers/TablesPermissionsApp.jsx
@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { push } from "react-router-redux";
-import PermissionsEditor from "../components/PermissionsEditor.jsx";
+import PermissionsEditor from "../components/PermissionsEditor";
import {
getTablesPermissionsGrid,
diff --git a/frontend/src/metabase/admin/permissions/routes.jsx b/frontend/src/metabase/admin/permissions/routes.jsx
index 4a2ed7055d3..3a1c7b5155c 100644
--- a/frontend/src/metabase/admin/permissions/routes.jsx
+++ b/frontend/src/metabase/admin/permissions/routes.jsx
@@ -2,11 +2,11 @@ import React from "react";
import { Route } from "metabase/hoc/Title";
import { IndexRedirect, IndexRoute } from "react-router";
import { t } from "ttag";
-import DataPermissionsApp from "./containers/DataPermissionsApp.jsx";
-import DatabasesPermissionsApp from "./containers/DatabasesPermissionsApp.jsx";
-import SchemasPermissionsApp from "./containers/SchemasPermissionsApp.jsx";
-import TablesPermissionsApp from "./containers/TablesPermissionsApp.jsx";
-import CollectionPermissions from "./containers/CollectionsPermissionsApp.jsx";
+import DataPermissionsApp from "./containers/DataPermissionsApp";
+import DatabasesPermissionsApp from "./containers/DatabasesPermissionsApp";
+import SchemasPermissionsApp from "./containers/SchemasPermissionsApp";
+import TablesPermissionsApp from "./containers/TablesPermissionsApp";
+import CollectionPermissions from "./containers/CollectionsPermissionsApp";
const getRoutes = store => (
<Route title={t`Permissions`} path="permissions">
diff --git a/frontend/src/metabase/admin/permissions/selectors.js b/frontend/src/metabase/admin/permissions/selectors.js
index ebcdb90a59e..e9e98e14c65 100644
--- a/frontend/src/metabase/admin/permissions/selectors.js
+++ b/frontend/src/metabase/admin/permissions/selectors.js
@@ -7,7 +7,7 @@ import { push } from "react-router-redux";
import TogglePropagateAction from "./containers/TogglePropagateAction";
import MetabaseAnalytics from "metabase/lib/analytics";
-import colors, { alpha } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
import { t } from "ttag";
@@ -234,18 +234,18 @@ const BG_ALPHA = 0.15;
const OPTION_GREEN = {
icon: "check",
- iconColor: colors["success"],
- bgColor: alpha(colors["success"], BG_ALPHA),
+ iconColor: color("success"),
+ bgColor: alpha(color("success"), BG_ALPHA),
};
const OPTION_YELLOW = {
icon: "eye",
- iconColor: colors["warning"],
- bgColor: alpha(colors["warning"], BG_ALPHA),
+ iconColor: color("warning"),
+ bgColor: alpha(color("warning"), BG_ALPHA),
};
const OPTION_RED = {
icon: "close",
- iconColor: colors["error"],
- bgColor: alpha(colors["error"], BG_ALPHA),
+ iconColor: color("error"),
+ bgColor: alpha(color("error"), BG_ALPHA),
};
const OPTION_ALL = {
diff --git a/frontend/src/metabase/admin/routes.jsx b/frontend/src/metabase/admin/routes.jsx
index 0dccf05efb7..fe3ed2444ed 100644
--- a/frontend/src/metabase/admin/routes.jsx
+++ b/frontend/src/metabase/admin/routes.jsx
@@ -13,20 +13,20 @@ import EditUserModal from "metabase/admin/people/containers/EditUserModal";
import UserActivationModal from "metabase/admin/people/containers/UserActivationModal";
// Settings
-import SettingsEditorApp from "metabase/admin/settings/containers/SettingsEditorApp.jsx";
+import SettingsEditorApp from "metabase/admin/settings/containers/SettingsEditorApp";
// DB Add / list
-import DatabaseListApp from "metabase/admin/databases/containers/DatabaseListApp.jsx";
-import DatabaseEditApp from "metabase/admin/databases/containers/DatabaseEditApp.jsx";
+import DatabaseListApp from "metabase/admin/databases/containers/DatabaseListApp";
+import DatabaseEditApp from "metabase/admin/databases/containers/DatabaseEditApp";
// Metadata / Data model
-import MetadataEditorApp from "metabase/admin/datamodel/containers/MetadataEditorApp.jsx";
-import MetricApp from "metabase/admin/datamodel/containers/MetricApp.jsx";
-import SegmentApp from "metabase/admin/datamodel/containers/SegmentApp.jsx";
-import RevisionHistoryApp from "metabase/admin/datamodel/containers/RevisionHistoryApp.jsx";
-import AdminPeopleApp from "metabase/admin/people/containers/AdminPeopleApp.jsx";
-import FieldApp from "metabase/admin/datamodel/containers/FieldApp.jsx";
-import TableSettingsApp from "metabase/admin/datamodel/containers/TableSettingsApp.jsx";
+import MetadataEditorApp from "metabase/admin/datamodel/containers/MetadataEditorApp";
+import MetricApp from "metabase/admin/datamodel/containers/MetricApp";
+import SegmentApp from "metabase/admin/datamodel/containers/SegmentApp";
+import RevisionHistoryApp from "metabase/admin/datamodel/containers/RevisionHistoryApp";
+import AdminPeopleApp from "metabase/admin/people/containers/AdminPeopleApp";
+import FieldApp from "metabase/admin/datamodel/containers/FieldApp";
+import TableSettingsApp from "metabase/admin/datamodel/containers/TableSettingsApp";
import TroubleshootingApp from "metabase/admin/tasks/containers/TroubleshootingApp";
import TasksApp from "metabase/admin/tasks/containers/TasksApp";
@@ -36,11 +36,11 @@ import JobTriggersModal from "metabase/admin/tasks/containers/JobTriggersModal";
import Logs from "metabase/admin/tasks/containers/Logs";
// People
-import PeopleListingApp from "metabase/admin/people/containers/PeopleListingApp.jsx";
-import GroupsListingApp from "metabase/admin/people/containers/GroupsListingApp.jsx";
-import GroupDetailApp from "metabase/admin/people/containers/GroupDetailApp.jsx";
+import PeopleListingApp from "metabase/admin/people/containers/PeopleListingApp";
+import GroupsListingApp from "metabase/admin/people/containers/GroupsListingApp";
+import GroupDetailApp from "metabase/admin/people/containers/GroupDetailApp";
-import getAdminPermissionsRoutes from "metabase/admin/permissions/routes.jsx";
+import getAdminPermissionsRoutes from "metabase/admin/permissions/routes";
const getRoutes = (store, IsAdmin) => (
<Route
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSetting.jsx b/frontend/src/metabase/admin/settings/components/SettingsSetting.jsx
index f3c1502dc57..e946b00ce43 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSetting.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSetting.jsx
@@ -2,14 +2,14 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { assocIn } from "icepick";
-import SettingHeader from "./SettingHeader.jsx";
+import SettingHeader from "./SettingHeader";
import { t } from "ttag";
-import SettingInput from "./widgets/SettingInput.jsx";
-import SettingNumber from "./widgets/SettingNumber.jsx";
-import SettingPassword from "./widgets/SettingPassword.jsx";
-import SettingRadio from "./widgets/SettingRadio.jsx";
-import SettingToggle from "./widgets/SettingToggle.jsx";
-import SettingSelect from "./widgets/SettingSelect.jsx";
+import SettingInput from "./widgets/SettingInput";
+import SettingNumber from "./widgets/SettingNumber";
+import SettingPassword from "./widgets/SettingPassword";
+import SettingRadio from "./widgets/SettingRadio";
+import SettingToggle from "./widgets/SettingToggle";
+import SettingSelect from "./widgets/SettingSelect";
const SETTING_WIDGET_MAP = {
string: SettingInput,
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx b/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
index 62c62e7b6d8..27221bf3438 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import { Link } from "react-router";
-import Icon from "metabase/components/Icon.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import Icon from "metabase/components/Icon";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import { SetupApi } from "metabase/services";
import { t } from "ttag";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const TaskList = ({ tasks }) => (
<ol>
@@ -41,14 +41,14 @@ const CompletionBadge = ({ completed }) => (
style={{
borderWidth: 1,
borderStyle: "solid",
- borderColor: completed ? colors["success"] : colors["text-light"],
- backgroundColor: completed ? colors["success"] : colors["text-white"],
+ borderColor: completed ? color("success") : color("text-light"),
+ backgroundColor: completed ? color("success") : color("text-white"),
width: 32,
height: 32,
borderRadius: 99,
}}
>
- {completed && <Icon name="check" color={colors["text-white"]} />}
+ {completed && <Icon name="check" color={color("text-white")} />}
</div>
);
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
index 07351faa5b5..e55c2892869 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
@@ -4,8 +4,8 @@ import cx from "classnames";
import _ from "underscore";
import { t, jt } from "ttag";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import InputBlurChange from "metabase/components/InputBlurChange";
export default class SettingsSingleSignOnForm extends Component {
constructor(props, context) {
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
index c2400c1e5b4..a882df7a6b6 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
@@ -2,10 +2,10 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import MetabaseAnalytics from "metabase/lib/analytics";
import MetabaseUtils from "metabase/lib/utils";
-import SettingsSetting from "./SettingsSetting.jsx";
+import SettingsSetting from "./SettingsSetting";
import Button from "metabase/components/Button";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import RetinaImage from "react-retina-image";
diff --git a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
index fd83d921637..643bfd42b30 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { t, jt } from "ttag";
import MetabaseSettings from "metabase/lib/settings";
import MetabaseUtils from "metabase/lib/utils";
-import SettingsSetting from "./SettingsSetting.jsx";
+import SettingsSetting from "./SettingsSetting";
import _ from "underscore";
diff --git a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
index 0403621cd41..e52cc4b8adb 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
@@ -3,19 +3,19 @@ import PropTypes from "prop-types";
import { t } from "ttag";
import Utils from "metabase/lib/utils";
-import Select, { Option } from "metabase/components/Select.jsx";
-import Confirm from "metabase/components/Confirm.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
-import Modal from "metabase/components/Modal.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import Select, { Option } from "metabase/components/Select";
+import Confirm from "metabase/components/Confirm";
+import Ellipsified from "metabase/components/Ellipsified";
+import Modal from "metabase/components/Modal";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import SettingHeader from "../SettingHeader.jsx";
+import SettingHeader from "../SettingHeader";
import { SettingsApi, GeoJSONApi } from "metabase/services";
import cx from "classnames";
-import LeafletChoropleth from "metabase/visualizations/components/LeafletChoropleth.jsx";
+import LeafletChoropleth from "metabase/visualizations/components/LeafletChoropleth";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SettingInput.jsx b/frontend/src/metabase/admin/settings/components/widgets/SettingInput.jsx
index bde7ab9dcf2..4febc8303b9 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SettingInput.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SettingInput.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
import cx from "classnames";
const SettingInput = ({
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SettingPassword.jsx b/frontend/src/metabase/admin/settings/components/widgets/SettingPassword.jsx
index 3ab5ac103a0..0277751ac06 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SettingPassword.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SettingPassword.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import SettingInput from "./SettingInput.jsx";
+import SettingInput from "./SettingInput";
const SettingPassword = props => <SettingInput {...props} type="password" />;
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SettingSelect.jsx b/frontend/src/metabase/admin/settings/components/widgets/SettingSelect.jsx
index 72c493af863..f21abaa2a14 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SettingSelect.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SettingSelect.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Select, { Option } from "metabase/components/Select.jsx";
+import Select, { Option } from "metabase/components/Select";
const SettingSelect = ({
setting: { placeholder, value, options, defaultValue },
diff --git a/frontend/src/metabase/admin/settings/components/widgets/SettingToggle.jsx b/frontend/src/metabase/admin/settings/components/widgets/SettingToggle.jsx
index 63aa0146c1d..5477d9481ec 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/SettingToggle.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/SettingToggle.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { t } from "ttag";
-import Toggle from "metabase/components/Toggle.jsx";
+import Toggle from "metabase/components/Toggle";
const SettingToggle = ({ setting, onChange, disabled }) => {
const value = setting.value == null ? setting.default : setting.value;
diff --git a/frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx b/frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx
index ffb5f70bd05..5c8773d30ac 100644
--- a/frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx
+++ b/frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx
@@ -6,17 +6,17 @@ import title from "metabase/hoc/Title";
import MetabaseAnalytics from "metabase/lib/analytics";
import { slugify } from "metabase/lib/formatting";
import { t } from "ttag";
-import AdminLayout from "metabase/components/AdminLayout.jsx";
+import AdminLayout from "metabase/components/AdminLayout";
import { NotFound } from "metabase/containers/ErrorPages";
-import SettingsSetting from "../components/SettingsSetting.jsx";
-import SettingsEmailForm from "../components/SettingsEmailForm.jsx";
-import SettingsSlackForm from "../components/SettingsSlackForm.jsx";
-import SettingsLdapForm from "../components/SettingsLdapForm.jsx";
-import SettingsSetupList from "../components/SettingsSetupList.jsx";
-import SettingsUpdatesForm from "../components/SettingsUpdatesForm.jsx";
-import SettingsSingleSignOnForm from "../components/SettingsSingleSignOnForm.jsx";
-import SettingsAuthenticationOptions from "../components/SettingsAuthenticationOptions.jsx";
+import SettingsSetting from "../components/SettingsSetting";
+import SettingsEmailForm from "../components/SettingsEmailForm";
+import SettingsSlackForm from "../components/SettingsSlackForm";
+import SettingsLdapForm from "../components/SettingsLdapForm";
+import SettingsSetupList from "../components/SettingsSetupList";
+import SettingsUpdatesForm from "../components/SettingsUpdatesForm";
+import SettingsSingleSignOnForm from "../components/SettingsSingleSignOnForm";
+import SettingsAuthenticationOptions from "../components/SettingsAuthenticationOptions";
import { prepareAnalyticsValue } from "metabase/admin/settings/utils";
diff --git a/frontend/src/metabase/admin/settings/selectors.js b/frontend/src/metabase/admin/settings/selectors.js
index 18f5be6d471..212665231ef 100644
--- a/frontend/src/metabase/admin/settings/selectors.js
+++ b/frontend/src/metabase/admin/settings/selectors.js
@@ -2,14 +2,14 @@ import _ from "underscore";
import { createSelector } from "reselect";
import MetabaseSettings from "metabase/lib/settings";
import { t } from "ttag";
-import CustomGeoJSONWidget from "./components/widgets/CustomGeoJSONWidget.jsx";
+import CustomGeoJSONWidget from "./components/widgets/CustomGeoJSONWidget";
import {
PublicLinksDashboardListing,
PublicLinksQuestionListing,
EmbeddedQuestionListing,
EmbeddedDashboardListing,
-} from "./components/widgets/PublicLinksListing.jsx";
-import SecretKeyWidget from "./components/widgets/SecretKeyWidget.jsx";
+} from "./components/widgets/PublicLinksListing";
+import SecretKeyWidget from "./components/widgets/SecretKeyWidget";
import EmbeddingLegalese from "./components/widgets/EmbeddingLegalese";
import EmbeddingLevel from "./components/widgets/EmbeddingLevel";
import LdapGroupMappingsWidget from "./components/widgets/LdapGroupMappingsWidget";
diff --git a/frontend/src/metabase/admin/tasks/containers/JobInfoApp.jsx b/frontend/src/metabase/admin/tasks/containers/JobInfoApp.jsx
index 98008f694b5..5de7de8ade9 100644
--- a/frontend/src/metabase/admin/tasks/containers/JobInfoApp.jsx
+++ b/frontend/src/metabase/admin/tasks/containers/JobInfoApp.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { Box, Flex } from "grid-styled";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import AdminHeader from "metabase/components/AdminHeader";
import Link from "metabase/components/Link";
diff --git a/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx b/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
index a4ce50da611..0f4b39e62cd 100644
--- a/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
+++ b/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { goBack } from "react-router-redux";
import _ from "underscore";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import ModalContent from "metabase/components/ModalContent";
import { fetchJobInfo } from "../jobInfo";
diff --git a/frontend/src/metabase/admin/tasks/containers/Logs.jsx b/frontend/src/metabase/admin/tasks/containers/Logs.jsx
index 247779c9ad3..8552015cd42 100644
--- a/frontend/src/metabase/admin/tasks/containers/Logs.jsx
+++ b/frontend/src/metabase/admin/tasks/containers/Logs.jsx
@@ -14,17 +14,17 @@ import { t } from "ttag";
import Select, { Option } from "metabase/components/Select";
import { addCSSRule } from "metabase/lib/dom";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const ANSI_COLORS = {
- black: colors["text-black"],
- white: colors["text-white"],
- gray: colors["text-medium"],
- red: colors["saturated-red"],
- green: colors["saturated-green"],
- yellow: colors["saturated-yellow"],
- blue: colors["saturated-blue"],
- magenta: colors["saturated-purple"],
+ black: color("text-dark"),
+ white: color("text-white"),
+ gray: color("text-medium"),
+ red: color("saturated-red"),
+ green: color("saturated-green"),
+ yellow: color("saturated-yellow"),
+ blue: color("saturated-blue"),
+ magenta: color("saturated-purple"),
cyan: "cyan",
};
for (const [name, color] of Object.entries(ANSI_COLORS)) {
diff --git a/frontend/src/metabase/admin/tasks/containers/TroubleshootingApp.jsx b/frontend/src/metabase/admin/tasks/containers/TroubleshootingApp.jsx
index 7f24a6cc286..67a16d84e4f 100644
--- a/frontend/src/metabase/admin/tasks/containers/TroubleshootingApp.jsx
+++ b/frontend/src/metabase/admin/tasks/containers/TroubleshootingApp.jsx
@@ -3,12 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import {
- LeftNavPane,
- LeftNavPaneItem,
-} from "metabase/components/LeftNavPane.jsx";
+import { LeftNavPane, LeftNavPaneItem } from "metabase/components/LeftNavPane";
-import AdminLayout from "metabase/components/AdminLayout.jsx";
+import AdminLayout from "metabase/components/AdminLayout";
export default class TroubleshootingApp extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/alert/alert.js b/frontend/src/metabase/alert/alert.js
index 6682808f6a2..2fc3b7f2ca2 100644
--- a/frontend/src/metabase/alert/alert.js
+++ b/frontend/src/metabase/alert/alert.js
@@ -6,7 +6,7 @@ import { addUndo } from "metabase/redux/undo";
import { t } from "ttag";
import { AlertApi } from "metabase/services";
import { RestfulRequest } from "metabase/lib/request";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
export const FETCH_ALL_ALERTS = "metabase/alerts/FETCH_ALL_ALERTS";
const fetchAllAlertsRequest = new RestfulRequest({
diff --git a/frontend/src/metabase/app-embed.js b/frontend/src/metabase/app-embed.js
index c73ea000448..b686ad0516e 100644
--- a/frontend/src/metabase/app-embed.js
+++ b/frontend/src/metabase/app-embed.js
@@ -5,7 +5,7 @@
import { init } from "./app";
-import { getRoutes } from "./routes-embed.jsx";
+import { getRoutes } from "./routes-embed";
import reducers from "./reducers-public";
import { IFRAMED } from "metabase/lib/dom";
diff --git a/frontend/src/metabase/app-main.js b/frontend/src/metabase/app-main.js
index 5dba41cdfe6..1b823d790e9 100644
--- a/frontend/src/metabase/app-main.js
+++ b/frontend/src/metabase/app-main.js
@@ -1,7 +1,7 @@
import { push } from "react-router-redux";
import { init } from "metabase/app";
-import { getRoutes } from "metabase/routes.jsx";
+import { getRoutes } from "metabase/routes";
import reducers from "metabase/reducers-main";
import api from "metabase/lib/api";
diff --git a/frontend/src/metabase/app-public.js b/frontend/src/metabase/app-public.js
index 3c2e6afa78f..15fa8f22d76 100644
--- a/frontend/src/metabase/app-public.js
+++ b/frontend/src/metabase/app-public.js
@@ -1,6 +1,6 @@
import { init } from "./app";
-import { getRoutes } from "./routes-public.jsx";
+import { getRoutes } from "./routes-public";
import reducers from "./reducers-public";
init(reducers, getRoutes, () => {});
diff --git a/frontend/src/metabase/auth/components/GoogleNoAccount.jsx b/frontend/src/metabase/auth/components/GoogleNoAccount.jsx
index 60dafba4bc5..1e67b780a4a 100644
--- a/frontend/src/metabase/auth/components/GoogleNoAccount.jsx
+++ b/frontend/src/metabase/auth/components/GoogleNoAccount.jsx
@@ -1,8 +1,8 @@
import React from "react";
import { t } from "ttag";
-import AuthScene from "./AuthScene.jsx";
-import LogoIcon from "metabase/components/LogoIcon.jsx";
-import BackToLogin from "./BackToLogin.jsx";
+import AuthScene from "./AuthScene";
+import LogoIcon from "metabase/components/LogoIcon";
+import BackToLogin from "./BackToLogin";
const GoogleNoAccount = () => (
<div className="full-height bg-white flex flex-column flex-full md-layout-centered">
diff --git a/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx b/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
index eaa5a42137f..8c50f9f1d05 100644
--- a/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
+++ b/frontend/src/metabase/auth/containers/ForgotPasswordApp.jsx
@@ -3,13 +3,13 @@ import React, { Component } from "react";
import _ from "underscore";
import cx from "classnames";
import { t } from "ttag";
-import AuthScene from "../components/AuthScene.jsx";
-import BackToLogin from "../components/BackToLogin.jsx";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
-import LogoIcon from "metabase/components/LogoIcon.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import AuthScene from "../components/AuthScene";
+import BackToLogin from "../components/BackToLogin";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
+import LogoIcon from "metabase/components/LogoIcon";
+import Icon from "metabase/components/Icon";
import MetabaseSettings from "metabase/lib/settings";
diff --git a/frontend/src/metabase/auth/containers/LoginApp.jsx b/frontend/src/metabase/auth/containers/LoginApp.jsx
index 6138ca943b1..4de4677a4c7 100644
--- a/frontend/src/metabase/auth/containers/LoginApp.jsx
+++ b/frontend/src/metabase/auth/containers/LoginApp.jsx
@@ -4,14 +4,14 @@ import { Link } from "react-router";
import { connect } from "react-redux";
import { t } from "ttag";
-import AuthScene from "../components/AuthScene.jsx";
-import SSOLoginButton from "../components/SSOLoginButton.jsx";
+import AuthScene from "../components/AuthScene";
+import SSOLoginButton from "../components/SSOLoginButton";
import Button from "metabase/components/Button";
import CheckBox from "metabase/components/CheckBox";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
-import LogoIcon from "metabase/components/LogoIcon.jsx";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
+import LogoIcon from "metabase/components/LogoIcon";
import Settings from "metabase/lib/settings";
import Utils from "metabase/lib/utils";
diff --git a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
index fafebfc66ce..ef0d0a080df 100644
--- a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
+++ b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
@@ -4,12 +4,12 @@ import { Link } from "react-router";
import cx from "classnames";
import { t, jt } from "ttag";
-import AuthScene from "../components/AuthScene.jsx";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
-import LogoIcon from "metabase/components/LogoIcon.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import AuthScene from "../components/AuthScene";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
+import LogoIcon from "metabase/components/LogoIcon";
+import Icon from "metabase/components/Icon";
import MetabaseSettings from "metabase/lib/settings";
diff --git a/frontend/src/metabase/components/AccordionList.jsx b/frontend/src/metabase/components/AccordionList.jsx
index 0c2c32e270f..8ae5d80aae9 100644
--- a/frontend/src/metabase/components/AccordionList.jsx
+++ b/frontend/src/metabase/components/AccordionList.jsx
@@ -5,8 +5,8 @@ import cx from "classnames";
import _ from "underscore";
import { color } from "metabase/lib/colors";
-import Icon from "metabase/components/Icon.jsx";
-import ListSearchField from "metabase/components/ListSearchField.jsx";
+import Icon from "metabase/components/Icon";
+import ListSearchField from "metabase/components/ListSearchField";
import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";
export type RenderItemWrapper = (
diff --git a/frontend/src/metabase/components/AdminAwareEmptyState.jsx b/frontend/src/metabase/components/AdminAwareEmptyState.jsx
index fdb3410b5f0..5ec81f64b74 100644
--- a/frontend/src/metabase/components/AdminAwareEmptyState.jsx
+++ b/frontend/src/metabase/components/AdminAwareEmptyState.jsx
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import EmptyState from "metabase/components/EmptyState.jsx";
+import EmptyState from "metabase/components/EmptyState";
import { getUser } from "metabase/selectors/user";
import { connect } from "react-redux";
diff --git a/frontend/src/metabase/components/AdminHeader.jsx b/frontend/src/metabase/components/AdminHeader.jsx
index 8b21a6a6a4e..992ee651f23 100644
--- a/frontend/src/metabase/components/AdminHeader.jsx
+++ b/frontend/src/metabase/components/AdminHeader.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import SaveStatus from "metabase/components/SaveStatus.jsx";
+import SaveStatus from "metabase/components/SaveStatus";
export default class AdminHeader extends Component {
render() {
diff --git a/frontend/src/metabase/components/AdminLayout.jsx b/frontend/src/metabase/components/AdminLayout.jsx
index d0e7079aa71..e2605b26100 100644
--- a/frontend/src/metabase/components/AdminLayout.jsx
+++ b/frontend/src/metabase/components/AdminLayout.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import AdminHeader from "./AdminHeader.jsx";
+import AdminHeader from "./AdminHeader";
export default class AdminLayout extends Component {
setSaving = () => {
diff --git a/frontend/src/metabase/components/Alert.jsx b/frontend/src/metabase/components/Alert.jsx
index e92a516c737..2b646d075b0 100644
--- a/frontend/src/metabase/components/Alert.jsx
+++ b/frontend/src/metabase/components/Alert.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { t } from "ttag";
-import Modal from "metabase/components/Modal.jsx";
+import Modal from "metabase/components/Modal";
const Alert = ({ message, onClose }) => (
<Modal small isOpen={!!message}>
diff --git a/frontend/src/metabase/components/ArchivedItem.jsx b/frontend/src/metabase/components/ArchivedItem.jsx
index 4be734da9ff..4773be74b15 100644
--- a/frontend/src/metabase/components/ArchivedItem.jsx
+++ b/frontend/src/metabase/components/ArchivedItem.jsx
@@ -4,19 +4,19 @@ import React from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import CheckBox from "metabase/components/CheckBox.jsx";
+import CheckBox from "metabase/components/CheckBox";
import Icon from "metabase/components/Icon";
import IconWrapper from "metabase/components/IconWrapper";
import Swapper from "metabase/components/Swapper";
import Tooltip from "metabase/components/Tooltip";
-import colors from "metabase/lib/colors";
+import { color as c } from "metabase/lib/colors";
const ArchivedItem = ({
name,
type,
icon,
- color = colors["text-light"],
+ color = c("text-light"),
isAdmin = false,
onUnarchive,
onDelete,
diff --git a/frontend/src/metabase/components/Breadcrumbs.jsx b/frontend/src/metabase/components/Breadcrumbs.jsx
index 0924d7a31f7..51548fd2ee8 100644
--- a/frontend/src/metabase/components/Breadcrumbs.jsx
+++ b/frontend/src/metabase/components/Breadcrumbs.jsx
@@ -4,8 +4,8 @@ import { Link } from "react-router";
import S from "./Breadcrumbs.css";
-import Icon from "metabase/components/Icon.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
+import Icon from "metabase/components/Icon";
+import Ellipsified from "metabase/components/Ellipsified";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/BrowserCrumbs.jsx b/frontend/src/metabase/components/BrowserCrumbs.jsx
index eede9117497..5b351a6a668 100644
--- a/frontend/src/metabase/components/BrowserCrumbs.jsx
+++ b/frontend/src/metabase/components/BrowserCrumbs.jsx
@@ -3,7 +3,7 @@ import { Flex } from "grid-styled";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
// TODO: merge with Breadcrumbs
@@ -35,7 +35,7 @@ const BrowserCrumbs = ({ crumbs, analyticsContext }) => (
<Icon
key={"divider" + index}
name="chevronright"
- color={colors["text-light"]}
+ color={color("text-light")}
mx={1}
/>
) : null}
diff --git a/frontend/src/metabase/components/Button.jsx b/frontend/src/metabase/components/Button.jsx
index f0f91e593b2..4ea0fe0a515 100644
--- a/frontend/src/metabase/components/Button.jsx
+++ b/frontend/src/metabase/components/Button.jsx
@@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import sys from "system-components";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import cx from "classnames";
import _ from "underscore";
diff --git a/frontend/src/metabase/components/Card.jsx b/frontend/src/metabase/components/Card.jsx
index 10aded46d1e..63e0db6e3cd 100644
--- a/frontend/src/metabase/components/Card.jsx
+++ b/frontend/src/metabase/components/Card.jsx
@@ -1,22 +1,22 @@
import styled from "styled-components";
import { space, width } from "styled-system";
-import colors, { alpha } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
const Card = styled.div`
${width}
${space}
- background-color: ${props => (props.dark ? colors["text-dark"] : "white")};
+ background-color: ${props => (props.dark ? color("text-dark") : "white")};
border: 1px solid ${props =>
- props.dark ? "transparent" : colors["bg-medium"]};
+ props.dark ? "transparent" : color("bg-medium")};
${props => props.dark && `color: white`};
border-radius: 6px;
- box-shadow: 0 7px 20px ${props => colors["shadow"]};
+ box-shadow: 0 7px 20px ${props => color("shadow")};
transition: all 0.2s linear;
line-height: 24px;
${props =>
props.hoverable &&
`&:hover {
- box-shadow: 0 10px 22px ${alpha(colors["shadow"], 0.09)};
+ box-shadow: 0 10px 22px ${alpha(color("shadow"), 0.09)};
}`};
`;
diff --git a/frontend/src/metabase/components/ChannelSetupModal.jsx b/frontend/src/metabase/components/ChannelSetupModal.jsx
index bc399a6fb0c..37e860d125e 100644
--- a/frontend/src/metabase/components/ChannelSetupModal.jsx
+++ b/frontend/src/metabase/components/ChannelSetupModal.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { t } from "ttag";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
import ChannelSetupMessage from "metabase/components/ChannelSetupMessage";
export default class ChannelSetupModal extends Component {
diff --git a/frontend/src/metabase/components/CheckBox.jsx b/frontend/src/metabase/components/CheckBox.jsx
index dc60c49aea7..c9dcff158c3 100644
--- a/frontend/src/metabase/components/CheckBox.jsx
+++ b/frontend/src/metabase/components/CheckBox.jsx
@@ -4,7 +4,7 @@ import cx from "classnames";
import Icon from "metabase/components/Icon";
-import colors, { normal as defaultColors } from "metabase/lib/colors";
+import { color as c, normal as defaultColors } from "metabase/lib/colors";
export default class CheckBox extends Component {
static propTypes = {
@@ -48,7 +48,7 @@ export default class CheckBox extends Component {
} = this.props;
const checkedColor = defaultColors[color];
- const uncheckedColor = colors["text-light"];
+ const uncheckedColor = c("text-light");
const checkboxStyle = {
width: size,
diff --git a/frontend/src/metabase/components/CollectionItem.jsx b/frontend/src/metabase/components/CollectionItem.jsx
index 00c06dd72a0..9ac4e1a4a72 100644
--- a/frontend/src/metabase/components/CollectionItem.jsx
+++ b/frontend/src/metabase/components/CollectionItem.jsx
@@ -6,27 +6,27 @@ import Ellipsified from "metabase/components/Ellipsified";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const ItemLink = props => (
<Link
to={`collection/${props.collection.id}`}
bg={
props.hovered
- ? colors["brand"]
+ ? color("brand")
: props.highlighted
- ? colors["bg-light"]
- : colors["bg-medium"]
+ ? color("bg-light")
+ : color("bg-medium")
}
- color={props.hovered ? "white" : colors["text-medium"]}
+ color={props.hovered ? "white" : color("text-medium")}
className="block rounded relative text-brand-hover"
data-metabase-event={props.event}
style={{
borderSize: 1,
borderColor: props.hovered
- ? colors["brand"]
+ ? color("brand")
: props.highlighted
- ? colors["bg-medium"]
+ ? color("bg-medium")
: "transparent",
borderStyle: props.hovered
? "solid"
@@ -34,7 +34,7 @@ const ItemLink = props => (
? "dotted"
: "solid",
}}
- hover={{ color: colors["brand"] }}
+ hover={{ color: color("brand") }}
>
{props.children}
</Link>
@@ -51,7 +51,7 @@ const CollectionItem = props => {
<Icon
name={props.iconName}
mx={props.asCard ? 0 : 1}
- color={props.asCard ? "white" : colors["bg-dark"]}
+ color={props.asCard ? "white" : color("bg-dark")}
/>
);
@@ -67,7 +67,7 @@ const CollectionItem = props => {
align="center"
justify="center"
w="42px"
- bg={colors["bg-dark"]}
+ bg={color("bg-dark")}
style={{ height: 42, borderRadius: 6, flexShrink: 0 }}
mr={1}
>
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
index f71b47cfb21..f6523a8bb6a 100644
--- a/frontend/src/metabase/components/CollectionLanding.jsx
+++ b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -16,7 +16,7 @@ import listSelect from "metabase/hoc/ListSelect";
import BulkActionBar from "metabase/components/BulkActionBar";
import * as Urls from "metabase/lib/urls";
-import colors, { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Button from "metabase/components/Button";
import Card from "metabase/components/Card";
@@ -217,7 +217,7 @@ class DefaultLanding extends React.Component {
pt={2}
pb={3}
px={4}
- bg={pinned.length ? colors["bg-medium"] : null}
+ bg={pinned.length ? color("bg-medium") : null}
>
<Box>
<Box mb={1}>
@@ -245,8 +245,8 @@ class DefaultLanding extends React.Component {
name="info"
ml={1}
mt="4px"
- color={colors["bg-dark"]}
- hover={{ color: colors["brand"] }}
+ color={color("bg-dark")}
+ hover={{ color: color("brand") }}
/>
</Tooltip>
)}
@@ -282,7 +282,7 @@ class DefaultLanding extends React.Component {
<Box>
<Box>
{collectionHasPins ? (
- <Box px={PAGE_PADDING} pt={2} pb={3} bg={colors["bg-medium"]}>
+ <Box px={PAGE_PADDING} pt={2} pb={3} bg={color("bg-medium")}>
<CollectionSectionHeading>{t`Pins`}</CollectionSectionHeading>
<PinDropTarget
pinIndex={pinned[pinned.length - 1].collection_position + 1}
@@ -447,9 +447,7 @@ class DefaultLanding extends React.Component {
justify="center"
py={2}
m={2}
- color={
- hovered ? colors["brand"] : colors["text-medium"]
- }
+ color={hovered ? color("brand") : color("text-medium")}
>
{t`Drag here to un-pin`}
</Flex>
@@ -582,7 +580,7 @@ const PinnedItem = ({ item, index, collection }) => (
<Link
to={item.getUrl()}
className="hover-parent hover--visibility"
- hover={{ color: normal.blue }}
+ hover={{ color: color("brand") }}
data-metabase-event={`${ANALYTICS_CONTEXT};Pinned Item;Click;${item.model}`}
>
<Card hoverable p={3}>
@@ -678,7 +676,7 @@ class CollectionLanding extends React.Component {
const CollectionSectionHeading = ({ children }) => (
<h5
className="text-uppercase"
- style={{ color: colors["text-medium"], fontWeight: 900 }}
+ style={{ color: color("text-medium"), fontWeight: 900 }}
>
{children}
</h5>
diff --git a/frontend/src/metabase/components/CollectionList.jsx b/frontend/src/metabase/components/CollectionList.jsx
index 1cd150cad46..d2c5c7b3ac0 100644
--- a/frontend/src/metabase/components/CollectionList.jsx
+++ b/frontend/src/metabase/components/CollectionList.jsx
@@ -6,7 +6,7 @@ import { connect } from "react-redux";
import * as Urls from "metabase/lib/urls";
import CollectionItem from "metabase/components/CollectionItem";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { Grid, GridItem } from "metabase/components/Grid";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
@@ -97,8 +97,8 @@ class CollectionList extends React.Component {
<GridItem w={w}>
<Link
to={Urls.newCollection(currentCollection.id)}
- color={normal.grey2}
- hover={{ color: normal.blue }}
+ color={color("text-medium")}
+ hover={{ color: color("brand") }}
p={w === 1 ? [1, 2] : 0}
data-metabase-event={`${analyticsContext};Collection List; New Collection Click`}
>
diff --git a/frontend/src/metabase/components/ColumnarSelector.jsx b/frontend/src/metabase/components/ColumnarSelector.jsx
index 67f4b2b8859..d8b7e666544 100644
--- a/frontend/src/metabase/components/ColumnarSelector.jsx
+++ b/frontend/src/metabase/components/ColumnarSelector.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import "./ColumnarSelector.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/Confirm.jsx b/frontend/src/metabase/components/Confirm.jsx
index 843c4683ea1..fbb3cdeb107 100644
--- a/frontend/src/metabase/components/Confirm.jsx
+++ b/frontend/src/metabase/components/Confirm.jsx
@@ -2,8 +2,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import ConfirmContent from "./ConfirmContent.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import ConfirmContent from "./ConfirmContent";
export default class Confirm extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/components/ConfirmContent.jsx b/frontend/src/metabase/components/ConfirmContent.jsx
index 13852bdc46f..681b5a22182 100644
--- a/frontend/src/metabase/components/ConfirmContent.jsx
+++ b/frontend/src/metabase/components/ConfirmContent.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
import { t } from "ttag";
import Button from "metabase/components/Button";
diff --git a/frontend/src/metabase/components/DatabaseDetailsForm.jsx b/frontend/src/metabase/components/DatabaseDetailsForm.jsx
index 15ab3d01610..b79a9ac5410 100644
--- a/frontend/src/metabase/components/DatabaseDetailsForm.jsx
+++ b/frontend/src/metabase/components/DatabaseDetailsForm.jsx
@@ -2,10 +2,10 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { t, jt } from "ttag";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
-import Toggle from "metabase/components/Toggle.jsx";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
+import Toggle from "metabase/components/Toggle";
import { shallowEqual } from "recompose";
diff --git a/frontend/src/metabase/components/DeleteModalWithConfirm.jsx b/frontend/src/metabase/components/DeleteModalWithConfirm.jsx
index c82a0413229..203f08dbfe2 100644
--- a/frontend/src/metabase/components/DeleteModalWithConfirm.jsx
+++ b/frontend/src/metabase/components/DeleteModalWithConfirm.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import ModalContent from "metabase/components/ModalContent.jsx";
-import CheckBox from "metabase/components/CheckBox.jsx";
+import ModalContent from "metabase/components/ModalContent";
+import CheckBox from "metabase/components/CheckBox";
import { t } from "ttag";
import cx from "classnames";
import _ from "underscore";
diff --git a/frontend/src/metabase/components/DirectionalButton.jsx b/frontend/src/metabase/components/DirectionalButton.jsx
index 61f3ab05ee8..6d9fcb24e82 100644
--- a/frontend/src/metabase/components/DirectionalButton.jsx
+++ b/frontend/src/metabase/components/DirectionalButton.jsx
@@ -1,15 +1,15 @@
import React from "react";
import Icon from "metabase/components/Icon";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const DirectionalButton = ({ direction = "back", onClick }) => (
<div
className="shadowed cursor-pointer text-brand-hover text-medium flex align-center circle p2 bg-white transition-background transition-color"
onClick={onClick}
style={{
- border: `1px solid ${colors["border"]}`,
- boxShadow: `0 2px 4px 0 ${colors["shadow"]}`,
+ border: `1px solid ${color("border")}`,
+ boxShadow: `0 2px 4px 0 ${color("shadow")}`,
}}
>
<Icon name={`arrow_${direction}`} />
diff --git a/frontend/src/metabase/components/DownloadButton.jsx b/frontend/src/metabase/components/DownloadButton.jsx
index 54ce9421e0a..3c9f9b87986 100644
--- a/frontend/src/metabase/components/DownloadButton.jsx
+++ b/frontend/src/metabase/components/DownloadButton.jsx
@@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import { Box, Flex } from "grid-styled";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { extractQueryParams } from "metabase/lib/urls";
import Icon from "metabase/components/Icon";
@@ -11,13 +11,13 @@ import Text from "metabase/components/Text";
function colorForType(type) {
switch (type) {
case "csv":
- return colors["accent7"];
+ return color("accent7");
case "xlsx":
- return colors["accent1"];
+ return color("accent1");
case "json":
- return colors["bg-dark"];
+ return color("bg-dark");
default:
- return colors["brand"];
+ return color("brand");
}
}
diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
index 0c3e04bd3d8..29f21b6f5d0 100644
--- a/frontend/src/metabase/components/EntityItem.jsx
+++ b/frontend/src/metabase/components/EntityItem.jsx
@@ -10,14 +10,14 @@ import CheckBox from "metabase/components/CheckBox";
import Ellipsified from "metabase/components/Ellipsified";
import Icon from "metabase/components/Icon";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const EntityItemWrapper = Flex.extend`
- border-bottom: 1px solid ${colors["bg-medium"]};
+ border-bottom: 1px solid ${color("bg-medium")};
/* TODO - figure out how to use the prop instead of this? */
align-items: center;
&:hover {
- color: ${colors["brand"]};
+ color: ${color("brand")};
}
`;
diff --git a/frontend/src/metabase/components/EntityLayout.js b/frontend/src/metabase/components/EntityLayout.js
index af41b3dab72..18d76249cfb 100644
--- a/frontend/src/metabase/components/EntityLayout.js
+++ b/frontend/src/metabase/components/EntityLayout.js
@@ -2,7 +2,7 @@ import React from "react";
import { Box, Flex } from "grid-styled";
import Subhead from "metabase/components/Subhead";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export const Wrapper = ({ children }) => (
<Box w="80%" ml="auto" mr="auto">
@@ -12,11 +12,11 @@ export const Wrapper = ({ children }) => (
export const Canvas = ({ children }) => (
<Box
- bg={colors["bg-white"]}
+ bg={color("bg-white")}
p={2}
style={{
- borderTop: colors["border"],
- borderBottom: colors["border"],
+ borderTop: color("border"),
+ borderBottom: color("border"),
}}
>
{children}
diff --git a/frontend/src/metabase/components/EntityMenuItem.jsx b/frontend/src/metabase/components/EntityMenuItem.jsx
index cfd75cdbaa4..079a4afeb87 100644
--- a/frontend/src/metabase/components/EntityMenuItem.jsx
+++ b/frontend/src/metabase/components/EntityMenuItem.jsx
@@ -4,25 +4,25 @@ import { Link } from "react-router";
import Icon from "metabase/components/Icon";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const Item = styled.div`
display: flex;
align-items: center;
cursor: pointer;
- color: ${colors["text-medium"]};
+ color: ${color("text-medium")};
padding: 0.85em 1.45em;
text-decoration: none;
transition: all 300ms linear;
:hover {
- color: ${colors["brand"]};
+ color: ${color("brand")};
}
> .Icon {
- color: ${colors["text-light"]};
+ color: ${color("text-light")};
margin-right: 0.65em;
}
:hover > .Icon {
- color: ${colors["brand"]};
+ color: ${color("brand")};
transition: all 300ms linear;
},
/* icon specific tweaks
diff --git a/frontend/src/metabase/components/EntityPage.jsx b/frontend/src/metabase/components/EntityPage.jsx
index 3a15c0ed518..fb79dde5de2 100644
--- a/frontend/src/metabase/components/EntityPage.jsx
+++ b/frontend/src/metabase/components/EntityPage.jsx
@@ -13,7 +13,7 @@ import QuestionAndResultLoader from "metabase/containers/QuestionAndResultLoader
import RelatedItems from "metabase/components/RelatedItems";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
class EntityPage extends Component {
render() {
@@ -34,7 +34,7 @@ class EntityPage extends Component {
<div key="entity">
<Box
className="border-bottom hover-parent hover--visibility relative"
- style={{ backgroundColor: colors["bg-white"], height: "65vh" }}
+ style={{ backgroundColor: color("bg-white"), height: "65vh" }}
>
<Box className="hover-child absolute top right">
{!loading && (
@@ -68,7 +68,7 @@ class EntityPage extends Component {
p={2}
mt={4}
style={{
- border: `1px solid ${colors["border"]}`,
+ border: `1px solid ${color("border")}`,
borderRadius: 6,
}}
>
diff --git a/frontend/src/metabase/components/ExplorePane.jsx b/frontend/src/metabase/components/ExplorePane.jsx
index 092e8f825e2..42a0eceb33e 100644
--- a/frontend/src/metabase/components/ExplorePane.jsx
+++ b/frontend/src/metabase/components/ExplorePane.jsx
@@ -9,7 +9,7 @@ import Select, { Option } from "metabase/components/Select";
import { Grid, GridItem } from "metabase/components/Grid";
import Card from "metabase/components/Card";
import { Flex } from "grid-styled";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { t } from "ttag";
import _ from "underscore";
@@ -162,7 +162,7 @@ export const ExploreOption = ({ option }: { option: Candidate }) => (
<Flex
align="center"
justify="center"
- bg={colors["accent4"]}
+ bg={color("accent4")}
w="42px"
style={{ borderRadius: 6, height: 42 }}
mr={1}
diff --git a/frontend/src/metabase/components/Header.jsx b/frontend/src/metabase/components/Header.jsx
index 76d3f9eca9f..4b5f4384964 100644
--- a/frontend/src/metabase/components/Header.jsx
+++ b/frontend/src/metabase/components/Header.jsx
@@ -2,10 +2,10 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import CollectionBadge from "metabase/questions/components/CollectionBadge";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
-import HeaderModal from "metabase/components/HeaderModal.jsx";
-import TitleAndDescription from "metabase/components/TitleAndDescription.jsx";
-import EditBar from "metabase/components/EditBar.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
+import HeaderModal from "metabase/components/HeaderModal";
+import TitleAndDescription from "metabase/components/TitleAndDescription";
+import EditBar from "metabase/components/EditBar";
import { t } from "ttag";
import { getScrollY } from "metabase/lib/dom";
diff --git a/frontend/src/metabase/components/HistoryModal.jsx b/frontend/src/metabase/components/HistoryModal.jsx
index c6085581d92..93b42d40d83 100644
--- a/frontend/src/metabase/components/HistoryModal.jsx
+++ b/frontend/src/metabase/components/HistoryModal.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import ActionButton from "metabase/components/ActionButton.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ActionButton from "metabase/components/ActionButton";
+import ModalContent from "metabase/components/ModalContent";
import moment from "moment";
diff --git a/frontend/src/metabase/components/Icon.jsx b/frontend/src/metabase/components/Icon.jsx
index 454c42ebff4..2d9e3aa3be2 100644
--- a/frontend/src/metabase/components/Icon.jsx
+++ b/frontend/src/metabase/components/Icon.jsx
@@ -5,7 +5,7 @@ import RetinaImage from "react-retina-image";
import styled from "styled-components";
import { color, space, hover } from "styled-system";
import cx from "classnames";
-import colors, { darken } from "metabase/lib/colors";
+import { color as c, darken } from "metabase/lib/colors";
import { loadIcon } from "metabase/icon_paths";
import { stripLayoutProps } from "metabase/lib/utils";
@@ -21,7 +21,7 @@ export const IconWrapper = styled("div")`
height: 40px;
border-radius: 99px;
cursor: pointer;
- color: ${props => (props.open ? colors["brand"] : "inherit")};
+ color: ${props => (props.open ? c("brand") : "inherit")};
// special cases for certain icons
// Icon-share has a taller viewvbox than most so to optically center
// the icon we need to translate it upwards
@@ -33,7 +33,7 @@ export const IconWrapper = styled("div")`
IconWrapper.defaultProps = {
hover: {
- backgroundColor: darken(colors["brand"]),
+ backgroundColor: darken(c("brand")),
color: "white",
},
};
diff --git a/frontend/src/metabase/components/IconWrapper.jsx b/frontend/src/metabase/components/IconWrapper.jsx
index 5deb01190c3..f8d9b11bc59 100644
--- a/frontend/src/metabase/components/IconWrapper.jsx
+++ b/frontend/src/metabase/components/IconWrapper.jsx
@@ -1,8 +1,8 @@
import { Flex } from "grid-styled";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const IconWrapper = Flex.extend`
- background: ${colors["bg-medium"]};
+ background: ${color("bg-medium")};
border-radius: 6px;
`;
diff --git a/frontend/src/metabase/components/ItemTypeFilterBar.jsx b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
index 8c03b7fe5f1..96c64f5b5de 100644
--- a/frontend/src/metabase/components/ItemTypeFilterBar.jsx
+++ b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
@@ -6,7 +6,7 @@ import { withRouter } from "react-router";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export const FILTERS = [
{
@@ -42,7 +42,7 @@ const ItemTypeFilterBar = props => {
isActive = true;
}
- const color = isActive ? colors.brand : "inherit";
+ const linkColor = isActive ? color("brand") : "inherit";
return (
<Link
@@ -50,8 +50,8 @@ const ItemTypeFilterBar = props => {
pathname: location.pathname,
query: { ...location.query, type: f.filter },
}}
- color={color}
- hover={{ color: colors.brand }}
+ color={linkColor}
+ hover={{ color: color("brand") }}
className="flex-full flex align-center justify-center sm-block text-brand-hover text-medium"
mr={[0, 2]}
key={f.filter}
@@ -59,7 +59,7 @@ const ItemTypeFilterBar = props => {
data-metabase-event={`${analyticsContext};Item Filter;${f.name}`}
style={{
borderBottom: `2px solid ${
- isActive ? colors.brand : "transparent"
+ isActive ? color("brand") : "transparent"
}`,
}}
>
@@ -67,7 +67,7 @@ const ItemTypeFilterBar = props => {
<h5
className="text-uppercase hide sm-show"
style={{
- color: isActive ? colors.brand : "inherit",
+ color: isActive ? color("brand") : "inherit",
fontWeight: 900,
}}
>
diff --git a/frontend/src/metabase/components/LabelIcon.jsx b/frontend/src/metabase/components/LabelIcon.jsx
index a6a145c6094..e5b0f5eefba 100644
--- a/frontend/src/metabase/components/LabelIcon.jsx
+++ b/frontend/src/metabase/components/LabelIcon.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
import S from "./LabelIcon.css";
-import Icon from "./Icon.jsx";
+import Icon from "./Icon";
import cx from "classnames";
const LabelIcon = ({ icon, size = 18, className, style }) =>
diff --git a/frontend/src/metabase/components/ListItem.jsx b/frontend/src/metabase/components/ListItem.jsx
index bbd0c1f20f9..b0fd19885a5 100644
--- a/frontend/src/metabase/components/ListItem.jsx
+++ b/frontend/src/metabase/components/ListItem.jsx
@@ -4,8 +4,8 @@ import PropTypes from "prop-types";
import { Link } from "react-router";
import S from "./List.css";
import { t } from "ttag";
-import Icon from "./Icon.jsx";
-import Ellipsified from "./Ellipsified.jsx";
+import Icon from "./Icon";
+import Ellipsified from "./Ellipsified";
import cx from "classnames";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
index b2f90f8dfa9..af08de46963 100644
--- a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
+++ b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
import { t } from "ttag";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/Modal.jsx b/frontend/src/metabase/components/Modal.jsx
index a024d83ce86..b5532589fb5 100644
--- a/frontend/src/metabase/components/Modal.jsx
+++ b/frontend/src/metabase/components/Modal.jsx
@@ -8,7 +8,7 @@ import { getScrollX, getScrollY } from "metabase/lib/dom";
import { CSSTransitionGroup } from "react-transition-group";
import { Motion, spring } from "react-motion";
-import OnClickOutsideWrapper from "./OnClickOutsideWrapper.jsx";
+import OnClickOutsideWrapper from "./OnClickOutsideWrapper";
import ModalContent from "./ModalContent";
import _ from "underscore";
diff --git a/frontend/src/metabase/components/ModalContent.jsx b/frontend/src/metabase/components/ModalContent.jsx
index ecefdbd1b25..a44c955f080 100644
--- a/frontend/src/metabase/components/ModalContent.jsx
+++ b/frontend/src/metabase/components/ModalContent.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
export default class ModalContent extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/components/ModalWithTrigger.jsx b/frontend/src/metabase/components/ModalWithTrigger.jsx
index fd89cf9df6e..0f60abb7946 100644
--- a/frontend/src/metabase/components/ModalWithTrigger.jsx
+++ b/frontend/src/metabase/components/ModalWithTrigger.jsx
@@ -1,4 +1,4 @@
-import Triggerable from "./Triggerable.jsx";
-import Modal from "./Modal.jsx";
+import Triggerable from "./Triggerable";
+import Modal from "./Modal";
export default Triggerable(Modal);
diff --git a/frontend/src/metabase/components/NewsletterForm.jsx b/frontend/src/metabase/components/NewsletterForm.jsx
index e8864ec4bfa..5a9fce98eaa 100644
--- a/frontend/src/metabase/components/NewsletterForm.jsx
+++ b/frontend/src/metabase/components/NewsletterForm.jsx
@@ -3,8 +3,8 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
-import colors from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+import { color } from "metabase/lib/colors";
export default class NewsletterForm extends Component {
constructor(props, context) {
@@ -19,7 +19,7 @@ export default class NewsletterForm extends Component {
input: {
fontSize: "1.1rem",
- color: colors["text-dark"],
+ color: color("text-dark"),
width: "350px",
},
@@ -75,7 +75,7 @@ export default class NewsletterForm extends Component {
<div className="MB-Newsletter sm-float-right">
<div>
<div
- style={{ color: colors["text-medium"] }}
+ style={{ color: color("text-medium") }}
className="text-medium h3 pb3"
>
{t`Get infrequent emails about new releases and feature updates.`}
diff --git a/frontend/src/metabase/components/NumericInput.jsx b/frontend/src/metabase/components/NumericInput.jsx
index d46ce4df601..87d3ce292dd 100644
--- a/frontend/src/metabase/components/NumericInput.jsx
+++ b/frontend/src/metabase/components/NumericInput.jsx
@@ -2,7 +2,7 @@
import React from "react";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
type Props = {
value: ?(number | string),
diff --git a/frontend/src/metabase/components/PasswordReveal.jsx b/frontend/src/metabase/components/PasswordReveal.jsx
index 7bcb141a226..2a74e4c4f93 100644
--- a/frontend/src/metabase/components/PasswordReveal.jsx
+++ b/frontend/src/metabase/components/PasswordReveal.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import CopyButton from "metabase/components/CopyButton";
import { t } from "ttag";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
type State = {
visible: boolean,
@@ -16,7 +16,7 @@ const styles = {
input: {
fontSize: "1.2rem",
letterSpacing: "2",
- color: colors["text-dark"],
+ color: color("text-dark"),
outline: "none",
},
};
diff --git a/frontend/src/metabase/components/PopoverWithTrigger.jsx b/frontend/src/metabase/components/PopoverWithTrigger.jsx
index 8385d166964..3cc78915e5a 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger.jsx
+++ b/frontend/src/metabase/components/PopoverWithTrigger.jsx
@@ -1,4 +1,4 @@
-import Triggerable from "./Triggerable.jsx";
-import Popover from "./Popover.jsx";
+import Triggerable from "./Triggerable";
+import Popover from "./Popover";
export default Triggerable(Popover);
diff --git a/frontend/src/metabase/components/ProgressBar.jsx b/frontend/src/metabase/components/ProgressBar.jsx
index 3a86939221f..0cc9694d364 100644
--- a/frontend/src/metabase/components/ProgressBar.jsx
+++ b/frontend/src/metabase/components/ProgressBar.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import styled from "styled-components";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
type Props = {
percentage: number,
@@ -36,7 +36,7 @@ const Progress = styled.div`
left: 0;
width: ${props => props.width / 4}%;
height: 100%;
- background-color: ${colors["bg-black"]};
+ background-color: ${color("bg-black")};
animation: ${props =>
props.animated ? "progress-bar 1.5s linear infinite" : "none"};
},
@@ -47,7 +47,7 @@ export default class ProgressBar extends Component {
static defaultProps = {
animated: false,
- color: colors["brand"],
+ color: color("brand"),
height: 10,
};
diff --git a/frontend/src/metabase/components/QueryButton.jsx b/frontend/src/metabase/components/QueryButton.jsx
index 89320373a9b..d3f503129d0 100644
--- a/frontend/src/metabase/components/QueryButton.jsx
+++ b/frontend/src/metabase/components/QueryButton.jsx
@@ -6,7 +6,7 @@ import cx from "classnames";
import S from "./QueryButton.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const QueryButton = ({ className, text, icon, iconClass, onClick, link }) => (
<div className={className}>
diff --git a/frontend/src/metabase/components/QuestionSavedModal.jsx b/frontend/src/metabase/components/QuestionSavedModal.jsx
index 2ea5d8b1ed9..901f08d7ccd 100644
--- a/frontend/src/metabase/components/QuestionSavedModal.jsx
+++ b/frontend/src/metabase/components/QuestionSavedModal.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
import { t } from "ttag";
export default class QuestionSavedModal extends Component {
diff --git a/frontend/src/metabase/components/SaveStatus.jsx b/frontend/src/metabase/components/SaveStatus.jsx
index 91fc265b9b4..94701f4d981 100644
--- a/frontend/src/metabase/components/SaveStatus.jsx
+++ b/frontend/src/metabase/components/SaveStatus.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
-import Icon from "metabase/components/Icon.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import Icon from "metabase/components/Icon";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
import { t } from "ttag";
import _ from "underscore";
diff --git a/frontend/src/metabase/components/SchedulePicker.jsx b/frontend/src/metabase/components/SchedulePicker.jsx
index d9e0ab3257f..b6edf37d4ce 100644
--- a/frontend/src/metabase/components/SchedulePicker.jsx
+++ b/frontend/src/metabase/components/SchedulePicker.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Select from "metabase/components/Select.jsx";
+import Select from "metabase/components/Select";
import Settings from "metabase/lib/settings";
import { capitalize } from "metabase/lib/formatting";
diff --git a/frontend/src/metabase/components/Select.jsx b/frontend/src/metabase/components/Select.jsx
index 6cd29e5a1df..248f1acb155 100644
--- a/frontend/src/metabase/components/Select.jsx
+++ b/frontend/src/metabase/components/Select.jsx
@@ -5,9 +5,9 @@ import PropTypes from "prop-types";
import { List } from "react-virtualized";
import "react-virtualized/styles.css";
import { t } from "ttag";
-import ColumnarSelector from "metabase/components/ColumnarSelector.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
+import ColumnarSelector from "metabase/components/ColumnarSelector";
+import Icon from "metabase/components/Icon";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import SelectButton from "./SelectButton";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/SelectButton.jsx b/frontend/src/metabase/components/SelectButton.jsx
index 20dd188605b..4cbe3439370 100644
--- a/frontend/src/metabase/components/SelectButton.jsx
+++ b/frontend/src/metabase/components/SelectButton.jsx
@@ -2,7 +2,7 @@
import React from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/SidebarItem.jsx b/frontend/src/metabase/components/SidebarItem.jsx
index ff77101a75e..fb368483938 100644
--- a/frontend/src/metabase/components/SidebarItem.jsx
+++ b/frontend/src/metabase/components/SidebarItem.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
import { Link } from "react-router";
import S from "./Sidebar.css";
-import LabelIcon from "./LabelIcon.jsx";
+import LabelIcon from "./LabelIcon";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/components/StackedCheckBox.jsx b/frontend/src/metabase/components/StackedCheckBox.jsx
index cb5b3444802..a227b5dc96d 100644
--- a/frontend/src/metabase/components/StackedCheckBox.jsx
+++ b/frontend/src/metabase/components/StackedCheckBox.jsx
@@ -1,7 +1,7 @@
import React from "react";
import cx from "classnames";
-import CheckBox from "metabase/components/CheckBox.jsx";
+import CheckBox from "metabase/components/CheckBox";
const OFFSET = 4;
diff --git a/frontend/src/metabase/components/StepIndicators.jsx b/frontend/src/metabase/components/StepIndicators.jsx
index f705ef5886e..74c4dad7cba 100644
--- a/frontend/src/metabase/components/StepIndicators.jsx
+++ b/frontend/src/metabase/components/StepIndicators.jsx
@@ -1,7 +1,7 @@
/* @flow */
import React from "react";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
type Props = {
activeDotColor?: string,
@@ -12,7 +12,7 @@ type Props = {
};
const StepIndicators = ({
- activeDotColor = colors["brand"],
+ activeDotColor = color("brand"),
currentStep = 0,
dotSize = 8,
goToStep,
@@ -30,7 +30,7 @@ const StepIndicators = ({
marginLeft: 2,
marginRight: 2,
backgroundColor:
- index + 1 === currentStep ? activeDotColor : colors["text-light"],
+ index + 1 === currentStep ? activeDotColor : color("text-light"),
transition: "background 600ms ease-in",
}}
key={index}
diff --git a/frontend/src/metabase/components/Text.jsx b/frontend/src/metabase/components/Text.jsx
index 6bc72e697ad..c8089fd7723 100644
--- a/frontend/src/metabase/components/Text.jsx
+++ b/frontend/src/metabase/components/Text.jsx
@@ -1,10 +1,10 @@
import styled from "styled-components";
import { space } from "system-components";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const Text = styled.p`
${space};
- color: ${props => colors[`text-${props.color}`]};
+ color: ${props => color(`text-${props.color}`)};
`;
Text.defaultProps = {
diff --git a/frontend/src/metabase/components/TitleAndDescription.jsx b/frontend/src/metabase/components/TitleAndDescription.jsx
index 28d86f33a38..2c16183e3e0 100644
--- a/frontend/src/metabase/components/TitleAndDescription.jsx
+++ b/frontend/src/metabase/components/TitleAndDescription.jsx
@@ -3,8 +3,8 @@ import React from "react";
import cx from "classnames";
import pure from "recompose/pure";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
type Attributes = {
title: string,
diff --git a/frontend/src/metabase/components/Tooltip.jsx b/frontend/src/metabase/components/Tooltip.jsx
index 8d48042547b..cdb63bcdfc3 100644
--- a/frontend/src/metabase/components/Tooltip.jsx
+++ b/frontend/src/metabase/components/Tooltip.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
-import TooltipPopover from "./TooltipPopover.jsx";
+import TooltipPopover from "./TooltipPopover";
// TOOLTIP_STACK and related functions are to ensure only the most recent tooltip is visible
diff --git a/frontend/src/metabase/components/TooltipPopover.jsx b/frontend/src/metabase/components/TooltipPopover.jsx
index a437d5f1eb1..9d0833c701d 100644
--- a/frontend/src/metabase/components/TooltipPopover.jsx
+++ b/frontend/src/metabase/components/TooltipPopover.jsx
@@ -2,7 +2,7 @@ import React from "react";
import cx from "classnames";
import pure from "recompose/pure";
-import Popover from "./Popover.jsx";
+import Popover from "./Popover";
// if the tooltip is passed a long description we'll want to conditionally
// format it to make it easier to read.
diff --git a/frontend/src/metabase/components/Triggerable.jsx b/frontend/src/metabase/components/Triggerable.jsx
index 41843dcc453..2103bbb588a 100644
--- a/frontend/src/metabase/components/Triggerable.jsx
+++ b/frontend/src/metabase/components/Triggerable.jsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
import { isObscured } from "metabase/lib/dom";
-import Tooltip from "./Tooltip.jsx";
+import Tooltip from "./Tooltip";
import cx from "classnames";
diff --git a/frontend/src/metabase/components/UserAvatar.jsx b/frontend/src/metabase/components/UserAvatar.jsx
index 90641f39ddf..f0ac0ecaa3c 100644
--- a/frontend/src/metabase/components/UserAvatar.jsx
+++ b/frontend/src/metabase/components/UserAvatar.jsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
import { Flex } from "grid-styled";
import { height } from "styled-system";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const Avatar = styled(Flex).attrs({
align: "center",
@@ -20,7 +20,7 @@ const Avatar = styled(Flex).attrs({
`;
Avatar.defaultProps = {
- bg: colors["brand"],
+ bg: color("brand"),
color: "white",
size: ["3em"],
};
diff --git a/frontend/src/metabase/components/icons/FullscreenIcon.jsx b/frontend/src/metabase/components/icons/FullscreenIcon.jsx
index 38e8eb9005c..6a5c28d8b2e 100644
--- a/frontend/src/metabase/components/icons/FullscreenIcon.jsx
+++ b/frontend/src/metabase/components/icons/FullscreenIcon.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const FullscreenIcon = ({ isFullscreen, ...props }) => (
<Icon name={isFullscreen ? "contract" : "expand"} {...props} />
diff --git a/frontend/src/metabase/components/icons/NightModeIcon.jsx b/frontend/src/metabase/components/icons/NightModeIcon.jsx
index b1ffbbb840d..b75a0381bff 100644
--- a/frontend/src/metabase/components/icons/NightModeIcon.jsx
+++ b/frontend/src/metabase/components/icons/NightModeIcon.jsx
@@ -2,7 +2,7 @@
import React from "react";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
type Props = {
// ...IconProps,
diff --git a/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx b/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
index d0d38e07bcf..b343455b445 100644
--- a/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
+++ b/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
@@ -6,7 +6,7 @@ import { Flex } from "grid-styled";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
import DashboardPicker from "metabase/containers/DashboardPicker";
import * as Urls from "metabase/lib/urls";
diff --git a/frontend/src/metabase/containers/ItemPicker.jsx b/frontend/src/metabase/containers/ItemPicker.jsx
index 199715105f0..b394d791ed2 100644
--- a/frontend/src/metabase/containers/ItemPicker.jsx
+++ b/frontend/src/metabase/containers/ItemPicker.jsx
@@ -7,7 +7,7 @@ import Icon from "metabase/components/Icon";
import Breadcrumbs from "metabase/components/Breadcrumbs";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { connect } from "react-redux";
@@ -18,7 +18,7 @@ import EntityListLoader, {
import Collections from "metabase/entities/collections";
-const COLLECTION_ICON_COLOR = colors["text-light"];
+const COLLECTION_ICON_COLOR = color("text-light");
const isRoot = collection => collection.id === "root" || collection.id == null;
diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
index a0bed11f3dc..a4faa099787 100644
--- a/frontend/src/metabase/containers/Overworld.jsx
+++ b/frontend/src/metabase/containers/Overworld.jsx
@@ -8,7 +8,7 @@ import { createSelector } from "reselect";
import CollectionItemsLoader from "metabase/containers/CollectionItemsLoader";
import CandidateListLoader from "metabase/containers/CandidateListLoader";
import ExplorePane from "metabase/components/ExplorePane";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Tooltip from "metabase/components/Tooltip";
import MetabotLogo from "metabase/components/MetabotLogo";
import CollectionList from "metabase/components/CollectionList";
@@ -20,7 +20,7 @@ import Subhead from "metabase/components/Subhead";
import RetinaImage from "react-retina-image";
import * as Urls from "metabase/lib/urls";
-import colors, { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Greeting from "metabase/lib/greeting";
import Database from "metabase/entities/databases";
@@ -138,12 +138,12 @@ class Overworld extends React.Component {
pin.model
}`}
to={Urls.dashboard(pin.id)}
- hover={{ color: normal.blue }}
+ hover={{ color: color("brand") }}
>
<Card hoverable p={3}>
<Icon
name="dashboard"
- color={normal.blue}
+ color={color("brand")}
mb={2}
size={28}
/>
@@ -163,7 +163,7 @@ class Overworld extends React.Component {
<Box px={PAGE_PADDING} my={3}>
<SectionHeading>{ROOT_COLLECTION.name}</SectionHeading>
- <Box p={[1, 2]} mt={2} bg={colors["bg-medium"]}>
+ <Box p={[1, 2]} mt={2} bg={color("bg-medium")}>
{this.props.collections.filter(
c => c.id !== user.personal_collection_id,
).length > 0 ? (
@@ -193,11 +193,11 @@ class Overworld extends React.Component {
)}
<Link
to="/collection/root"
- color={normal.grey2}
+ color={color("text-medium")}
className="text-brand-hover"
data-metabase-event={`Homepage;Browse Items Clicked;`}
>
- <Flex color={colors["brand"]} p={2} my={1} align="center">
+ <Flex color={color("brand")} p={2} my={1} align="center">
<Box ml="auto" mr="auto">
<Flex align="center">
<h4>{t`Browse all items`}</h4>
@@ -223,19 +223,19 @@ class Overworld extends React.Component {
<GridItem w={[1, 1 / 3]} key={database.id}>
<Link
to={`browse/${database.id}`}
- hover={{ color: normal.blue }}
+ hover={{ color: color("brand") }}
data-metabase-event={`Homepage;Browse DB Clicked; DB Type ${
database.engine
}`}
>
<Box
p={3}
- bg={colors["bg-medium"]}
+ bg={color("bg-medium")}
className="hover-parent hover--visibility"
>
<Icon
name="database"
- color={normal.purple}
+ color={color("database")}
mb={3}
size={28}
/>
@@ -251,7 +251,7 @@ class Overworld extends React.Component {
>
<Icon
name="reference"
- color={normal.grey1}
+ color={color("text-light")}
/>
</Link>
</Tooltip>
@@ -301,13 +301,13 @@ export class AdminPinMessage extends React.Component {
<SectionHeading>{t`Start here`}</SectionHeading>
<Flex
- bg={colors["bg-medium"]}
+ bg={color("bg-medium")}
p={2}
align="center"
style={{ borderRadius: 6 }}
className="hover-parent hover--visibility"
>
- <Icon name="dashboard" color={colors["brand"]} size={32} mr={1} />
+ <Icon name="dashboard" color={color("brand")} size={32} mr={1} />
<Box ml={1}>
<h3>{t`Your team's most important dashboards go here`}</h3>
<p className="m0 mt1 text-medium text-bold">{jt`Pin dashboards in ${link} to have them appear in this space for everyone`}</p>
@@ -328,7 +328,7 @@ const SectionHeading = ({ children }) => (
<Box mb={1}>
<h5
className="text-uppercase"
- style={{ color: colors["text-medium"], fontWeight: 900 }}
+ style={{ color: color("text-medium"), fontWeight: 900 }}
>
{children}
</h5>
diff --git a/frontend/src/metabase/containers/SaveQuestionModal.jsx b/frontend/src/metabase/containers/SaveQuestionModal.jsx
index 274b8f1cdaf..b16d17bc115 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal.jsx
+++ b/frontend/src/metabase/containers/SaveQuestionModal.jsx
@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import { CSSTransitionGroup } from "react-transition-group";
-import FormField from "metabase/components/form/FormField.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
-import Radio from "metabase/components/Radio.jsx";
+import FormField from "metabase/components/form/FormField";
+import ModalContent from "metabase/components/ModalContent";
+import Radio from "metabase/components/Radio";
import Button from "metabase/components/Button";
import CollectionSelect from "metabase/containers/CollectionSelect";
diff --git a/frontend/src/metabase/containers/UndoListing.jsx b/frontend/src/metabase/containers/UndoListing.jsx
index 3f5f4c1e81a..4a296a2f4cc 100644
--- a/frontend/src/metabase/containers/UndoListing.jsx
+++ b/frontend/src/metabase/containers/UndoListing.jsx
@@ -8,7 +8,7 @@ import { Flex } from "grid-styled";
import { t } from "ttag";
import { capitalize, inflect } from "metabase/lib/formatting";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { dismissUndo, performUndo } from "metabase/redux/undo";
import { getUndos } from "metabase/selectors/undo";
@@ -84,8 +84,8 @@ export default class UndoListing extends Component {
)}
<Icon
ml={1}
- color={normal.grey1}
- hover={{ color: normal.grey2 }}
+ color={color("text-light")}
+ hover={{ color: color("text-medium") }}
name="close"
onClick={() => dismissUndo(undo.id)}
/>
diff --git a/frontend/src/metabase/containers/UserCollectionList.jsx b/frontend/src/metabase/containers/UserCollectionList.jsx
index 2048378af9b..c4baf25589a 100644
--- a/frontend/src/metabase/containers/UserCollectionList.jsx
+++ b/frontend/src/metabase/containers/UserCollectionList.jsx
@@ -2,7 +2,7 @@ import React from "react";
import { Box, Flex } from "grid-styled";
import * as Urls from "metabase/lib/urls";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Card from "metabase/components/Card";
import Icon from "metabase/components/Icon";
@@ -45,7 +45,7 @@ const UserCollectionList = () => (
<Icon
name="person"
mr={1}
- color={colors["text-medium"]}
+ color={color("text-medium")}
size={18}
/>
<h3>{user.common_name}</h3>
diff --git a/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx b/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
index f836280d757..06477a1ca35 100644
--- a/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
+++ b/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
@@ -2,14 +2,14 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import Visualization from "metabase/visualizations/components/Visualization.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import CheckBox from "metabase/components/CheckBox.jsx";
+import Visualization from "metabase/visualizations/components/Visualization";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
+import CheckBox from "metabase/components/CheckBox";
import MetabaseAnalytics from "metabase/lib/analytics";
import * as Q_DEPRECATED from "metabase/lib/query";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { getVisualizationRaw } from "metabase/visualizations";
@@ -263,7 +263,7 @@ export default class AddSeriesModal extends Component {
{this.state.state && (
<div
className="spred flex layout-centered"
- style={{ backgroundColor: colors["bg-white"] }}
+ style={{ backgroundColor: color("bg-white") }}
>
{this.state.state === "loading" ? (
<div className="h3 rounded bordered p3 bg-white shadowed">
@@ -294,13 +294,13 @@ export default class AddSeriesModal extends Component {
className="border-left flex flex-column"
style={{
width: 370,
- backgroundColor: colors["bg-light"],
- borderColor: colors["border"],
+ backgroundColor: color("bg-light"),
+ borderColor: color("border"),
}}
>
<div
className="flex-no-shrink border-bottom flex flex-row align-center"
- style={{ borderColor: colors["border"] }}
+ style={{ borderColor: color("border") }}
>
<Icon className="ml2" name="search" size={16} />
<input
diff --git a/frontend/src/metabase/dashboard/components/AddToDashSelectQuestionModal.jsx b/frontend/src/metabase/dashboard/components/AddToDashSelectQuestionModal.jsx
index 818a4c8371e..3e378558c1d 100644
--- a/frontend/src/metabase/dashboard/components/AddToDashSelectQuestionModal.jsx
+++ b/frontend/src/metabase/dashboard/components/AddToDashSelectQuestionModal.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import MetabaseAnalytics from "metabase/lib/analytics";
-import AddToDashboard from "metabase/questions/containers/AddToDashboard.jsx";
+import AddToDashboard from "metabase/questions/containers/AddToDashboard";
export default class AddToDashSelectQuestionModal extends Component {
constructor(props, context) {
diff --git a/frontend/src/metabase/dashboard/components/DashCard.jsx b/frontend/src/metabase/dashboard/components/DashCard.jsx
index aab57cdc8c6..33bbe4cdd8b 100644
--- a/frontend/src/metabase/dashboard/components/DashCard.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCard.jsx
@@ -6,15 +6,15 @@ import visualizations, { getVisualizationRaw } from "metabase/visualizations";
import Visualization, {
ERROR_MESSAGE_GENERIC,
ERROR_MESSAGE_PERMISSION,
-} from "metabase/visualizations/components/Visualization.jsx";
+} from "metabase/visualizations/components/Visualization";
import QueryDownloadWidget from "metabase/query_builder/components/QueryDownloadWidget";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import { ChartSettingsWithState } from "metabase/visualizations/components/ChartSettings.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import { ChartSettingsWithState } from "metabase/visualizations/components/ChartSettings";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
-import DashCardParameterMapper from "./DashCardParameterMapper.jsx";
+import DashCardParameterMapper from "./DashCardParameterMapper";
import { IS_EMBED_PREVIEW } from "metabase/lib/embed";
diff --git a/frontend/src/metabase/dashboard/components/DashCardParameterMapper.jsx b/frontend/src/metabase/dashboard/components/DashCardParameterMapper.jsx
index e85ab03e284..87c8e53e012 100644
--- a/frontend/src/metabase/dashboard/components/DashCardParameterMapper.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCardParameterMapper.jsx
@@ -1,9 +1,9 @@
import React from "react";
import { t } from "ttag";
-import DashCardCardParameterMapper from "../containers/DashCardCardParameterMapper.jsx";
+import DashCardCardParameterMapper from "../containers/DashCardCardParameterMapper";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const DashCardParameterMapper = ({ dashcard }) => (
<div className="relative flex-full flex flex-column layout-centered">
@@ -11,8 +11,8 @@ const DashCardParameterMapper = ({ dashcard }) => (
<div
className="mx4 my1 p1 rounded"
style={{
- backgroundColor: colors["bg-light"],
- color: colors["text-medium"],
+ backgroundColor: color("bg-light"),
+ color: color("text-medium"),
marginTop: -10,
}}
>
diff --git a/frontend/src/metabase/dashboard/components/Dashboard.jsx b/frontend/src/metabase/dashboard/components/Dashboard.jsx
index ccf06356e7e..9b0d0accaa2 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard.jsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard.jsx
@@ -6,11 +6,11 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Box } from "grid-styled";
-import DashboardHeader from "../components/DashboardHeader.jsx";
-import DashboardGrid from "../components/DashboardGrid.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import DashboardHeader from "../components/DashboardHeader";
+import DashboardGrid from "../components/DashboardGrid";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import { t } from "ttag";
-import Parameters from "metabase/parameters/components/Parameters.jsx";
+import Parameters from "metabase/parameters/components/Parameters";
import EmptyState from "metabase/components/EmptyState";
import DashboardControls from "../hoc/DashboardControls";
diff --git a/frontend/src/metabase/dashboard/components/DashboardGrid.jsx b/frontend/src/metabase/dashboard/components/DashboardGrid.jsx
index 3acd7ba1700..355a6df2149 100644
--- a/frontend/src/metabase/dashboard/components/DashboardGrid.jsx
+++ b/frontend/src/metabase/dashboard/components/DashboardGrid.jsx
@@ -1,13 +1,13 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import GridLayout from "./grid/GridLayout.jsx";
-import DashCard from "./DashCard.jsx";
+import GridLayout from "./grid/GridLayout";
+import DashCard from "./DashCard";
-import Modal from "metabase/components/Modal.jsx";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
-import RemoveFromDashboardModal from "./RemoveFromDashboardModal.jsx";
-import AddSeriesModal from "./AddSeriesModal.jsx";
+import Modal from "metabase/components/Modal";
+import ExplicitSize from "metabase/components/ExplicitSize";
+import RemoveFromDashboardModal from "./RemoveFromDashboardModal";
+import AddSeriesModal from "./AddSeriesModal";
import { getVisualizationRaw } from "metabase/visualizations";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx b/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx
index 848652083b4..fa39b757bca 100644
--- a/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx
+++ b/frontend/src/metabase/dashboard/components/DashboardMoveModal.jsx
@@ -9,7 +9,7 @@ import Link from "metabase/components/Link";
import CollectionMoveModal from "metabase/containers/CollectionMoveModal";
import * as Urls from "metabase/lib/urls";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Dashboards from "metabase/entities/dashboards";
import { ROOT_COLLECTION } from "metabase/entities/collections";
@@ -55,7 +55,7 @@ const DashbordMoveToast = ({ collection }) => (
{jt`Dashboard moved to ${(
<Link
ml={1}
- color={normal.blue}
+ color={color("brand")}
to={Urls.collection(collection && collection.id)}
>
{collection ? collection.name : ROOT_COLLECTION.name}
diff --git a/frontend/src/metabase/dashboard/components/RefreshWidget.jsx b/frontend/src/metabase/dashboard/components/RefreshWidget.jsx
index 875ac2e66f8..a4aa03154bb 100644
--- a/frontend/src/metabase/dashboard/components/RefreshWidget.jsx
+++ b/frontend/src/metabase/dashboard/components/RefreshWidget.jsx
@@ -1,11 +1,11 @@
import React, { Component } from "react";
import styles from "./RefreshWidget.css";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import ClockIcon from "metabase/components/icons/ClockIcon.jsx";
-import CountdownIcon from "metabase/components/icons/CountdownIcon.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import Tooltip from "metabase/components/Tooltip";
+import Icon from "metabase/components/Icon";
+import ClockIcon from "metabase/components/icons/ClockIcon";
+import CountdownIcon from "metabase/components/icons/CountdownIcon";
import { t } from "ttag";
import cx from "classnames";
diff --git a/frontend/src/metabase/dashboard/components/grid/GridLayout.jsx b/frontend/src/metabase/dashboard/components/grid/GridLayout.jsx
index a7208e8e242..9db4e1ae42c 100644
--- a/frontend/src/metabase/dashboard/components/grid/GridLayout.jsx
+++ b/frontend/src/metabase/dashboard/components/grid/GridLayout.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
-import GridItem from "./GridItem.jsx";
+import GridItem from "./GridItem";
import _ from "underscore";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export default class GridLayout extends Component {
constructor(props, context) {
@@ -238,9 +238,9 @@ export default class GridLayout extends Component {
_(cols)
.times(
i =>
- `<rect stroke='${
- colors["border"]
- }' stroke-width='1' fill='none' x='${Math.round(
+ `<rect stroke='${color(
+ "border",
+ )}' stroke-width='1' fill='none' x='${Math.round(
margin / 2 + i * cellSize.width,
) + 1.5}' y='${margin / 2 + 1.5}' width='${Math.round(
cellSize.width - margin - 3,
diff --git a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
index 5eb13f59c07..9913e39ce9d 100644
--- a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
+++ b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
@@ -28,7 +28,7 @@ import * as Urls from "metabase/lib/urls";
import MetabaseAnalytics from "metabase/lib/analytics";
import * as Q from "metabase/lib/query/query";
import Dimension from "metabase-lib/lib/Dimension";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { dissoc } from "icepick";
@@ -247,7 +247,7 @@ const SuggestionsList = ({ suggestions, section }) => (
{suggestions[s].length > 0 &&
suggestions[s].map((item, itemIndex) => (
<Link
- hover={{ color: colors["brand"] }}
+ hover={{ color: color("brand") }}
key={itemIndex}
to={item.url}
className="block hover-parent hover--visibility"
@@ -258,14 +258,14 @@ const SuggestionsList = ({ suggestions, section }) => (
<Flex align="center">
<Icon
name={RELATED_CONTENT[s].icon}
- color={colors["accent4"]}
+ color={color("accent4")}
mr={1}
size={22}
/>
<h4 className="text-wrap">{item.title}</h4>
<Box ml="auto" className="hover-child">
<Tooltip tooltip={item.description}>
- <Icon name="question" color={colors["bg-dark"]} />
+ <Icon name="question" color={color("bg-dark")} />
</Tooltip>
</Box>
</Flex>
@@ -282,7 +282,7 @@ const SuggetsionSectionHeading = ({ children }) => (
style={{
fontWeight: 900,
textTransform: "uppercase",
- color: colors["text-medium"],
+ color: color("text-medium"),
}}
className="mb1"
>
diff --git a/frontend/src/metabase/dashboard/containers/DashCardCardParameterMapper.jsx b/frontend/src/metabase/dashboard/containers/DashCardCardParameterMapper.jsx
index a3024a655b7..0eaaf28880d 100644
--- a/frontend/src/metabase/dashboard/containers/DashCardCardParameterMapper.jsx
+++ b/frontend/src/metabase/dashboard/containers/DashCardCardParameterMapper.jsx
@@ -6,10 +6,10 @@ import { connect } from "react-redux";
import { t } from "ttag";
import S from "./DashCardCardParameterMapper.css";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import AccordionList from "metabase/components/AccordionList.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import Icon from "metabase/components/Icon";
+import AccordionList from "metabase/components/AccordionList";
+import Tooltip from "metabase/components/Tooltip";
import { fetchDatabaseMetadata } from "metabase/redux/metadata";
diff --git a/frontend/src/metabase/dashboard/containers/DashboardApp.jsx b/frontend/src/metabase/dashboard/containers/DashboardApp.jsx
index a42b978a6a9..452a52be515 100644
--- a/frontend/src/metabase/dashboard/containers/DashboardApp.jsx
+++ b/frontend/src/metabase/dashboard/containers/DashboardApp.jsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
import { push } from "react-router-redux";
import title from "metabase/hoc/Title";
-import Dashboard from "metabase/dashboard/components/Dashboard.jsx";
+import Dashboard from "metabase/dashboard/components/Dashboard";
import { fetchDatabaseMetadata } from "metabase/redux/metadata";
import { setErrorPage } from "metabase/redux/app";
diff --git a/frontend/src/metabase/entities/collections.js b/frontend/src/metabase/entities/collections.js
index ff40e74de34..b2d8cd3457c 100644
--- a/frontend/src/metabase/entities/collections.js
+++ b/frontend/src/metabase/entities/collections.js
@@ -2,7 +2,7 @@
import { createEntity, undo } from "metabase/lib/entities";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import * as Urls from "metabase/lib/urls";
import { CollectionSchema } from "metabase/schema";
@@ -86,7 +86,7 @@ const Collections = createEntity({
form: {
fields: (
values = {
- color: colors.brand,
+ color: color("brand"),
},
) => [
{
@@ -108,7 +108,7 @@ const Collections = createEntity({
name: "color",
title: t`Color`,
type: "hidden",
- initial: () => colors.brand,
+ initial: () => color("brand"),
validate: color => !color && t`Color is required`,
},
{
diff --git a/frontend/src/metabase/entities/dashboards.js b/frontend/src/metabase/entities/dashboards.js
index ad8d214ce35..0abb9e08c1c 100644
--- a/frontend/src/metabase/entities/dashboards.js
+++ b/frontend/src/metabase/entities/dashboards.js
@@ -9,7 +9,7 @@ import {
import { createEntity, undo } from "metabase/lib/entities";
import * as Urls from "metabase/lib/urls";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { assocIn } from "icepick";
import { t } from "ttag";
@@ -132,7 +132,7 @@ const Dashboards = createEntity({
getName: dashboard => dashboard && dashboard.name,
getUrl: dashboard => dashboard && Urls.dashboard(dashboard.id),
getIcon: dashboard => "dashboard",
- getColor: () => normal.blue,
+ getColor: () => color("dashboard"),
},
form: {
diff --git a/frontend/src/metabase/entities/metrics.js b/frontend/src/metabase/entities/metrics.js
index 3a35fcb5662..0dfd89c2cb1 100644
--- a/frontend/src/metabase/entities/metrics.js
+++ b/frontend/src/metabase/entities/metrics.js
@@ -1,7 +1,7 @@
import { createEntity } from "metabase/lib/entities";
import { MetricSchema } from "metabase/schema";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import * as Urls from "metabase/lib/urls";
const Metrics = createEntity({
@@ -26,7 +26,7 @@ const Metrics = createEntity({
getName: metric => metric && metric.name,
getUrl: metric =>
Urls.tableRowsQuery(metric.database_id, metric.table_id, metric.id),
- getColor: metric => colors["accent1"],
+ getColor: metric => color("accent1"),
getIcon: metric => "sum",
},
diff --git a/frontend/src/metabase/entities/pulses.js b/frontend/src/metabase/entities/pulses.js
index 0aebd4d7bb6..8845f407a6e 100644
--- a/frontend/src/metabase/entities/pulses.js
+++ b/frontend/src/metabase/entities/pulses.js
@@ -1,6 +1,6 @@
import { createEntity, undo } from "metabase/lib/entities";
import * as Urls from "metabase/lib/urls";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import {
canonicalCollectionId,
@@ -41,7 +41,7 @@ const Pulses = createEntity({
getName: pulse => pulse && pulse.name,
getUrl: pulse => pulse && Urls.pulse(pulse.id),
getIcon: pulse => "pulse",
- getColor: pulse => normal.yellow,
+ getColor: pulse => color("pulse"),
},
form: {
diff --git a/frontend/src/metabase/entities/questions.js b/frontend/src/metabase/entities/questions.js
index 962ed1a2498..351d979a30f 100644
--- a/frontend/src/metabase/entities/questions.js
+++ b/frontend/src/metabase/entities/questions.js
@@ -4,7 +4,7 @@ import { assocIn } from "icepick";
import { createEntity, undo } from "metabase/lib/entities";
import * as Urls from "metabase/lib/urls";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import {
canonicalCollectionId,
@@ -64,7 +64,7 @@ const Questions = createEntity({
objectSelectors: {
getName: question => question && question.name,
getUrl: question => question && Urls.question(question.id),
- getColor: () => colors["text-medium"],
+ getColor: () => color("text-medium"),
getIcon: question =>
(require("metabase/visualizations").default.get(question.display) || {})
.iconName || "beaker",
diff --git a/frontend/src/metabase/entities/segments.js b/frontend/src/metabase/entities/segments.js
index b5ea283c9c5..21fb5615ec0 100644
--- a/frontend/src/metabase/entities/segments.js
+++ b/frontend/src/metabase/entities/segments.js
@@ -3,7 +3,7 @@
import { createEntity } from "metabase/lib/entities";
import { SegmentSchema } from "metabase/schema";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import * as Urls from "metabase/lib/urls";
const Segments = createEntity({
@@ -33,7 +33,7 @@ const Segments = createEntity({
null,
segment.id,
),
- getColor: segment => colors["accent7"],
+ getColor: segment => color("accent7"),
getIcon: segment => "segment",
},
diff --git a/frontend/src/metabase/entities/tables.js b/frontend/src/metabase/entities/tables.js
index 1f19a26cf81..6417822dc13 100644
--- a/frontend/src/metabase/entities/tables.js
+++ b/frontend/src/metabase/entities/tables.js
@@ -9,7 +9,7 @@ import {
import _ from "underscore";
import * as Urls from "metabase/lib/urls";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { createSelector } from "reselect";
@@ -172,7 +172,7 @@ const Tables = createEntity({
getUrl: table =>
Urls.tableRowsQuery(table.database_id, table.table_id, null),
getIcon: table => "table",
- getColor: table => colors["accent2"],
+ getColor: table => color("accent2"),
},
selectors: {
diff --git a/frontend/src/metabase/home/components/Activity.jsx b/frontend/src/metabase/home/components/Activity.jsx
index 4aee6c711ee..50caa2feec8 100644
--- a/frontend/src/metabase/home/components/Activity.jsx
+++ b/frontend/src/metabase/home/components/Activity.jsx
@@ -4,11 +4,11 @@ import { Link } from "react-router";
import _ from "underscore";
import { t } from "ttag";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import ActivityItem from "./ActivityItem.jsx";
-import ActivityStory from "./ActivityStory.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import ActivityItem from "./ActivityItem";
+import ActivityStory from "./ActivityStory";
import * as Urls from "metabase/lib/urls";
@@ -18,12 +18,12 @@ export default class Activity extends Component {
this.state = { error: null, userColors: {} };
this.colorClasses = [
- colors["brand"],
- colors["accent1"],
- colors["accent2"],
- colors["accent3"],
- colors["accent4"],
- colors["accent5"],
+ color("brand"),
+ color("accent1"),
+ color("accent2"),
+ color("accent3"),
+ color("accent4"),
+ color("accent5"),
];
}
diff --git a/frontend/src/metabase/home/components/ActivityItem.jsx b/frontend/src/metabase/home/components/ActivityItem.jsx
index 3b00919ca02..bfee02ee4f9 100644
--- a/frontend/src/metabase/home/components/ActivityItem.jsx
+++ b/frontend/src/metabase/home/components/ActivityItem.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
-import colors from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
+import UserAvatar from "metabase/components/UserAvatar";
+import { color } from "metabase/lib/colors";
export default class ActivityItem extends Component {
static propTypes = {
@@ -21,7 +21,7 @@ export default class ActivityItem extends Component {
{item.user ? (
<UserAvatar user={item.user} bg={userColors} />
) : (
- <IconBorder style={{ color: colors["text-light"] }}>
+ <IconBorder style={{ color: color("text-light") }}>
<Icon name="sync" size={16} />
</IconBorder>
)}
diff --git a/frontend/src/metabase/home/components/ActivityStory.jsx b/frontend/src/metabase/home/components/ActivityStory.jsx
index a95cfa56c54..c4bd0824d72 100644
--- a/frontend/src/metabase/home/components/ActivityStory.jsx
+++ b/frontend/src/metabase/home/components/ActivityStory.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export default class ActivityStory extends Component {
constructor(props, context) {
@@ -9,7 +9,7 @@ export default class ActivityStory extends Component {
this.styles = {
borderWidth: "2px",
- borderColor: colors["border"],
+ borderColor: color("border"),
};
}
@@ -30,7 +30,7 @@ export default class ActivityStory extends Component {
style={{
borderWidth: "3px",
marginLeft: "22px",
- borderColor: colors["border"],
+ borderColor: color("border"),
}}
>
<div className="flex full ml4 bordered rounded p2" style={this.styles}>
diff --git a/frontend/src/metabase/home/components/NewUserOnboardingModal.jsx b/frontend/src/metabase/home/components/NewUserOnboardingModal.jsx
index d5d60a6b025..f92c84eae8a 100644
--- a/frontend/src/metabase/home/components/NewUserOnboardingModal.jsx
+++ b/frontend/src/metabase/home/components/NewUserOnboardingModal.jsx
@@ -4,7 +4,7 @@ import StepIndicators from "metabase/components/StepIndicators";
import RetinaImage from "react-retina-image";
import { t } from "ttag";
import MetabaseSettings from "metabase/lib/settings";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
type Props = {
onClose: () => void,
@@ -107,8 +107,8 @@ const OnboardingImages = ({ currentStep }, { currentStep: object }) => (
<div
style={{
position: "relative",
- backgroundColor: colors["bg-medium"],
- borderBottom: `1px solid ${colors["border"]}`,
+ backgroundColor: color("bg-medium"),
+ borderBottom: `1px solid ${color("border")}`,
height: 254,
paddingTop: "3em",
paddingBottom: "3em",
diff --git a/frontend/src/metabase/home/components/NextStep.jsx b/frontend/src/metabase/home/components/NextStep.jsx
index 4722b1a478c..9833661bcff 100644
--- a/frontend/src/metabase/home/components/NextStep.jsx
+++ b/frontend/src/metabase/home/components/NextStep.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
import { SetupApi } from "metabase/services";
-import SidebarSection from "./SidebarSection.jsx";
+import SidebarSection from "./SidebarSection";
export default class NextStep extends Component {
constructor(props, context) {
diff --git a/frontend/src/metabase/home/components/RecentViews.jsx b/frontend/src/metabase/home/components/RecentViews.jsx
index c829102f02b..0dbe3a12017 100644
--- a/frontend/src/metabase/home/components/RecentViews.jsx
+++ b/frontend/src/metabase/home/components/RecentViews.jsx
@@ -2,13 +2,13 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import Ellipsified from "metabase/components/Ellipsified";
import Link from "metabase/components/Link";
-import SidebarSection from "./SidebarSection.jsx";
+import SidebarSection from "./SidebarSection";
import * as Urls from "metabase/lib/urls";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export default class RecentViews extends Component {
static propTypes = {
@@ -49,7 +49,9 @@ export default class RecentViews extends Component {
size={18}
style={{
color:
- iconName === "dashboard" ? normal.purple : normal.blue,
+ iconName === "dashboard"
+ ? color("dashboard")
+ : color("brand"),
}}
/>
<Link
diff --git a/frontend/src/metabase/home/components/SidebarSection.jsx b/frontend/src/metabase/home/components/SidebarSection.jsx
index 64de827720c..76743b24e92 100644
--- a/frontend/src/metabase/home/components/SidebarSection.jsx
+++ b/frontend/src/metabase/home/components/SidebarSection.jsx
@@ -1,7 +1,7 @@
import React from "react";
-import Icon from "metabase/components/Icon.jsx";
-import colors from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+import { color } from "metabase/lib/colors";
const SidebarSection = ({ title, icon, extra, children }) => (
<div className="px2 pt1">
@@ -12,7 +12,7 @@ const SidebarSection = ({ title, icon, extra, children }) => (
</div>
<div
className="rounded bg-white"
- style={{ border: `1px solid ${colors["border"]}` }}
+ style={{ border: `1px solid ${color("border")}` }}
>
{children}
</div>
diff --git a/frontend/src/metabase/home/containers/SearchApp.jsx b/frontend/src/metabase/home/containers/SearchApp.jsx
index b12e483a765..29ced20aa52 100644
--- a/frontend/src/metabase/home/containers/SearchApp.jsx
+++ b/frontend/src/metabase/home/containers/SearchApp.jsx
@@ -15,7 +15,7 @@ import EntityItem from "metabase/components/EntityItem";
import Subhead from "metabase/components/Subhead";
import { FILTERS } from "metabase/components/ItemTypeFilterBar";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
const PAGE_PADDING = [1, 2, 4];
@@ -103,7 +103,7 @@ export default class SearchApp extends React.Component {
<Link
className="flex align-center"
mb={3}
- color={!location.query.type ? colors.brand : "inherit"}
+ color={!location.query.type ? color("brand") : "inherit"}
to={{
pathname: location.pathname,
query: { ...location.query, type: null },
@@ -120,8 +120,8 @@ export default class SearchApp extends React.Component {
}
const color = isActive
- ? colors.brand
- : colors["text-medium"];
+ ? color("brand")
+ : color("text-medium");
return (
<Link
@@ -158,7 +158,7 @@ const SearchResultSection = ({ title, items }) => (
case "segment":
case "metric":
extraInfo = (
- <Flex align="center" color={colors["text-medium"]}>
+ <Flex align="center" color={color("text-medium")}>
<Icon name="database" size={8} mr="4px" />
<span className="text-small text-bold" style={{ lineHeight: 1 }}>
<Database.Name id={item.database_id} />
@@ -171,7 +171,7 @@ const SearchResultSection = ({ title, items }) => (
default:
extraInfo = (
<div className="inline-block">
- <Flex align="center" color={colors["text-medium"]}>
+ <Flex align="center" color={color("text-medium")}>
<Icon name="all" size={10} mr="4px" />
<span
className="text-small text-bold"
diff --git a/frontend/src/metabase/lib/colors.js b/frontend/src/metabase/lib/colors.js
index 286375410f5..1db7276779b 100644
--- a/frontend/src/metabase/lib/colors.js
+++ b/frontend/src/metabase/lib/colors.js
@@ -52,6 +52,9 @@ export default colors;
export const aliases = {
summarize: "accent1",
filter: "accent7",
+ database: "accent2",
+ dashboard: "brand",
+ pulse: "accent4",
};
export const harmony = [];
diff --git a/frontend/src/metabase/lib/dataset.js b/frontend/src/metabase/lib/dataset.js
index 534caf2797e..c32dce705c1 100644
--- a/frontend/src/metabase/lib/dataset.js
+++ b/frontend/src/metabase/lib/dataset.js
@@ -80,9 +80,6 @@ export function fieldRefForColumnWithLegacyFallback(
/**
* Returns a MBQL field reference (FieldReference) for a given result dataset column
*
- * NOTE: this returns non-normalized ["fk->", 1, 2] style fk field references
- * which is unfortunately used in table.columns visualization_settings
- *
* @param {Column} column Dataset result column
* @param {?Column[]} columns Full array of columns, unfortunately needed to determine the aggregation index
* @return {?FieldReference} MBQL field reference
diff --git a/frontend/src/metabase/lib/formatting.js b/frontend/src/metabase/lib/formatting.js
index 9b30fa8b99a..b80ad1ff3b2 100644
--- a/frontend/src/metabase/lib/formatting.js
+++ b/frontend/src/metabase/lib/formatting.js
@@ -10,7 +10,7 @@ import { ngettext, msgid } from "ttag";
import Mustache from "mustache";
import ReactMarkdown from "react-markdown";
-import ExternalLink from "metabase/components/ExternalLink.jsx";
+import ExternalLink from "metabase/components/ExternalLink";
import {
isDate,
diff --git a/frontend/src/metabase/lib/query_time.js b/frontend/src/metabase/lib/query_time.js
index bb4fad139b2..3b99ff589d2 100644
--- a/frontend/src/metabase/lib/query_time.js
+++ b/frontend/src/metabase/lib/query_time.js
@@ -69,7 +69,7 @@ export function expandTimeIntervalFilter(filter) {
n = 1;
}
- field = ["datetime-field", field, "as", unit];
+ field = ["datetime-field", field, unit];
if (n < -1) {
return [
diff --git a/frontend/src/metabase/modes/components/actions/CountByTimeAction.jsx b/frontend/src/metabase/modes/components/actions/CountByTimeAction.jsx
index a71dfa7a591..4473ff01a0c 100644
--- a/frontend/src/metabase/modes/components/actions/CountByTimeAction.jsx
+++ b/frontend/src/metabase/modes/components/actions/CountByTimeAction.jsx
@@ -31,12 +31,7 @@ export default ({ question }: ClickActionProps): ClickAction[] => {
question: () =>
question
.summarize(["count"])
- .breakout([
- "datetime-field",
- ["field-id", dateField.id],
- "as",
- "day",
- ]),
+ .breakout(["datetime-field", ["field-id", dateField.id], "day"]),
},
];
};
diff --git a/frontend/src/metabase/modes/lib/actions.js b/frontend/src/metabase/modes/lib/actions.js
index 2614dd6de83..fd430ef3494 100644
--- a/frontend/src/metabase/modes/lib/actions.js
+++ b/frontend/src/metabase/modes/lib/actions.js
@@ -127,7 +127,7 @@ export const drillFilter = (card, value, column) => {
if (isDate(column)) {
filter = [
"=",
- ["datetime-field", getFieldRefFromColumn(column), "as", column.unit],
+ ["datetime-field", getFieldRefFromColumn(column), column.unit],
parseTimestamp(value, column.unit).format(),
];
} else {
@@ -293,12 +293,7 @@ export const updateDateTimeFilter = (card, column, start, end): CardObject => {
}
// update the breakout
- newCard = addOrUpdateBreakout(newCard, [
- "datetime-field",
- fieldRef,
- "as",
- unit,
- ]);
+ newCard = addOrUpdateBreakout(newCard, ["datetime-field", fieldRef, unit]);
// round to start of the original unit
start = start.startOf(column.unit);
@@ -311,14 +306,14 @@ export const updateDateTimeFilter = (card, column, start, end): CardObject => {
// is the start and end are the same (in whatever the original unit was) then just do an "="
return addOrUpdateFilter(newCard, [
"=",
- ["datetime-field", fieldRef, "as", column.unit],
+ ["datetime-field", fieldRef, column.unit],
start.format(),
]);
} else {
// otherwise do a between
return addOrUpdateFilter(newCard, [
"between",
- ["datetime-field", fieldRef, "as", column.unit],
+ ["datetime-field", fieldRef, column.unit],
start.format(),
end.format(),
]);
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index ab0509001e1..0898d9fca76 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -10,10 +10,9 @@ import { t } from "ttag";
import { Flex } from "grid-styled";
import styled from "styled-components";
import { space } from "styled-system";
-import color from "color";
import * as Urls from "metabase/lib/urls";
-import colors, { darken } from "metabase/lib/colors";
+import { color, darken, lighten } from "metabase/lib/colors";
import Icon, { IconWrapper } from "metabase/components/Icon";
import Link from "metabase/components/Link";
@@ -61,12 +60,8 @@ const AdminNavItem = ({ name, path, currentPath }) => (
</li>
);
-const DefaultSearchColor = color(colors.brand)
- .lighten(0.07)
- .string();
-const ActiveSearchColor = color(colors.brand)
- .lighten(0.1)
- .string();
+const DefaultSearchColor = lighten("brand", 0.07);
+const ActiveSearchColor = lighten("brand", 0.1);
const SearchWrapper = Flex.extend`
background-color: ${props =>
@@ -93,7 +88,7 @@ const SearchInput = styled.input`
outline: none;
}
&::placeholder {
- color: ${colors["text-white"]};
+ color: ${color("text-white")};
}
`;
@@ -316,7 +311,7 @@ export default class Navbar extends Component {
to={Urls.newQuestionFlow()}
p={1}
hover={{
- backgroundColor: darken(colors["brand"]),
+ backgroundColor: darken(color("brand")),
}}
className="flex align-center rounded transition-background"
data-metabase-event={`NavBar;New Question`}
@@ -333,7 +328,7 @@ export default class Navbar extends Component {
className="flex align-center rounded transition-background"
data-metabase-event={`NavBar;Data Browse`}
hover={{
- backgroundColor: darken(colors["brand"]),
+ backgroundColor: darken(color("brand")),
}}
>
<Icon name="table_spaced" size={14} />
diff --git a/frontend/src/metabase/new_query/components/NewQueryOption.jsx b/frontend/src/metabase/new_query/components/NewQueryOption.jsx
index 3ee6d8d9946..34565b3be57 100644
--- a/frontend/src/metabase/new_query/components/NewQueryOption.jsx
+++ b/frontend/src/metabase/new_query/components/NewQueryOption.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import cx from "classnames";
import { Link } from "react-router";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export default class NewQueryOption extends Component {
props: {
@@ -26,8 +26,8 @@ export default class NewQueryOption extends Component {
style={{
boxSizing: "border-box",
boxShadow: hover
- ? `0 3px 8px 0 ${colors["text-light"]}`
- : `0 1px 3px 0 ${colors["text-light"]}`,
+ ? `0 3px 8px 0 ${color("text-light")}`
+ : `0 1px 3px 0 ${color("text-light")}`,
height: 340,
}}
onMouseOver={() => this.setState({ hover: true })}
diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx b/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
index 2cb805d650a..b50cf23b87a 100644
--- a/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
+++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
@@ -5,16 +5,16 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import { t } from "ttag";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import DateSingleWidget from "./widgets/DateSingleWidget.jsx";
-import DateRangeWidget from "./widgets/DateRangeWidget.jsx";
-import DateRelativeWidget from "./widgets/DateRelativeWidget.jsx";
-import DateMonthYearWidget from "./widgets/DateMonthYearWidget.jsx";
-import DateQuarterYearWidget from "./widgets/DateQuarterYearWidget.jsx";
-import DateAllOptionsWidget from "./widgets/DateAllOptionsWidget.jsx";
-import CategoryWidget from "./widgets/CategoryWidget.jsx";
-import TextWidget from "./widgets/TextWidget.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import Icon from "metabase/components/Icon";
+import DateSingleWidget from "./widgets/DateSingleWidget";
+import DateRangeWidget from "./widgets/DateRangeWidget";
+import DateRelativeWidget from "./widgets/DateRelativeWidget";
+import DateMonthYearWidget from "./widgets/DateMonthYearWidget";
+import DateQuarterYearWidget from "./widgets/DateQuarterYearWidget";
+import DateAllOptionsWidget from "./widgets/DateAllOptionsWidget";
+import CategoryWidget from "./widgets/CategoryWidget";
+import TextWidget from "./widgets/TextWidget";
import ParameterFieldWidget from "./widgets/ParameterFieldWidget";
import { fetchField, fetchFieldValues } from "metabase/redux/metadata";
diff --git a/frontend/src/metabase/parameters/components/ParameterWidget.jsx b/frontend/src/metabase/parameters/components/ParameterWidget.jsx
index 69215f0f77e..3298b9cbd6f 100644
--- a/frontend/src/metabase/parameters/components/ParameterWidget.jsx
+++ b/frontend/src/metabase/parameters/components/ParameterWidget.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import ParameterValueWidget from "./ParameterValueWidget.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import ParameterValueWidget from "./ParameterValueWidget";
+import Icon from "metabase/components/Icon";
import S from "./ParameterWidget.css";
import cx from "classnames";
diff --git a/frontend/src/metabase/parameters/components/Parameters.jsx b/frontend/src/metabase/parameters/components/Parameters.jsx
index 1dae670bb39..294fec3262c 100644
--- a/frontend/src/metabase/parameters/components/Parameters.jsx
+++ b/frontend/src/metabase/parameters/components/Parameters.jsx
@@ -2,9 +2,9 @@
import React, { Component } from "react";
-import StaticParameterWidget from "./ParameterWidget.jsx";
+import StaticParameterWidget from "./ParameterWidget";
import Icon from "metabase/components/Icon";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import querystring from "querystring";
import cx from "classnames";
@@ -215,7 +215,7 @@ const SortableParameterHandle = SortableHandle(() => (
<div
className="absolute top bottom left flex layout-centered hover-child cursor-grab"
style={{
- color: colors["border"],
+ color: color("border"),
// width should match the left padding of the ParameterWidget container class so that it's centered
width: "1em",
marginLeft: "1px",
diff --git a/frontend/src/metabase/parameters/components/widgets/CategoryWidget.jsx b/frontend/src/metabase/parameters/components/widgets/CategoryWidget.jsx
index c2dbd3dec1a..da86242943b 100644
--- a/frontend/src/metabase/parameters/components/widgets/CategoryWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/CategoryWidget.jsx
@@ -8,7 +8,7 @@ import { t, ngettext, msgid } from "ttag";
import { createMultiwordSearchRegex } from "metabase/lib/string";
import { getHumanReadableValue } from "metabase/lib/query/field";
-import SelectPicker from "../../../query_builder/components/filters/pickers/SelectPicker.jsx";
+import SelectPicker from "../../../query_builder/components/filters/pickers/SelectPicker";
type Props = {
value: any,
diff --git a/frontend/src/metabase/parameters/components/widgets/DateAllOptionsWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateAllOptionsWidget.jsx
index 68f3e1924cb..ab50aa71e0c 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateAllOptionsWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateAllOptionsWidget.jsx
@@ -6,12 +6,12 @@ import { t } from "ttag";
import DatePicker, {
DATE_OPERATORS,
getOperator,
-} from "metabase/query_builder/components/filters/pickers/DatePicker.jsx";
-import FilterOptions from "metabase/query_builder/components/filters/FilterOptions.jsx";
+} from "metabase/query_builder/components/filters/pickers/DatePicker";
+import FilterOptions from "metabase/query_builder/components/filters/FilterOptions";
import { generateTimeFilterValuesDescriptions } from "metabase/lib/query_time";
import { dateParameterValueToMBQL } from "metabase/meta/Parameter";
-import type { OperatorName } from "metabase/query_builder/components/filters/pickers/DatePicker.jsx";
+import type { OperatorName } from "metabase/query_builder/components/filters/pickers/DatePicker";
import type { FieldFilter } from "metabase/meta/types/Query";
type UrlEncoded = string;
diff --git a/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
index 9e3dff80602..28097167370 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateMonthYearWidget.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import YearPicker from "./YearPicker.jsx";
+import YearPicker from "./YearPicker";
import moment from "moment";
import _ from "underscore";
diff --git a/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
index 7839a9bcce5..8663b4fdabb 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import YearPicker from "./YearPicker.jsx";
+import YearPicker from "./YearPicker";
import moment from "moment";
import _ from "underscore";
diff --git a/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
index dea2154ba46..01d2674fc55 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Calendar from "metabase/components/Calendar.jsx";
+import Calendar from "metabase/components/Calendar";
import moment from "moment";
const SEPARATOR = "~"; // URL-safe
diff --git a/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
index 674098d748e..3a46d571361 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Calendar from "metabase/components/Calendar.jsx";
+import Calendar from "metabase/components/Calendar";
import moment from "moment";
const DateSingleWidget = ({ value, setValue, onClose }) => (
diff --git a/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx b/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx
index 861ec358d49..3b6ede05d5e 100644
--- a/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/YearPicker.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Select from "metabase/components/Select.jsx";
+import Select from "metabase/components/Select";
import _ from "underscore";
const YEARS = _.range(new Date().getFullYear(), 1900, -1);
diff --git a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
index 02f0a2b9d3e..6ff16344f58 100644
--- a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
+++ b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
@@ -9,7 +9,7 @@ import Button from "metabase/components/Button";
import Parameters from "metabase/parameters/components/Parameters";
import Select, { Option } from "metabase/components/Select";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import DisplayOptionsPane from "./DisplayOptionsPane";
@@ -88,7 +88,7 @@ const AdvancedSettingsPane = ({
<Icon
name={getIconForParameter(parameter)}
className="mr2"
- style={{ color: colors["text-light"] }}
+ style={{ color: color("text-light") }}
/>
<h3>{parameter.name}</h3>
<Select
diff --git a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
index f0ea3a949ae..9be56e86a73 100644
--- a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
+++ b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
@@ -16,7 +16,7 @@ import {
getUnsignedPreviewUrl,
getSignedToken,
} from "metabase/public/lib/embed";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import {
getSiteUrl,
@@ -179,7 +179,7 @@ export default class EmbedModalContent extends Component {
style={{
boxShadow:
embedType === "application"
- ? `0px 8px 15px -9px ${colors["text-dark"]}`
+ ? `0px 8px 15px -9px ${color("text-dark")}`
: undefined,
}}
>
diff --git a/frontend/src/metabase/pulse/components/PulseCardPreview.jsx b/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
index bc864a0df86..70a4ee0f09d 100644
--- a/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
+++ b/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
@@ -3,13 +3,13 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Icon from "metabase/components/Icon";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
+import Tooltip from "metabase/components/Tooltip";
import { t } from "ttag";
import cx from "classnames";
-import colors, { alpha } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
export default class PulseCardPreview extends Component {
constructor(props, context) {
@@ -80,7 +80,7 @@ export default class PulseCardPreview extends Component {
top: 2,
right: 2,
background: `linear-gradient(to right, ${alpha(
- colors["bg-white"],
+ color("bg-white"),
0.2,
)}, white, white)`,
paddingLeft: 100,
@@ -179,7 +179,7 @@ const RenderedPulseCardPreviewHeader = ({ children }) => (
'Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
fontSize: 16,
fontWeight: 700,
- color: colors["text-dark"],
+ color: color("text-dark"),
textDecoration: "none",
}}
>
diff --git a/frontend/src/metabase/pulse/components/PulseEdit.jsx b/frontend/src/metabase/pulse/components/PulseEdit.jsx
index 8c03db90b28..05570924936 100644
--- a/frontend/src/metabase/pulse/components/PulseEdit.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEdit.jsx
@@ -3,19 +3,19 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t, jt, ngettext, msgid } from "ttag";
-import PulseEditName from "./PulseEditName.jsx";
+import PulseEditName from "./PulseEditName";
import PulseEditCollection from "./PulseEditCollection";
-import PulseEditCards from "./PulseEditCards.jsx";
-import PulseEditChannels from "./PulseEditChannels.jsx";
-import PulseEditSkip from "./PulseEditSkip.jsx";
-import WhatsAPulse from "./WhatsAPulse.jsx";
+import PulseEditCards from "./PulseEditCards";
+import PulseEditChannels from "./PulseEditChannels";
+import PulseEditSkip from "./PulseEditSkip";
+import WhatsAPulse from "./WhatsAPulse";
-import ActionButton from "metabase/components/ActionButton.jsx";
+import ActionButton from "metabase/components/ActionButton";
import Button from "metabase/components/Button";
import MetabaseAnalytics from "metabase/lib/analytics";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
-import DeleteModalWithConfirm from "metabase/components/DeleteModalWithConfirm.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import ModalContent from "metabase/components/ModalContent";
+import DeleteModalWithConfirm from "metabase/components/DeleteModalWithConfirm";
import { pulseIsValid, cleanPulse, emailIsEnabled } from "metabase/lib/pulse";
import * as Urls from "metabase/lib/urls";
diff --git a/frontend/src/metabase/pulse/components/PulseEditCards.jsx b/frontend/src/metabase/pulse/components/PulseEditCards.jsx
index 943e0c7fd4d..6451e0c7630 100644
--- a/frontend/src/metabase/pulse/components/PulseEditCards.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditCards.jsx
@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
import { t } from "ttag";
import cx from "classnames";
-import PulseCardPreview from "./PulseCardPreview.jsx";
+import PulseCardPreview from "./PulseCardPreview";
import QuestionSelect from "metabase/containers/QuestionSelect";
import MetabaseAnalytics from "metabase/lib/analytics";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const SOFT_LIMIT = 10;
const HARD_LIMIT = 25;
@@ -169,7 +169,7 @@ export default class PulseEditCards extends Component {
className="my4 ml3"
style={{
width: 375,
- borderTop: `1px dashed ${colors["border"]}`,
+ borderTop: `1px dashed ${color("border")}`,
}}
/>
)}
diff --git a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
index 03b5979bc79..a9ef407d7f1 100644
--- a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
@@ -5,13 +5,13 @@ import _ from "underscore";
import { assoc, assocIn } from "icepick";
import { t } from "ttag";
-import RecipientPicker from "./RecipientPicker.jsx";
+import RecipientPicker from "./RecipientPicker";
-import SchedulePicker from "metabase/components/SchedulePicker.jsx";
-import ActionButton from "metabase/components/ActionButton.jsx";
-import Select, { Option } from "metabase/components/Select.jsx";
-import Toggle from "metabase/components/Toggle.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import SchedulePicker from "metabase/components/SchedulePicker";
+import ActionButton from "metabase/components/ActionButton";
+import Select, { Option } from "metabase/components/Select";
+import Toggle from "metabase/components/Toggle";
+import Icon from "metabase/components/Icon";
import ChannelSetupMessage from "metabase/components/ChannelSetupMessage";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/pulse/components/PulseEditSkip.jsx b/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
index 02199fcb389..494f73adb57 100644
--- a/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import Toggle from "metabase/components/Toggle.jsx";
+import Toggle from "metabase/components/Toggle";
export default class PulseEditSkip extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/pulse/containers/PulseEditApp.jsx b/frontend/src/metabase/pulse/containers/PulseEditApp.jsx
index f73bdfe93a6..a0e21d32b05 100644
--- a/frontend/src/metabase/pulse/containers/PulseEditApp.jsx
+++ b/frontend/src/metabase/pulse/containers/PulseEditApp.jsx
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
import title from "metabase/hoc/Title";
-import PulseEdit from "../components/PulseEdit.jsx";
+import PulseEdit from "../components/PulseEdit";
import Collections from "metabase/entities/collections";
import Pulses from "metabase/entities/pulses";
diff --git a/frontend/src/metabase/query_builder/components/AddClauseButton.jsx b/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
index fac84a957e9..f9da920ec11 100644
--- a/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
+++ b/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
export default class AddClauseButton extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/query_builder/components/AggregationPopover.jsx b/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
index 5d7481d3e0f..930e3587c59 100644
--- a/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
@@ -2,13 +2,13 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import { t } from "ttag";
-import AccordionList from "metabase/components/AccordionList.jsx";
-import FieldList from "./FieldList.jsx";
-import QueryDefinitionTooltip from "./QueryDefinitionTooltip.jsx";
+import AccordionList from "metabase/components/AccordionList";
+import FieldList from "./FieldList";
+import QueryDefinitionTooltip from "./QueryDefinitionTooltip";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import Button from "metabase/components/Button.jsx";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
+import Button from "metabase/components/Button";
import * as Q_DEPRECATED from "metabase/lib/query";
import * as A_DEPRECATED from "metabase/lib/query_aggregation";
@@ -17,7 +17,7 @@ import Aggregation from "metabase-lib/lib/queries/structured/Aggregation";
import _ from "underscore";
-import ExpressionEditorTextfield from "./expressions/ExpressionEditorTextfield.jsx";
+import ExpressionEditorTextfield from "./expressions/ExpressionEditorTextfield";
const COMMON_SECTION_NAME = t`Common Metrics`;
const BASIC_SECTION_NAME = t`Basic Metrics`;
diff --git a/frontend/src/metabase/query_builder/components/BreakoutName.jsx b/frontend/src/metabase/query_builder/components/BreakoutName.jsx
index a22f597a2ee..daeb69e711c 100644
--- a/frontend/src/metabase/query_builder/components/BreakoutName.jsx
+++ b/frontend/src/metabase/query_builder/components/BreakoutName.jsx
@@ -5,7 +5,7 @@ import React from "react";
import type { Breakout } from "metabase/meta/types/Query";
import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
-import FieldName from "./FieldName.jsx";
+import FieldName from "./FieldName";
type Props = {
breakout: Breakout,
diff --git a/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx b/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
index de3a17ac698..b1f534b131a 100644
--- a/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
@@ -3,7 +3,7 @@
import React from "react";
import cx from "classnames";
-import FieldList from "metabase/query_builder/components/FieldList.jsx";
+import FieldList from "metabase/query_builder/components/FieldList";
import type { Breakout } from "metabase/meta/types/Query";
import type { FieldOptions } from "metabase/meta/types/Metadata";
diff --git a/frontend/src/metabase/query_builder/components/Clearable.jsx b/frontend/src/metabase/query_builder/components/Clearable.jsx
index 12c205e56ad..ca2e03a26df 100644
--- a/frontend/src/metabase/query_builder/components/Clearable.jsx
+++ b/frontend/src/metabase/query_builder/components/Clearable.jsx
@@ -1,7 +1,7 @@
import React from "react";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const Clearable = ({ onClear, children, className }) => (
<span className={cx("flex align-center", className)}>
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index 3e37045557a..6c602cc430b 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -3,9 +3,10 @@ import { connect } from "react-redux";
import PropTypes from "prop-types";
import { t } from "ttag";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import AccordionList from "metabase/components/AccordionList.jsx";
+
+import Icon from "metabase/components/Icon";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import AccordionList from "metabase/components/AccordionList";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import { isQueryable } from "metabase/lib/table";
diff --git a/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx b/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
index 86d2e7e0a0a..fe9f18b1e65 100644
--- a/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
+++ b/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
@@ -5,12 +5,12 @@ import PropTypes from "prop-types";
import _ from "underscore";
import cx from "classnames";
import { t } from "ttag";
-import AddClauseButton from "./AddClauseButton.jsx";
-import Expressions from "./expressions/Expressions.jsx";
-import ExpressionWidget from "./expressions/ExpressionWidget.jsx";
-import LimitWidget from "./LimitWidget.jsx";
-import SortWidget from "./SortWidget.jsx";
-import Popover from "metabase/components/Popover.jsx";
+import AddClauseButton from "./AddClauseButton";
+import Expressions from "./expressions/Expressions";
+import ExpressionWidget from "./expressions/ExpressionWidget";
+import LimitWidget from "./LimitWidget";
+import SortWidget from "./SortWidget";
+import Popover from "metabase/components/Popover";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/query_builder/components/FieldName.jsx b/frontend/src/metabase/query_builder/components/FieldName.jsx
index 54fb72d05d4..35c5c8393b3 100644
--- a/frontend/src/metabase/query_builder/components/FieldName.jsx
+++ b/frontend/src/metabase/query_builder/components/FieldName.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import Clearable from "./Clearable.jsx";
+import Clearable from "./Clearable";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/query_builder/components/FieldWidget.jsx b/frontend/src/metabase/query_builder/components/FieldWidget.jsx
index a09cea34478..f113a20652d 100644
--- a/frontend/src/metabase/query_builder/components/FieldWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/FieldWidget.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import FieldList from "./FieldList.jsx";
-import FieldName from "./FieldName.jsx";
-import Popover from "metabase/components/Popover.jsx";
+import FieldList from "./FieldList";
+import FieldName from "./FieldName";
+import Popover from "metabase/components/Popover";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/query_builder/components/Filter.jsx b/frontend/src/metabase/query_builder/components/Filter.jsx
index 3e051eea094..c099521e495 100644
--- a/frontend/src/metabase/query_builder/components/Filter.jsx
+++ b/frontend/src/metabase/query_builder/components/Filter.jsx
@@ -2,7 +2,7 @@
import React from "react";
-import FieldName from "./FieldName.jsx";
+import FieldName from "./FieldName";
import Value from "metabase/components/Value";
import Dimension from "metabase-lib/lib/Dimension";
diff --git a/frontend/src/metabase/query_builder/components/FilterList.jsx b/frontend/src/metabase/query_builder/components/FilterList.jsx
index 8b6f9b76755..00d179a67b6 100644
--- a/frontend/src/metabase/query_builder/components/FilterList.jsx
+++ b/frontend/src/metabase/query_builder/components/FilterList.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
-import Filter from "./Filter.jsx";
+import Filter from "./Filter";
import { filterWidgetFilterRenderer } from "./filters/FilterWidget";
import { getMetadata } from "metabase/selectors/metadata";
diff --git a/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx b/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
index 4928ab55394..a1fc8cca54c 100644
--- a/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
+++ b/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
@@ -5,14 +5,14 @@ import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import { t } from "ttag";
-import AggregationWidget from "./AggregationWidget.jsx";
-import BreakoutWidget from "./BreakoutWidget.jsx";
-import ExtendedOptions from "./ExtendedOptions.jsx";
-import FilterWidgetList from "./filters/FilterWidgetList.jsx";
-import FilterPopover from "./filters/FilterPopover.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
+import AggregationWidget from "./AggregationWidget";
+import BreakoutWidget from "./BreakoutWidget";
+import ExtendedOptions from "./ExtendedOptions";
+import FilterWidgetList from "./filters/FilterWidgetList";
+import FilterPopover from "./filters/FilterPopover";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import { DatabaseSchemaAndTableDataSelector } from "metabase/query_builder/components/DataSelector";
import cx from "classnames";
diff --git a/frontend/src/metabase/query_builder/components/QueryDefinitionTooltip.jsx b/frontend/src/metabase/query_builder/components/QueryDefinitionTooltip.jsx
index 7e0c7c5b90b..0ad12787999 100644
--- a/frontend/src/metabase/query_builder/components/QueryDefinitionTooltip.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryDefinitionTooltip.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import FilterList from "./FilterList.jsx";
-import AggregationName from "./AggregationName.jsx";
-import FieldSet from "metabase/components/FieldSet.jsx";
+import FilterList from "./FilterList";
+import AggregationName from "./AggregationName";
+import FieldSet from "metabase/components/FieldSet";
import * as Q_DEPRECATED from "metabase/lib/query";
import { t } from "ttag";
diff --git a/frontend/src/metabase/query_builder/components/QueryDownloadWidget.jsx b/frontend/src/metabase/query_builder/components/QueryDownloadWidget.jsx
index 64cd10dc127..5decc7d726f 100644
--- a/frontend/src/metabase/query_builder/components/QueryDownloadWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryDownloadWidget.jsx
@@ -6,10 +6,10 @@ import { t } from "ttag";
import { parse as urlParse } from "url";
import querystring from "querystring";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import DownloadButton from "metabase/components/DownloadButton.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import Icon from "metabase/components/Icon";
+import DownloadButton from "metabase/components/DownloadButton";
+import Tooltip from "metabase/components/Tooltip";
import * as Urls from "metabase/lib/urls";
diff --git a/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx b/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
index 8a97461d255..b85d7bf68e1 100644
--- a/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
+++ b/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import Modal from "metabase/components/Modal.jsx";
+import Modal from "metabase/components/Modal";
import { t } from "ttag";
export default class SavedQuestionIntroModal extends Component {
diff --git a/frontend/src/metabase/query_builder/components/SelectionModule.jsx b/frontend/src/metabase/query_builder/components/SelectionModule.jsx
index 9f410efb100..f0fdd092988 100644
--- a/frontend/src/metabase/query_builder/components/SelectionModule.jsx
+++ b/frontend/src/metabase/query_builder/components/SelectionModule.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Popover from "metabase/components/Popover.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import SearchBar from "./SearchBar.jsx";
+import Popover from "metabase/components/Popover";
+import Icon from "metabase/components/Icon";
+import SearchBar from "./SearchBar";
import { t } from "ttag";
import _ from "underscore";
import cx from "classnames";
diff --git a/frontend/src/metabase/query_builder/components/SortWidget.jsx b/frontend/src/metabase/query_builder/components/SortWidget.jsx
index ba9d5511d5a..ec8af3c297d 100644
--- a/frontend/src/metabase/query_builder/components/SortWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/SortWidget.jsx
@@ -1,9 +1,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
-import FieldWidget from "./FieldWidget.jsx";
-import SelectionModule from "./SelectionModule.jsx";
+import Icon from "metabase/components/Icon";
+import FieldWidget from "./FieldWidget";
+import SelectionModule from "./SelectionModule";
import _ from "underscore";
diff --git a/frontend/src/metabase/query_builder/components/TimeGroupingPopover.jsx b/frontend/src/metabase/query_builder/components/TimeGroupingPopover.jsx
index e43ae0ebd78..6a846e4e4ca 100644
--- a/frontend/src/metabase/query_builder/components/TimeGroupingPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/TimeGroupingPopover.jsx
@@ -62,7 +62,6 @@ export default class TimeGroupingPopover extends Component {
this.props.onFieldChange([
"datetime-field",
this.props.field[1],
- "as",
bucketing,
]);
}
diff --git a/frontend/src/metabase/query_builder/components/VisualizationResult.jsx b/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
index ec02d3f0c51..3d88ad30e66 100644
--- a/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
+++ b/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
@@ -5,7 +5,7 @@ import { t, jt } from "ttag";
import cx from "classnames";
import ErrorMessage from "metabase/components/ErrorMessage";
-import Visualization from "metabase/visualizations/components/Visualization.jsx";
+import Visualization from "metabase/visualizations/components/Visualization";
import { datasetContainsNoResults } from "metabase/lib/dataset";
import { DatasetQuery } from "metabase/meta/types/Card";
import { CreateAlertModalContent } from "metabase/query_builder/components/AlertModals";
diff --git a/frontend/src/metabase/query_builder/components/dataref/DatabasePane.jsx b/frontend/src/metabase/query_builder/components/dataref/DatabasePane.jsx
index 7cfc60f4fc6..fc7c71cdaf9 100644
--- a/frontend/src/metabase/query_builder/components/dataref/DatabasePane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/DatabasePane.jsx
@@ -2,7 +2,7 @@
import React from "react";
import PropTypes from "prop-types";
import { isQueryable } from "metabase/lib/table";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const DatabasePane = ({ database, show, ...props }) => (
<div>
diff --git a/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx b/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
index 7051d51ce9c..a9cb58f0ebe 100644
--- a/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
@@ -3,8 +3,8 @@ import React from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
-import Card from "metabase/components/Card.jsx";
+import Icon from "metabase/components/Icon";
+import Card from "metabase/components/Card";
const DetailPane = ({ name, description, extra, values }) => (
<div className="ml1">
diff --git a/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx b/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
index e6572aeefb0..e247dd9e67a 100644
--- a/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
@@ -2,9 +2,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import DetailPane from "./DetailPane.jsx";
-import QueryButton from "metabase/components/QueryButton.jsx";
-import UseForButton from "./UseForButton.jsx";
+import DetailPane from "./DetailPane";
+import QueryButton from "metabase/components/QueryButton";
+import UseForButton from "./UseForButton";
import { fetchTableMetadata, fetchFieldValues } from "metabase/redux/metadata";
import { getMetadata } from "metabase/selectors/metadata";
diff --git a/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx b/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
index 2bfe87989f5..e55e6d5bc31 100644
--- a/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/MainPane.jsx
@@ -2,7 +2,7 @@
import React from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const MainPane = ({ databases, show }) => (
<div>
diff --git a/frontend/src/metabase/query_builder/components/dataref/MetricPane.jsx b/frontend/src/metabase/query_builder/components/dataref/MetricPane.jsx
index eed81f60226..e86174e8dea 100644
--- a/frontend/src/metabase/query_builder/components/dataref/MetricPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/MetricPane.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { t } from "ttag";
-import DetailPane from "./DetailPane.jsx";
-import QueryButton from "metabase/components/QueryButton.jsx";
-import QueryDefinition from "./QueryDefinition.jsx";
+import DetailPane from "./DetailPane";
+import QueryButton from "metabase/components/QueryButton";
+import QueryDefinition from "./QueryDefinition";
import { createCard } from "metabase/lib/card";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/query_builder/components/dataref/QueryDefinition.jsx b/frontend/src/metabase/query_builder/components/dataref/QueryDefinition.jsx
index 15ed579116c..4fe43231fbc 100644
--- a/frontend/src/metabase/query_builder/components/dataref/QueryDefinition.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/QueryDefinition.jsx
@@ -1,7 +1,7 @@
import React from "react";
-import FilterList from "../FilterList.jsx";
-import AggregationName from "../AggregationName.jsx";
+import FilterList from "../FilterList";
+import AggregationName from "../AggregationName";
import Question from "metabase-lib/lib/Question";
diff --git a/frontend/src/metabase/query_builder/components/dataref/SegmentPane.jsx b/frontend/src/metabase/query_builder/components/dataref/SegmentPane.jsx
index 29f7c708f33..323135b59a7 100644
--- a/frontend/src/metabase/query_builder/components/dataref/SegmentPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/SegmentPane.jsx
@@ -6,10 +6,10 @@ import { t } from "ttag";
import { fetchTableMetadata } from "metabase/redux/metadata";
import { getMetadata } from "metabase/selectors/metadata";
-import DetailPane from "./DetailPane.jsx";
-import QueryButton from "metabase/components/QueryButton.jsx";
-import UseForButton from "./UseForButton.jsx";
-import QueryDefinition from "./QueryDefinition.jsx";
+import DetailPane from "./DetailPane";
+import QueryButton from "metabase/components/QueryButton";
+import UseForButton from "./UseForButton";
+import QueryDefinition from "./QueryDefinition";
import { createCard } from "metabase/lib/card";
import * as Q_DEPRECATED from "metabase/lib/query";
diff --git a/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx b/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
index 1742ac460b4..ce9cc73e7c3 100644
--- a/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
@@ -3,10 +3,10 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
// components
-import Expandable from "metabase/components/Expandable.jsx";
+import Expandable from "metabase/components/Expandable";
// lib
import { createCard } from "metabase/lib/card";
diff --git a/frontend/src/metabase/query_builder/components/dataref/UseForButton.jsx b/frontend/src/metabase/query_builder/components/dataref/UseForButton.jsx
index c5a470013a5..d46c5aa149a 100644
--- a/frontend/src/metabase/query_builder/components/dataref/UseForButton.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/UseForButton.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const UseForButton = ({ title, onClick }) => (
<a
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
index 413159b8b6c..712e1b1f4f2 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
@@ -18,9 +18,9 @@ import {
KEYCODE_DOWN,
} from "metabase/lib/keyboard";
-import Popover from "metabase/components/Popover.jsx";
+import Popover from "metabase/components/Popover";
-import TokenizedInput from "./TokenizedInput.jsx";
+import TokenizedInput from "./TokenizedInput";
import { isExpression } from "metabase/lib/expressions";
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
index 61cd58fd17a..abfe751e8f4 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { t } from "ttag";
-import ExpressionEditorTextfield from "./ExpressionEditorTextfield.jsx";
+import ExpressionEditorTextfield from "./ExpressionEditorTextfield";
import { isExpression } from "metabase/lib/expressions";
import MetabaseSettings from "metabase/lib/settings";
diff --git a/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx b/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
index 98fbf590e48..024976759e2 100644
--- a/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
@@ -2,9 +2,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import _ from "underscore";
import { t } from "ttag";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
+import Tooltip from "metabase/components/Tooltip";
import { format } from "metabase/lib/expressions/formatter";
diff --git a/frontend/src/metabase/query_builder/components/expressions/TokenizedInput.jsx b/frontend/src/metabase/query_builder/components/expressions/TokenizedInput.jsx
index 370aaab0b14..7a454430d5d 100644
--- a/frontend/src/metabase/query_builder/components/expressions/TokenizedInput.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/TokenizedInput.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import ReactDOM from "react-dom";
-import TokenizedExpression from "./TokenizedExpression.jsx";
+import TokenizedExpression from "./TokenizedExpression";
import {
getCaretPosition,
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx b/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
index b5aa4026744..e6ceb9cf9b0 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
@@ -2,9 +2,9 @@
import React, { Component } from "react";
-import Icon from "metabase/components/Icon.jsx";
-import Popover from "metabase/components/Popover.jsx";
-import FilterPopover from "./FilterPopover.jsx";
+import Icon from "metabase/components/Icon";
+import Popover from "metabase/components/Popover";
+import FilterPopover from "./FilterPopover";
import Filter from "metabase/query_builder/components/Filter";
import cx from "classnames";
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterWidgetList.jsx b/frontend/src/metabase/query_builder/components/filters/FilterWidgetList.jsx
index b373fd54625..d759672554a 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterWidgetList.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterWidgetList.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import { findDOMNode } from "react-dom";
import { t } from "ttag";
-import FilterWidget from "./FilterWidget.jsx";
+import FilterWidget from "./FilterWidget";
import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
import Filter from "metabase-lib/lib/queries/structured/Filter";
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
index d44eb475837..20e7dfd3d7e 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import NumericInput from "metabase/components/NumericInput.jsx";
+import NumericInput from "metabase/components/NumericInput";
import Icon from "metabase/components/Icon";
import cx from "classnames";
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/NumberPicker.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/NumberPicker.jsx
index cccc9deb59f..7d31a69b72e 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/NumberPicker.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/NumberPicker.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import TextPicker from "./TextPicker.jsx";
+import TextPicker from "./TextPicker";
type Props = {
values: Array<number | null>,
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/RelativeDatePicker.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/RelativeDatePicker.jsx
index 352c369d034..0f7773020d4 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/RelativeDatePicker.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/RelativeDatePicker.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import cx from "classnames";
-import NumericInput from "metabase/components/NumericInput.jsx";
+import NumericInput from "metabase/components/NumericInput";
import DateUnitSelector from "../DateUnitSelector";
import { assoc } from "icepick";
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/SelectPicker.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/SelectPicker.jsx
index 77b1304b7ff..97ef93e0bcc 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/SelectPicker.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/SelectPicker.jsx
@@ -3,8 +3,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import CheckBox from "metabase/components/CheckBox.jsx";
-import ListSearchField from "metabase/components/ListSearchField.jsx";
+import CheckBox from "metabase/components/CheckBox";
+import ListSearchField from "metabase/components/ListSearchField";
import { capitalize } from "metabase/lib/formatting";
import { createMultiwordSearchRegex } from "metabase/lib/string";
diff --git a/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx b/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
index c56a181ecf1..126a766414b 100644
--- a/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/NotebookStep.jsx
@@ -3,7 +3,7 @@ import React from "react";
import { t } from "ttag";
import _ from "underscore";
-import colors, { lighten, darken } from "metabase/lib/colors";
+import { color as c, lighten, darken } from "metabase/lib/colors";
import Tooltip from "metabase/components/Tooltip";
import Icon from "metabase/components/Icon";
@@ -27,60 +27,60 @@ import LimitStep from "./steps/LimitStep";
const STEP_UI = {
data: {
title: t`Data`,
- color: colors["brand"],
+ color: c("brand"),
component: DataStep,
},
join: {
title: t`Join data`,
- color: colors["brand"],
+ color: c("brand"),
icon: "join_left_outer",
component: JoinStep,
priority: 1,
},
expression: {
title: t`Custom column`,
- color: colors["bg-dark"],
+ color: c("bg-dark"),
icon: "add_data",
component: ExpressionStep,
},
filter: {
title: t`Filter`,
- color: colors["accent7"],
+ color: c("accent7"),
icon: "filter",
component: FilterStep,
priority: 10,
},
summarize: {
title: t`Summarize`,
- color: colors["accent1"],
+ color: c("accent1"),
icon: "sum",
component: SummarizeStep,
priority: 5,
},
aggregate: {
title: t`Aggregate`,
- color: colors["accent1"],
+ color: c("accent1"),
icon: "sum",
component: AggregateStep,
priority: 5,
},
breakout: {
title: t`Breakout`,
- color: colors["accent4"],
+ color: c("accent4"),
icon: "segment",
component: BreakoutStep,
priority: 1,
},
sort: {
title: t`Sort`,
- color: colors["bg-dark"],
+ color: c("bg-dark"),
icon: "smartscalar",
component: SortStep,
compact: true,
},
limit: {
title: t`Row limit`,
- color: colors["bg-dark"],
+ color: c("bg-dark"),
icon: "list",
component: LimitStep,
compact: true,
@@ -182,7 +182,7 @@ export default class NotebookStep extends React.Component {
}
icon="play"
title={t`Preview`}
- color={colors["text-light"]}
+ color={c("text-light")}
onClick={() => this.setState({ showPreview: true })}
/>
</Box>
@@ -205,12 +205,12 @@ export default class NotebookStep extends React.Component {
const ColorButton = Button.extend`
border: none;
- color: ${({ color }) => (color ? color : colors["text-medium"])}
+ color: ${({ color }) => (color ? color : c("text-medium"))}
background-color: ${({ color }) => (color ? lighten(color, 0.61) : null)};
&:hover {
- color: ${({ color }) => (color ? darken(color, 0.115) : colors["brand"])};
+ color: ${({ color }) => (color ? darken(color, 0.115) : color("brand"))};
background-color: ${({ color }) =>
- color ? lighten(color, 0.5) : lighten(colors["brand"], 0.61)};
+ color ? lighten(color, 0.5) : lighten(color("brand"), 0.61)};
}
transition: background 300ms;
`;
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/SortStep.jsx b/frontend/src/metabase/query_builder/components/notebook/steps/SortStep.jsx
index 863f5865da4..0466846beb9 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/SortStep.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/SortStep.jsx
@@ -54,7 +54,7 @@ const SortName = ({ sort, query }) => (
<FieldName field={sort && sort[1]} query={query} />
);
-import FieldList from "metabase/query_builder/components/FieldList.jsx";
+import FieldList from "metabase/query_builder/components/FieldList";
import type { OrderBy } from "metabase/meta/types/Query";
import type { FieldOptions } from "metabase/meta/types/Metadata";
diff --git a/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx b/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
index f373ab7ee38..d708dd4fcff 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/TagEditorHelp.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { t, jt } from "ttag";
-import Code from "metabase/components/Code.jsx";
+import Code from "metabase/components/Code";
import MetabaseSettings from "metabase/lib/settings";
const EXAMPLES = {
diff --git a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
index ee34b3f115c..23c4e291ac3 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
@@ -4,10 +4,10 @@ import _ from "underscore";
import { connect } from "react-redux";
import { Link } from "react-router";
-import Toggle from "metabase/components/Toggle.jsx";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
-import Select, { Option } from "metabase/components/Select.jsx";
-import ParameterValueWidget from "metabase/parameters/components/ParameterValueWidget.jsx";
+import Toggle from "metabase/components/Toggle";
+import InputBlurChange from "metabase/components/InputBlurChange";
+import Select, { Option } from "metabase/components/Select";
+import ParameterValueWidget from "metabase/parameters/components/ParameterValueWidget";
import { parameterOptionsForField } from "metabase/meta/Dashboard";
import type { TemplateTag } from "metabase/meta/types/Query";
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx b/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
index 43690b15676..893b9d4977b 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
@@ -8,17 +8,17 @@ import ViewButton from "./ViewButton";
import SummarizeSidebar from "./sidebars/SummarizeSidebar";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const SummarizePill = props => (
- <ViewPill icon="insight" color={colors["accent1"]} {...props} />
+ <ViewPill icon="insight" color={color("accent1")} {...props} />
);
const SummarizeButton = props => (
<ViewButton
medium
icon="insight"
- color={colors["accent1"]}
+ color={color("accent1")}
labelBreakpoint="sm"
{...props}
/>
diff --git a/frontend/src/metabase/query_builder/components/view/ViewButton.jsx b/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
index da627bfe73a..1f027f3e940 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewButton.jsx
@@ -1,5 +1,5 @@
import Button from "metabase/components/Button";
-import colors, { alpha } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
import styled from "styled-components";
@@ -20,7 +20,7 @@ const ViewButton = styled(Button)`
}
`;
ViewButton.defaultProps = {
- color: colors["brand"],
+ color: color("brand"),
};
export default ViewButton;
diff --git a/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx b/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
index d68e2e60f0d..12813fa7611 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
@@ -4,7 +4,7 @@ import { t } from "ttag";
import cx from "classnames";
import styled from "styled-components";
import { Flex } from "grid-styled";
-import colors, { darken } from "metabase/lib/colors";
+import { color, darken } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
@@ -201,7 +201,7 @@ const VizSettingsButton = ({ ...props }) => (
const Well = styled(Flex)`
border-radius: 99px;
&:hover {
- background-color: ${darken(colors["bg-medium"], 0.05)};
+ background-color: ${darken(color("bg-medium"), 0.05)};
}
transition: background 300ms linear;
`;
@@ -210,13 +210,12 @@ Well.defaultProps = {
px: "6px",
py: "4px",
align: "center",
- bg: colors["bg-medium"],
+ bg: color("bg-medium"),
};
const ToggleIcon = styled(Flex)`
cursor: pointer;
- background-color: ${props =>
- props.active ? colors["brand"] : "transparent"};
+ background-color: ${props => (props.active ? color("brand") : "transparent")};
color: ${props => (props.active ? "white" : "inherit")};
border-radius: 99px;
`;
diff --git a/frontend/src/metabase/query_builder/components/view/ViewPill.jsx b/frontend/src/metabase/query_builder/components/view/ViewPill.jsx
index 9c9d9e6d126..02dc18c1196 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewPill.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewPill.jsx
@@ -1,13 +1,13 @@
import React from "react";
import Icon from "metabase/components/Icon";
-import colors, { alpha } from "metabase/lib/colors";
+import { color as c, alpha } from "metabase/lib/colors";
import cx from "classnames";
export default function ViewPill({
className,
style = {},
- color = colors["brand"],
+ color = c("brand"),
invert,
children,
onClick,
diff --git a/frontend/src/metabase/questions/containers/AddToDashboard.jsx b/frontend/src/metabase/questions/containers/AddToDashboard.jsx
index acb81b2921c..117457f3403 100644
--- a/frontend/src/metabase/questions/containers/AddToDashboard.jsx
+++ b/frontend/src/metabase/questions/containers/AddToDashboard.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import { t } from "ttag";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalContent from "metabase/components/ModalContent";
import QuestionPicker from "metabase/containers/QuestionPicker";
export default class AddToDashboard extends Component {
diff --git a/frontend/src/metabase/reference/components/EditButton.jsx b/frontend/src/metabase/reference/components/EditButton.jsx
index f0686968f69..3084e652c41 100644
--- a/frontend/src/metabase/reference/components/EditButton.jsx
+++ b/frontend/src/metabase/reference/components/EditButton.jsx
@@ -5,7 +5,7 @@ import pure from "recompose/pure";
import { t } from "ttag";
import S from "./EditButton.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const EditButton = ({ className, startEditing }) => (
<button
diff --git a/frontend/src/metabase/reference/components/EditHeader.jsx b/frontend/src/metabase/reference/components/EditHeader.jsx
index 35d2f4b0a14..4d24715ddde 100644
--- a/frontend/src/metabase/reference/components/EditHeader.jsx
+++ b/frontend/src/metabase/reference/components/EditHeader.jsx
@@ -5,7 +5,7 @@ import pure from "recompose/pure";
import { t } from "ttag";
import S from "./EditHeader.css";
-import RevisionMessageModal from "metabase/reference/components/RevisionMessageModal.jsx";
+import RevisionMessageModal from "metabase/reference/components/RevisionMessageModal";
const EditHeader = ({
hasRevisionHistory,
diff --git a/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx b/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
index 590927dec64..2916bb830fa 100644
--- a/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
+++ b/frontend/src/metabase/reference/components/EditableReferenceHeader.jsx
@@ -8,13 +8,13 @@ import S from "./ReferenceHeader.css";
import L from "metabase/components/List.css";
import E from "metabase/reference/components/EditButton.css";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
-import EditButton from "metabase/reference/components/EditButton.jsx";
+import IconBorder from "metabase/components/IconBorder";
+import Icon from "metabase/components/Icon";
+import InputBlurChange from "metabase/components/InputBlurChange";
+import Ellipsified from "metabase/components/Ellipsified";
+import EditButton from "metabase/reference/components/EditButton";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const EditableReferenceHeader = ({
entity = {},
@@ -40,7 +40,7 @@ const EditableReferenceHeader = ({
{headerIcon && (
<IconBorder
borderWidth="0"
- style={{ backgroundColor: colors["bg-medium"] }}
+ style={{ backgroundColor: color("bg-medium") }}
>
<Icon
className="text-brand"
diff --git a/frontend/src/metabase/reference/components/Field.jsx b/frontend/src/metabase/reference/components/Field.jsx
index 63db960d9bb..e7f8b0b1bbd 100644
--- a/frontend/src/metabase/reference/components/Field.jsx
+++ b/frontend/src/metabase/reference/components/Field.jsx
@@ -12,8 +12,8 @@ import { getIn } from "icepick";
import S from "metabase/components/List.css";
import F from "./Field.css";
-import Select from "metabase/components/Select.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import Select from "metabase/components/Select";
+import Icon from "metabase/components/Icon";
import cx from "classnames";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/reference/components/FieldToGroupBy.jsx b/frontend/src/metabase/reference/components/FieldToGroupBy.jsx
index e4d82c39e9d..6c56d738207 100644
--- a/frontend/src/metabase/reference/components/FieldToGroupBy.jsx
+++ b/frontend/src/metabase/reference/components/FieldToGroupBy.jsx
@@ -5,7 +5,7 @@ import { t } from "ttag";
import S from "./FieldToGroupBy.css";
import Q from "metabase/components/QueryButton.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const FieldToGroupBy = ({
className,
diff --git a/frontend/src/metabase/reference/components/FieldTypeDetail.jsx b/frontend/src/metabase/reference/components/FieldTypeDetail.jsx
index a5ba51a1759..266af6dee15 100644
--- a/frontend/src/metabase/reference/components/FieldTypeDetail.jsx
+++ b/frontend/src/metabase/reference/components/FieldTypeDetail.jsx
@@ -8,7 +8,7 @@ import * as MetabaseCore from "metabase/lib/core";
import { isNumericBaseType } from "metabase/lib/schema_metadata";
import { isFK } from "metabase/lib/types";
-import Select from "metabase/components/Select.jsx";
+import Select from "metabase/components/Select";
import D from "metabase/reference/components/Detail.css";
diff --git a/frontend/src/metabase/reference/components/FieldsToGroupBy.jsx b/frontend/src/metabase/reference/components/FieldsToGroupBy.jsx
index f3bd75f4bff..4c224589e04 100644
--- a/frontend/src/metabase/reference/components/FieldsToGroupBy.jsx
+++ b/frontend/src/metabase/reference/components/FieldsToGroupBy.jsx
@@ -8,7 +8,7 @@ import L from "metabase/components/List.css";
import { getQuestionUrl } from "../utils";
-import FieldToGroupBy from "metabase/reference/components/FieldToGroupBy.jsx";
+import FieldToGroupBy from "metabase/reference/components/FieldToGroupBy";
import { fetchTableMetadata } from "metabase/redux/metadata";
import { getMetadata } from "metabase/selectors/metadata";
diff --git a/frontend/src/metabase/reference/components/Formula.jsx b/frontend/src/metabase/reference/components/Formula.jsx
index ddd8e5eaf03..34e717c7734 100644
--- a/frontend/src/metabase/reference/components/Formula.jsx
+++ b/frontend/src/metabase/reference/components/Formula.jsx
@@ -6,9 +6,9 @@ import { CSSTransitionGroup } from "react-transition-group";
import S from "./Formula.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
-import QueryDefinition from "metabase/query_builder/components/dataref/QueryDefinition.jsx";
+import QueryDefinition from "metabase/query_builder/components/dataref/QueryDefinition";
import { fetchTableMetadata } from "metabase/redux/metadata";
import { getMetadata } from "metabase/selectors/metadata";
diff --git a/frontend/src/metabase/reference/components/GuideDetailEditor.jsx b/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
index d1bc126f5c6..e917b34ac49 100644
--- a/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
+++ b/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
@@ -6,9 +6,9 @@ import cx from "classnames";
import { t } from "ttag";
import S from "./GuideDetailEditor.css";
-import Select from "metabase/components/Select.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Select from "metabase/components/Select";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
import { typeToBgClass } from "../utils.js";
import { SchemaTableAndSegmentDataSelector } from "metabase/query_builder/components/DataSelector";
diff --git a/frontend/src/metabase/reference/components/GuideEditSection.jsx b/frontend/src/metabase/reference/components/GuideEditSection.jsx
index 7931724618c..b42b16ee688 100644
--- a/frontend/src/metabase/reference/components/GuideEditSection.jsx
+++ b/frontend/src/metabase/reference/components/GuideEditSection.jsx
@@ -6,7 +6,7 @@ import cx from "classnames";
import S from "./GuideEditSection.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
const GuideEditSection = ({
children,
diff --git a/frontend/src/metabase/reference/components/GuideHeader.jsx b/frontend/src/metabase/reference/components/GuideHeader.jsx
index 80e9687f3e7..bc4a732cb76 100644
--- a/frontend/src/metabase/reference/components/GuideHeader.jsx
+++ b/frontend/src/metabase/reference/components/GuideHeader.jsx
@@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import pure from "recompose/pure";
import { t } from "ttag";
-import EditButton from "metabase/reference/components/EditButton.jsx";
+import EditButton from "metabase/reference/components/EditButton";
const GuideHeader = ({ startEditing, isSuperuser }) => (
<div>
diff --git a/frontend/src/metabase/reference/components/MetricImportantFieldsDetail.jsx b/frontend/src/metabase/reference/components/MetricImportantFieldsDetail.jsx
index 9ad8d1c1e07..f666d6d5038 100644
--- a/frontend/src/metabase/reference/components/MetricImportantFieldsDetail.jsx
+++ b/frontend/src/metabase/reference/components/MetricImportantFieldsDetail.jsx
@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import cx from "classnames";
import pure from "recompose/pure";
import { t } from "ttag";
-import FieldsToGroupBy from "metabase/reference/components/FieldsToGroupBy.jsx";
+import FieldsToGroupBy from "metabase/reference/components/FieldsToGroupBy";
-import Select from "metabase/components/Select.jsx";
+import Select from "metabase/components/Select";
import D from "metabase/reference/components/Detail.css";
diff --git a/frontend/src/metabase/reference/components/ReferenceHeader.jsx b/frontend/src/metabase/reference/components/ReferenceHeader.jsx
index 3042fba7264..390ecc28389 100644
--- a/frontend/src/metabase/reference/components/ReferenceHeader.jsx
+++ b/frontend/src/metabase/reference/components/ReferenceHeader.jsx
@@ -8,11 +8,11 @@ import S from "./ReferenceHeader.css";
import L from "metabase/components/List.css";
import E from "metabase/reference/components/EditButton.css";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
+import IconBorder from "metabase/components/IconBorder";
+import Icon from "metabase/components/Icon";
+import Ellipsified from "metabase/components/Ellipsified";
import { t } from "ttag";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
const ReferenceHeader = ({
name,
@@ -27,7 +27,7 @@ const ReferenceHeader = ({
{headerIcon && (
<IconBorder
borderWidth="0"
- style={{ backgroundColor: colors["bg-medium"] }}
+ style={{ backgroundColor: color("bg-medium") }}
>
<Icon
className="text-brand"
diff --git a/frontend/src/metabase/reference/components/RevisionMessageModal.jsx b/frontend/src/metabase/reference/components/RevisionMessageModal.jsx
index 051c414dbfa..5f14fc2a51e 100644
--- a/frontend/src/metabase/reference/components/RevisionMessageModal.jsx
+++ b/frontend/src/metabase/reference/components/RevisionMessageModal.jsx
@@ -2,8 +2,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import ModalContent from "metabase/components/ModalContent.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import ModalContent from "metabase/components/ModalContent";
import S from "./RevisionMessageModal.css";
diff --git a/frontend/src/metabase/reference/components/UsefulQuestions.jsx b/frontend/src/metabase/reference/components/UsefulQuestions.jsx
index dd1c183f80a..9b81233d8c2 100644
--- a/frontend/src/metabase/reference/components/UsefulQuestions.jsx
+++ b/frontend/src/metabase/reference/components/UsefulQuestions.jsx
@@ -7,7 +7,7 @@ import S from "./UsefulQuestions.css";
import D from "metabase/reference/components/Detail.css";
import L from "metabase/components/List.css";
-import QueryButton from "metabase/components/QueryButton.jsx";
+import QueryButton from "metabase/components/QueryButton";
const UsefulQuestions = ({ questions }) => (
<div className={cx(D.detail)}>
diff --git a/frontend/src/metabase/reference/databases/DatabaseDetail.jsx b/frontend/src/metabase/reference/databases/DatabaseDetail.jsx
index c157576e741..e2cbcfc52c4 100644
--- a/frontend/src/metabase/reference/databases/DatabaseDetail.jsx
+++ b/frontend/src/metabase/reference/databases/DatabaseDetail.jsx
@@ -5,12 +5,12 @@ import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { push } from "react-router-redux";
import { t } from "ttag";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
import {
getDatabase,
diff --git a/frontend/src/metabase/reference/databases/DatabaseDetailContainer.jsx b/frontend/src/metabase/reference/databases/DatabaseDetailContainer.jsx
index 825e7b5e2e5..28bf3d7d105 100644
--- a/frontend/src/metabase/reference/databases/DatabaseDetailContainer.jsx
+++ b/frontend/src/metabase/reference/databases/DatabaseDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import DatabaseSidebar from "./DatabaseSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import DatabaseDetail from "metabase/reference/databases/DatabaseDetail.jsx";
+import DatabaseSidebar from "./DatabaseSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import DatabaseDetail from "metabase/reference/databases/DatabaseDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/DatabaseList.jsx b/frontend/src/metabase/reference/databases/DatabaseList.jsx
index 9f3fe64459a..43ac5312e08 100644
--- a/frontend/src/metabase/reference/databases/DatabaseList.jsx
+++ b/frontend/src/metabase/reference/databases/DatabaseList.jsx
@@ -7,12 +7,12 @@ import { isQueryable } from "metabase/lib/table";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getDatabases, getError, getLoading } from "../selectors";
diff --git a/frontend/src/metabase/reference/databases/DatabaseListContainer.jsx b/frontend/src/metabase/reference/databases/DatabaseListContainer.jsx
index c3e824b00fc..9fe2d1ffac5 100644
--- a/frontend/src/metabase/reference/databases/DatabaseListContainer.jsx
+++ b/frontend/src/metabase/reference/databases/DatabaseListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import BaseSidebar from "metabase/reference/guide/BaseSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import DatabaseList from "metabase/reference/databases/DatabaseList.jsx";
+import BaseSidebar from "metabase/reference/guide/BaseSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import DatabaseList from "metabase/reference/databases/DatabaseList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/DatabaseSidebar.jsx b/frontend/src/metabase/reference/databases/DatabaseSidebar.jsx
index 62be7da78f8..407d54dfa9a 100644
--- a/frontend/src/metabase/reference/databases/DatabaseSidebar.jsx
+++ b/frontend/src/metabase/reference/databases/DatabaseSidebar.jsx
@@ -3,8 +3,8 @@ import React from "react";
import PropTypes from "prop-types";
import S from "metabase/components/Sidebar.css";
import { t } from "ttag";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import SidebarItem from "metabase/components/SidebarItem.jsx";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import SidebarItem from "metabase/components/SidebarItem";
import cx from "classnames";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/reference/databases/FieldDetail.jsx b/frontend/src/metabase/reference/databases/FieldDetail.jsx
index 965a5bddb12..1bf2814d284 100644
--- a/frontend/src/metabase/reference/databases/FieldDetail.jsx
+++ b/frontend/src/metabase/reference/databases/FieldDetail.jsx
@@ -7,14 +7,14 @@ import { push } from "react-router-redux";
import { t } from "ttag";
import S from "metabase/reference/Reference.css";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
-import FieldTypeDetail from "metabase/reference/components/FieldTypeDetail.jsx";
-import UsefulQuestions from "metabase/reference/components/UsefulQuestions.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
+import FieldTypeDetail from "metabase/reference/components/FieldTypeDetail";
+import UsefulQuestions from "metabase/reference/components/UsefulQuestions";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/databases/FieldDetailContainer.jsx b/frontend/src/metabase/reference/databases/FieldDetailContainer.jsx
index f59a58c42c8..db134c05788 100644
--- a/frontend/src/metabase/reference/databases/FieldDetailContainer.jsx
+++ b/frontend/src/metabase/reference/databases/FieldDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import FieldSidebar from "./FieldSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import FieldDetail from "metabase/reference/databases/FieldDetail.jsx";
+import FieldSidebar from "./FieldSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import FieldDetail from "metabase/reference/databases/FieldDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/FieldList.jsx b/frontend/src/metabase/reference/databases/FieldList.jsx
index a3578d5a3be..afc32edb8fd 100644
--- a/frontend/src/metabase/reference/databases/FieldList.jsx
+++ b/frontend/src/metabase/reference/databases/FieldList.jsx
@@ -8,13 +8,13 @@ import S from "metabase/components/List.css";
import R from "metabase/reference/Reference.css";
import F from "metabase/reference/components/Field.css";
-import Field from "metabase/reference/components/Field.jsx";
-import List from "metabase/components/List.jsx";
-import EmptyState from "metabase/components/EmptyState.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import Field from "metabase/reference/components/Field";
+import List from "metabase/components/List";
+import EmptyState from "metabase/components/EmptyState";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
import cx from "classnames";
diff --git a/frontend/src/metabase/reference/databases/FieldListContainer.jsx b/frontend/src/metabase/reference/databases/FieldListContainer.jsx
index a09c13b90ef..228def21144 100644
--- a/frontend/src/metabase/reference/databases/FieldListContainer.jsx
+++ b/frontend/src/metabase/reference/databases/FieldListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import TableSidebar from "./TableSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import FieldList from "metabase/reference/databases/FieldList.jsx";
+import TableSidebar from "./TableSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import FieldList from "metabase/reference/databases/FieldList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/TableDetail.jsx b/frontend/src/metabase/reference/databases/TableDetail.jsx
index 00be797c407..5e8ef06843a 100644
--- a/frontend/src/metabase/reference/databases/TableDetail.jsx
+++ b/frontend/src/metabase/reference/databases/TableDetail.jsx
@@ -7,13 +7,13 @@ import { push } from "react-router-redux";
import { t } from "ttag";
import S from "metabase/reference/Reference.css";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
-import UsefulQuestions from "metabase/reference/components/UsefulQuestions.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
+import UsefulQuestions from "metabase/reference/components/UsefulQuestions";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/databases/TableDetailContainer.jsx b/frontend/src/metabase/reference/databases/TableDetailContainer.jsx
index 065a2c12593..3bda7bbfa58 100644
--- a/frontend/src/metabase/reference/databases/TableDetailContainer.jsx
+++ b/frontend/src/metabase/reference/databases/TableDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import TableSidebar from "./TableSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import TableDetail from "metabase/reference/databases/TableDetail.jsx";
+import TableSidebar from "./TableSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import TableDetail from "metabase/reference/databases/TableDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/TableList.jsx b/frontend/src/metabase/reference/databases/TableList.jsx
index 0de78fa1d88..2fcd0df144c 100644
--- a/frontend/src/metabase/reference/databases/TableList.jsx
+++ b/frontend/src/metabase/reference/databases/TableList.jsx
@@ -8,13 +8,13 @@ import { isQueryable } from "metabase/lib/table";
import S from "metabase/components/List.css";
import R from "metabase/reference/Reference.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import EmptyState from "metabase/components/EmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import EmptyState from "metabase/components/EmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import {
getDatabase,
diff --git a/frontend/src/metabase/reference/databases/TableListContainer.jsx b/frontend/src/metabase/reference/databases/TableListContainer.jsx
index be38499f2e0..adb9538fed9 100644
--- a/frontend/src/metabase/reference/databases/TableListContainer.jsx
+++ b/frontend/src/metabase/reference/databases/TableListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import DatabaseSidebar from "./DatabaseSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import TableList from "metabase/reference/databases/TableList.jsx";
+import DatabaseSidebar from "./DatabaseSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import TableList from "metabase/reference/databases/TableList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/databases/TableQuestions.jsx b/frontend/src/metabase/reference/databases/TableQuestions.jsx
index b38c643f992..14c64cd9a3b 100644
--- a/frontend/src/metabase/reference/databases/TableQuestions.jsx
+++ b/frontend/src/metabase/reference/databases/TableQuestions.jsx
@@ -10,13 +10,13 @@ import * as Urls from "metabase/lib/urls";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/databases/TableQuestionsContainer.jsx b/frontend/src/metabase/reference/databases/TableQuestionsContainer.jsx
index 099050c1e89..89658b90a1a 100644
--- a/frontend/src/metabase/reference/databases/TableQuestionsContainer.jsx
+++ b/frontend/src/metabase/reference/databases/TableQuestionsContainer.jsx
@@ -3,10 +3,10 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import TableSidebar from "./TableSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
+import TableSidebar from "./TableSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
-import TableQuestions from "metabase/reference/databases/TableQuestions.jsx";
+import TableQuestions from "metabase/reference/databases/TableQuestions";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/guide/BaseSidebar.jsx b/frontend/src/metabase/reference/guide/BaseSidebar.jsx
index 9a1d8fb9a70..cea6f06d1b5 100644
--- a/frontend/src/metabase/reference/guide/BaseSidebar.jsx
+++ b/frontend/src/metabase/reference/guide/BaseSidebar.jsx
@@ -3,8 +3,8 @@ import React from "react";
import PropTypes from "prop-types";
import S from "metabase/components/Sidebar.css";
import { t } from "ttag";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import SidebarItem from "metabase/components/SidebarItem.jsx";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import SidebarItem from "metabase/components/SidebarItem";
import cx from "classnames";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/reference/guide/GettingStartedGuide.jsx b/frontend/src/metabase/reference/guide/GettingStartedGuide.jsx
index 659eaf1937e..5cdc54c6407 100644
--- a/frontend/src/metabase/reference/guide/GettingStartedGuide.jsx
+++ b/frontend/src/metabase/reference/guide/GettingStartedGuide.jsx
@@ -6,10 +6,10 @@ import { connect } from "react-redux";
import { t, jt } from "ttag";
import cx from "classnames";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import GuideHeader from "metabase/reference/components/GuideHeader.jsx";
-import GuideDetail from "metabase/reference/components/GuideDetail.jsx";
+import GuideHeader from "metabase/reference/components/GuideHeader";
+import GuideDetail from "metabase/reference/components/GuideDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/guide/GettingStartedGuideContainer.jsx b/frontend/src/metabase/reference/guide/GettingStartedGuideContainer.jsx
index 7bcc473e1e5..da2ed33d2f1 100644
--- a/frontend/src/metabase/reference/guide/GettingStartedGuideContainer.jsx
+++ b/frontend/src/metabase/reference/guide/GettingStartedGuideContainer.jsx
@@ -3,8 +3,8 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import GettingStartedGuide from "metabase/reference/guide/GettingStartedGuide.jsx";
-import GettingStartedGuideEditForm from "metabase/reference/guide/GettingStartedGuideEditForm.jsx";
+import GettingStartedGuide from "metabase/reference/guide/GettingStartedGuide";
+import GettingStartedGuideEditForm from "metabase/reference/guide/GettingStartedGuideEditForm";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/guide/GettingStartedGuideEditForm.jsx b/frontend/src/metabase/reference/guide/GettingStartedGuideEditForm.jsx
index 8f5d6fcff43..0dc8e1e0fb7 100644
--- a/frontend/src/metabase/reference/guide/GettingStartedGuideEditForm.jsx
+++ b/frontend/src/metabase/reference/guide/GettingStartedGuideEditForm.jsx
@@ -6,13 +6,13 @@ import { reduxForm } from "redux-form";
import { t } from "ttag";
import cx from "classnames";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import CreateDashboardModal from "metabase/components/CreateDashboardModal.jsx";
-import Modal from "metabase/components/Modal.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import CreateDashboardModal from "metabase/components/CreateDashboardModal";
+import Modal from "metabase/components/Modal";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import GuideEditSection from "metabase/reference/components/GuideEditSection.jsx";
-import GuideDetailEditor from "metabase/reference/components/GuideDetailEditor.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import GuideEditSection from "metabase/reference/components/GuideEditSection";
+import GuideDetailEditor from "metabase/reference/components/GuideDetailEditor";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/metrics/MetricDetail.jsx b/frontend/src/metabase/reference/metrics/MetricDetail.jsx
index 6a979528e26..4d10e24b500 100644
--- a/frontend/src/metabase/reference/metrics/MetricDetail.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricDetail.jsx
@@ -5,14 +5,14 @@ import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { push } from "react-router-redux";
import { t } from "ttag";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
-import FieldsToGroupBy from "metabase/reference/components/FieldsToGroupBy.jsx";
-import Formula from "metabase/reference/components/Formula.jsx";
-import MetricImportantFieldsDetail from "metabase/reference/components/MetricImportantFieldsDetail.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
+import FieldsToGroupBy from "metabase/reference/components/FieldsToGroupBy";
+import Formula from "metabase/reference/components/Formula";
+import MetricImportantFieldsDetail from "metabase/reference/components/MetricImportantFieldsDetail";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/metrics/MetricDetailContainer.jsx b/frontend/src/metabase/reference/metrics/MetricDetailContainer.jsx
index 4b89cabf30a..d2aa2338c49 100644
--- a/frontend/src/metabase/reference/metrics/MetricDetailContainer.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import MetricSidebar from "./MetricSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import MetricDetail from "metabase/reference/metrics/MetricDetail.jsx";
+import MetricSidebar from "./MetricSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import MetricDetail from "metabase/reference/metrics/MetricDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/metrics/MetricList.jsx b/frontend/src/metabase/reference/metrics/MetricList.jsx
index 1eccd30a6c9..12a9e27634f 100644
--- a/frontend/src/metabase/reference/metrics/MetricList.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricList.jsx
@@ -7,13 +7,13 @@ import { isQueryable } from "metabase/lib/table";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getMetrics, getError, getLoading } from "../selectors";
diff --git a/frontend/src/metabase/reference/metrics/MetricListContainer.jsx b/frontend/src/metabase/reference/metrics/MetricListContainer.jsx
index 8e609929892..c1501280448 100644
--- a/frontend/src/metabase/reference/metrics/MetricListContainer.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import BaseSidebar from "metabase/reference/guide/BaseSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import MetricList from "metabase/reference/metrics/MetricList.jsx";
+import BaseSidebar from "metabase/reference/guide/BaseSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import MetricList from "metabase/reference/metrics/MetricList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/metrics/MetricQuestions.jsx b/frontend/src/metabase/reference/metrics/MetricQuestions.jsx
index 9bdf0446f83..7df2de9547c 100644
--- a/frontend/src/metabase/reference/metrics/MetricQuestions.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricQuestions.jsx
@@ -10,13 +10,13 @@ import * as Urls from "metabase/lib/urls";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/metrics/MetricQuestionsContainer.jsx b/frontend/src/metabase/reference/metrics/MetricQuestionsContainer.jsx
index 3701953aeb1..66a253964be 100644
--- a/frontend/src/metabase/reference/metrics/MetricQuestionsContainer.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricQuestionsContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import MetricSidebar from "./MetricSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import MetricQuestions from "metabase/reference/metrics/MetricQuestions.jsx";
+import MetricSidebar from "./MetricSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import MetricQuestions from "metabase/reference/metrics/MetricQuestions";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/metrics/MetricRevisions.jsx b/frontend/src/metabase/reference/metrics/MetricRevisions.jsx
index dccb369c2be..dc9e411fd6f 100644
--- a/frontend/src/metabase/reference/metrics/MetricRevisions.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricRevisions.jsx
@@ -20,10 +20,10 @@ import {
getError,
} from "../selectors";
-import Revision from "metabase/admin/datamodel/components/revisions/Revision.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import EmptyState from "metabase/components/EmptyState.jsx";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import Revision from "metabase/admin/datamodel/components/revisions/Revision";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import EmptyState from "metabase/components/EmptyState";
+import ReferenceHeader from "../components/ReferenceHeader";
const emptyStateData = {
message: t`There are no revisions for this metric`,
diff --git a/frontend/src/metabase/reference/metrics/MetricRevisionsContainer.jsx b/frontend/src/metabase/reference/metrics/MetricRevisionsContainer.jsx
index a48a83c18ba..c7eb95606bf 100644
--- a/frontend/src/metabase/reference/metrics/MetricRevisionsContainer.jsx
+++ b/frontend/src/metabase/reference/metrics/MetricRevisionsContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import MetricSidebar from "./MetricSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import MetricRevisions from "metabase/reference/metrics/MetricRevisions.jsx";
+import MetricSidebar from "./MetricSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import MetricRevisions from "metabase/reference/metrics/MetricRevisions";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentDetail.jsx b/frontend/src/metabase/reference/segments/SegmentDetail.jsx
index 44a0c3db0f1..ba965a9ed2e 100644
--- a/frontend/src/metabase/reference/segments/SegmentDetail.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentDetail.jsx
@@ -4,14 +4,14 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { t } from "ttag";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
-import UsefulQuestions from "metabase/reference/components/UsefulQuestions.jsx";
-import Formula from "metabase/reference/components/Formula.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
+import UsefulQuestions from "metabase/reference/components/UsefulQuestions";
+import Formula from "metabase/reference/components/Formula";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/segments/SegmentDetailContainer.jsx b/frontend/src/metabase/reference/segments/SegmentDetailContainer.jsx
index a1715aacd75..17a95052068 100644
--- a/frontend/src/metabase/reference/segments/SegmentDetailContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import SegmentSidebar from "./SegmentSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentDetail from "metabase/reference/segments/SegmentDetail.jsx";
+import SegmentSidebar from "./SegmentSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentDetail from "metabase/reference/segments/SegmentDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentFieldDetail.jsx b/frontend/src/metabase/reference/segments/SegmentFieldDetail.jsx
index 9b572da9134..5f1f37c64b3 100644
--- a/frontend/src/metabase/reference/segments/SegmentFieldDetail.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentFieldDetail.jsx
@@ -6,14 +6,14 @@ import { reduxForm } from "redux-form";
import { t } from "ttag";
import S from "metabase/reference/Reference.css";
-import List from "metabase/components/List.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import List from "metabase/components/List";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
-import Detail from "metabase/reference/components/Detail.jsx";
-import FieldTypeDetail from "metabase/reference/components/FieldTypeDetail.jsx";
-import UsefulQuestions from "metabase/reference/components/UsefulQuestions.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
+import Detail from "metabase/reference/components/Detail";
+import FieldTypeDetail from "metabase/reference/components/FieldTypeDetail";
+import UsefulQuestions from "metabase/reference/components/UsefulQuestions";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/segments/SegmentFieldDetailContainer.jsx b/frontend/src/metabase/reference/segments/SegmentFieldDetailContainer.jsx
index 65fefd31738..65fd80979fd 100644
--- a/frontend/src/metabase/reference/segments/SegmentFieldDetailContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentFieldDetailContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import SegmentFieldSidebar from "./SegmentFieldSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentFieldDetail from "metabase/reference/segments/SegmentFieldDetail.jsx";
+import SegmentFieldSidebar from "./SegmentFieldSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentFieldDetail from "metabase/reference/segments/SegmentFieldDetail";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentFieldList.jsx b/frontend/src/metabase/reference/segments/SegmentFieldList.jsx
index fe292efd564..09d3f9ff789 100644
--- a/frontend/src/metabase/reference/segments/SegmentFieldList.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentFieldList.jsx
@@ -8,13 +8,13 @@ import S from "metabase/components/List.css";
import R from "metabase/reference/Reference.css";
import F from "metabase/reference/components/Field.css";
-import Field from "metabase/reference/components/Field.jsx";
-import List from "metabase/components/List.jsx";
-import EmptyState from "metabase/components/EmptyState.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import Field from "metabase/reference/components/Field";
+import List from "metabase/components/List";
+import EmptyState from "metabase/components/EmptyState";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import EditHeader from "metabase/reference/components/EditHeader.jsx";
-import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader.jsx";
+import EditHeader from "metabase/reference/components/EditHeader";
+import EditableReferenceHeader from "metabase/reference/components/EditableReferenceHeader";
import cx from "classnames";
diff --git a/frontend/src/metabase/reference/segments/SegmentFieldListContainer.jsx b/frontend/src/metabase/reference/segments/SegmentFieldListContainer.jsx
index 8326c4fd2e6..688aa6fda2a 100644
--- a/frontend/src/metabase/reference/segments/SegmentFieldListContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentFieldListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import SegmentSidebar from "./SegmentSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentFieldList from "metabase/reference/segments/SegmentFieldList.jsx";
+import SegmentSidebar from "./SegmentSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentFieldList from "metabase/reference/segments/SegmentFieldList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentFieldSidebar.jsx b/frontend/src/metabase/reference/segments/SegmentFieldSidebar.jsx
index 2993382ce1f..8bb1779a568 100644
--- a/frontend/src/metabase/reference/segments/SegmentFieldSidebar.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentFieldSidebar.jsx
@@ -3,8 +3,8 @@ import React from "react";
import PropTypes from "prop-types";
import S from "metabase/components/Sidebar.css";
import { t } from "ttag";
-import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import SidebarItem from "metabase/components/SidebarItem.jsx";
+import Breadcrumbs from "metabase/components/Breadcrumbs";
+import SidebarItem from "metabase/components/SidebarItem";
import cx from "classnames";
import pure from "recompose/pure";
diff --git a/frontend/src/metabase/reference/segments/SegmentList.jsx b/frontend/src/metabase/reference/segments/SegmentList.jsx
index 3c2708ae7f0..4ae815e7067 100644
--- a/frontend/src/metabase/reference/segments/SegmentList.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentList.jsx
@@ -8,13 +8,13 @@ import MetabaseSettings from "metabase/lib/settings";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getSegments, getError, getLoading } from "../selectors";
diff --git a/frontend/src/metabase/reference/segments/SegmentListContainer.jsx b/frontend/src/metabase/reference/segments/SegmentListContainer.jsx
index d2e66af545e..947133b2f09 100644
--- a/frontend/src/metabase/reference/segments/SegmentListContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentListContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import BaseSidebar from "metabase/reference/guide/BaseSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentList from "metabase/reference/segments/SegmentList.jsx";
+import BaseSidebar from "metabase/reference/guide/BaseSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentList from "metabase/reference/segments/SegmentList";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentQuestions.jsx b/frontend/src/metabase/reference/segments/SegmentQuestions.jsx
index 34f38de3709..366736a787d 100644
--- a/frontend/src/metabase/reference/segments/SegmentQuestions.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentQuestions.jsx
@@ -10,13 +10,13 @@ import * as Urls from "metabase/lib/urls";
import S from "metabase/components/List.css";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import ReferenceHeader from "../components/ReferenceHeader";
import { getQuestionUrl } from "../utils";
diff --git a/frontend/src/metabase/reference/segments/SegmentQuestionsContainer.jsx b/frontend/src/metabase/reference/segments/SegmentQuestionsContainer.jsx
index 97fd9950077..7f28b0a5e8f 100644
--- a/frontend/src/metabase/reference/segments/SegmentQuestionsContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentQuestionsContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import SegmentSidebar from "./SegmentSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentQuestions from "metabase/reference/segments/SegmentQuestions.jsx";
+import SegmentSidebar from "./SegmentSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentQuestions from "metabase/reference/segments/SegmentQuestions";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/segments/SegmentRevisions.jsx b/frontend/src/metabase/reference/segments/SegmentRevisions.jsx
index b7c12789469..39740657276 100644
--- a/frontend/src/metabase/reference/segments/SegmentRevisions.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentRevisions.jsx
@@ -20,10 +20,10 @@ import {
getError,
} from "../selectors";
-import Revision from "metabase/admin/datamodel/components/revisions/Revision.jsx";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
-import EmptyState from "metabase/components/EmptyState.jsx";
-import ReferenceHeader from "../components/ReferenceHeader.jsx";
+import Revision from "metabase/admin/datamodel/components/revisions/Revision";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import EmptyState from "metabase/components/EmptyState";
+import ReferenceHeader from "../components/ReferenceHeader";
const emptyStateData = {
message: t`There are no revisions for this segment`,
diff --git a/frontend/src/metabase/reference/segments/SegmentRevisionsContainer.jsx b/frontend/src/metabase/reference/segments/SegmentRevisionsContainer.jsx
index ccff3d570e1..6a72e0cfd3b 100644
--- a/frontend/src/metabase/reference/segments/SegmentRevisionsContainer.jsx
+++ b/frontend/src/metabase/reference/segments/SegmentRevisionsContainer.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
-import SegmentSidebar from "./SegmentSidebar.jsx";
-import SidebarLayout from "metabase/components/SidebarLayout.jsx";
-import SegmentRevisions from "metabase/reference/segments/SegmentRevisions.jsx";
+import SegmentSidebar from "./SegmentSidebar";
+import SidebarLayout from "metabase/components/SidebarLayout";
+import SegmentRevisions from "metabase/reference/segments/SegmentRevisions";
import * as metadataActions from "metabase/redux/metadata";
import * as actions from "metabase/reference/reference";
diff --git a/frontend/src/metabase/reference/utils.js b/frontend/src/metabase/reference/utils.js
index 939c0bfb7e7..18170d2852e 100644
--- a/frontend/src/metabase/reference/utils.js
+++ b/frontend/src/metabase/reference/utils.js
@@ -71,7 +71,7 @@ export const getQuestion = ({
// http://ramdajs.com/0.21.0/index.html
const question = chain(newQuestion)
.updateIn(["dataset_query", "query", "aggregation"], aggregation =>
- getCount ? ["count"] : aggregation,
+ getCount ? [["count"]] : aggregation,
)
.updateIn(["display"], display => visualization || display)
.updateIn(["dataset_query", "query", "breakout"], oldBreakout => {
@@ -89,7 +89,7 @@ export const getQuestion = ({
return assocIn(
question,
["dataset_query", "query", "aggregation"],
- ["metric", metricId],
+ [["metric", metricId]],
);
}
@@ -97,7 +97,7 @@ export const getQuestion = ({
return assocIn(
question,
["dataset_query", "query", "filter"],
- ["and", ["segment", segmentId]],
+ ["segment", segmentId],
);
}
diff --git a/frontend/src/metabase/routes-embed.jsx b/frontend/src/metabase/routes-embed.jsx
index 0f2628b0a37..1b2a03869e8 100644
--- a/frontend/src/metabase/routes-embed.jsx
+++ b/frontend/src/metabase/routes-embed.jsx
@@ -6,9 +6,9 @@ import { Route } from "react-router";
import PublicNotFound from "metabase/public/components/PublicNotFound";
-import PublicApp from "metabase/public/containers/PublicApp.jsx";
-import PublicQuestion from "metabase/public/containers/PublicQuestion.jsx";
-import PublicDashboard from "metabase/public/containers/PublicDashboard.jsx";
+import PublicApp from "metabase/public/containers/PublicApp";
+import PublicQuestion from "metabase/public/containers/PublicQuestion";
+import PublicDashboard from "metabase/public/containers/PublicDashboard";
export const getRoutes = store => (
<Route>
diff --git a/frontend/src/metabase/routes-public.jsx b/frontend/src/metabase/routes-public.jsx
index 194ed7c61a1..4cee214b380 100644
--- a/frontend/src/metabase/routes-public.jsx
+++ b/frontend/src/metabase/routes-public.jsx
@@ -6,9 +6,9 @@ import { Route } from "react-router";
import PublicNotFound from "metabase/public/components/PublicNotFound";
-import PublicApp from "metabase/public/containers/PublicApp.jsx";
-import PublicQuestion from "metabase/public/containers/PublicQuestion.jsx";
-import PublicDashboard from "metabase/public/containers/PublicDashboard.jsx";
+import PublicApp from "metabase/public/containers/PublicApp";
+import PublicQuestion from "metabase/public/containers/PublicQuestion";
+import PublicDashboard from "metabase/public/containers/PublicDashboard";
export const getRoutes = store => (
<Route>
diff --git a/frontend/src/metabase/routes.jsx b/frontend/src/metabase/routes.jsx
index b48286c7dcf..3f7ca90835a 100644
--- a/frontend/src/metabase/routes.jsx
+++ b/frontend/src/metabase/routes.jsx
@@ -17,11 +17,11 @@ import HomepageApp from "metabase/home/containers/HomepageApp";
// auth containers
import AuthApp from "metabase/auth/AuthApp";
-import ForgotPasswordApp from "metabase/auth/containers/ForgotPasswordApp.jsx";
-import LoginApp from "metabase/auth/containers/LoginApp.jsx";
-import LogoutApp from "metabase/auth/containers/LogoutApp.jsx";
-import PasswordResetApp from "metabase/auth/containers/PasswordResetApp.jsx";
-import GoogleNoAccount from "metabase/auth/components/GoogleNoAccount.jsx";
+import ForgotPasswordApp from "metabase/auth/containers/ForgotPasswordApp";
+import LoginApp from "metabase/auth/containers/LoginApp";
+import LogoutApp from "metabase/auth/containers/LogoutApp";
+import PasswordResetApp from "metabase/auth/containers/PasswordResetApp";
+import GoogleNoAccount from "metabase/auth/components/GoogleNoAccount";
/* Dashboards */
import DashboardApp from "metabase/dashboard/containers/DashboardApp";
@@ -34,19 +34,19 @@ import {
TableBrowser,
} from "metabase/components/BrowseApp";
-import QueryBuilder from "metabase/query_builder/containers/QueryBuilder.jsx";
+import QueryBuilder from "metabase/query_builder/containers/QueryBuilder";
-import CollectionEdit from "metabase/collections/containers/CollectionEdit.jsx";
-import CollectionCreate from "metabase/collections/containers/CollectionCreate.jsx";
+import CollectionEdit from "metabase/collections/containers/CollectionEdit";
+import CollectionCreate from "metabase/collections/containers/CollectionCreate";
import ArchiveCollectionModal from "metabase/components/ArchiveCollectionModal";
import CollectionPermissionsModal from "metabase/admin/permissions/containers/CollectionPermissionsModal";
import UserCollectionList from "metabase/containers/UserCollectionList";
-import PulseEditApp from "metabase/pulse/containers/PulseEditApp.jsx";
-import SetupApp from "metabase/setup/containers/SetupApp.jsx";
-import PostSetupApp from "metabase/setup/containers/PostSetupApp.jsx";
-import UserSettingsApp from "metabase/user/containers/UserSettingsApp.jsx";
-import EntityPage from "metabase/components/EntityPage.jsx";
+import PulseEditApp from "metabase/pulse/containers/PulseEditApp";
+import SetupApp from "metabase/setup/containers/SetupApp";
+import PostSetupApp from "metabase/setup/containers/PostSetupApp";
+import UserSettingsApp from "metabase/user/containers/UserSettingsApp";
+import EntityPage from "metabase/components/EntityPage";
// new question
import NewQueryOptions from "metabase/new_query/containers/NewQueryOptions";
@@ -55,32 +55,32 @@ import CreateDashboardModal from "metabase/components/CreateDashboardModal";
import { NotFound, Unauthorized } from "metabase/containers/ErrorPages";
// Reference Guide
-import GettingStartedGuideContainer from "metabase/reference/guide/GettingStartedGuideContainer.jsx";
+import GettingStartedGuideContainer from "metabase/reference/guide/GettingStartedGuideContainer";
// Reference Metrics
-import MetricListContainer from "metabase/reference/metrics/MetricListContainer.jsx";
-import MetricDetailContainer from "metabase/reference/metrics/MetricDetailContainer.jsx";
-import MetricQuestionsContainer from "metabase/reference/metrics/MetricQuestionsContainer.jsx";
-import MetricRevisionsContainer from "metabase/reference/metrics/MetricRevisionsContainer.jsx";
+import MetricListContainer from "metabase/reference/metrics/MetricListContainer";
+import MetricDetailContainer from "metabase/reference/metrics/MetricDetailContainer";
+import MetricQuestionsContainer from "metabase/reference/metrics/MetricQuestionsContainer";
+import MetricRevisionsContainer from "metabase/reference/metrics/MetricRevisionsContainer";
// Reference Segments
-import SegmentListContainer from "metabase/reference/segments/SegmentListContainer.jsx";
-import SegmentDetailContainer from "metabase/reference/segments/SegmentDetailContainer.jsx";
-import SegmentQuestionsContainer from "metabase/reference/segments/SegmentQuestionsContainer.jsx";
-import SegmentRevisionsContainer from "metabase/reference/segments/SegmentRevisionsContainer.jsx";
-import SegmentFieldListContainer from "metabase/reference/segments/SegmentFieldListContainer.jsx";
-import SegmentFieldDetailContainer from "metabase/reference/segments/SegmentFieldDetailContainer.jsx";
+import SegmentListContainer from "metabase/reference/segments/SegmentListContainer";
+import SegmentDetailContainer from "metabase/reference/segments/SegmentDetailContainer";
+import SegmentQuestionsContainer from "metabase/reference/segments/SegmentQuestionsContainer";
+import SegmentRevisionsContainer from "metabase/reference/segments/SegmentRevisionsContainer";
+import SegmentFieldListContainer from "metabase/reference/segments/SegmentFieldListContainer";
+import SegmentFieldDetailContainer from "metabase/reference/segments/SegmentFieldDetailContainer";
// Reference Databases
-import DatabaseListContainer from "metabase/reference/databases/DatabaseListContainer.jsx";
-import DatabaseDetailContainer from "metabase/reference/databases/DatabaseDetailContainer.jsx";
-import TableListContainer from "metabase/reference/databases/TableListContainer.jsx";
-import TableDetailContainer from "metabase/reference/databases/TableDetailContainer.jsx";
-import TableQuestionsContainer from "metabase/reference/databases/TableQuestionsContainer.jsx";
-import FieldListContainer from "metabase/reference/databases/FieldListContainer.jsx";
-import FieldDetailContainer from "metabase/reference/databases/FieldDetailContainer.jsx";
+import DatabaseListContainer from "metabase/reference/databases/DatabaseListContainer";
+import DatabaseDetailContainer from "metabase/reference/databases/DatabaseDetailContainer";
+import TableListContainer from "metabase/reference/databases/TableListContainer";
+import TableDetailContainer from "metabase/reference/databases/TableDetailContainer";
+import TableQuestionsContainer from "metabase/reference/databases/TableQuestionsContainer";
+import FieldListContainer from "metabase/reference/databases/FieldListContainer";
+import FieldDetailContainer from "metabase/reference/databases/FieldDetailContainer";
import getAdminRoutes from "metabase/admin/routes";
-import PublicQuestion from "metabase/public/containers/PublicQuestion.jsx";
-import PublicDashboard from "metabase/public/containers/PublicDashboard.jsx";
+import PublicQuestion from "metabase/public/containers/PublicQuestion";
+import PublicDashboard from "metabase/public/containers/PublicDashboard";
import DashboardHistoryModal from "metabase/dashboard/components/DashboardHistoryModal";
import DashboardMoveModal from "metabase/dashboard/components/DashboardMoveModal";
import DashboardCopyModal from "metabase/dashboard/components/DashboardCopyModal";
@@ -89,7 +89,7 @@ import { ModalRoute } from "metabase/hoc/ModalRoute";
import CollectionLanding from "metabase/components/CollectionLanding";
import Overworld from "metabase/containers/Overworld";
-import ArchiveApp from "metabase/home/containers/ArchiveApp.jsx";
+import ArchiveApp from "metabase/home/containers/ArchiveApp";
import SearchApp from "metabase/home/containers/SearchApp";
const MetabaseIsSetup = UserAuthWrapper({
diff --git a/frontend/src/metabase/setup/components/CollapsedStep.jsx b/frontend/src/metabase/setup/components/CollapsedStep.jsx
index bf48e5f91c3..5095e489e3f 100644
--- a/frontend/src/metabase/setup/components/CollapsedStep.jsx
+++ b/frontend/src/metabase/setup/components/CollapsedStep.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
export default class CollapsedStep extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/setup/components/DatabaseConnectionStep.jsx b/frontend/src/metabase/setup/components/DatabaseConnectionStep.jsx
index 78ffdd009fd..9e5cf46f71c 100644
--- a/frontend/src/metabase/setup/components/DatabaseConnectionStep.jsx
+++ b/frontend/src/metabase/setup/components/DatabaseConnectionStep.jsx
@@ -2,11 +2,11 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import StepTitle from "./StepTitle.jsx";
-import CollapsedStep from "./CollapsedStep.jsx";
+import StepTitle from "./StepTitle";
+import CollapsedStep from "./CollapsedStep";
-import DatabaseDetailsForm from "metabase/components/DatabaseDetailsForm.jsx";
-import FormField from "metabase/components/form/FormField.jsx";
+import DatabaseDetailsForm from "metabase/components/DatabaseDetailsForm";
+import FormField from "metabase/components/form/FormField";
import MetabaseAnalytics from "metabase/lib/analytics";
import MetabaseSettings from "metabase/lib/settings";
diff --git a/frontend/src/metabase/setup/components/DatabaseSchedulingStep.jsx b/frontend/src/metabase/setup/components/DatabaseSchedulingStep.jsx
index 5721762af41..a75dca29f8c 100644
--- a/frontend/src/metabase/setup/components/DatabaseSchedulingStep.jsx
+++ b/frontend/src/metabase/setup/components/DatabaseSchedulingStep.jsx
@@ -2,8 +2,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import StepTitle from "./StepTitle.jsx";
-import CollapsedStep from "./CollapsedStep.jsx";
+import StepTitle from "./StepTitle";
+import CollapsedStep from "./CollapsedStep";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/setup/components/PreferencesStep.jsx b/frontend/src/metabase/setup/components/PreferencesStep.jsx
index 6a0664c134f..4e099ab79f8 100644
--- a/frontend/src/metabase/setup/components/PreferencesStep.jsx
+++ b/frontend/src/metabase/setup/components/PreferencesStep.jsx
@@ -4,10 +4,10 @@ import PropTypes from "prop-types";
import { t, jt } from "ttag";
import MetabaseAnalytics from "metabase/lib/analytics";
import MetabaseSettings from "metabase/lib/settings";
-import Toggle from "metabase/components/Toggle.jsx";
+import Toggle from "metabase/components/Toggle";
-import StepTitle from "./StepTitle.jsx";
-import CollapsedStep from "./CollapsedStep.jsx";
+import StepTitle from "./StepTitle";
+import CollapsedStep from "./CollapsedStep";
export default class PreferencesStep extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/setup/components/Setup.jsx b/frontend/src/metabase/setup/components/Setup.jsx
index a01b90fdfc4..4e4c8777c39 100644
--- a/frontend/src/metabase/setup/components/Setup.jsx
+++ b/frontend/src/metabase/setup/components/Setup.jsx
@@ -4,14 +4,14 @@ import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import { Link } from "react-router";
import { t } from "ttag";
-import LogoIcon from "metabase/components/LogoIcon.jsx";
-import NewsletterForm from "metabase/components/NewsletterForm.jsx";
+import LogoIcon from "metabase/components/LogoIcon";
+import NewsletterForm from "metabase/components/NewsletterForm";
import MetabaseAnalytics from "metabase/lib/analytics";
import MetabaseSettings from "metabase/lib/settings";
-import UserStep from "./UserStep.jsx";
-import DatabaseConnectionStep from "./DatabaseConnectionStep.jsx";
-import PreferencesStep from "./PreferencesStep.jsx";
+import UserStep from "./UserStep";
+import DatabaseConnectionStep from "./DatabaseConnectionStep";
+import PreferencesStep from "./PreferencesStep";
import DatabaseSchedulingStep from "metabase/setup/components/DatabaseSchedulingStep";
const WELCOME_STEP_NUMBER = 0;
diff --git a/frontend/src/metabase/setup/components/StepTitle.jsx b/frontend/src/metabase/setup/components/StepTitle.jsx
index a361db6d2e7..0e104af6576 100644
--- a/frontend/src/metabase/setup/components/StepTitle.jsx
+++ b/frontend/src/metabase/setup/components/StepTitle.jsx
@@ -1,7 +1,7 @@
/* eslint "react/prop-types": "warn" */
import React, { Component } from "react";
import PropTypes from "prop-types";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
export default class StepTitle extends Component {
static propTypes = {
diff --git a/frontend/src/metabase/setup/components/UserStep.jsx b/frontend/src/metabase/setup/components/UserStep.jsx
index e1881473911..95a033d63c8 100644
--- a/frontend/src/metabase/setup/components/UserStep.jsx
+++ b/frontend/src/metabase/setup/components/UserStep.jsx
@@ -3,15 +3,15 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Box, Flex } from "grid-styled";
import { t } from "ttag";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
import MetabaseAnalytics from "metabase/lib/analytics";
import MetabaseSettings from "metabase/lib/settings";
import MetabaseUtils from "metabase/lib/utils";
-import StepTitle from "./StepTitle.jsx";
-import CollapsedStep from "./CollapsedStep.jsx";
+import StepTitle from "./StepTitle";
+import CollapsedStep from "./CollapsedStep";
import _ from "underscore";
import cx from "classnames";
diff --git a/frontend/src/metabase/setup/containers/SetupApp.jsx b/frontend/src/metabase/setup/containers/SetupApp.jsx
index cb913075498..9a006f41853 100644
--- a/frontend/src/metabase/setup/containers/SetupApp.jsx
+++ b/frontend/src/metabase/setup/containers/SetupApp.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
import { connect } from "react-redux";
import fitViewport from "metabase/hoc/FitViewPort";
-import Setup from "../components/Setup.jsx";
+import Setup from "../components/Setup";
import { setupSelectors } from "../selectors";
import {
diff --git a/frontend/src/metabase/user/components/SetUserPassword.jsx b/frontend/src/metabase/user/components/SetUserPassword.jsx
index 26efd37211f..61015f1cddd 100644
--- a/frontend/src/metabase/user/components/SetUserPassword.jsx
+++ b/frontend/src/metabase/user/components/SetUserPassword.jsx
@@ -3,9 +3,9 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import { t } from "ttag";
-import FormField from "metabase/components/form/FormField.jsx";
-import FormLabel from "metabase/components/form/FormLabel.jsx";
-import FormMessage from "metabase/components/form/FormMessage.jsx";
+import FormField from "metabase/components/form/FormField";
+import FormLabel from "metabase/components/form/FormLabel";
+import FormMessage from "metabase/components/form/FormMessage";
import MetabaseUtils from "metabase/lib/utils";
import MetabaseSettings from "metabase/lib/settings";
diff --git a/frontend/src/metabase/user/containers/UserSettingsApp.jsx b/frontend/src/metabase/user/containers/UserSettingsApp.jsx
index d182f6590b7..f8eb88df569 100644
--- a/frontend/src/metabase/user/containers/UserSettingsApp.jsx
+++ b/frontend/src/metabase/user/containers/UserSettingsApp.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
-import UserSettings from "../components/UserSettings.jsx";
+import UserSettings from "../components/UserSettings";
import { selectors } from "../selectors";
import { setTab, updatePassword, updateUser } from "../actions";
diff --git a/frontend/src/metabase/visualizations/components/CardRenderer.jsx b/frontend/src/metabase/visualizations/components/CardRenderer.jsx
index 327267b7ac8..4a953ed8310 100644
--- a/frontend/src/metabase/visualizations/components/CardRenderer.jsx
+++ b/frontend/src/metabase/visualizations/components/CardRenderer.jsx
@@ -4,7 +4,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize";
import { isSameSeries } from "metabase/visualizations/lib/utils";
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
index 0c2bd90f156..be7b28565a9 100644
--- a/frontend/src/metabase/visualizations/components/ChartSettings.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -3,12 +3,12 @@ import cx from "classnames";
import { assocIn } from "icepick";
import _ from "underscore";
import { t } from "ttag";
-import Warnings from "metabase/query_builder/components/Warnings.jsx";
+import Warnings from "metabase/query_builder/components/Warnings";
import Button from "metabase/components/Button";
import Radio from "metabase/components/Radio";
-import Visualization from "metabase/visualizations/components/Visualization.jsx";
+import Visualization from "metabase/visualizations/components/Visualization";
import ChartSettingsWidget from "./ChartSettingsWidget";
import { getSettingsWidgetsForSeries } from "metabase/visualizations/lib/settings/visualization";
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip.jsx b/frontend/src/metabase/visualizations/components/ChartTooltip.jsx
index de470e131f7..bd754cc16f9 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip.jsx
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import TooltipPopover from "metabase/components/TooltipPopover.jsx";
+import TooltipPopover from "metabase/components/TooltipPopover";
import { getFriendlyName } from "metabase/visualizations/lib/utils";
import { formatValue } from "metabase/lib/formatting";
diff --git a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
index 4b444a3f2af..2a4e1328ceb 100644
--- a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
@@ -1,10 +1,10 @@
import React, { Component } from "react";
import styles from "./ChartWithLegend.css";
-import LegendVertical from "./LegendVertical.jsx";
-import LegendHorizontal from "./LegendHorizontal.jsx";
+import LegendVertical from "./LegendVertical";
+import LegendHorizontal from "./LegendHorizontal";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize";
import cx from "classnames";
diff --git a/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx b/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
index ad01d3562b3..ff8fdcfb3b4 100644
--- a/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
+++ b/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
import { t } from "ttag";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
import { isString } from "metabase/lib/schema_metadata";
import { MinColumnsError } from "metabase/visualizations/lib/errors";
@@ -10,9 +10,9 @@ import MetabaseSettings from "metabase/lib/settings";
import { formatValue } from "metabase/lib/formatting";
-import ChartWithLegend from "./ChartWithLegend.jsx";
-import LegacyChoropleth from "./LegacyChoropleth.jsx";
-import LeafletChoropleth from "./LeafletChoropleth.jsx";
+import ChartWithLegend from "./ChartWithLegend";
+import LegacyChoropleth from "./LegacyChoropleth";
+import LeafletChoropleth from "./LeafletChoropleth";
import {
computeMinimalBounds,
diff --git a/frontend/src/metabase/visualizations/components/FunnelBar.jsx b/frontend/src/metabase/visualizations/components/FunnelBar.jsx
index 1a2d7fa773e..08ba10ab99d 100644
--- a/frontend/src/metabase/visualizations/components/FunnelBar.jsx
+++ b/frontend/src/metabase/visualizations/components/FunnelBar.jsx
@@ -2,7 +2,7 @@
import React, { Component } from "react";
-import BarChart from "metabase/visualizations/visualizations/BarChart.jsx";
+import BarChart from "metabase/visualizations/visualizations/BarChart";
import { getComputedSettingsForSeries } from "metabase/visualizations/lib/settings/visualization";
import { assocIn } from "icepick";
diff --git a/frontend/src/metabase/visualizations/components/FunnelNormal.jsx b/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
index 5593c7ad1f1..d66160acbfa 100644
--- a/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
+++ b/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
@@ -5,7 +5,7 @@ import React, { Component } from "react";
import cx from "classnames";
import styles from "./FunnelNormal.css";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
+import Ellipsified from "metabase/components/Ellipsified";
import { formatValue } from "metabase/lib/formatting";
import { getFriendlyName } from "metabase/visualizations/lib/utils";
diff --git a/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx b/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx
index a61218f1964..d33a47f1580 100644
--- a/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx
@@ -1,8 +1,8 @@
import React from "react";
-import { normal } from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./CardRenderer";
// import L from "leaflet";
import "leaflet/dist/leaflet.css";
@@ -14,7 +14,7 @@ const LeafletChoropleth = ({
series,
geoJson,
minimalBounds = computeMinimalBounds(geoJson.features),
- getColor = () => normal.blue,
+ getColor = () => color("brand"),
onHoverFeature = () => {},
onClickFeature = () => {},
}) => (
diff --git a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
index 1d88b8bd9a4..cdf4afb8279 100644
--- a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
@@ -1,10 +1,10 @@
-import LeafletMap from "./LeafletMap.jsx";
+import LeafletMap from "./LeafletMap";
import L from "leaflet";
import { t } from "ttag";
import d3 from "d3";
import { rangeForValue } from "metabase/lib/dataset";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
export default class LeafletGridHeatMap extends LeafletMap {
componentDidMount() {
@@ -26,11 +26,11 @@ export default class LeafletGridHeatMap extends LeafletMap {
throw new Error(t`Grid map requires binned longitude/latitude.`);
}
- const color = d3.scale
+ const colorScale = d3.scale
.linear()
.domain([min, max])
.interpolate(d3.interpolateHcl)
- .range([d3.rgb(colors["success"]), d3.rgb(colors["error"])]);
+ .range([d3.rgb(color("success")), d3.rgb(color("error"))]);
const gridSquares = gridLayer.getLayers();
const totalSquares = Math.max(points.length, gridSquares.length);
@@ -45,7 +45,7 @@ export default class LeafletGridHeatMap extends LeafletMap {
}
if (i < points.length) {
- gridSquares[i].setStyle({ color: color(points[i][2]) });
+ gridSquares[i].setStyle({ color: colorScale(points[i][2]) });
const [latMin, latMax] = rangeForValue(points[i][0], latitudeColumn);
const [lonMin, lonMax] = rangeForValue(points[i][1], longitudeColumn);
gridSquares[i].setBounds([[latMin, lonMin], [latMax, lonMax]]);
diff --git a/frontend/src/metabase/visualizations/components/LeafletHeatMap.jsx b/frontend/src/metabase/visualizations/components/LeafletHeatMap.jsx
index 184efccd68a..565e39be580 100644
--- a/frontend/src/metabase/visualizations/components/LeafletHeatMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletHeatMap.jsx
@@ -1,4 +1,4 @@
-import LeafletMap from "./LeafletMap.jsx";
+import LeafletMap from "./LeafletMap";
import L from "leaflet";
import "leaflet.heat";
diff --git a/frontend/src/metabase/visualizations/components/LeafletMarkerPinMap.jsx b/frontend/src/metabase/visualizations/components/LeafletMarkerPinMap.jsx
index 322e9f63a66..0aa0cc1e6e7 100644
--- a/frontend/src/metabase/visualizations/components/LeafletMarkerPinMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletMarkerPinMap.jsx
@@ -1,4 +1,4 @@
-import LeafletMap from "./LeafletMap.jsx";
+import LeafletMap from "./LeafletMap";
import L from "leaflet";
import { isPK } from "metabase/lib/schema_metadata";
diff --git a/frontend/src/metabase/visualizations/components/LeafletTilePinMap.jsx b/frontend/src/metabase/visualizations/components/LeafletTilePinMap.jsx
index c4083497f2f..052da6ddd04 100644
--- a/frontend/src/metabase/visualizations/components/LeafletTilePinMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletTilePinMap.jsx
@@ -1,4 +1,4 @@
-import LeafletMap from "./LeafletMap.jsx";
+import LeafletMap from "./LeafletMap";
import L from "leaflet";
export default class LeafletTilePinMap extends LeafletMap {
diff --git a/frontend/src/metabase/visualizations/components/LegendHorizontal.jsx b/frontend/src/metabase/visualizations/components/LegendHorizontal.jsx
index 2594968b122..31ca1efb977 100644
--- a/frontend/src/metabase/visualizations/components/LegendHorizontal.jsx
+++ b/frontend/src/metabase/visualizations/components/LegendHorizontal.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import styles from "./Legend.css";
-import LegendItem from "./LegendItem.jsx";
+import LegendItem from "./LegendItem";
import cx from "classnames";
diff --git a/frontend/src/metabase/visualizations/components/LegendItem.jsx b/frontend/src/metabase/visualizations/components/LegendItem.jsx
index d4d136bad3b..a0d18eb5abc 100644
--- a/frontend/src/metabase/visualizations/components/LegendItem.jsx
+++ b/frontend/src/metabase/visualizations/components/LegendItem.jsx
@@ -1,8 +1,8 @@
import React, { Component } from "react";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
+import Ellipsified from "metabase/components/Ellipsified";
import cx from "classnames";
diff --git a/frontend/src/metabase/visualizations/components/LegendVertical.jsx b/frontend/src/metabase/visualizations/components/LegendVertical.jsx
index 4db223065c3..44642297d9a 100644
--- a/frontend/src/metabase/visualizations/components/LegendVertical.jsx
+++ b/frontend/src/metabase/visualizations/components/LegendVertical.jsx
@@ -2,9 +2,9 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import styles from "./Legend.css";
import { t } from "ttag";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import Tooltip from "metabase/components/Tooltip";
-import LegendItem from "./LegendItem.jsx";
+import LegendItem from "./LegendItem";
import cx from "classnames";
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
index 3cf11b5dee0..e6e2f2aef18 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
@@ -3,9 +3,9 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { t } from "ttag";
-import CardRenderer from "./CardRenderer.jsx";
-import LegendHeader from "./LegendHeader.jsx";
-import { TitleLegendHeader } from "./TitleLegendHeader.jsx";
+import CardRenderer from "./CardRenderer";
+import LegendHeader from "./LegendHeader";
+import { TitleLegendHeader } from "./TitleLegendHeader";
import "./LineAreaBarChart.css";
diff --git a/frontend/src/metabase/visualizations/components/MiniBar.jsx b/frontend/src/metabase/visualizations/components/MiniBar.jsx
index b2a2bc8bbd5..e816755e0d9 100644
--- a/frontend/src/metabase/visualizations/components/MiniBar.jsx
+++ b/frontend/src/metabase/visualizations/components/MiniBar.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import colors, { alpha } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
import { formatValue } from "metabase/lib/formatting";
const BAR_HEIGHT = 8;
@@ -14,7 +14,7 @@ const MiniBar = ({ value, extent: [min, max], options, cellHeight }) => {
const isNegative = value < 0;
const barPercent =
(Math.abs(value) / Math.max(Math.abs(min), Math.abs(max))) * 100;
- const barColor = isNegative ? colors["error"] : colors["brand"];
+ const barColor = isNegative ? color("error") : color("brand");
const barStyle = !hasNegative
? {
diff --git a/frontend/src/metabase/visualizations/components/TableInteractive.jsx b/frontend/src/metabase/visualizations/components/TableInteractive.jsx
index dc17ab0a62c..7ac16ebd861 100644
--- a/frontend/src/metabase/visualizations/components/TableInteractive.jsx
+++ b/frontend/src/metabase/visualizations/components/TableInteractive.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import "./TableInteractive.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import { formatValue } from "metabase/lib/formatting";
import { isID, isFK } from "metabase/lib/schema_metadata";
@@ -22,13 +22,13 @@ import Dimension from "metabase-lib/lib/Dimension";
import _ from "underscore";
import cx from "classnames";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize";
import MiniBar from "./MiniBar";
// $FlowFixMe: had to ignore react-virtualized in flow, probably due to different version
import { Grid, ScrollSync } from "react-virtualized";
import Draggable from "react-draggable";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
+import Ellipsified from "metabase/components/Ellipsified";
const HEADER_HEIGHT = 36;
const ROW_HEIGHT = 36;
diff --git a/frontend/src/metabase/visualizations/components/TableSimple.jsx b/frontend/src/metabase/visualizations/components/TableSimple.jsx
index 74b6b1ab6b4..f962604e0e8 100644
--- a/frontend/src/metabase/visualizations/components/TableSimple.jsx
+++ b/frontend/src/metabase/visualizations/components/TableSimple.jsx
@@ -6,9 +6,9 @@ import ReactDOM from "react-dom";
import styles from "./Table.css";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
-import Ellipsified from "metabase/components/Ellipsified.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize";
+import Ellipsified from "metabase/components/Ellipsified";
+import Icon from "metabase/components/Icon";
import MiniBar from "./MiniBar";
import { formatValue } from "metabase/lib/formatting";
diff --git a/frontend/src/metabase/visualizations/components/TitleLegendHeader.jsx b/frontend/src/metabase/visualizations/components/TitleLegendHeader.jsx
index 83d6b7835b1..706ca63ec8a 100644
--- a/frontend/src/metabase/visualizations/components/TitleLegendHeader.jsx
+++ b/frontend/src/metabase/visualizations/components/TitleLegendHeader.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import LegendHeader from "./LegendHeader.jsx";
+import LegendHeader from "./LegendHeader";
import _ from "underscore";
export const TitleLegendHeader = ({
diff --git a/frontend/src/metabase/visualizations/components/Visualization.jsx b/frontend/src/metabase/visualizations/components/Visualization.jsx
index 69350120ece..305dbeebb36 100644
--- a/frontend/src/metabase/visualizations/components/Visualization.jsx
+++ b/frontend/src/metabase/visualizations/components/Visualization.jsx
@@ -2,13 +2,13 @@
import React from "react";
-import ExplicitSize from "metabase/components/ExplicitSize.jsx";
-import LegendHeader from "metabase/visualizations/components/LegendHeader.jsx";
-import ChartTooltip from "metabase/visualizations/components/ChartTooltip.jsx";
-import ChartClickActions from "metabase/visualizations/components/ChartClickActions.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize";
+import LegendHeader from "metabase/visualizations/components/LegendHeader";
+import ChartTooltip from "metabase/visualizations/components/ChartTooltip";
+import ChartClickActions from "metabase/visualizations/components/ChartClickActions";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
import { t, jt } from "ttag";
import { duration, formatNumber } from "metabase/lib/formatting";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
index b518cf2cb4d..885d8401a34 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
@@ -1,6 +1,6 @@
import React, { Component } from "react";
-import ChartSettingColorPicker from "./ChartSettingColorPicker.jsx";
+import ChartSettingColorPicker from "./ChartSettingColorPicker";
export default class ChartSettingColorsPicker extends Component {
render() {
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
index d7a60780675..b8b65e08e3f 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
@@ -6,7 +6,7 @@ import _ from "underscore";
import Icon from "metabase/components/Icon";
-import ChartSettingSelect from "./ChartSettingSelect.jsx";
+import ChartSettingSelect from "./ChartSettingSelect";
import { keyForColumn } from "metabase/lib/dataset";
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx
index 6437bfebe2c..cae9a6e25ad 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx
@@ -1,6 +1,6 @@
import React from "react";
import { t } from "ttag";
-import ChartSettingFieldPicker from "./ChartSettingFieldPicker.jsx";
+import ChartSettingFieldPicker from "./ChartSettingFieldPicker";
const ChartSettingFieldsPicker = ({
value = [],
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
index ed591ed495b..6290c736cc8 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingGaugeSegments.jsx
@@ -3,7 +3,7 @@ import React from "react";
import { t } from "ttag";
import _ from "underscore";
-import colors, { normal } from "metabase/lib/colors";
+import { color, normal } from "metabase/lib/colors";
import ColorPicker from "metabase/components/ColorPicker";
import Button from "metabase/components/Button";
@@ -98,11 +98,11 @@ const ChartSettingGaugeSegments = ({ value: segments, onChange }) => {
function getColorPalette() {
return [
- colors["error"],
- colors["warning"],
- colors["success"],
+ color("error"),
+ color("warning"),
+ color("success"),
...Object.values(normal).slice(0, 9),
- colors["bg-medium"],
+ color("bg-medium"),
];
}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputGroup.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputGroup.jsx
index 8cc95fbbfef..ed76486207d 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputGroup.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputGroup.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import InputBlurChange from "metabase/components/InputBlurChange.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange";
// value is an array of strings. This component provides one input box per string
export default function ChartSettingInputGroup({ value: values, onChange }) {
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
index 4b0d8c79cb4..f238b69ce3d 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingRadio.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Radio from "metabase/components/Radio.jsx";
+import Radio from "metabase/components/Radio";
const ChartSettingRadio = ({ value, onChange, options = [], className }) => (
<Radio
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
index 02af84689dc..79be3df6411 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Select, { Option } from "metabase/components/Select.jsx";
+import Select, { Option } from "metabase/components/Select";
import cx from "classnames";
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx
index 5a69458de75..f167c229641 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import Toggle from "metabase/components/Toggle.jsx";
+import Toggle from "metabase/components/Toggle";
const ChartSettingToggle = ({ value, onChange }) => (
<Toggle value={value} onChange={onChange} />
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index 77905158768..007240f12cb 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -49,16 +49,16 @@ const ALL_OPERATOR_NAMES = {
...STRING_OPERATOR_NAMES,
};
-import colors, { desaturated } from "metabase/lib/colors";
+import { color, desaturated } from "metabase/lib/colors";
const COLORS = Object.values(desaturated);
const COLOR_RANGES = [].concat(
...COLORS.map(color => [["white", color], [color, "white"]]),
[
- [colors.error, "white", colors.success],
- [colors.success, "white", colors.error],
- [colors.error, colors.warning, colors.success],
- [colors.success, colors.warning, colors.error],
+ [color("error"), "white", color("success")],
+ [color("success"), "white", color("error")],
+ [color("error"), color("warning"), color("success")],
+ [color("success"), color("warning"), color("error")],
],
);
diff --git a/frontend/src/metabase/visualizations/index.js b/frontend/src/metabase/visualizations/index.js
index c03751c7c77..01f32feedae 100644
--- a/frontend/src/metabase/visualizations/index.js
+++ b/frontend/src/metabase/visualizations/index.js
@@ -1,21 +1,21 @@
/* @flow weak */
-import Scalar from "./visualizations/Scalar.jsx";
-import SmartScalar from "./visualizations/SmartScalar.jsx";
-import Progress from "./visualizations/Progress.jsx";
-import Table from "./visualizations/Table.jsx";
-import Text from "./visualizations/Text.jsx";
-import LineChart from "./visualizations/LineChart.jsx";
-import BarChart from "./visualizations/BarChart.jsx";
-import RowChart from "./visualizations/RowChart.jsx";
-import PieChart from "./visualizations/PieChart.jsx";
-import AreaChart from "./visualizations/AreaChart.jsx";
-import ComboChart from "./visualizations/ComboChart.jsx";
-import MapViz from "./visualizations/Map.jsx";
-import ScatterPlot from "./visualizations/ScatterPlot.jsx";
-import Funnel from "./visualizations/Funnel.jsx";
-import Gauge from "./visualizations/Gauge.jsx";
-import ObjectDetail from "./visualizations/ObjectDetail.jsx";
+import Scalar from "./visualizations/Scalar";
+import SmartScalar from "./visualizations/SmartScalar";
+import Progress from "./visualizations/Progress";
+import Table from "./visualizations/Table";
+import Text from "./visualizations/Text";
+import LineChart from "./visualizations/LineChart";
+import BarChart from "./visualizations/BarChart";
+import RowChart from "./visualizations/RowChart";
+import PieChart from "./visualizations/PieChart";
+import AreaChart from "./visualizations/AreaChart";
+import ComboChart from "./visualizations/ComboChart";
+import MapViz from "./visualizations/Map";
+import ScatterPlot from "./visualizations/ScatterPlot";
+import Funnel from "./visualizations/Funnel";
+import Gauge from "./visualizations/Gauge";
+import ObjectDetail from "./visualizations/ObjectDetail";
import { t } from "ttag";
import _ from "underscore";
diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js b/frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js
index 0d791099e9c..43bf5d2d083 100644
--- a/frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js
+++ b/frontend/src/metabase/visualizations/lib/LineAreaBarPostRender.js
@@ -3,7 +3,7 @@
import d3 from "d3";
import _ from "underscore";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { clipPathReference } from "metabase/lib/dom";
import { adjustYAxisTicksIfNeeded } from "./apply_axis";
@@ -284,7 +284,7 @@ function onRenderCleanupGoalAndTrend(chart, onGoalHover, isSplitAxis) {
y: y - 5,
"text-anchor": labelOnRight ? "end" : "start",
"font-weight": "bold",
- fill: colors["text-medium"],
+ fill: color("text-medium"),
})
.on("mouseenter", function() {
onGoalHover(this);
diff --git a/frontend/src/metabase/visualizations/lib/settings.js b/frontend/src/metabase/visualizations/lib/settings.js
index 9357547ad47..0102d8ab991 100644
--- a/frontend/src/metabase/visualizations/lib/settings.js
+++ b/frontend/src/metabase/visualizations/lib/settings.js
@@ -1,16 +1,16 @@
/* @flow */
-import ChartSettingInput from "metabase/visualizations/components/settings/ChartSettingInput.jsx";
-import ChartSettingInputGroup from "metabase/visualizations/components/settings/ChartSettingInputGroup.jsx";
-import ChartSettingInputNumeric from "metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx";
-import ChartSettingRadio from "metabase/visualizations/components/settings/ChartSettingRadio.jsx";
-import ChartSettingSelect from "metabase/visualizations/components/settings/ChartSettingSelect.jsx";
-import ChartSettingToggle from "metabase/visualizations/components/settings/ChartSettingToggle.jsx";
-import ChartSettingButtonGroup from "metabase/visualizations/components/settings/ChartSettingButtonGroup.jsx";
-import ChartSettingFieldPicker from "metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx";
-import ChartSettingFieldsPicker from "metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx";
-import ChartSettingColorPicker from "metabase/visualizations/components/settings/ChartSettingColorPicker.jsx";
-import ChartSettingColorsPicker from "metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx";
+import ChartSettingInput from "metabase/visualizations/components/settings/ChartSettingInput";
+import ChartSettingInputGroup from "metabase/visualizations/components/settings/ChartSettingInputGroup";
+import ChartSettingInputNumeric from "metabase/visualizations/components/settings/ChartSettingInputNumeric";
+import ChartSettingRadio from "metabase/visualizations/components/settings/ChartSettingRadio";
+import ChartSettingSelect from "metabase/visualizations/components/settings/ChartSettingSelect";
+import ChartSettingToggle from "metabase/visualizations/components/settings/ChartSettingToggle";
+import ChartSettingButtonGroup from "metabase/visualizations/components/settings/ChartSettingButtonGroup";
+import ChartSettingFieldPicker from "metabase/visualizations/components/settings/ChartSettingFieldPicker";
+import ChartSettingFieldsPicker from "metabase/visualizations/components/settings/ChartSettingFieldsPicker";
+import ChartSettingColorPicker from "metabase/visualizations/components/settings/ChartSettingColorPicker";
+import ChartSettingColorsPicker from "metabase/visualizations/components/settings/ChartSettingColorsPicker";
import MetabaseAnalytics from "metabase/lib/analytics";
diff --git a/frontend/src/metabase/visualizations/visualizations/Gauge.jsx b/frontend/src/metabase/visualizations/visualizations/Gauge.jsx
index 71bf7362d1d..a972deef841 100644
--- a/frontend/src/metabase/visualizations/visualizations/Gauge.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Gauge.jsx
@@ -8,7 +8,7 @@ import cx from "classnames";
import _ from "underscore";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import { formatValue } from "metabase/lib/formatting";
import { isNumeric } from "metabase/lib/schema_metadata";
import { columnSettings } from "metabase/visualizations/lib/settings/column";
@@ -30,10 +30,10 @@ const ARROW_BASE = ARROW_HEIGHT / Math.tan((64 / 180) * Math.PI);
const ARROW_STROKE_THICKNESS = 1.25;
// colors
-const BACKGROUND_ARC_COLOR = colors["bg-medium"];
-const SEGMENT_LABEL_COLOR = colors["text-dark"];
-const CENTER_LABEL_COLOR = colors["text-dark"];
-const ARROW_FILL_COLOR = colors["text-medium"];
+const BACKGROUND_ARC_COLOR = color("bg-medium");
+const SEGMENT_LABEL_COLOR = color("text-dark");
+const CENTER_LABEL_COLOR = color("text-dark");
+const ARROW_FILL_COLOR = color("text-medium");
const ARROW_STROKE_COLOR = "white";
// in ems, but within the scaled 100px SVG element
@@ -119,9 +119,9 @@ export default class Gauge extends Component {
value = series[0].data.rows[0][0];
} catch (e) {}
return [
- { min: 0, max: value / 2, color: colors["error"], label: "" },
- { min: value / 2, max: value, color: colors["warning"], label: "" },
- { min: value, max: value * 2, color: colors["success"], label: "" },
+ { min: 0, max: value / 2, color: color("error"), label: "" },
+ { min: value / 2, max: value, color: color("warning"), label: "" },
+ { min: value, max: value * 2, color: color("success"), label: "" },
];
},
widget: ChartSettingGaugeSegments,
@@ -399,7 +399,7 @@ const GaugeSegmentLabel = ({ position: [x, y], style = {}, children }) => (
x={x}
y={y}
style={{
- fill: colors["text-medium"],
+ fill: color("text-medium"),
fontSize: `${FONT_SIZE_SEGMENT_LABEL}em`,
textAnchor: Math.abs(x) < 5 ? "middle" : x > 0 ? "start" : "end",
// shift text in the lower half down a bit
diff --git a/frontend/src/metabase/visualizations/visualizations/Map.jsx b/frontend/src/metabase/visualizations/visualizations/Map.jsx
index c0887601080..44782555bc9 100644
--- a/frontend/src/metabase/visualizations/visualizations/Map.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Map.jsx
@@ -4,8 +4,8 @@ import React, { Component } from "react";
import { t } from "ttag";
import ChoroplethMap, {
getColorplethColorScale,
-} from "../components/ChoroplethMap.jsx";
-import PinMap from "../components/PinMap.jsx";
+} from "../components/ChoroplethMap";
+import PinMap from "../components/PinMap";
import { ChartSettingsError } from "metabase/visualizations/lib/errors";
import {
diff --git a/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx b/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
index 89195f93491..ba90ce5e44f 100644
--- a/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
@@ -4,10 +4,10 @@ import React, { Component } from "react";
import { connect } from "react-redux";
import { t, jt } from "ttag";
import DirectionalButton from "metabase/components/DirectionalButton";
-import ExpandableString from "metabase/query_builder/components/ExpandableString.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+import ExpandableString from "metabase/query_builder/components/ExpandableString";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
+import LoadingSpinner from "metabase/components/LoadingSpinner";
import {
isID,
diff --git a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx
index b6dd579da7e..85e5c226dc2 100644
--- a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx
@@ -4,8 +4,8 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import styles from "./PieChart.css";
import { t } from "ttag";
-import ChartTooltip from "../components/ChartTooltip.jsx";
-import ChartWithLegend from "../components/ChartWithLegend.jsx";
+import ChartTooltip from "../components/ChartTooltip";
+import ChartWithLegend from "../components/ChartWithLegend";
import {
ChartSettingsError,
@@ -23,7 +23,7 @@ import { columnSettings } from "metabase/visualizations/lib/settings/column";
import { formatValue } from "metabase/lib/formatting";
-import colors, { getColorsForValues } from "metabase/lib/colors";
+import { color, getColorsForValues } from "metabase/lib/colors";
import cx from "classnames";
@@ -267,7 +267,7 @@ export default class PieChart extends Component {
key: "Other",
value: otherTotal,
percentage: otherTotal / total,
- color: colors["text-light"],
+ color: color("text-light"),
};
if (otherSlice.value > 0) {
// increase "other" slice so it's barely visible
@@ -303,7 +303,7 @@ export default class PieChart extends Component {
if (slices.length === 0) {
otherSlice = {
value: 1,
- color: colors["text-light"],
+ color: color("text-light"),
noHover: true,
};
slices.push(otherSlice);
diff --git a/frontend/src/metabase/visualizations/visualizations/Progress.jsx b/frontend/src/metabase/visualizations/visualizations/Progress.jsx
index d98a3e4c09a..50c1da13348 100644
--- a/frontend/src/metabase/visualizations/visualizations/Progress.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Progress.jsx
@@ -5,9 +5,9 @@ import ReactDOM from "react-dom";
import { t } from "ttag";
import { formatValue } from "metabase/lib/formatting";
import { isNumeric } from "metabase/lib/schema_metadata";
-import Icon from "metabase/components/Icon.jsx";
-import IconBorder from "metabase/components/IconBorder.jsx";
-import { normal } from "metabase/lib/colors";
+import Icon from "metabase/components/Icon";
+import IconBorder from "metabase/components/IconBorder";
+import { color } from "metabase/lib/colors";
import _ from "underscore";
@@ -67,7 +67,7 @@ export default class Progress extends Component {
section: t`Display`,
title: t`Color`,
widget: "color",
- default: normal.green,
+ default: color("accent1"),
},
};
diff --git a/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx b/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx
index bb01561390b..c1c2f2e61a5 100644
--- a/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx
@@ -4,7 +4,7 @@ import { t, jt } from "ttag";
import _ from "underscore";
import { formatNumber, formatValue } from "metabase/lib/formatting";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
@@ -111,15 +111,14 @@ export default class Smart extends React.Component {
const change = formatNumber(lastChange * 100);
const isNegative = (change && Math.sign(change) < 0) || false;
-
- let color = isNegative ? colors["error"] : colors["success"];
+ const isSwapped = settings["scalar.switch_positive_negative"];
// if the number is negative but thats been identified as a good thing (e.g. decreased latency somehow?)
- if (isNegative && settings["scalar.switch_positive_negative"]) {
- color = colors["success"];
- } else if (!isNegative && settings["scalar.switch_positive_negative"]) {
- color = colors["error"];
- }
+ const changeColor = (isSwapped
+ ? !isNegative
+ : isNegative)
+ ? color("error")
+ : color("success");
const changeDisplay = (
<span style={{ fontWeight: 900 }}>{Math.abs(change)}%</span>
@@ -127,7 +126,7 @@ export default class Smart extends React.Component {
const separator = (
<span
style={{
- color: colors["text-light"],
+ color: color("text-light"),
fontSize: "0.7rem",
marginLeft: 4,
marginRight: 4,
@@ -185,11 +184,11 @@ export default class Smart extends React.Component {
{!lastChange || !previousValue ? (
<Box
className="text-centered text-bold mt1"
- color={colors["text-medium"]}
+ color={color("text-medium")}
>{jt`Nothing to compare for the previous ${granularity}.`}</Box>
) : (
<Flex align="center" mt={1} flexWrap="wrap">
- <Flex align="center" color={color}>
+ <Flex align="center" color={changeColor}>
<Icon name={isNegative ? "arrow_down" : "arrow_up"} />
{changeDisplay}
</Flex>
@@ -197,7 +196,7 @@ export default class Smart extends React.Component {
id="SmartScalar-PreviousValue"
className="flex align-center hide lg-show"
style={{
- color: colors["text-medium"],
+ color: color("text-medium"),
}}
>
{!isFullscreen &&
diff --git a/frontend/src/metabase/visualizations/visualizations/Table.jsx b/frontend/src/metabase/visualizations/visualizations/Table.jsx
index f8b665a8357..d1d172bc0f8 100644
--- a/frontend/src/metabase/visualizations/visualizations/Table.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Table.jsx
@@ -3,7 +3,7 @@
import React, { Component } from "react";
import TableInteractive from "../components/TableInteractive.jsx";
-import TableSimple from "../components/TableSimple.jsx";
+import TableSimple from "../components/TableSimple";
import { t } from "ttag";
import * as DataGrid from "metabase/lib/data_grid";
import { findColumnIndexForColumnSetting } from "metabase/lib/dataset";
@@ -22,10 +22,10 @@ import {
isImageURL,
isAvatarURL,
} from "metabase/lib/schema_metadata";
-import ChartSettingOrderedColumns from "metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx";
+import ChartSettingOrderedColumns from "metabase/visualizations/components/settings/ChartSettingOrderedColumns";
import ChartSettingsTableFormatting, {
isFormattable,
-} from "metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx";
+} from "metabase/visualizations/components/settings/ChartSettingsTableFormatting";
import { makeCellBackgroundGetter } from "metabase/visualizations/lib/table_format";
import { columnSettings } from "metabase/visualizations/lib/settings/column";
diff --git a/frontend/src/metabase/visualizations/visualizations/Text.jsx b/frontend/src/metabase/visualizations/visualizations/Text.jsx
index 4e0a869adfd..51096b844a5 100644
--- a/frontend/src/metabase/visualizations/visualizations/Text.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Text.jsx
@@ -4,7 +4,7 @@ import React, { Component } from "react";
import ReactMarkdown from "react-markdown";
import styles from "./Text.css";
-import Icon from "metabase/components/Icon.jsx";
+import Icon from "metabase/components/Icon";
import cx from "classnames";
import { t } from "ttag";
diff --git a/frontend/test/__support__/mocks.js b/frontend/test/__support__/mocks.js
index f498fa869e4..f8ce89b75e2 100644
--- a/frontend/test/__support__/mocks.js
+++ b/frontend/test/__support__/mocks.js
@@ -38,7 +38,7 @@ modal.default = modal.TestModal;
import * as tooltip from "metabase/components/Tooltip";
tooltip.default = tooltip.TestTooltip;
-jest.mock("metabase/components/Popover.jsx");
+jest.mock("metabase/components/Popover");
import * as bodyComponent from "metabase/components/BodyComponent";
bodyComponent.default = bodyComponent.TestBodyComponent;
diff --git a/frontend/test/metabase-lib/lib/Dimension.unit.spec.js b/frontend/test/metabase-lib/lib/Dimension.unit.spec.js
index 8419ac673ea..7730a00590d 100644
--- a/frontend/test/metabase-lib/lib/Dimension.unit.spec.js
+++ b/frontend/test/metabase-lib/lib/Dimension.unit.spec.js
@@ -106,14 +106,15 @@ describe("Dimension", () => {
expect(Dimension.parseMBQL(["field-id", 1], metadata).mbql()).toEqual(
["field-id", 1],
);
- expect(Dimension.parseMBQL(["fk->", 1, 2], metadata).mbql()).toEqual([
- "fk->",
- ["field-id", 1],
- ["field-id", 2],
- ]);
expect(
Dimension.parseMBQL(
- ["datetime-field", 1, "month"],
+ ["fk->", ["field-id", 1], ["field-id", 2]],
+ metadata,
+ ).mbql(),
+ ).toEqual(["fk->", ["field-id", 1], ["field-id", 2]]);
+ expect(
+ Dimension.parseMBQL(
+ ["datetime-field", ["field-id", 1], "month"],
metadata,
).mbql(),
).toEqual(["datetime-field", ["field-id", 1], "month"]);
@@ -149,13 +150,22 @@ describe("Dimension", () => {
expect(d1.isEqual(1)).toEqual(true);
});
it("returns false for different type clauses", () => {
- const d1 = Dimension.parseMBQL(["fk->", 1, 2], metadata);
+ const d1 = Dimension.parseMBQL(
+ ["fk->", ["field-id", 1], ["field-id", 2]],
+ metadata,
+ );
const d2 = Dimension.parseMBQL(["field-id", 1], metadata);
expect(d1.isEqual(d2)).toEqual(false);
});
it("returns false for same type clauses with different arguments", () => {
- const d1 = Dimension.parseMBQL(["fk->", 1, 2], metadata);
- const d2 = Dimension.parseMBQL(["fk->", 1, 3], metadata);
+ const d1 = Dimension.parseMBQL(
+ ["fk->", ["field-id", 1], ["field-id", 2]],
+ metadata,
+ );
+ const d2 = Dimension.parseMBQL(
+ ["fk->", ["field-id", 1], ["field-id", 3]],
+ metadata,
+ );
expect(d1.isEqual(d2)).toEqual(false);
});
});
diff --git a/frontend/test/metabase-lib/lib/queries/StructuredQuery-nesting.unit.spec.js b/frontend/test/metabase-lib/lib/queries/StructuredQuery-nesting.unit.spec.js
index 9f15af67f2b..297eb2edeb4 100644
--- a/frontend/test/metabase-lib/lib/queries/StructuredQuery-nesting.unit.spec.js
+++ b/frontend/test/metabase-lib/lib/queries/StructuredQuery-nesting.unit.spec.js
@@ -48,7 +48,7 @@ describe("StructuredQuery nesting", () => {
it("should return a table with correct dimensions", () => {
const q = makeStructuredQuery({
"source-table": ORDERS_TABLE_ID,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", ORDERS_PRODUCT_FK_FIELD_ID]],
});
expect(
diff --git a/frontend/test/metabase/admin/people/containers/PeopleListingApp.integ.spec.js b/frontend/test/metabase/admin/people/containers/PeopleListingApp.integ.spec.js
index fbf1a43762d..954fc21c544 100644
--- a/frontend/test/metabase/admin/people/containers/PeopleListingApp.integ.spec.js
+++ b/frontend/test/metabase/admin/people/containers/PeopleListingApp.integ.spec.js
@@ -3,7 +3,7 @@ import mock from "xhr-mock";
import { mountWithStore } from "__support__/integration_tests";
import { click } from "__support__/enzyme_utils";
import { refreshCurrentUser } from "metabase/redux/user";
-import UserAvatar from "metabase/components/UserAvatar.jsx";
+import UserAvatar from "metabase/components/UserAvatar";
import Radio from "metabase/components/Radio";
import EntityMenu from "metabase/components/EntityMenu";
import EntityMenuItem from "metabase/components/EntityMenuItem";
diff --git a/frontend/test/metabase/admin/settings/SettingsAuthenticationOptions.e2e.spec.js b/frontend/test/metabase/admin/settings/SettingsAuthenticationOptions.e2e.spec.js
index 3486d41e1ad..1c5f085da63 100644
--- a/frontend/test/metabase/admin/settings/SettingsAuthenticationOptions.e2e.spec.js
+++ b/frontend/test/metabase/admin/settings/SettingsAuthenticationOptions.e2e.spec.js
@@ -5,8 +5,8 @@ import { mount } from "enzyme";
import SettingsEditorApp from "metabase/admin/settings/containers/SettingsEditorApp";
import SettingsAuthenticationOptions from "metabase/admin/settings/components/SettingsAuthenticationOptions";
-import SettingsSingleSignOnForm from "metabase/admin/settings/components/SettingsSingleSignOnForm.jsx";
-import SettingsLdapForm from "metabase/admin/settings/components/SettingsLdapForm.jsx";
+import SettingsSingleSignOnForm from "metabase/admin/settings/components/SettingsSingleSignOnForm";
+import SettingsLdapForm from "metabase/admin/settings/components/SettingsLdapForm";
import { INITIALIZE_SETTINGS } from "metabase/admin/settings/settings";
diff --git a/frontend/test/metabase/dashboard/DashCard.unit.spec.js b/frontend/test/metabase/dashboard/DashCard.unit.spec.js
index 38231591e0b..a121476e94b 100644
--- a/frontend/test/metabase/dashboard/DashCard.unit.spec.js
+++ b/frontend/test/metabase/dashboard/DashCard.unit.spec.js
@@ -5,7 +5,7 @@ import { assocIn } from "icepick";
import DashCard from "metabase/dashboard/components/DashCard";
-jest.mock("metabase/visualizations/components/Visualization.jsx");
+jest.mock("metabase/visualizations/components/Visualization");
const DEFAULT_PROPS = {
dashcard: {
diff --git a/frontend/test/metabase/dashboard/dashboard.e2e.spec.js b/frontend/test/metabase/dashboard/dashboard.e2e.spec.js
index ddfd442c335..285e9330069 100644
--- a/frontend/test/metabase/dashboard/dashboard.e2e.spec.js
+++ b/frontend/test/metabase/dashboard/dashboard.e2e.spec.js
@@ -71,7 +71,7 @@ const mockPublicDashboardResponse = {
{
parameter_id: "598ab323",
card_id: 25,
- target: ["dimension", ["fk->", 3, 21]],
+ target: ["dimension", ["fk->", ["field-id", 3], ["field-id", 21]]],
},
],
card_id: 25,
diff --git a/frontend/test/metabase/lib/dataset.unit.spec.js b/frontend/test/metabase/lib/dataset.unit.spec.js
index eb9a1bcf1ab..4d35f3bf475 100644
--- a/frontend/test/metabase/lib/dataset.unit.spec.js
+++ b/frontend/test/metabase/lib/dataset.unit.spec.js
@@ -21,7 +21,7 @@ describe("metabase/util/dataset", () => {
it('should return `["field-id", 1]` for a normal column', () => {
expect(fieldRefForColumn(FIELD_COLUMN)).toEqual(["field-id", 1]);
});
- it('should return `["fk->", 2, 1]` for a fk column', () => {
+ it('should return `["fk->", ["field-id", 2], ["field-id", 1]]` for a fk column', () => {
expect(fieldRefForColumn(FK_COLUMN)).toEqual([
"fk->",
["field-id", 2],
@@ -233,7 +233,7 @@ describe("metabase/util/dataset", () => {
});
it("should find column with non-normalized fieldRef", () => {
const column = findColumnForColumnSetting(columns, {
- fieldRef: ["fk->", 2, 1],
+ fieldRef: ["fk->", 2, 1], // deprecated
});
expect(column).toBe(columns[1]);
});
diff --git a/frontend/test/metabase/lib/formatting.unit.spec.js b/frontend/test/metabase/lib/formatting.unit.spec.js
index 03e2a3ea099..d125f1294d1 100644
--- a/frontend/test/metabase/lib/formatting.unit.spec.js
+++ b/frontend/test/metabase/lib/formatting.unit.spec.js
@@ -7,7 +7,7 @@ import {
formatUrl,
formatDateTimeWithUnit,
} from "metabase/lib/formatting";
-import ExternalLink from "metabase/components/ExternalLink.jsx";
+import ExternalLink from "metabase/components/ExternalLink";
import { TYPE } from "metabase/lib/types";
describe("formatting", () => {
diff --git a/frontend/test/metabase/lib/query.unit.spec.js b/frontend/test/metabase/lib/query.unit.spec.js
index c0cc42ca48f..e15514942bf 100644
--- a/frontend/test/metabase/lib/query.unit.spec.js
+++ b/frontend/test/metabase/lib/query.unit.spec.js
@@ -70,20 +70,14 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should not remove complete sort clauses", () => {
const query = {
"source-table": 0,
- aggregation: ["rows"],
- breakout: [],
- filter: [],
- "order-by": [["asc", 1]],
+ "order-by": [["asc", ["field-id", 1]]],
};
Q_DEPRECATED.cleanQuery(query);
- expect(query["order-by"]).toEqual([["asc", 1]]);
+ expect(query["order-by"]).toEqual([["asc", ["field-id", 1]]]);
});
it("should remove incomplete sort clauses", () => {
const query = {
"source-table": 0,
- aggregation: ["rows"],
- breakout: [],
- filter: [],
"order-by": [["asc", null]],
};
Q_DEPRECATED.cleanQuery(query);
@@ -93,9 +87,8 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should not remove sort clauses on aggregations if that aggregation supports it", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", 1]],
- filter: [],
"order-by": [["asc", ["aggregation", 0]]],
};
Q_DEPRECATED.cleanQuery(query);
@@ -104,9 +97,6 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should remove sort clauses on aggregations if that aggregation doesn't support it", () => {
const query = {
"source-table": 0,
- aggregation: ["rows"],
- breakout: [],
- filter: [],
"order-by": [["asc", ["aggregation", 0]]],
};
Q_DEPRECATED.cleanQuery(query);
@@ -116,9 +106,8 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should not remove sort clauses on fields appearing in breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", 1]],
- filter: [],
"order-by": [["asc", ["field-id", 1]]],
};
Q_DEPRECATED.cleanQuery(query);
@@ -127,10 +116,8 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should remove sort clauses on fields not appearing in breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
- breakout: [],
- filter: [],
- "order-by": [["asc", 1]],
+ aggregation: [["count"]],
+ "order-by": [["asc", ["field-id", 1]]],
};
Q_DEPRECATED.cleanQuery(query);
expect(query["order-by"]).toEqual(undefined);
@@ -139,53 +126,53 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should not remove sort clauses with foreign keys on fields appearing in breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
- breakout: [["fk->", 1, 2]],
- filter: [],
- "order-by": [["asc", ["fk->", 1, 2]]],
+ aggregation: [["count"]],
+ breakout: [["fk->", ["field-id", 1], ["field-id", 2]]],
+ "order-by": [["asc", ["fk->", ["field-id", 1], ["field-id", 2]]]],
};
Q_DEPRECATED.cleanQuery(query);
- expect(query["order-by"]).toEqual([["asc", ["fk->", 1, 2]]]);
+ expect(query["order-by"]).toEqual([
+ ["asc", ["fk->", ["field-id", 1], ["field-id", 2]]],
+ ]);
});
it("should not remove sort clauses with datetime-fields on fields appearing in breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
- breakout: [["datetime-field", 1, "as", "week"]],
- filter: [],
- "order-by": [["asc", ["datetime-field", 1, "as", "week"]]],
+ aggregation: [["count"]],
+ breakout: [["datetime-field", ["field-id", 1], "week"]],
+ "order-by": [["asc", ["datetime-field", ["field-id", 1], "week"]]],
};
Q_DEPRECATED.cleanQuery(query);
expect(query["order-by"]).toEqual([
- ["asc", ["datetime-field", 1, "as", "week"]],
+ ["asc", ["datetime-field", ["field-id", 1], "week"]],
]);
});
it("should replace order-by clauses with the exact matching datetime-fields version in the breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
- breakout: [["datetime-field", 1, "as", "week"]],
- filter: [],
- "order-by": [["asc", 1]],
+ aggregation: [["count"]],
+ breakout: [["datetime-field", ["field-id", 1], "week"]],
+ "order-by": [["asc", ["field-id", 1]]],
};
Q_DEPRECATED.cleanQuery(query);
expect(query["order-by"]).toEqual([
- ["asc", ["datetime-field", 1, "as", "week"]],
+ ["asc", ["datetime-field", ["field-id", 1], "week"]],
]);
});
it("should replace order-by clauses with the exact matching fk-> version in the breakout", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
- breakout: [["fk->", 1, 2]],
- filter: [],
- "order-by": [["asc", 2]],
+ aggregation: [["count"]],
+ breakout: [["fk->", ["field-id", 1], ["field-id", 2]]],
+ "order-by": [["asc", ["field-id", 2]]],
};
Q_DEPRECATED.cleanQuery(query);
- expect(query["order-by"]).toEqual([["asc", ["fk->", 1, 2]]]);
+ expect(query["order-by"]).toEqual([
+ ["asc", ["fk->", ["field-id", 1], ["field-id", 2]]],
+ ]);
});
});
@@ -193,9 +180,8 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should not mutate the query", () => {
const query = {
"source-table": 0,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", 1]],
- filter: [],
};
Q_DEPRECATED.removeBreakout(query, 0);
expect(query.breakout).toEqual([["field-id", 1]]);
@@ -203,9 +189,8 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should remove the dimension", () => {
let query = {
"source-table": 0,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", 1]],
- filter: [],
};
query = Q_DEPRECATED.removeBreakout(query, 0);
expect(query.breakout).toEqual(undefined);
@@ -213,10 +198,9 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should remove sort clauses for the dimension that was removed", () => {
let query = {
"source-table": 0,
- aggregation: ["count"],
+ aggregation: [["count"]],
breakout: [["field-id", 1]],
- filter: [],
- "order-by": [["asc", 1]],
+ "order-by": [["asc", ["field-id", 1]]],
};
query = Q_DEPRECATED.removeBreakout(query, 0);
expect(query["order-by"]).toEqual(undefined);
@@ -262,7 +246,7 @@ describe("Legacy Q_DEPRECATED library", () => {
});
it("should return unit object for old-style datetime-field", () => {
const target = Q_DEPRECATED.getFieldTarget(
- ["datetime-field", 1, "as", "day"],
+ ["datetime-field", ["field-id", 1], "day"],
table1,
);
expect(target.table).toEqual(table1);
@@ -272,7 +256,7 @@ describe("Legacy Q_DEPRECATED library", () => {
});
it("should return unit object for new-style datetime-field", () => {
const target = Q_DEPRECATED.getFieldTarget(
- ["datetime-field", 1, "as", "day"],
+ ["datetime-field", ["field-id", 1], "day"],
table1,
);
expect(target.table).toEqual(table1);
@@ -282,7 +266,10 @@ describe("Legacy Q_DEPRECATED library", () => {
});
it("should return field object and table for old-style fk field", () => {
- const target = Q_DEPRECATED.getFieldTarget(["fk->", 1, 2], table1);
+ const target = Q_DEPRECATED.getFieldTarget(
+ ["fk->", ["field-id", 1], ["field-id", 2]],
+ table1,
+ );
expect(target.table).toEqual(table2);
expect(target.field).toEqual(field2);
expect(target.path).toEqual([field1]);
@@ -302,7 +289,7 @@ describe("Legacy Q_DEPRECATED library", () => {
it("should return field object and table and unit for fk + datetime field", () => {
const target = Q_DEPRECATED.getFieldTarget(
- ["datetime-field", ["fk->", 1, 2], "day"],
+ ["datetime-field", ["fk->", ["field-id", 1], ["field-id", 2]], "day"],
table1,
);
expect(target.table).toEqual(table2);
@@ -324,7 +311,9 @@ describe("Legacy Q_DEPRECATED library", () => {
describe("isValidField", () => {
it("should return true for old-style fk", () => {
- expect(Q_DEPRECATED.isValidField(["fk->", 1, 2])).toBe(true);
+ expect(
+ Q_DEPRECATED.isValidField(["fk->", ["field-id", 1], ["field-id", 2]]),
+ ).toBe(true);
});
it("should return true for new-style fk", () => {
expect(
@@ -373,7 +362,7 @@ describe("AggregationClause", () => {
it("should succeed on good clauses", () => {
expect(A_DEPRECATED.isValid(["metric", 123])).toEqual(true);
// TODO - actually this should be FALSE because rows is not a valid aggregation type!
- expect(A_DEPRECATED.isValid(["rows"])).toEqual(true);
+ expect(A_DEPRECATED.isValid(["rows"])).toEqual(true); // deprecated
expect(A_DEPRECATED.isValid(["sum", 456])).toEqual(true);
});
});
@@ -392,7 +381,7 @@ describe("AggregationClause", () => {
});
it("should succeed on good clauses", () => {
- expect(A_DEPRECATED.isBareRows(["rows"])).toEqual(true);
+ expect(A_DEPRECATED.isBareRows(["rows"])).toEqual(true); // deprecated
});
});
@@ -409,7 +398,7 @@ describe("AggregationClause", () => {
});
it("should succeed on good clauses", () => {
- expect(A_DEPRECATED.isStandard(["rows"])).toEqual(true);
+ expect(A_DEPRECATED.isStandard(["rows"])).toEqual(true); // deprecated
expect(A_DEPRECATED.isStandard(["sum", 456])).toEqual(true);
});
});
@@ -423,7 +412,7 @@ describe("AggregationClause", () => {
expect(A_DEPRECATED.isMetric("ab")).toEqual(false);
expect(A_DEPRECATED.isMetric(["foo", null])).toEqual(false);
expect(A_DEPRECATED.isMetric(["a", "b", "c"])).toEqual(false);
- expect(A_DEPRECATED.isMetric(["rows"])).toEqual(false);
+ expect(A_DEPRECATED.isMetric(["rows"])).toEqual(false); // deprecated
expect(A_DEPRECATED.isMetric(["sum", 456])).toEqual(false);
});
@@ -444,7 +433,7 @@ describe("AggregationClause", () => {
describe("getOperator", () => {
it("should succeed on good clauses", () => {
- expect(A_DEPRECATED.getOperator(["rows"])).toEqual("rows");
+ expect(A_DEPRECATED.getOperator(["rows"])).toEqual("rows"); // deprecated
expect(A_DEPRECATED.getOperator(["sum", 123])).toEqual("sum");
});
@@ -459,7 +448,7 @@ describe("AggregationClause", () => {
});
it("should be null on clauses w/out a field", () => {
- expect(A_DEPRECATED.getField(["rows"])).toEqual(null);
+ expect(A_DEPRECATED.getField(["rows"])).toEqual(null); // deprecated
});
it("should be null on metric clauses", () => {
diff --git a/frontend/test/metabase/lib/query/query.unit.spec.js b/frontend/test/metabase/lib/query/query.unit.spec.js
index bb5c2449aa5..d8f41ebe3d4 100644
--- a/frontend/test/metabase/lib/query/query.unit.spec.js
+++ b/frontend/test/metabase/lib/query/query.unit.spec.js
@@ -2,29 +2,36 @@ import * as Query from "metabase/lib/query/query";
describe("Query", () => {
describe("isBareRowsAggregation", () => {
- it("should return true for all bare rows variation", () => {
+ it("should return true for no aggregation", () => {
expect(Query.isBareRows({})).toBe(true);
+ });
+ it("should return true for no aggregation deprecated form", () => {
expect(Query.isBareRows({ aggregation: null })).toBe(true); // deprecated
expect(Query.isBareRows({ aggregation: [] })).toBe(true); // deprecated
});
it("should return false for other aggregations", () => {
expect(Query.isBareRows({ aggregation: [["count"]] })).toBe(false);
+ });
+ it("should return false for other aggregations deprecated form", () => {
expect(Query.isBareRows({ aggregation: ["count"] })).toBe(false); // deprecated
});
});
describe("getAggregations", () => {
it("should return an empty list for bare rows", () => {
expect(Query.getAggregations({})).toEqual([]);
- expect(Query.getAggregations({ aggregation: [["rows"]] })).toEqual([]);
+ });
+ it("should return an empty list for bare rows for deprecated form", () => {
+ expect(Query.getAggregations({ aggregation: [["rows"]] })).toEqual([]); // deprecated
expect(Query.getAggregations({ aggregation: ["rows"] })).toEqual([]); // deprecated
});
it("should return a single aggregation", () => {
expect(Query.getAggregations({ aggregation: [["count"]] })).toEqual([
["count"],
]);
- expect(Query.getAggregations({ aggregation: ["count"] })).toEqual([
- ["count"],
- ]); // deprecated
+ });
+ it("should return a single aggregation for deprecated form", () => {
+ expect(Query.getAggregations({ aggregation: ["count"] })) // deprecated
+ .toEqual([["count"]]);
});
it("should return multiple aggregations", () => {
expect(
@@ -80,9 +87,10 @@ describe("Query", () => {
expect(Query.removeAggregation({ aggregation: [["count"]] }, 0)).toEqual(
{},
);
- expect(Query.removeAggregation({ aggregation: ["count"] }, 0)).toEqual(
- {},
- ); // deprecated
+ });
+ it("should remove the last aggregations for deprecated form", () => {
+ expect(Query.removeAggregation({ aggregation: ["count"] }, 0)) // deprecated
+ .toEqual({});
});
});
describe("clearAggregations", () => {
@@ -93,7 +101,10 @@ describe("Query", () => {
aggregation: [["count"], ["sum", ["field-id", 1]]],
}),
).toEqual({});
- expect(Query.clearAggregations({ aggregation: ["count"] })).toEqual({}); // deprecated
+ });
+ it("should remove all aggregations for deprecated form", () => {
+ expect(Query.clearAggregations({ aggregation: ["count"] })) // deprecated
+ .toEqual({});
});
});
diff --git a/frontend/test/metabase/lib/query_time.unit.spec.js b/frontend/test/metabase/lib/query_time.unit.spec.js
index 8047925f08c..f5eae6ae008 100644
--- a/frontend/test/metabase/lib/query_time.unit.spec.js
+++ b/frontend/test/metabase/lib/query_time.unit.spec.js
@@ -21,10 +21,10 @@ describe("query_time", () => {
it("supports the legacy DatetimeField format", () => {
expect(
- parseFieldBucketing(["datetime-field", ["field-id", 3], "as", "week"]),
+ parseFieldBucketing(["datetime-field", ["field-id", 3], "as", "week"]), // deprecated
).toBe("week");
expect(
- parseFieldBucketing(["datetime-field", ["field-id", 3], "day"]),
+ parseFieldBucketing(["datetime-field", ["field-id", 3], "as", "day"]), // deprecated
).toBe("day");
});
it("returns the default unit for FK reference", () => {
@@ -41,19 +41,29 @@ describe("query_time", () => {
describe("expandTimeIntervalFilter", () => {
it('translate ["current" "month"] correctly', () => {
expect(
- expandTimeIntervalFilter(["time-interval", 100, "current", "month"]),
+ expandTimeIntervalFilter([
+ "time-interval",
+ ["field-id", 100],
+ "current",
+ "month",
+ ]),
).toEqual([
"=",
- ["datetime-field", 100, "as", "month"],
+ ["datetime-field", ["field-id", 100], "month"],
["relative-datetime", "current"],
]);
});
it('translate [-30, "day"] correctly', () => {
expect(
- expandTimeIntervalFilter(["time-interval", 100, -30, "day"]),
+ expandTimeIntervalFilter([
+ "time-interval",
+ ["field-id", 100],
+ -30,
+ "day",
+ ]),
).toEqual([
"between",
- ["datetime-field", 100, "as", "day"],
+ ["datetime-field", ["field-id", 100], "day"],
["relative-datetime", -31, "day"],
["relative-datetime", -1, "day"],
]);
@@ -283,7 +293,7 @@ describe("query_time", () => {
);
});
// it ('should handle "last week"', () => {
- // let [start, end] = computeFilterTimeRange(["time-interval", 1, "last", "week"]);
+ // let [start, end] = computeFilterTimeRange(["time-interval", ["field-id", 1], "last", "week"]);
// expect(start.format("YYYY-MM-DD HH:mm:ss")).toEqual(moment().subtract(1, "week").startOf("week").format("YYYY-MM-DD 00:00:00"));
// expect(end.format("YYYY-MM-DD HH:mm:ss")).toEqual(moment().subtract(1, "week").endOf("week")..format("YYYY-MM-DD 23:59:59"));
// });
diff --git a/frontend/test/metabase/meta/Card.unit.spec.js b/frontend/test/metabase/meta/Card.unit.spec.js
index 7bdd787326e..c01fa57e0c4 100644
--- a/frontend/test/metabase/meta/Card.unit.spec.js
+++ b/frontend/test/metabase/meta/Card.unit.spec.js
@@ -106,7 +106,7 @@ describe("metabase/meta/Card", () => {
{
card_id: 1,
parameter_id: 4,
- target: ["dimension", ["fk->", 4, 5]],
+ target: ["dimension", ["fk->", ["field-id", 4], ["field-id", 5]]],
},
];
it("should return question URL with no parameters", () => {
@@ -215,7 +215,15 @@ describe("metabase/meta/Card", () => {
["dataset_query", "query", "filter"],
[
"and",
- ["=", ["datetime-field", ["fk->", 4, 5], "month"], "2017-05-01"],
+ [
+ "=",
+ [
+ "datetime-field",
+ ["fk->", ["field-id", 4], ["field-id", 5]],
+ "month",
+ ],
+ "2017-05-01",
+ ],
],
),
});
diff --git a/frontend/test/metabase/modes/components/actions/CountByTimeAction.unit.spec.js b/frontend/test/metabase/modes/components/actions/CountByTimeAction.unit.spec.js
index 160ecebabc3..bbfda65f897 100644
--- a/frontend/test/metabase/modes/components/actions/CountByTimeAction.unit.spec.js
+++ b/frontend/test/metabase/modes/components/actions/CountByTimeAction.unit.spec.js
@@ -21,12 +21,7 @@ describe("CountByTimeAction", () => {
"source-table": ORDERS_TABLE_ID,
aggregation: [["count"]],
breakout: [
- [
- "datetime-field",
- ["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
- "day",
- ],
+ ["datetime-field", ["field-id", ORDERS_CREATED_DATE_FIELD_ID], "day"],
],
});
expect(newCard.display).toEqual("bar");
diff --git a/frontend/test/metabase/modes/components/drill/UnderlyingRecordsDrill.unit.spec.js b/frontend/test/metabase/modes/components/drill/UnderlyingRecordsDrill.unit.spec.js
index 039dfead11e..b3b74fd4aa3 100644
--- a/frontend/test/metabase/modes/components/drill/UnderlyingRecordsDrill.unit.spec.js
+++ b/frontend/test/metabase/modes/components/drill/UnderlyingRecordsDrill.unit.spec.js
@@ -21,12 +21,7 @@ function getActionPropsForTimeseriesClick(unit, value) {
"source-table": ORDERS_TABLE_ID,
aggregation: [["count"]],
breakout: [
- [
- "datetime-field",
- ["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
- unit,
- ],
+ ["datetime-field", ["field-id", ORDERS_CREATED_DATE_FIELD_ID], unit],
],
})
.question(),
@@ -57,12 +52,7 @@ describe("UnderlyingRecordsDrill", () => {
"source-table": ORDERS_TABLE_ID,
filter: [
"=",
- [
- "datetime-field",
- ["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
- "month",
- ],
+ ["datetime-field", ["field-id", ORDERS_CREATED_DATE_FIELD_ID], "month"],
value,
],
});
@@ -93,7 +83,6 @@ describe("UnderlyingRecordsDrill", () => {
[
"datetime-field",
["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
"day-of-week",
],
null,
diff --git a/frontend/test/metabase/modes/components/drill/ZoomDrill.unit.spec.js b/frontend/test/metabase/modes/components/drill/ZoomDrill.unit.spec.js
index 46156d5c1dd..89c60ac92c7 100644
--- a/frontend/test/metabase/modes/components/drill/ZoomDrill.unit.spec.js
+++ b/frontend/test/metabase/modes/components/drill/ZoomDrill.unit.spec.js
@@ -27,7 +27,6 @@ describe("ZoomDrill", () => {
[
"datetime-field",
["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
"month",
],
],
@@ -49,21 +48,11 @@ describe("ZoomDrill", () => {
aggregation: [["count"]],
filter: [
"=",
- [
- "datetime-field",
- ["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- "as",
- "month",
- ],
+ ["datetime-field", ["field-id", ORDERS_CREATED_DATE_FIELD_ID], "month"],
clickedDateTimeValue.value,
],
breakout: [
- [
- "datetime-field",
- ["field-id", ORDERS_CREATED_DATE_FIELD_ID],
- // "as",
- "week",
- ],
+ ["datetime-field", ["field-id", ORDERS_CREATED_DATE_FIELD_ID], "week"],
],
});
expect(newCard.display).toEqual("line");
diff --git a/frontend/test/metabase/modes/lib/actions.unit.spec.js b/frontend/test/metabase/modes/lib/actions.unit.spec.js
index 26c7d1862de..0e2cecadd44 100644
--- a/frontend/test/metabase/modes/lib/actions.unit.spec.js
+++ b/frontend/test/metabase/modes/lib/actions.unit.spec.js
@@ -22,7 +22,7 @@ describe("actions", () => {
expect(newCard.dataset_query.query).toEqual({
filter: [
"=",
- ["datetime-field", ["field-id", 123], "as", "day"],
+ ["datetime-field", ["field-id", 123], "day"],
"2018-04-27T00:00:00+02:00",
],
});
diff --git a/frontend/test/metabase/public/public.e2e.spec.js b/frontend/test/metabase/public/public.e2e.spec.js
index 1ff48a27193..c856ba03364 100644
--- a/frontend/test/metabase/public/public.e2e.spec.js
+++ b/frontend/test/metabase/public/public.e2e.spec.js
@@ -55,7 +55,7 @@ import Select from "metabase/components/Select";
import RunButton from "metabase/query_builder/components/RunButton";
import Scalar from "metabase/visualizations/visualizations/Scalar";
import ParameterFieldWidget from "metabase/parameters/components/widgets/ParameterFieldWidget";
-import TextWidget from "metabase/parameters/components/widgets/TextWidget.jsx";
+import TextWidget from "metabase/parameters/components/widgets/TextWidget";
import SaveQuestionModal from "metabase/containers/SaveQuestionModal";
import SharingPane from "metabase/public/components/widgets/SharingPane";
import { EmbedTitle } from "metabase/public/components/widgets/EmbedModalContent";
@@ -414,7 +414,7 @@ describe("public/embedded", () => {
type: "query",
query: {
"source-table": PEOPLE_TABLE_ID,
- aggregation: ["count"],
+ aggregation: [["count"]],
},
},
});
diff --git a/frontend/test/metabase/query_builder/components/FieldName.unit.spec.js b/frontend/test/metabase/query_builder/components/FieldName.unit.spec.js
index d4883e9e116..e067a543eea 100644
--- a/frontend/test/metabase/query_builder/components/FieldName.unit.spec.js
+++ b/frontend/test/metabase/query_builder/components/FieldName.unit.spec.js
@@ -9,7 +9,7 @@ import {
PRODUCT_CATEGORY_FIELD_ID,
} from "__support__/sample_dataset_fixture";
-import FieldName from "metabase/query_builder/components/FieldName.jsx";
+import FieldName from "metabase/query_builder/components/FieldName";
describe("FieldName", () => {
it("should render regular field correctly", () => {
@@ -60,7 +60,10 @@ describe("FieldName", () => {
it("should render nested fk field correctly", () => {
pending();
const fieldName = mount(
- <FieldName field={["fk->", 3, 2]} tableMetadata={ORDERS_TABLE_ID} />,
+ <FieldName
+ field={["fk->", ["field-id", 3], ["field-id", 2]]}
+ tableMetadata={ORDERS_TABLE_ID}
+ />,
);
expect(fieldName.text()).toEqual("BarFoo: Baz");
});
diff --git a/frontend/test/metabase/reference/databases.e2e.spec.js b/frontend/test/metabase/reference/databases.e2e.spec.js
index 9ed63b79dde..b2f7cb72d0b 100644
--- a/frontend/test/metabase/reference/databases.e2e.spec.js
+++ b/frontend/test/metabase/reference/databases.e2e.spec.js
@@ -22,10 +22,10 @@ import FieldListContainer from "metabase/reference/databases/FieldListContainer"
import FieldDetailContainer from "metabase/reference/databases/FieldDetailContainer";
import DatabaseList from "metabase/reference/databases/DatabaseList";
-import List from "metabase/components/List.jsx";
-import ListItem from "metabase/components/ListItem.jsx";
-import ReferenceHeader from "metabase/reference/components/ReferenceHeader.jsx";
-import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState.jsx";
+import List from "metabase/components/List";
+import ListItem from "metabase/components/ListItem";
+import ReferenceHeader from "metabase/reference/components/ReferenceHeader";
+import AdminAwareEmptyState from "metabase/components/AdminAwareEmptyState";
import UsefulQuestions from "metabase/reference/components/UsefulQuestions";
import QueryButton from "metabase/components/QueryButton";
import { INITIALIZE_QB, QUERY_COMPLETED } from "metabase/query_builder/actions";
@@ -39,7 +39,7 @@ describe("The Reference Section", () => {
dataset_query: {
database: 1,
type: "query",
- query: { "source-table": 1, aggregation: ["count"] },
+ query: { "source-table": 1, aggregation: [["count"]] },
},
visualization_settings: {},
};
diff --git a/frontend/test/metabase/reference/guide.e2e.spec.js b/frontend/test/metabase/reference/guide.e2e.spec.js
index 78e49d80143..002d7fc01da 100644
--- a/frontend/test/metabase/reference/guide.e2e.spec.js
+++ b/frontend/test/metabase/reference/guide.e2e.spec.js
@@ -41,7 +41,7 @@ describe("The Reference Section", () => {
description: "I did it!",
table_id: 1,
show_in_getting_started: true,
- definition: { database: 1, query: { aggregation: ["count"] } },
+ definition: { database: 1, query: { aggregation: [["count"]] } },
};
const anotherMetricDef = {
@@ -49,7 +49,7 @@ describe("The Reference Section", () => {
description: "I did it again!",
table_id: 1,
show_in_getting_started: true,
- definition: { database: 1, query: { aggregation: ["count"] } },
+ definition: { database: 1, query: { aggregation: [["count"]] } },
};
// Scaffolding
diff --git a/frontend/test/metabase/reference/segments.e2e.spec.js b/frontend/test/metabase/reference/segments.e2e.spec.js
index 94e15fe1783..ef8451ccbe8 100644
--- a/frontend/test/metabase/reference/segments.e2e.spec.js
+++ b/frontend/test/metabase/reference/segments.e2e.spec.js
@@ -56,7 +56,7 @@ describe("The Reference Section", () => {
type: "query",
query: {
"source-table": 1,
- aggregation: ["count"],
+ aggregation: [["count"]],
filter: ["segment", 1],
},
},
diff --git a/frontend/test/metabase/reference/utils.unit.spec.js b/frontend/test/metabase/reference/utils.unit.spec.js
index 4f81cedb4f6..e34559b829d 100644
--- a/frontend/test/metabase/reference/utils.unit.spec.js
+++ b/frontend/test/metabase/reference/utils.unit.spec.js
@@ -147,7 +147,7 @@ describe("Reference utils.js", () => {
getNewQuestion({
database: 3,
table: 4,
- aggregation: ["count"],
+ aggregation: [["count"]],
}),
);
});
@@ -183,7 +183,7 @@ describe("Reference utils.js", () => {
table: 4,
display: "bar",
breakout: [["field-id", 5]],
- aggregation: ["count"],
+ aggregation: [["count"]],
}),
);
});
@@ -203,7 +203,7 @@ describe("Reference utils.js", () => {
table: 4,
display: "pie",
breakout: [["field-id", 5]],
- aggregation: ["count"],
+ aggregation: [["count"]],
}),
);
});
@@ -217,7 +217,7 @@ describe("Reference utils.js", () => {
expect(question).toEqual(
getNewQuestion({
- aggregation: ["metric", 3],
+ aggregation: [["metric", 3]],
}),
);
});
@@ -232,7 +232,7 @@ describe("Reference utils.js", () => {
expect(question).toEqual(
getNewQuestion({
- aggregation: ["metric", 3],
+ aggregation: [["metric", 3]],
breakout: [["field-id", 4]],
}),
);
@@ -249,7 +249,7 @@ describe("Reference utils.js", () => {
getNewQuestion({
database: 2,
table: 3,
- filter: ["and", ["segment", 4]],
+ filter: ["segment", 4],
}),
);
});
@@ -266,8 +266,8 @@ describe("Reference utils.js", () => {
getNewQuestion({
database: 2,
table: 3,
- aggregation: ["count"],
- filter: ["and", ["segment", 4]],
+ aggregation: [["count"]],
+ filter: ["segment", 4],
}),
);
});
diff --git a/frontend/test/metabase/visualizations/components/LegendVertical.unit.spec.js b/frontend/test/metabase/visualizations/components/LegendVertical.unit.spec.js
index b7363ef7a3a..34bc40a0662 100644
--- a/frontend/test/metabase/visualizations/components/LegendVertical.unit.spec.js
+++ b/frontend/test/metabase/visualizations/components/LegendVertical.unit.spec.js
@@ -1,5 +1,5 @@
import React from "react";
-import LegendVertical from "metabase/visualizations/components/LegendVertical.jsx";
+import LegendVertical from "metabase/visualizations/components/LegendVertical";
import { mount } from "enzyme";
describe("LegendVertical", () => {
diff --git a/frontend/test/metabase/visualizations/components/LineAreaBarChart.unit.spec.js b/frontend/test/metabase/visualizations/components/LineAreaBarChart.unit.spec.js
index 00476766980..ecc7ee867fa 100644
--- a/frontend/test/metabase/visualizations/components/LineAreaBarChart.unit.spec.js
+++ b/frontend/test/metabase/visualizations/components/LineAreaBarChart.unit.spec.js
@@ -3,7 +3,7 @@
// HACK: Needed because of conflicts caused by circular dependencies
import "metabase/visualizations/components/Visualization";
-import LineAreaBarChart from "metabase/visualizations/components/LineAreaBarChart";
+import LineAreaBarChart from "metabase/visualizations/components/LineAreaBarChart.jsx";
const millisecondCard = {
card: {
diff --git a/frontend/test/metabase/visualizations/components/Visualization.unit.spec.js b/frontend/test/metabase/visualizations/components/Visualization.unit.spec.js
index b75c5d35a70..f9f455b992e 100644
--- a/frontend/test/metabase/visualizations/components/Visualization.unit.spec.js
+++ b/frontend/test/metabase/visualizations/components/Visualization.unit.spec.js
@@ -8,7 +8,7 @@ import {
cleanupFixture,
} from "../__support__/visualizations";
-import colors from "metabase/lib/colors";
+import { color } from "metabase/lib/colors";
import Visualization from "metabase/visualizations/components/Visualization";
describe("Visualization", () => {
@@ -61,8 +61,8 @@ describe("Visualization", () => {
},
]);
expect(getBarColors()).toEqual([
- colors.brand, // "count"
- colors.brand, // "count"
+ color("brand"), // "count"
+ color("brand"), // "count"
]);
});
});
@@ -82,10 +82,10 @@ describe("Visualization", () => {
},
]);
expect(getBarColors()).toEqual([
- colors.brand, // "count"
- colors.brand, // "count"
- colors.accent1, // "sum"
- colors.accent1, // "sum"
+ color("brand"), // "count"
+ color("brand"), // "count"
+ color("accent1"), // "sum"
+ color("accent1"), // "sum"
]);
});
});
@@ -110,10 +110,10 @@ describe("Visualization", () => {
},
]);
expect(getBarColors()).toEqual([
- colors.accent1, // "a"
- colors.accent1, // "a"
- colors.accent2, // "b"
- colors.accent2, // "b"
+ color("accent1"), // "a"
+ color("accent1"), // "a"
+ color("accent2"), // "b"
+ color("accent2"), // "b"
]);
});
});
@@ -142,10 +142,10 @@ describe("Visualization", () => {
},
]);
expect(getBarColors()).toEqual([
- colors.brand, // "count"
- colors.brand, // "count"
- colors.accent2, // "Card2"
- colors.accent2, // "Card2"
+ color("brand"), // "count"
+ color("brand"), // "count"
+ color("accent2"), // "Card2"
+ color("accent2"), // "Card2"
]);
});
});
diff --git a/frontend/test/metabase/visualizations/lib/utils.unit.spec.js b/frontend/test/metabase/visualizations/lib/utils.unit.spec.js
index 1f53af77e00..9941eaed176 100644
--- a/frontend/test/metabase/visualizations/lib/utils.unit.spec.js
+++ b/frontend/test/metabase/visualizations/lib/utils.unit.spec.js
@@ -33,7 +33,10 @@ const breakoutMultiseriesQuery = {
...baseQuery,
query: {
...baseQuery.query,
- breakout: [...baseQuery.query.breakout, ["fk->", 1, 10]],
+ breakout: [
+ ...baseQuery.query.breakout,
+ ["fk->", ["field-id", 1], ["field-id", 10]],
+ ],
},
};
const derivedBreakoutMultiseriesQuery = {
--
GitLab