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,
})}
>
-
-
-
+ {config.featureToggles.dashboardNewLayouts ? (
+
+
+
+
+
-
- Start your new dashboard by adding a visualization
-
+ New dashboard
-
+
-
- Select a data source and then query and visualize your data with charts, stats and tables or
- create lists, markdowns and other widgets.
-
+ Add a panel to visualize your data
-
-
-
-
- {/* Suggested Dashboards Section */}
- {config.featureToggles.suggestedDashboards &&
- config.featureToggles.dashboardLibrary &&
- dashboardLibraryDatasourceUid && }
-
- {/* Basic Provisioned Dashboards Section that don't include community dashboards */}
- {config.featureToggles.dashboardLibrary &&
- !config.featureToggles.suggestedDashboards &&
- dashboardLibraryDatasourceUid && (
-
- )}
-
-
-
-
-
- Import panel
-
-
-
-
- Add visualizations that are shared with other dashboards.
-
-
-
-
-
-
-
-
-
- Import a dashboard
-
-
-
-
- Import dashboards from files or{' '}
-
- grafana.com
-
- .
-
-
-
-
-
+
-
+ ) : (
+
+
+
+
+
+ Start your new dashboard by adding a visualization
+
+
+
+
+
+ Select a data source and then query and visualize your data with charts, stats and tables or
+ create lists, markdowns and other widgets.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Import panel
+
+
+
+
+ Add visualizations that are shared with other dashboards.
+
+
+
+
+
+
+
+
+
+ Import a dashboard
+
+
+
+
+ Import dashboards from files or{' '}
+
+ grafana.com
+
+ .
+
+
+
+
+
+
+
+
+ )}
>
);
};
+const DashboardExtensionsComponents = ({
+ dashboardLibraryDatasourceUid,
+}: {
+ dashboardLibraryDatasourceUid: string | null;
+}) => (
+ <>
+ {/* Suggested Dashboards Section */}
+ {config.featureToggles.suggestedDashboards &&
+ config.featureToggles.dashboardLibrary &&
+ dashboardLibraryDatasourceUid && }
+
+ {/* Basic Provisioned Dashboards Section that don't include community dashboards */}
+ {config.featureToggles.dashboardLibrary &&
+ !config.featureToggles.suggestedDashboards &&
+ 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,
+ }),
};
}