diff --git a/frontend/src/metabase/new_query/components/NewQueryOption.jsx b/frontend/src/metabase/new_query/components/NewQueryOption.jsx index b555b4bafc17fa108bf3b5cc5a5c34f29c1a8928..31dc01e66c5e01529a4f10c93b991d46687dd33a 100644 --- a/frontend/src/metabase/new_query/components/NewQueryOption.jsx +++ b/frontend/src/metabase/new_query/components/NewQueryOption.jsx @@ -16,7 +16,7 @@ export default class NewQueryOption extends Component { return ( <Link {...props} - className="block no-decoration bg-white px3 py4 align-center bordered rounded cursor-pointer transition-all full-height text-centered" + className="block no-decoration bg-white p4 align-center bordered rounded cursor-pointer transition-all full-height text-centered" style={{ boxSizing: "border-box", boxShadow: hover @@ -44,7 +44,9 @@ export default class NewQueryOption extends Component { <h2 className={cx("transition-all", { "text-brand": hover })}> {title} </h2> - <p className="text-medium text-small">{description}</p> + <p className="text-medium text-small" style={{ maxWidth: "360px" }}> + {description} + </p> </div> </Link> ); diff --git a/frontend/src/metabase/new_query/containers/NewDatasetOptions.jsx b/frontend/src/metabase/new_query/containers/NewDatasetOptions.jsx index 12f70f64cfac20f42ebc321ab75b4cc169a7a9f8..e80ad896825e74d382d13caabf22445d9e2db70f 100644 --- a/frontend/src/metabase/new_query/containers/NewDatasetOptions.jsx +++ b/frontend/src/metabase/new_query/containers/NewDatasetOptions.jsx @@ -21,8 +21,11 @@ import Database from "metabase/entities/databases"; import { QueryOptionsGridItem, QueryOptionsRoot, + EducationalButton, } from "./NewQueryOptions.styled"; +const EDUCATIONAL_LINK = "https://www.metabase.com/learn/data-modeling/models"; + const mapStateToProps = state => ({ hasDataAccess: getHasDataAccess(state), hasNativeWrite: getHasNativeWrite(state), @@ -77,7 +80,7 @@ class NewDatasetOptions extends Component { <NewQueryOption image="app/img/notebook_mode_illustration" title={t`Use the notebook editor`} - description={t`Use the advanced notebook editor to join data, create custom columns, do math, and more.`} + description={t`This automatically inherits metadata from your source tables, and gives your models drill-through.`} width={180} to={Urls.newQuestion({ mode: "query", @@ -93,7 +96,7 @@ class NewDatasetOptions extends Component { <NewQueryOption image="app/img/sql_illustration" title={t`Use a native query`} - description={t`For more complicated questions, you can write your own SQL or native query.`} + description={t`You can always fall back to a SQL or native query, which is a bit more manual.`} to={Urls.newQuestion({ mode: "query", type: "native", @@ -106,6 +109,14 @@ class NewDatasetOptions extends Component { </QueryOptionsGridItem> )} </Grid> + + <EducationalButton + target="_blank" + href={EDUCATIONAL_LINK} + className="mt4" + > + {t`What's a model?`} + </EducationalButton> </QueryOptionsRoot> ); } diff --git a/frontend/src/metabase/new_query/containers/NewQueryOptions.styled.tsx b/frontend/src/metabase/new_query/containers/NewQueryOptions.styled.tsx index 58d1d3255e42bbd7d0e8b69602eb46f544fc6bdb..b469f4b17bf99dcacbd868d7529aab0da417a7e9 100644 --- a/frontend/src/metabase/new_query/containers/NewQueryOptions.styled.tsx +++ b/frontend/src/metabase/new_query/containers/NewQueryOptions.styled.tsx @@ -3,7 +3,9 @@ import { breakpointMinMedium, breakpointMinSmall, } from "metabase/styled-components/theme"; +import ExternalLink from "metabase/core/components/ExternalLink"; import { GridItem } from "metabase/components/Grid"; +import { color } from "metabase/lib/colors"; const getPercentage = (number: number): string => { return `${number * 100}%`; @@ -11,6 +13,7 @@ const getPercentage = (number: number): string => { export const QueryOptionsRoot = styled.div` display: flex; + flex-direction: column; justify-content: center; align-items: center; @@ -24,6 +27,20 @@ export const QueryOptionsRoot = styled.div` } `; +export const EducationalButton = styled(ExternalLink)` + background-color: ${color("bg-medium")}; + border-radius: 0.5rem; + color: ${color("brand")}; + font-weight: bold; + padding: 1em; + transition: all 0.3s; + + &:hover { + color: ${color("white")}; + background-color: ${color("brand")}; + } +`; + export interface QueryOptionsGridItemProps { itemsCount: number; }