feat(Alerts and Reports): Modal redesign

superset-frontend/src/GlobalStyles.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { css } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import { mix } from 'polished';
+import 'react-js-cron/dist/styles.css';
 
 export const GlobalStyles = () => (
   <Global

superset-frontend/src/components/Button/index.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { Children, ReactElement } from 'react';
-import { kebabCase } from 'lodash';
+import React, { Children, ReactElement, ReactNode } from 'react';
 import { mix } from 'polished';
 import cx from 'classnames';
 import { AntdButton } from 'src/components';
@@ -43,7 +42,7 @@ export type ButtonSize = 'default' | 'small' | 'xsmall';
 
 export type ButtonProps = Omit<AntdButtonProps, 'css'> &
   Pick<TooltipProps, 'placement'> & {
-    tooltip?: string;
+    tooltip?: ReactNode;
     className?: string;
     buttonSize?: ButtonSize;
     buttonStyle?: ButtonStyle;
@@ -214,11 +213,7 @@ export default function Button(props: ButtonProps) {
 
   if (tooltip) {
     return (
-      <Tooltip
-        placement={placement}
-        id={`${kebabCase(tooltip)}-tooltip`}
-        title={tooltip}
-      >
+      <Tooltip placement={placement} title={tooltip}>
         {/* wrap the button in a span so that the tooltip shows up
         when the button is disabled. */}
         {disabled ? (

superset-frontend/src/components/CronPicker/CronPicker.tsx

@@ -44,7 +44,7 @@ export const LOCALE: Locale = {
   prefixMonths: t('in'),
   prefixMonthDays: t('on'),
   prefixWeekDays: t('on'),
-  prefixWeekDaysForMonthAndYearPeriod: t('and'),
+  prefixWeekDaysForMonthAndYearPeriod: t('or'),
   prefixHours: t('at'),
   prefixMinutes: t(':'),
   prefixMinutesForHourPeriod: t('at'),
@@ -110,22 +110,99 @@ export const CronPicker = styled((props: CronProps) => (
     <ReactCronPicker locale={LOCALE} {...props} />
   </ConfigProvider>
 ))`
-  .react-js-cron-field {
-    margin-bottom: 0px;
-  }
-  .react-js-cron-select:not(.react-js-cron-custom-select) > div:first-of-type,
-  .react-js-cron-custom-select {
-    border-radius: ${({ theme }) => theme.gridUnit}px;
-    background-color: ${({ theme }) =>
-      theme.colors.grayscale.light4} !important;
-  }
-  .react-js-cron-custom-select > div:first-of-type {
-    border-radius: ${({ theme }) => theme.gridUnit}px;
-  }
-  .react-js-cron-custom-select .ant-select-selection-placeholder {
-    flex: auto;
-  }
-  .react-js-cron-custom-select .ant-select-selection-overflow-item {
-    align-self: center;
-  }
+  ${({ theme }) => `
+
+    /* Boilerplate styling for ReactCronPicker imported explicitly in GlobalStyles.tsx */
+
+    /* When year period is selected */
+
+    :has(.react-js-cron-months) {
+      display: grid !important;
+      grid-template-columns: repeat(2, 50%);
+      column-gap: ${theme.gridUnit}px;
+      row-gap: ${theme.gridUnit * 2}px;
+      div:has(.react-js-cron-hours) {
+        grid-column: span 2;
+        display: flex;
+        justify-content: space-between;
+        .react-js-cron-field {
+          width: 50%;
+        }
+      }
+    }
+
+    /* When month period is selected */
+
+    :not(:has(.react-js-cron-months)) {
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
+      column-gap: ${theme.gridUnit}px;
+      row-gap: ${theme.gridUnit * 2}px;
+      .react-js-cron-period {
+        grid-column: span 2;
+      }
+      div:has(.react-js-cron-hours) {
+        grid-column: span 2;
+        display: flex;
+        justify-content: space-between;
+        .react-js-cron-field {
+          width: 50%;
+        }
+      }
+    }
+
+    /* When week period is selected */
+
+    :not(:has(.react-js-cron-month-days)) {
+      .react-js-cron-week-days {
+        grid-column: span 2;
+      }
+    }
+
+    /* For proper alignment of inputs and span elements */
+
+    :not(div:has(.react-js-cron-hours)) {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+
+    div:has(.react-js-cron-hours) {
+      width: 100%;
+    }
+
+    .react-js-cron-minutes > span {
+      padding-left: ${theme.gridUnit}px;
+    }
+
+    /* Sizing of select container */
+
+    .react-js-cron-select.ant-select {
+      width: 100%;
+      .ant-select-selector {
+        flex-wrap: nowrap;
+      }
+    }
+
+    .react-js-cron-field {
+      width: 100%;
+      margin-bottom: 0px;
+      > span {
+        margin-left: 0px;
+      }
+    }
+
+    .react-js-cron-custom-select .ant-select-selection-placeholder {
+      flex: auto;
+      border-radius: ${theme.gridUnit}px;
+    }
+
+    .react-js-cron-custom-select .ant-select-selection-overflow-item {
+      align-self: center;
+    }
+
+    .react-js-cron-select > div:first-of-type,
+    .react-js-cron-custom-select {
+      border-radius: ${theme.gridUnit}px;
+    }
+  `}
 `;

superset-frontend/src/components/Modal/Modal.tsx

@@ -41,6 +41,7 @@ export interface ModalProps {
   className?: string;
   children: ReactNode;
   disablePrimaryButton?: boolean;
+  primaryTooltipMessage?: ReactNode;
   primaryButtonLoading?: boolean;
   onHide: () => void;
   onHandledPrimaryAction?: () => void;
@@ -232,6 +233,7 @@ const defaultResizableConfig = (hideFooter: boolean | undefined) => ({
 const CustomModal = ({
   children,
   disablePrimaryButton = false,
+  primaryTooltipMessage,
   primaryButtonLoading = false,
   onHide,
   onHandledPrimaryAction,
@@ -273,6 +275,7 @@ const CustomModal = ({
           key="submit"
           buttonStyle={primaryButtonType}
           disabled={disablePrimaryButton}
+          tooltip={primaryTooltipMessage}
           loading={primaryButtonLoading}
           onClick={onHandledPrimaryAction}
           cta