Style: Update homepage styles (#96860)

* style: increase size of the ‘let’s start’ section; decrease number of filter lines in the trail cards; remove DS line; change select metric to all metrics

* chore: delete unused get datasource test mock

* fix: adjust test to account for select metric to all metrics change

* chore: update i18n

* text: update truncate long labels test to truncate after 2 lines

* style: shrink card height

public/app/features/trails/DataTrailBookmarks.test.tsx

@@ -49,9 +49,9 @@ describe('DataTrailsBookmarks', () => {
     render(<DataTrailsBookmarks onSelect={onSelect} onDelete={onDelete} />);
     const button = screen.getByLabelText('bookmarkCarrot');
     fireEvent.click(button);
-    expect(screen.getByText('Select metric')).toBeInTheDocument();
+    expect(screen.getByText('All metrics')).toBeInTheDocument();
     fireEvent.click(button);
-    expect(screen.queryByText('Select metric')).not.toBeInTheDocument();
+    expect(screen.queryByText('All metrics')).not.toBeInTheDocument();
   });
 
   it('calls onDelete when the delete button is clicked', () => {

public/app/features/trails/DataTrailCard.test.tsx

@@ -6,8 +6,6 @@ import { DataTrailBookmark } from './TrailStore/TrailStore';
 
 jest.mock('./utils', () => ({
   ...jest.requireActual('./utils'),
-  getDataSource: jest.fn(() => 'Test DataSource'),
-  getDataSourceName: jest.fn(() => 'Test DataSource Name'),
 }));
 
 describe('DataTrailCard', () => {
@@ -55,19 +53,19 @@ describe('DataTrailCard', () => {
     expect(screen.getByText('...', { exact: false })).toBeInTheDocument();
   });
 
-  it('truncates long list of labels after 3 lines in recent explorations', () => {
+  it('truncates long list of labels after 2 lines in recent explorations', () => {
     const bookmarkWithLongLabel: DataTrailBookmark = {
       urlValues: {
         key: '1',
         metric: 'metric',
         // labels are in a comma separated list
-        'var-filters': `zone|=|averylonglabeltotakeupspace,zone=averylonglabeltotakeupspace,zone1=averylonglabeltotakeupspace,zone2=averylonglabeltotakeupspace,zone3=averylonglabeltotakeupspace,zone4=averylonglabeltotakeupspace`,
+        'var-filters': `zone|=|averylonglabeltotakeupspace,zone1=averylonglabeltotakeupspace,zone2=averylonglabeltotakeupspace,zone3=averylonglabeltotakeupspace,zone4=averylonglabeltotakeupspace`,
       },
       createdAt: Date.now(),
     };
     render(<DataTrailCard bookmark={bookmarkWithLongLabel} onSelect={onSelect} onDelete={onDelete} />);
     // to test the non-existence of a truncated label we need queryByText
-    const truncatedLabel = screen.queryByText('zone4');
+    const truncatedLabel = screen.queryByText('zone3');
     expect(truncatedLabel).not.toBeInTheDocument();
   });
 });

public/app/features/trails/DataTrailCard.tsx

@@ -9,7 +9,7 @@ import { Trans } from 'app/core/internationalization';
 import { DataTrail } from './DataTrail';
 import { getTrailStore, DataTrailBookmark } from './TrailStore/TrailStore';
 import { VAR_FILTERS } from './shared';
-import { getDataSource, getDataSourceName, getMetricName } from './utils';
+import { getMetricName } from './utils';
 
 export type Props = {
   trail?: DataTrail;
@@ -46,7 +46,6 @@ export function DataTrailCard(props: Props) {
     const createdAt = bookmark?.createdAt || trail.state.createdAt;
 
     return {
-      dsValue: getDataSource(trail),
       filters: filtersVariable.state.filters,
       metric: trail.state.metric,
       createdAt,
@@ -57,16 +56,13 @@ export function DataTrailCard(props: Props) {
     return null;
   }
 
-  const { dsValue, filters, metric, createdAt } = values;
+  const { filters, metric, createdAt } = values;
 
   return (
     <div>
       <Card onClick={onSelect} className={styles.card}>
         <Card.Heading>
-          <div className={styles.metricLabel}>
-            <Trans i18nKey="trails.card.metric">Metric:</Trans>
-          </div>
-          <div className={styles.metricValue}>{getMetricName(metric)}</div>
+          <div className={styles.metricValue}>{truncateValue('', getMetricName(metric), 39)}</div>
         </Card.Heading>
         <Card.Meta className={styles.meta}>
           {filters.map((f) => (
@@ -76,12 +72,6 @@ export function DataTrailCard(props: Props) {
             </span>
           ))}
         </Card.Meta>
-        <div className={styles.datasource}>
-          <div className={styles.secondaryFont}>
-            <Trans i18nKey="trails.card.data-source">Data source: </Trans>
-          </div>
-          <div className={styles.primaryFont}>{dsValue && getDataSourceName(dsValue)}</div>
-        </div>
         <div className={styles.deleteButton}>
           {onDelete && (
             <Card.SecondaryActions>
@@ -124,7 +114,6 @@ export function getStyles(theme: GrafanaTheme2) {
       fontSize: '14px',
       fontStyle: 'normal',
       fontWeight: 500,
-      marginLeft: '8px', // Add space between the label and the value
       wordBreak: 'break-all',
     }),
     tag: css({
@@ -136,7 +125,7 @@ export function getStyles(theme: GrafanaTheme2) {
       position: 'relative',
       width: '318px',
       padding: `12px ${theme.spacing(2)} ${theme.spacing(1)} ${theme.spacing(2)}`,
-      height: '152px',
+      height: '110px',
       alignItems: 'start',
       marginBottom: 0,
       borderTop: `1px solid ${theme.colors.border.weak}`,
@@ -150,9 +139,6 @@ export function getStyles(theme: GrafanaTheme2) {
       color: theme.colors.text.secondary,
       fontSize: '12px',
     }),
-    datasource: css({
-      gridArea: 'Description',
-    }),
     date: css({
       border: `1px solid ${theme.colors.border.weak}`,
       // eslint-disable-next-line @grafana/no-border-radius-literal
@@ -164,8 +150,7 @@ export function getStyles(theme: GrafanaTheme2) {
       flexWrap: 'wrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      maxHeight: '54px',
-      width: '100%',
+      maxHeight: '36px', // 2 lines * 18px line-height
       margin: 0,
       gridArea: 'Meta',
       color: theme.colors.text.secondary,

public/app/features/trails/DataTrailsHome.tsx

@@ -111,9 +111,8 @@ function getStyles(theme: GrafanaTheme2) {
     }),
     homepageBox: css({
       backgroundColor: theme.colors.background.secondary,
-      width: '725px',
-      height: '294px',
-      padding: '40px 32px',
+      width: '904px',
+      padding: '80px 32px',
       boxSizing: 'border-box', // Ensure padding doesn't cause overflow
       flexShrink: 0,
     }),

public/app/features/trails/utils.ts

@@ -83,7 +83,7 @@ export function getDataSourceName(dataSourceUid: string) {
 
 export function getMetricName(metric?: string) {
   if (!metric) {
-    return 'Select metric';
+    return 'All metrics';
   }
 
   if (metric === LOGS_METRIC) {

public/locales/en-US/grafana.json

@@ -3229,9 +3229,7 @@
       "or-view-bookmarks": "Or view bookmarks"
     },
     "card": {
-      "data-source": "Data source: ",
-      "date-created": "Date created: ",
-      "metric": "Metric:"
+      "date-created": "Date created: "
     },
     "home": {
       "learn-more": "Learn more",

public/locales/pseudo-LOCALE/grafana.json

@@ -3229,9 +3229,7 @@
       "or-view-bookmarks": "Øř vįęŵ þőőĸmäřĸş"
     },
     "card": {
-      "data-source": "Đäŧä şőūřčę: ",
-      "date-created": "Đäŧę čřęäŧęđ: ",
-      "metric": "Męŧřįč:"
+      "date-created": "Đäŧę čřęäŧęđ: "
     },
     "home": {
       "learn-more": "Ŀęäřʼn mőřę",