diff --git a/frontend/src/metabase/css/core/bordered.css b/frontend/src/metabase/css/core/bordered.css
index bec2c2794b5f51ddbd213e02bcdc65989a3b3e66..fded00ab191bfb6c545dd966e88be46f42605189 100644
--- a/frontend/src/metabase/css/core/bordered.css
+++ b/frontend/src/metabase/css/core/bordered.css
@@ -83,7 +83,7 @@
border-color: var(--success-color) !important;
}
-.border-brand :local(.border-brand) {
+.border-brand, :local(.border-brand) {
border-color: var(--brand-color) !important;
}
diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 709307322c22f430f5a2925d62758cff392d9efd..da9c96bcf719d348f57a68180c942d530821b3af 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/frontend/src/metabase/css/core/colors.css
@@ -151,7 +151,9 @@
.bg-grey-3 { background-color: var(--grey-3) }
.bg-grey-4 { background-color: var(--grey-4) }
-.text-dark, :local(.text-dark) { color: var(--dark-color); }
+.text-dark, :local(.text-dark) {
+ color: var(--dark-color);
+}
/* white - move to bottom for specificity since its often used on hovers, etc */
.text-white, :local(.text-white),
diff --git a/frontend/src/metabase/css/core/cursor.css b/frontend/src/metabase/css/core/cursor.css
index bf464667ec41853d04c83f3d767a591b7a571ef2..2de366c0f853a38828613c1e03978ef96e503597 100644
--- a/frontend/src/metabase/css/core/cursor.css
+++ b/frontend/src/metabase/css/core/cursor.css
@@ -1,7 +1,7 @@
-:local .cursor-pointer {
+.cursor-pointer, :local(.cursor-pointer) {
cursor: pointer;
}
-:local .cursor-default {
+.cursor-default, :local(.cursor-default) {
cursor: default;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/metabase/css/core/text.css b/frontend/src/metabase/css/core/text.css
index 741be8b32af160fb2af0214c0d5ee7d990142660..3e2aa7ce4044735cfa268425efb05c8471db5955 100644
--- a/frontend/src/metabase/css/core/text.css
+++ b/frontend/src/metabase/css/core/text.css
@@ -91,11 +91,11 @@
}
.text-underline {
- text-decoration: underline;;
+ text-decoration: underline;
}
.text-underline-hover:hover {
- text-decoration: underline;;
+ text-decoration: underline;
}
.text-ellipsis {
@@ -112,8 +112,6 @@
white-space: pre;
}
-.text-measure { max-width: 620px; }
-
-.text-dark { color: #333333; }
-
-.text-no-underline { text-decoration: none; }
+.text-measure {
+ max-width: 620px;
+}
diff --git a/frontend/src/metabase/css/home.css b/frontend/src/metabase/css/home.css
index 5cbe3f60e8e65d07ba1db9a02619cdaf3cf7cdeb..4e301f009750f23d0f3afde5ba30955f0bb5028a 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -168,14 +168,6 @@
word-wrap: break-word;
}
-.cursor-pointer {
- cursor: pointer;
-}
-
-.cursor-default {
- cursor: default;
-}
-
.tooltip {
position: absolute;
background-color: #fff;
diff --git a/frontend/src/metabase/reference/components/GuideDetail.jsx b/frontend/src/metabase/reference/components/GuideDetail.jsx
index ca6d70e1ced1df6d1a7abb4b41ea5fbd482c63bc..8a944134cdc86555ef39df7fd899af554ecc9d27 100644
--- a/frontend/src/metabase/reference/components/GuideDetail.jsx
+++ b/frontend/src/metabase/reference/components/GuideDetail.jsx
@@ -74,7 +74,7 @@ const GuideDetail = ({
<div className="mt2">
<ContextHeading>
- {`Things to be aware of about this ${type}`}
+ {`Things to be aware of about this ${type}`}
</ContextHeading>
<ContextContent empty={!caveats}>
@@ -87,10 +87,10 @@ const GuideDetail = ({
<ContextHeading key="detailLabel">Explore this metric</ContextHeading>,
<div key="detailLinks">
<Link className="text-brand inline-block mr2 link text-bold" to={link}>View this metric</Link>
- { exploreLinks.map(link =>
+ { exploreLinks.map(link =>
<Link
className="inline-block text-bold text-brand mr2 link"
- key={link.url}
+ key={link.url}
to={link.url}
>
{`By ${link.name}`}
@@ -100,8 +100,8 @@ const GuideDetail = ({
</div>
]}
{ hasLearnMore &&
- <Link
- className={cx('block mt3 text-no-underline text-underline-hover text-bold', linkClass)}
+ <Link
+ className={cx('block mt3 no-decoration text-underline-hover text-bold', linkClass)}
to={learnMoreLink}
>
Learn more
@@ -119,8 +119,8 @@ GuideDetail.propTypes = {
const ItemTitle = ({ title, link, linkColorClass, linkHoverClass }) =>
<h2>
- <Link
- className={ cx(linkColorClass, linkHoverClass) }
+ <Link
+ className={ cx(linkColorClass, linkHoverClass) }
style={{ textDecoration: 'none' }}
to={ link }
>
diff --git a/frontend/src/metabase/reference/containers/ReferenceGettingStartedGuide.jsx b/frontend/src/metabase/reference/containers/ReferenceGettingStartedGuide.jsx
index 02059adc2bf556752f5785f7b060106480ccf454..613a1fd5e2a17f13b38406d09d9dec4d212fb2b9 100644
--- a/frontend/src/metabase/reference/containers/ReferenceGettingStartedGuide.jsx
+++ b/frontend/src/metabase/reference/containers/ReferenceGettingStartedGuide.jsx
@@ -58,7 +58,7 @@ import {
} from '../utils';
const mapStateToProps = (state, props) => {
- const guide = getGuide(state, props);
+ const guide = getGuide(state, props);
const dashboards = getDashboards(state, props);
const metrics = getMetrics(state, props);
const segments = getSegments(state, props);
@@ -66,8 +66,8 @@ const mapStateToProps = (state, props) => {
const fields = getFields(state, props);
const databases = getDatabases(state, props);
- // redux-form populates fields with stale values after update
- // if we dont specify nulls here
+ // redux-form populates fields with stale values after update
+ // if we dont specify nulls here
// could use a lot of refactoring
const initialValues = guide && {
things_to_know: guide.things_to_know || null,
@@ -75,13 +75,13 @@ const mapStateToProps = (state, props) => {
most_important_dashboard: guide.most_important_dashboard !== null ?
dashboards[guide.most_important_dashboard] :
{},
- important_metrics: guide.important_metrics && guide.important_metrics.length > 0 ?
+ important_metrics: guide.important_metrics && guide.important_metrics.length > 0 ?
guide.important_metrics
.map(metricId => metrics[metricId] && i.assoc(metrics[metricId], 'important_fields', guide.metric_important_fields[metricId] && guide.metric_important_fields[metricId].map(fieldId => fields[fieldId]))) :
[],
- important_segments_and_tables:
+ important_segments_and_tables:
(guide.important_segments && guide.important_segments.length > 0) ||
- (guide.important_tables && guide.important_tables.length > 0) ?
+ (guide.important_tables && guide.important_tables.length > 0) ?
guide.important_segments
.map(segmentId => segments[segmentId] && i.assoc(segments[segmentId], 'type', 'segment'))
.concat(guide.important_tables
@@ -99,14 +99,14 @@ const mapStateToProps = (state, props) => {
tables,
databases,
// FIXME: avoids naming conflict, tried using the propNamespace option
- // version but couldn't quite get it to work together with passing in
+ // version but couldn't quite get it to work together with passing in
// dynamic initialValues
metadataFields: fields,
loading: getLoading(state, props),
// naming this 'error' will conflict with redux form
loadingError: getError(state, props),
isEditing: getIsEditing(state, props),
- isDashboardModalOpen: getIsDashboardModalOpen(state, props),
+ isDashboardModalOpen: getIsDashboardModalOpen(state, props),
// redux form doesn't pass this through to component
// need to use to reset form field arrays
initialValues: initialValues,
@@ -206,7 +206,7 @@ export default class ReferenceGettingStartedGuide extends Component {
push
} = this.props;
- const onSubmit = handleSubmit(async (fields) =>
+ const onSubmit = handleSubmit(async (fields) =>
await tryUpdateGuide(fields, this.props)
);
@@ -234,9 +234,9 @@ export default class ReferenceGettingStartedGuide extends Component {
MetabaseAnalytics.trackEvent("Dashboard", "Create");
}}
- closeFn={hideDashboardModal}
+ closeFn={hideDashboardModal}
/>
- </Modal>
+ </Modal>
}
{ isEditing &&
<EditHeader
@@ -247,16 +247,16 @@ export default class ReferenceGettingStartedGuide extends Component {
/>
}
<LoadingAndErrorWrapper className="full" style={style} loading={!loadingError && loading} error={loadingError}>
- { () => isEditing ?
+ { () => isEditing ?
<div className="wrapper wrapper--trim">
<div className="mt4 py2">
<h1 className="my3 text-dark">
Help new Metabase users find their way around.
</h1>
<p className="text-paragraph text-measure">
- The Getting Started guide highlights the dashboard,
- metrics, segments, and tables that matter most,
- and informs your users of important things they
+ The Getting Started guide highlights the dashboard,
+ metrics, segments, and tables that matter most,
+ and informs your users of important things they
should know before digging into the data.
</p>
</div>
@@ -274,8 +274,8 @@ export default class ReferenceGettingStartedGuide extends Component {
<SectionHeader>
What is your most important dashboard?
</SectionHeader>
- <GuideDetailEditor
- type="dashboard"
+ <GuideDetailEditor
+ type="dashboard"
entities={dashboards}
selectedIds={[most_important_dashboard.id.value]}
formField={most_important_dashboard}
@@ -303,7 +303,7 @@ export default class ReferenceGettingStartedGuide extends Component {
</SectionHeader>
<div>
{ important_metrics.map((metricField, index, metricFields) =>
- <GuideDetailEditor
+ <GuideDetailEditor
key={index}
type="metric"
metadata={{
@@ -327,10 +327,10 @@ export default class ReferenceGettingStartedGuide extends Component {
/>
)}
</div>
- { important_metrics.length < 5 &&
- important_metrics.length < Object.keys(metrics).length &&
+ { important_metrics.length < 5 &&
+ important_metrics.length < Object.keys(metrics).length &&
<button
- className="Button Button--primary Button--large"
+ className="Button Button--primary Button--large"
type="button"
onClick={() => important_metrics.addField({id: null, caveats: null, points_of_interest: null})}
>
@@ -352,12 +352,12 @@ export default class ReferenceGettingStartedGuide extends Component {
>
<div>
<h2 className="text-measure text-dark">
- What are 3-5 commonly referenced segments or tables
+ What are 3-5 commonly referenced segments or tables
that would be useful for this audience?
</h2>
<div className="mb2">
{ important_segments_and_tables.map((segmentOrTableField, index, segmentOrTableFields) =>
- <GuideDetailEditor
+ <GuideDetailEditor
key={index}
type="segment"
metadata={{
@@ -379,10 +379,10 @@ export default class ReferenceGettingStartedGuide extends Component {
/>
)}
</div>
- { important_segments_and_tables.length < 5 &&
- important_segments_and_tables.length < Object.keys(tables).concat(Object.keys.segments).length &&
+ { important_segments_and_tables.length < 5 &&
+ important_segments_and_tables.length < Object.keys(tables).concat(Object.keys.segments).length &&
<button
- className="Button Button--primary Button--large"
+ className="Button Button--primary Button--large"
type="button"
onClick={() => important_segments_and_tables.addField({id: null, type: null, caveats: null, points_of_interest: null})}
>
@@ -391,7 +391,7 @@ export default class ReferenceGettingStartedGuide extends Component {
}
</div>
</GuideEditSection>
-
+
<GuideEditSection
isCollapsed={things_to_know.value === null}
isDisabled={false}
@@ -401,13 +401,13 @@ export default class ReferenceGettingStartedGuide extends Component {
>
<div className="text-measure">
<SectionHeader>
- What should a user of this data know before they start
+ What should a user of this data know before they start
accessing it?
</SectionHeader>
- <textarea
- className={S.guideDetailEditorTextarea}
- placeholder="E.g., expectations around data privacy and use,
- common pitfalls or misunderstandings, information about
+ <textarea
+ className={S.guideDetailEditorTextarea}
+ placeholder="E.g., expectations around data privacy and use,
+ common pitfalls or misunderstandings, information about
data warehouse performance, legal notices, etc."
{...things_to_know}
/>
@@ -431,18 +431,18 @@ export default class ReferenceGettingStartedGuide extends Component {
<div className="flex">
<div className="flex-full">
<h3 className="mb1">Name</h3>
- <input
+ <input
className="input text-paragraph"
- placeholder="Julie McHelpfulson"
+ placeholder="Julie McHelpfulson"
type="text"
{...contact.name}
/>
</div>
<div className="flex-full">
<h3 className="mb1">Email address</h3>
- <input
+ <input
className="input text-paragraph"
- placeholder="julie.mchelpfulson@acme.com"
+ placeholder="julie.mchelpfulson@acme.com"
type="text"
{...contact.email}
/>
@@ -451,13 +451,13 @@ export default class ReferenceGettingStartedGuide extends Component {
</div>
</GuideEditSection>
</div> :
- !guide || isGuideEmpty(guide) ?
- <GuideEmptyState
+ !guide || isGuideEmpty(guide) ?
+ <GuideEmptyState
isSuperuser={user && user.is_superuser}
- startEditing={startEditing}
- /> :
+ startEditing={startEditing}
+ /> :
<div>
- <GuideHeader
+ <GuideHeader
startEditing={startEditing}
isSuperuser={user && user.is_superuser}
/>
@@ -467,7 +467,7 @@ export default class ReferenceGettingStartedGuide extends Component {
<SectionHeader key={'dashboardTitle'}>
Our most important dashboard
</SectionHeader>
- <GuideDetail
+ <GuideDetail
key={'dashboardDetail'}
type="dashboard"
entity={dashboards[guide.most_important_dashboard]}
@@ -482,15 +482,15 @@ export default class ReferenceGettingStartedGuide extends Component {
Numbers that we pay attention to
</SectionHeader>
{ guide.important_metrics.map((metricId) =>
- <GuideDetail
+ <GuideDetail
key={metricId}
type="metric"
entity={metrics[metricId]}
tables={tables}
- exploreLinks={guide.metric_important_fields[metricId] &&
+ exploreLinks={guide.metric_important_fields[metricId] &&
guide.metric_important_fields[metricId]
.map(fieldId => metadataFields[fieldId])
- .map(field => ({
+ .map(field => ({
name: field.display_name || field.name,
url: getQuestionUrl({
dbId: tables[field.table_id] && tables[field.table_id].db_id,
@@ -498,7 +498,7 @@ export default class ReferenceGettingStartedGuide extends Component {
fieldId: field.id,
metricId
})
- }))
+ }))
}
/>
)} ,
@@ -512,14 +512,14 @@ export default class ReferenceGettingStartedGuide extends Component {
</div>
<div className="mt4">
- { ((guide.important_segments && guide.important_segments.length > 0) ||
+ { ((guide.important_segments && guide.important_segments.length > 0) ||
(guide.important_tables && guide.important_tables.length > 0)) && [
<div className="mt2">
<SectionHeader key={'segmentTitle'}>
Segments and tables
</SectionHeader>
{ guide.important_segments.map((segmentId) =>
- <GuideDetail
+ <GuideDetail
key={segmentId}
type="segment"
entity={segments[segmentId]}
@@ -527,7 +527,7 @@ export default class ReferenceGettingStartedGuide extends Component {
/>
)}
{ guide.important_tables.map((tableId) =>
- <GuideDetail
+ <GuideDetail
key={tableId}
type="table"
entity={tables[tableId]}
@@ -540,7 +540,7 @@ export default class ReferenceGettingStartedGuide extends Component {
<Link className="Button Button--purple mr2" to={'/reference/segments'}>
See all segments
</Link>
- <Link className="text-purple text-bold text-no-underline text-underline-hover" to={'/reference/databases'}>
+ <Link className="text-purple text-bold no-decoration text-underline-hover" to={'/reference/databases'}>
See all tables
</Link>
</div>
@@ -568,12 +568,12 @@ export default class ReferenceGettingStartedGuide extends Component {
Have questions?
</SectionHeader>,
<div className="mb4 pb4" key={'contactDetails'}>
- { guide.contact.name &&
+ { guide.contact.name &&
<span className="text-dark mr3">
{`Contact ${guide.contact.name}`}
</span>
}
- { guide.contact.email &&
+ { guide.contact.email &&
<a className="text-brand text-bold no-decoration" href={`mailto:${guide.contact.email}`}>
{guide.contact.email}
</a>
@@ -592,4 +592,3 @@ export default class ReferenceGettingStartedGuide extends Component {
const SectionHeader = ({ children }) =>
<h2 className="text-dark text-measure mb4">{children}</h2>
-