From 4f329e9fa60b5e2cc952961e3cf7a84896a10176 Mon Sep 17 00:00:00 2001
From: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Date: Tue, 12 Sep 2023 11:13:00 +0200
Subject: [PATCH] Import:Enhance clarity through improved copy and streamlined
 links (#74383)

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
---
 .../manage-dashboards/DashboardImportPage.tsx | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

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<Props> {
           <Form onSubmit={this.getGcomDashboard} defaultValues={{ gcomDashboard: '' }}>
             {({ register, errors }) => (
               <Field
-                label="Import via grafana.com"
+                label={
+                  <Label className={styles.labelWithLink} htmlFor="url-input">
+                    <span>
+                      Find and import dashboards for common applications at{' '}
+                      <TextLink variant="bodySmall" href="https://grafana.com/grafana/dashboards/" external>
+                        grafana.com/dashboards
+                      </TextLink>
+                    </span>
+                  </Label>
+                }
                 invalid={!!errors.gcomDashboard}
                 error={errors.gcomDashboard && errors.gcomDashboard.message}
               >
@@ -159,7 +177,7 @@ class UnthemedDashboardImport extends PureComponent<Props> {
             {({ register, errors }) => (
               <>
                 <Field
-                  label="Import via panel json"
+                  label="Import via dashboard JSON model"
                   invalid={!!errors.dashboardJson}
                   error={errors.dashboardJson && errors.dashboardJson.message}
                 >
@@ -171,6 +189,7 @@ class UnthemedDashboardImport extends PureComponent<Props> {
                     data-testid={selectors.components.DashboardImportPage.textarea}
                     id="dashboard-json-textarea"
                     rows={10}
+                    placeholder={JSON_PLACEHOLDER}
                   />
                 </Field>
                 <HorizontalGroup>
@@ -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;
+    `,
   };
 });