Tweak copy and add educational link to the New -> Model screen (#26047)

* update new model copy

* add educational button

* remove EducationalButtonProps

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>
     );

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>
     );
   }

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;
 }