Simplify pinned questions (#23352)

frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionLoader.tsx

@@ -17,7 +17,7 @@ export interface PinnedQuestionLoaderProps {
 export interface PinnedQuestionChildrenProps {
   loading: boolean;
   question?: Question;
-  rawSeries?: any;
+  rawSeries?: any[];
   error?: string;
   errorIcon?: string;
 }
@@ -29,18 +29,10 @@ export interface QuestionLoaderProps {
 
 export interface QuestionResultLoaderProps {
   loading: boolean;
-  error?: QuestionError;
-  result?: QuestionResult;
+  error?: any;
+  result?: any;
   results?: any;
-  rawSeries?: any;
-}
-
-export interface QuestionError {
-  status?: number;
-}
-
-export interface QuestionResult {
-  error?: QuestionError;
+  rawSeries?: any[];
 }
 
 const PinnedQuestionLoader = ({
@@ -71,8 +63,8 @@ const PinnedQuestionLoader = ({
             }: QuestionResultLoaderProps) =>
               children({
                 question,
-                rawSeries,
                 loading: loading || results == null,
+                rawSeries: getRawSeries(rawSeries),
                 error: getError(error, result),
                 errorIcon: getErrorIcon(error, result),
               })
@@ -84,7 +76,22 @@ const PinnedQuestionLoader = ({
   );
 };
 
-const getError = (error?: QuestionError, result?: QuestionResult) => {
+const getRawSeries = (rawSeries?: any[]) => {
+  return rawSeries?.map(series => ({
+    ...series,
+    card: {
+      ...series.card,
+      visualization_settings: {
+        ...series.card.visualization_settings,
+        "graph.show_values": false,
+        "graph.x_axis.labels_enabled": false,
+        "graph.y_axis.labels_enabled": false,
+      },
+    },
+  }));
+};
+
+const getError = (error?: any, result?: any) => {
   const errorResponse = error ?? result?.error;
 
   if (!errorResponse) {
@@ -96,7 +103,7 @@ const getError = (error?: QuestionError, result?: QuestionResult) => {
   }
 };
 
-const getErrorIcon = (error?: QuestionError, result?: QuestionResult) => {
+const getErrorIcon = (error?: any, result?: any) => {
   const errorResponse = error ?? result?.error;
 
   if (!errorResponse) {

frontend/src/metabase/visualizations/components/skeletons/GaugeSkeleton/GaugeSkeleton.styled.tsx

@@ -8,5 +8,6 @@ export const SkeletonRoot = styled.div`
 export const SkeletonImage = styled.svg`
   ${animationStyles};
   flex: 1 1 0;
-  margin-top: 1rem;
+  margin-top: 1.25rem;
+  margin-bottom: 0.625rem;
 `;

frontend/src/metabase/visualizations/components/skeletons/LineSkeleton/LineSkeleton.tsx

@@ -24,7 +24,7 @@ const LineSkeleton = ({
         <path
           d="m1 111 15.336-10 18.043 10 22.553-16.5 15.336 9.5 46.91-47 30.331 16 31.013-16 20.299 16 43.752-41 24.358 31 15.273-15.5L299.603 63l48.714-60L374 63"
           stroke="currentColor"
-          strokeWidth="3"
+          strokeWidth="2"
         />
       </SkeletonImage>
     </SkeletonRoot>

frontend/src/metabase/visualizations/components/skeletons/PieSkeleton/PieSkeleton.styled.tsx

@@ -8,4 +8,6 @@ export const SkeletonRoot = styled.div`
 export const SkeletonImage = styled.svg`
   ${animationStyles};
   flex: 1 1 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 `;

frontend/src/metabase/visualizations/components/skeletons/ProgressSkeleton/ProgressSkeleton.tsx

@@ -27,12 +27,12 @@ const ProgressSkeleton = ({
           opacity=".32"
           y="12"
           width="404"
-          height="45"
+          height="35"
           rx="4"
           fill="currentColor"
         />
         <path
-          d="M0 16a4 4 0 0 1 4-4h298v45H4a4 4 0 0 1-4-4V16ZM302 .485h8.485L302 8.971 293.515.485H302Z"
+          d="M0 16a4 4 0 0 1 4-4h298v35H4a4 4 0 0 1-4-4V16ZM302 .485h8.485L302 8.971 293.515.485H302Z"
           fill="currentColor"
         />
       </SkeletonImage>

frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.styled.tsx

 import styled from "@emotion/styled";
 import { containerStyles, animationStyles } from "../Skeleton";
+import SkeletonCaption from "../SkeletonCaption";
 
 export const SkeletonRoot = styled.div`
   ${containerStyles};
@@ -10,5 +11,9 @@ export const SkeletonRoot = styled.div`
 export const SkeletonImage = styled.svg`
   ${animationStyles};
   height: 2rem;
-  margin-bottom: 1rem;
+`;
+
+export const SkeletonCenterCaption = styled(SkeletonCaption)`
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
 `;

frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.tsx

 import React, { HTMLAttributes } from "react";
-import SkeletonCaption from "../SkeletonCaption";
-import { SkeletonImage, SkeletonRoot } from "./ScalarSkeleton.styled";
+import {
+  SkeletonImage,
+  SkeletonRoot,
+  SkeletonCenterCaption,
+} from "./ScalarSkeleton.styled";
 
 export interface ScalarSkeletonProps extends HTMLAttributes<HTMLDivElement> {
   name?: string | null;
@@ -17,7 +20,11 @@ const ScalarSkeleton = ({
       <SkeletonImage xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 32">
         <rect width="103" height="32" rx="16" fill="currentColor" />
       </SkeletonImage>
-      <SkeletonCaption name={name} description={description} />
+      <SkeletonCenterCaption
+        name={name}
+        description={description}
+        size="large"
+      />
     </SkeletonRoot>
   );
 };

frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.styled.tsx

@@ -3,13 +3,20 @@ import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
 import Ellipsified from "metabase/core/components/Ellipsified";
 import { animationStyles } from "../Skeleton";
+import { SkeletonCaptionSize } from "./types";
 
 export const SkeletonRoot = styled.div`
   display: flex;
 `;
 
-export const SkeletonTitle = styled(Ellipsified)`
+export interface SkeletonTitleProps {
+  size: SkeletonCaptionSize;
+}
+
+export const SkeletonTitle = styled(Ellipsified)<SkeletonTitleProps>`
   color: ${color("text-dark")};
+  font-size: ${props => (props.size === "large" ? "1rem" : "")};
+  line-height: ${props => (props.size === "large" ? "1.375rem" : "")};
   font-weight: bold;
   overflow: hidden;
 `;

frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.tsx

-import React from "react";
+import React, { HTMLAttributes } from "react";
 import Tooltip from "metabase/components/Tooltip";
 import {
   SkeletonRoot,
@@ -6,19 +6,27 @@ import {
   SkeletonDescription,
   SkeletonPlaceholder,
 } from "./SkeletonCaption.styled";
+import { SkeletonCaptionSize } from "./types";
 
-export interface SkeletonCaptionProps {
+export interface SkeletonCaptionProps extends HTMLAttributes<HTMLDivElement> {
   name?: string | null;
   description?: string | null;
+  size?: SkeletonCaptionSize;
 }
 
 const SkeletonCaption = ({
   name,
   description,
+  size = "medium",
+  ...props
 }: SkeletonCaptionProps): JSX.Element => {
   return (
-    <SkeletonRoot>
-      {name ? <SkeletonTitle>{name}</SkeletonTitle> : <SkeletonPlaceholder />}
+    <SkeletonRoot {...props}>
+      {name ? (
+        <SkeletonTitle size={size}>{name}</SkeletonTitle>
+      ) : (
+        <SkeletonPlaceholder />
+      )}
       {description && (
         <Tooltip tooltip={description} maxWidth="22em">
           <SkeletonDescription name="info" />

frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/types.ts

+export type SkeletonCaptionSize = "medium" | "large";

frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.styled.tsx

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import { containerStyles, animationStyles } from "../Skeleton";
+import SkeletonCaption from "metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption";
 
 export const SkeletonRoot = styled.div`
   ${containerStyles};
@@ -11,11 +12,15 @@ export const SkeletonRoot = styled.div`
 export const SkeletonTopImage = styled.svg`
   ${animationStyles};
   height: 2rem;
-  margin-bottom: 1.25rem;
+  margin-top: 0.625rem;
 `;
 
 export const SkeletonBottomImage = styled.svg`
   ${animationStyles};
   height: 0.5rem;
-  margin-top: 1rem;
+`;
+
+export const SkeletonCenterCaption = styled(SkeletonCaption)`
+  margin-top: 0.25rem;
+  margin-bottom: 2.25rem;
 `;

frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.tsx

 import React, { HTMLAttributes } from "react";
-import SkeletonCaption from "../SkeletonCaption";
 import {
   SkeletonBottomImage,
+  SkeletonCenterCaption,
   SkeletonRoot,
   SkeletonTopImage,
 } from "./SmartScalarSkeleton.styled";
@@ -22,7 +22,11 @@ const SmartScalarSkeleton = ({
       <SkeletonTopImage xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 32">
         <rect width="103" height="32" rx="16" fill="currentColor" />
       </SkeletonTopImage>
-      <SkeletonCaption name={name} description={description} />
+      <SkeletonCenterCaption
+        name={name}
+        description={description}
+        size="large"
+      />
       <SkeletonBottomImage
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 182 8"