Public Dashboard: Redesign modal (v2) (#71151)

* Update public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBar.tsx

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>

* revert modal styling and add specific styling to Sharing

* Update public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsBar.tsx

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>

* functions > const

* put a gat between all items in email config, instead of margins for each item

* fix html semantic elements

* ad theme to class component ShareModal

* add labels

* fix failing tests; now Settings has a summary and has to be opened to be able to see the On/Off toggles

* fix dashboard-public-create test with settings dropdown

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

@@ -213,6 +213,7 @@ export const Pages = {
       DeleteButton: 'data-testid public dashboard delete button',
       CopyUrlInput: 'data-testid public dashboard copy url input',
       CopyUrlButton: 'data-testid public dashboard copy url button',
+      SettingsDropdown: 'data-testid public dashboard settings dropdown',
       TemplateVariablesWarningAlert: 'data-testid public dashboard disabled template variables alert',
       UnsupportedDataSourcesWarningAlert: 'data-testid public dashboard unsupported data sources alert',
       NoUpsertPermissionsWarningAlert: 'data-testid public dashboard no upsert permissions alert',

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -125,6 +125,7 @@ const getStyles = (
 
   return {
     alert: css({
+      label: 'alert',
       flexGrow: 1,
       position: 'relative',
       borderRadius,

packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React, { FormEvent, MouseEvent, useState } from 'react';
 
-import { dateMath, dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';
+import { dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { stylesFactory } from '../../themes';
@@ -10,13 +10,10 @@ import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper'
 import { Icon } from '../Icon/Icon';
 import { getInputStyles } from '../Input/Input';
 
-import { TimePickerButtonLabel } from './TimeRangePicker';
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';
+import { TimeRangeLabel } from './TimeRangePicker/TimeRangeLabel';
 import { quickOptions } from './options';
-
-const isValidTimeRange = (range: TimeRange) => {
-  return dateMath.isValid(range.from) && dateMath.isValid(range.to);
-};
+import { isValidTimeRange } from './utils';
 
 export interface TimeRangeInputProps {
   value: TimeRange;
@@ -87,11 +84,8 @@ export const TimeRangeInput = ({
         onClick={onOpen}
       >
         {showIcon && <Icon name="clock-nine" size={'sm'} className={styles.icon} />}
-        {isValidTimeRange(value) ? (
-          <TimePickerButtonLabel value={value} timeZone={timeZone} />
-        ) : (
-          <span className={styles.placeholder}>{placeholder}</span>
-        )}
+
+        <TimeRangeLabel value={value} timeZone={timeZone} placeholder={placeholder} />
 
         {!disabled && (
           <span className={styles.caretIcon}>

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx

@@ -0,0 +1,46 @@
+import { css } from '@emotion/css';
+import React, { memo } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../../../src/themes';
+import { TimePickerButtonLabel, TimeRangePickerProps } from '../TimeRangePicker';
+import { isValidTimeRange } from '../utils';
+
+type LabelProps = Pick<TimeRangePickerProps, 'hideText' | 'value' | 'timeZone'> & {
+  placeholder?: string;
+  className?: string;
+};
+
+export const TimeRangeLabel = memo<LabelProps>(function TimePickerLabel({
+  hideText,
+  value,
+  timeZone = 'browser',
+  placeholder = 'No time range selected',
+  className,
+}) {
+  const styles = useStyles2(getLabelStyles);
+
+  if (hideText) {
+    return null;
+  }
+
+  return (
+    <span className={className}>
+      {isValidTimeRange(value) ? (
+        <TimePickerButtonLabel value={value} timeZone={timeZone} />
+      ) : (
+        <span className={styles.placeholder}>{placeholder}</span>
+      )}
+    </span>
+  );
+});
+
+const getLabelStyles = (theme: GrafanaTheme2) => {
+  return {
+    placeholder: css({
+      color: theme.colors.text.disabled,
+      opacity: 1,
+    }),
+  };
+};

packages/grafana-ui/src/components/DateTimePickers/utils.ts

@@ -1,4 +1,4 @@
-import { dateMath, dateTimeParse, isDateTime, TimeZone } from '@grafana/data';
+import { dateMath, dateTimeParse, isDateTime, TimeRange, TimeZone } from '@grafana/data';
 
 export function isValid(value: string, roundUp?: boolean, timeZone?: TimeZone): boolean {
   if (isDateTime(value)) {
@@ -12,3 +12,7 @@ export function isValid(value: string, roundUp?: boolean, timeZone?: TimeZone):
   const parsed = dateTimeParse(value, { roundUp, timeZone });
   return parsed.isValid();
 }
+
+export function isValidTimeRange(range: TimeRange) {
+  return dateMath.isValid(range.from) && dateMath.isValid(range.to);
+}

packages/grafana-ui/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,7 @@ export const Spinner = ({ className, inline = false, iconClassName, style, size
   const styles = getStyles(size, inline);
   return (
     <div data-testid="Spinner" style={style} className={cx(styles, className)}>
-      <Icon className={cx('fa-spin', iconClassName)} name="fa fa-spinner" />
+      <Icon className={cx('fa-spin', iconClassName)} name="fa fa-spinner" aria-label="loading spinner" />
     </div>
   );
 };

packages/grafana-ui/src/components/index.ts

@@ -35,6 +35,7 @@ export { StatsPicker } from './StatsPicker/StatsPicker';
 export { RefreshPicker, defaultIntervals } from './RefreshPicker/RefreshPicker';
 export { TimeRangePicker, type TimeRangePickerProps } from './DateTimePickers/TimeRangePicker';
 export { TimePickerTooltip } from './DateTimePickers/TimeRangePicker';
+export { TimeRangeLabel } from './DateTimePickers/TimeRangePicker/TimeRangeLabel';
 export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker';
 export { TimeZonePicker } from './DateTimePickers/TimeZonePicker';
 export { WeekStartPicker } from './DateTimePickers/WeekStartPicker';