From 3a4540def7be494fd319e3baf729bac3ee0d7a92 Mon Sep 17 00:00:00 2001
From: idastambuk <ida.stambuk@grafana.com>
Date: Thu, 8 Jan 2026 16:31:39 +0100
Subject: [PATCH] Add landing title

---
 .../DashboardEmpty/DashboardEmpty.tsx         | 206 ++++++++++--------
 1 file changed, 119 insertions(+), 87 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmpty.tsx
index 8c623c2c7ca..b4edba4871b 100644
--- a/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmpty.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardEmpty/DashboardEmpty.tsx
@@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
-import { Button, useStyles2, Text, Box, Stack, TextLink } from '@grafana/ui';
+import { Button, useStyles2, Text, Box, Stack, TextLink, Icon } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
 
@@ -42,105 +42,134 @@ const InternalDashboardEmpty = ({ onAddVisualization, onAddLibraryPanel, onImpor
               !dashboardLibraryDatasourceUid,
           })}
         >
-          <Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
-            <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={4}>
-              <Stack direction="column" alignItems="center" gap={2}>
+          {config.featureToggles.dashboardNewLayouts ? (
+            <Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
+              <Box padding={4}>
+                <Box marginBottom={2} paddingX={4} display="flex" justifyContent="center">
+                  <Icon name="apps" size="xxl" className={styles.appsIcon} />
+                </Box>
                 <Text element="h1" textAlignment="center" weight="medium">
-                  <Trans i18nKey="dashboard.empty.add-visualization-header">
-                    Start your new dashboard by adding a visualization
-                  </Trans>
+                  <Trans i18nKey="dashboard.empty.title">New dashboard</Trans>
                 </Text>
-                <Box marginBottom={2} paddingX={4}>
+                <Box marginTop={3} paddingX={4}>
                   <Text element="p" textAlignment="center" color="secondary">
-                    <Trans i18nKey="dashboard.empty.add-visualization-body">
-                      Select a data source and then query and visualize your data with charts, stats and tables or
-                      create lists, markdowns and other widgets.
-                    </Trans>
+                    <Trans i18nKey="dashboard.empty.description">Add a panel to visualize your data</Trans>
                   </Text>
                 </Box>
-                <Button
-                  size="lg"
-                  icon="plus"
-                  data-testid={selectors.pages.AddDashboard.itemButton('Create new panel button')}
-                  onClick={onAddVisualization}
-                  disabled={!onAddVisualization}
-                >
-                  <Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
-                </Button>
-              </Stack>
-            </Box>
-
-            {/* Suggested Dashboards Section */}
-            {config.featureToggles.suggestedDashboards &&
-              config.featureToggles.dashboardLibrary &&
-              dashboardLibraryDatasourceUid && <SuggestedDashboards datasourceUid={dashboardLibraryDatasourceUid} />}
-
-            {/* Basic Provisioned Dashboards Section that don't include community dashboards */}
-            {config.featureToggles.dashboardLibrary &&
-              !config.featureToggles.suggestedDashboards &&
-              dashboardLibraryDatasourceUid && (
-                <BasicProvisionedDashboardsEmptyPage datasourceUid={dashboardLibraryDatasourceUid} />
-              )}
-
-            <Stack direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
-              <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
-                <Stack direction="column" alignItems="center" gap={1}>
-                  <Text element="h3" textAlignment="center" weight="medium">
-                    <Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
-                  </Text>
-                  <Box marginBottom={2}>
-                    <Text element="p" textAlignment="center" color="secondary">
-                      <Trans i18nKey="dashboard.empty.add-library-panel-body">
-                        Add visualizations that are shared with other dashboards.
-                      </Trans>
-                    </Text>
-                  </Box>
-                  <Button
-                    icon="plus"
-                    fill="outline"
-                    data-testid={selectors.pages.AddDashboard.itemButton('Add a panel from the panel library button')}
-                    onClick={onAddLibraryPanel}
-                    disabled={!onAddLibraryPanel}
-                  >
-                    <Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
-                  </Button>
-                </Stack>
-              </Box>
-              <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
-                <Stack direction="column" alignItems="center" gap={1}>
-                  <Text element="h3" textAlignment="center" weight="medium">
-                    <Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
-                  </Text>
-                  <Box marginBottom={2}>
-                    <Text element="p" textAlignment="center" color="secondary">
-                      <Trans i18nKey="dashboard.empty.import-a-dashboard-body">
-                        Import dashboards from files or{' '}
-                        <TextLink external href="https://grafana.com/grafana/dashboards/">
-                          grafana.com
-                        </TextLink>
-                        .
-                      </Trans>
-                    </Text>
-                  </Box>
-                  <Button
-                    icon="upload"
-                    fill="outline"
-                    data-testid={selectors.pages.AddDashboard.itemButton('Import dashboard button')}
-                    onClick={onImportDashboard}
-                    disabled={!onImportDashboard}
-                  >
-                    <Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
-                  </Button>
-                </Stack>
               </Box>
+              <DashboardExtensionsComponents dashboardLibraryDatasourceUid={dashboardLibraryDatasourceUid} />
             </Stack>
-          </Stack>
+          ) : (
+            <Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
+              <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={4}>
+                <Stack direction="column" alignItems="center" gap={2}>
+                  <Text element="h1" textAlignment="center" weight="medium">
+                    <Trans i18nKey="dashboard.empty.add-visualization-header">
+                      Start your new dashboard by adding a visualization
+                    </Trans>
+                  </Text>
+                  <Box marginBottom={2} paddingX={4}>
+                    <Text element="p" textAlignment="center" color="secondary">
+                      <Trans i18nKey="dashboard.empty.add-visualization-body">
+                        Select a data source and then query and visualize your data with charts, stats and tables or
+                        create lists, markdowns and other widgets.
+                      </Trans>
+                    </Text>
+                  </Box>
+                  <Button
+                    size="lg"
+                    icon="plus"
+                    data-testid={selectors.pages.AddDashboard.itemButton('Create new panel button')}
+                    onClick={onAddVisualization}
+                    disabled={!onAddVisualization}
+                  >
+                    <Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
+                  </Button>
+                </Stack>
+              </Box>
+
+              <DashboardExtensionsComponents dashboardLibraryDatasourceUid={dashboardLibraryDatasourceUid} />
+
+              <Stack direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
+                <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
+                  <Stack direction="column" alignItems="center" gap={1}>
+                    <Text element="h3" textAlignment="center" weight="medium">
+                      <Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
+                    </Text>
+                    <Box marginBottom={2}>
+                      <Text element="p" textAlignment="center" color="secondary">
+                        <Trans i18nKey="dashboard.empty.add-library-panel-body">
+                          Add visualizations that are shared with other dashboards.
+                        </Trans>
+                      </Text>
+                    </Box>
+                    <Button
+                      icon="plus"
+                      fill="outline"
+                      data-testid={selectors.pages.AddDashboard.itemButton('Add a panel from the panel library button')}
+                      onClick={onAddLibraryPanel}
+                      disabled={!onAddLibraryPanel}
+                    >
+                      <Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
+                    </Button>
+                  </Stack>
+                </Box>
+                <Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
+                  <Stack direction="column" alignItems="center" gap={1}>
+                    <Text element="h3" textAlignment="center" weight="medium">
+                      <Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
+                    </Text>
+                    <Box marginBottom={2}>
+                      <Text element="p" textAlignment="center" color="secondary">
+                        <Trans i18nKey="dashboard.empty.import-a-dashboard-body">
+                          Import dashboards from files or{' '}
+                          <TextLink external href="https://grafana.com/grafana/dashboards/">
+                            grafana.com
+                          </TextLink>
+                          .
+                        </Trans>
+                      </Text>
+                    </Box>
+                    <Button
+                      icon="upload"
+                      fill="outline"
+                      data-testid={selectors.pages.AddDashboard.itemButton('Import dashboard button')}
+                      onClick={onImportDashboard}
+                      disabled={!onImportDashboard}
+                    >
+                      <Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
+                    </Button>
+                  </Stack>
+                </Box>
+              </Stack>
+            </Stack>
+          )}
         </div>
       </Stack>
     </>
   );
 };
 
+const DashboardExtensionsComponents = ({
+  dashboardLibraryDatasourceUid,
+}: {
+  dashboardLibraryDatasourceUid: string | null;
+}) => (
+  <>
+    {/* Suggested Dashboards Section */}
+    {config.featureToggles.suggestedDashboards &&
+      config.featureToggles.dashboardLibrary &&
+      dashboardLibraryDatasourceUid && <SuggestedDashboards datasourceUid={dashboardLibraryDatasourceUid} />}
+
+    {/* Basic Provisioned Dashboards Section that don't include community dashboards */}
+    {config.featureToggles.dashboardLibrary &&
+      !config.featureToggles.suggestedDashboards &&
+      dashboardLibraryDatasourceUid && (
+        <BasicProvisionedDashboardsEmptyPage datasourceUid={dashboardLibraryDatasourceUid} />
+      )}
+  </>
+);
+
 export interface Props {
   dashboard: DashboardModel | DashboardScene;
   canCreate: boolean;
@@ -190,5 +219,8 @@ function getStyles(theme: GrafanaTheme2) {
     wrapperMaxWidth: css({
       maxWidth: '890px',
     }),
+    appsIcon: css({
+      fill: theme.v1.palette.orange,
+    }),
   };
 }