diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx index be8209a382a..617d883f87a 100644 --- a/public/app/features/manage-dashboards/DashboardImportPage.tsx +++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx @@ -21,6 +21,8 @@ import { DropzoneFile, FileDropzoneDefaultChildren, LinkButton, + TextLink, + Label, } from '@grafana/ui'; import appEvents from 'app/core/app_events'; import { Page } from 'app/core/components/Page/Page'; @@ -41,6 +43,13 @@ type DashboardImportPageRouteSearchParams = { type OwnProps = Themeable2 & GrafanaRouteComponentProps<{}, DashboardImportPageRouteSearchParams>; const IMPORT_STARTED_EVENT_NAME = 'dashboard_import_loaded'; +const JSON_PLACEHOLDER = `{ + "title": "Example - Repeating Dictionary variables", + "uid": "_0HnEoN4z", + "panels": [...] + ... +} +`; const mapStateToProps = (state: StoreState) => ({ loadingState: state.importDashboard.state, @@ -136,7 +145,16 @@ class UnthemedDashboardImport extends PureComponent {
{({ register, errors }) => ( + + Find and import dashboards for common applications at{' '} + + grafana.com/dashboards + + + + } invalid={!!errors.gcomDashboard} error={errors.gcomDashboard && errors.gcomDashboard.message} > @@ -159,7 +177,7 @@ class UnthemedDashboardImport extends PureComponent { {({ register, errors }) => ( <> @@ -171,6 +189,7 @@ class UnthemedDashboardImport extends PureComponent { data-testid={selectors.components.DashboardImportPage.textarea} id="dashboard-json-textarea" rows={10} + placeholder={JSON_PLACEHOLDER} /> @@ -226,5 +245,11 @@ const importStyles = stylesFactory((theme: GrafanaTheme2) => { margin-bottom: ${theme.spacing(4)}; max-width: 600px; `, + labelWithLink: css` + max-width: 100%; + `, + linkWithinLabel: css` + font-size: inherit; + `, }; });