From b043d8d0e8877b5760ba7fefe197f86e6429fed2 Mon Sep 17 00:00:00 2001
From: Aditi Patel <aditipatelpro@gmail.com>
Date: Mon, 28 Aug 2023 10:52:49 -0500
Subject: [PATCH] PublicDashboards: Warnings when creating a public dashboard
 are not properly aligned (#73794)

---
 .../CreatePublicDashboard.tsx                 | 22 +++++++++++++---
 .../CreatePublicDashboard/Description.tsx     | 25 -------------------
 2 files changed, 18 insertions(+), 29 deletions(-)
 delete mode 100644 public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/Description.tsx

diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
index a730b8d8f94..515ab6fa6ae 100644
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
+++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx
@@ -18,7 +18,6 @@ import { UnsupportedTemplateVariablesAlert } from '../ModalAlerts/UnsupportedTem
 import { dashboardHasTemplateVariables, getUnsupportedDashboardDatasources } from '../SharePublicDashboardUtils';
 
 import { AcknowledgeCheckboxes } from './AcknowledgeCheckboxes';
-import { Description } from './Description';
 
 const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
 
@@ -45,14 +44,20 @@ const CreatePublicDashboard = ({ isError }: { isError: boolean }) => {
   };
 
   return (
-    <div>
-      <p className={styles.title}>Welcome to public dashboards public preview!</p>
-      <Description />
+    <div className={styles.container}>
+      <div>
+        <p className={styles.title}>Welcome to public dashboards public preview!</p>
+        <p className={styles.description}>Currently, we don’t support template variables or frontend data sources</p>
+      </div>
+
       {!hasWritePermissions && <NoUpsertPermissionsAlert mode="create" />}
+
       {dashboardHasTemplateVariables(dashboard.getVariables()) && <UnsupportedTemplateVariablesAlert />}
+
       {!!unsupportedDataSources.length && (
         <UnsupportedDataSourcesAlert unsupportedDataSources={unsupportedDataSources.join(', ')} />
       )}
+
       <Form onSubmit={onCreate} validateOn="onChange" maxWidth="none">
         {({
           register,
@@ -78,10 +83,19 @@ const CreatePublicDashboard = ({ isError }: { isError: boolean }) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.spacing(4)};
+  `,
   title: css`
     font-size: ${theme.typography.h4.fontSize};
     margin: ${theme.spacing(0, 0, 2)};
   `,
+  description: css`
+    color: ${theme.colors.text.secondary};
+    margin-bottom: ${theme.spacing(0)};
+  `,
   checkboxes: css`
     margin: ${theme.spacing(0, 0, 4)};
   `,
diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/Description.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/Description.tsx
deleted file mode 100644
index 7fa9477bd8e..00000000000
--- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/Description.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data/src';
-import { useStyles2 } from '@grafana/ui/src';
-
-export const Description = () => {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <div className={styles.container}>
-      <p className={styles.description}>Currently, we don’t support template variables or frontend data sources</p>
-    </div>
-  );
-};
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    margin-bottom: ${theme.spacing(3)};
-  `,
-  description: css`
-    color: ${theme.colors.text.secondary};
-    margin-bottom: ${theme.spacing(1)};
-  `,
-});