PublicDashboards: Configuration modal redesign (#63211)

Configuration modal redesign

---------

Co-authored-by: kay delaney <kay@grafana.com>

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -190,14 +190,15 @@ export const Pages = {
       WillBePublicCheckbox: 'data-testid public dashboard will be public checkbox',
       LimitedDSCheckbox: 'data-testid public dashboard limited datasources checkbox',
       CostIncreaseCheckbox: 'data-testid public dashboard cost may increase checkbox',
-      EnableSwitch: 'data-testid public dashboard on off switch',
+      PauseSwitch: 'data-testid public dashboard pause switch',
       EnableAnnotationsSwitch: 'data-testid public dashboard on off switch for annotations',
-      SaveConfigButton: 'data-testid public dashboard save config button',
+      CreateButton: 'data-testid public dashboard create button',
       DeleteButton: 'data-testid public dashboard delete button',
       CopyUrlInput: 'data-testid public dashboard copy url input',
       CopyUrlButton: 'data-testid public dashboard copy url button',
       TemplateVariablesWarningAlert: 'data-testid public dashboard disabled template variables alert',
-      UnsupportedDatasourcesWarningAlert: 'data-testid public dashboard unsupported datasources',
+      UnsupportedDataSourcesWarningAlert: 'data-testid public dashboard unsupported data sources alert',
+      NoUpsertPermissionsWarningAlert: 'data-testid public dashboard no upsert permissions alert',
       EnableTimeRangeSwitch: 'data-testid public dashboard on off switch for time range',
     },
   },

packages/grafana-ui/src/components/Forms/Checkbox.tsx

@@ -30,7 +30,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <label className={cx(styles.wrapper, className)}>
-        <div>
+        <div className={styles.checkboxWrapper}>
           <input
             type="checkbox"
             className={styles.input}
@@ -43,10 +43,8 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           />
           <span className={styles.checkmark} />
         </div>
-        <div>
-          {label && <span className={styles.label}>{label}</span>}
-          {description && <span className={styles.description}>{description}</span>}
-        </div>
+        {label && <span className={styles.label}>{label}</span>}
+        {description && <span className={styles.description}>{description}</span>}
       </label>
     );
   }
@@ -59,12 +57,12 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
 
   return {
     wrapper: css`
-      display: inline-flex;
-      gap: ${theme.spacing(labelPadding)};
-      align-items: baseline;
+      display: grid;
+      align-items: center;
+      column-gap: ${theme.spacing(labelPadding)};
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto auto;
       position: relative;
-      vertical-align: middle;
-      font-size: 0;
     `,
     input: css`
       position: absolute;
@@ -125,6 +123,12 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
         }
       }
     `,
+    checkboxWrapper: css`
+      display: flex;
+      align-items: center;
+      grid-column-start: 1;
+      grid-row-start: 1;
+    `,
     checkmark: css`
       position: relative; /* Checkbox should be layered on top of the invisible input so it recieves :hover */
       z-index: 2;
@@ -143,10 +147,11 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
     label: cx(
       labelStyles.label,
       css`
+        grid-column-start: 2;
+        grid-row-start: 1;
         position: relative;
         z-index: 2;
         cursor: pointer;
-        top: -3px;
         max-width: fit-content;
         line-height: ${theme.typography.bodySmall.lineHeight};
         margin-bottom: 0;
@@ -155,6 +160,8 @@ export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
     description: cx(
       labelStyles.description,
       css`
+        grid-column-start: 2;
+        grid-row-start: 2;
         line-height: ${theme.typography.bodySmall.lineHeight};
         margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */
       `

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx

@@ -8,6 +8,7 @@ import { Tooltip } from '../../../Tooltip/Tooltip';
 export interface Props {
   label: string;
   checked: boolean;
+  disabled?: boolean;
   className?: string;
   labelClass?: string;
   switchClass?: string;
@@ -37,6 +38,7 @@ export class Switch extends PureComponent<Props, State> {
       switchClass = '',
       label,
       checked,
+      disabled,
       transparent,
       className,
       tooltip,
@@ -63,7 +65,13 @@ export class Switch extends PureComponent<Props, State> {
             </div>
           )}
           <div className={switchClassName}>
-            <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+            <input
+              disabled={disabled}
+              id={labelId}
+              type="checkbox"
+              checked={checked}
+              onChange={this.internalOnChange}
+            />
             <span className="gf-form-switch__slider" />
           </div>
         </label>