Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Alerts and Reports): Modal redesign #26202

Merged
merged 70 commits into from
Feb 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
70 commits
Select commit Hold shift + click to select a range
047881c
Create demo version of modal layout
rtexelm Nov 9, 2023
cc0363e
Style headers, add margin const, tidy
rtexelm Nov 28, 2023
f9167bb
Delete needless imports
rtexelm Dec 6, 2023
98d6324
creating StyledPanel and CustomValidationHeader components for alerts…
fisjac Nov 9, 2023
233d18f
added jacks components
CorbinBullard Nov 17, 2023
015f9c2
progress
rtexelm Nov 9, 2023
43a4d16
styled
CorbinBullard Nov 27, 2023
8a99d8f
default notification method
CorbinBullard Nov 27, 2023
475fb77
merged with latest
fisjac Nov 16, 2023
f6cac66
started cron
CorbinBullard Nov 30, 2023
b9974ab
finished cron picker design
CorbinBullard Nov 30, 2023
e1509b0
Create demo version of modal layout
CorbinBullard Nov 30, 2023
b6fc077
style touch ups
CorbinBullard Dec 5, 2023
c3feddc
fix NumberInputs for linter
CorbinBullard Dec 6, 2023
364fdfa
Add translations,fix headers,docstrings,clean
rtexelm Dec 6, 2023
636bd0c
fix lint
Dec 7, 2023
97f818a
skip tests
Dec 7, 2023
3b3c93f
fix type
Dec 7, 2023
37944b8
added back required
Dec 7, 2023
cbd35ee
Refactor contents panel, grace_period input, style
rtexelm Dec 7, 2023
3d6d680
lint
rtexelm Dec 7, 2023
63ea168
fix typo
Jan 4, 2024
2e87017
fixing tooltip bullets
fisjac Jan 3, 2024
6c19015
adding alert report modal tests
fisjac Dec 12, 2023
ce258fd
resolving tooltip error changes
fisjac Jan 4, 2024
0209e61
Fix centering of modal
rtexelm Jan 6, 2024
bc06573
Fix notification bugs
rtexelm Jan 6, 2024
ba73e18
Add loading spinner in edit mode, edit switch behavior
rtexelm Jan 7, 2024
b39dfb8
Edit cronpicker, lint for checks
rtexelm Jan 9, 2024
7c0ae1e
Remove loading spinner, accomodate tests accordingly
rtexelm Jan 10, 2024
5966e3f
chore: Adds a tooltip for the alert's SQL input (#26317)
michael-s-molina Dec 22, 2023
3250a32
Add StyledToolTip for SQL
rtexelm Jan 10, 2024
11928c8
Improve sql tooltip text
rtexelm Jan 10, 2024
99a0df9
Edit sql tooltip text
rtexelm Jan 10, 2024
9d69b91
Fix minutes label spacing
rtexelm Jan 11, 2024
ed270ce
build(deps): bump @babel/traverse from 7.22.8 to 7.23.2 in /superset-…
dependabot[bot] Jan 22, 2024
8d26c04
cronpicker fixes
fisjac Jan 25, 2024
bc92258
fixing tests
fisjac Jan 29, 2024
ffe35ad
Cleanse files
rtexelm Jan 30, 2024
2f9e6ae
Cleanse comment
rtexelm Jan 30, 2024
1ca4536
Add license headers
rtexelm Jan 30, 2024
20bac99
Delete Pipfile
rtexelm Jan 30, 2024
df7435c
Fixes for styling suggestions
rtexelm Feb 2, 2024
2d224ae
Fix notification input margin
rtexelm Feb 2, 2024
fb25ff7
Fix copilot auto-import
rtexelm Feb 2, 2024
449280c
fixing enums in A&R modal
fisjac Feb 2, 2024
2063956
updating DEFAULT_CRON_VALUE in config.py
fisjac Feb 2, 2024
a50826e
limiting add notification method option to only appear for the number…
fisjac Feb 5, 2024
7f7f843
linting filepaths
fisjac Feb 5, 2024
5220e03
fixing tests
fisjac Feb 6, 2024
af0e7dd
tooltip bullets
fisjac Feb 6, 2024
7ecc547
linting
fisjac Feb 6, 2024
8086e85
Disperse translations, specify value types
rtexelm Feb 6, 2024
d1ec859
Edit it to test funcs, dry code
rtexelm Feb 14, 2024
0dc20e9
Refactor if/else
rtexelm Feb 14, 2024
20a8db3
Fix boolean lint
rtexelm Feb 14, 2024
308c6bf
Fix conditional
rtexelm Feb 14, 2024
2a1fc29
Refactor if/else statements in validations
rtexelm Feb 14, 2024
2b972e7
Add enum for scheduleType, remove unused prop
rtexelm Feb 15, 2024
fd1ee54
Delete unused required props in panel headers
rtexelm Feb 15, 2024
80a603c
Fix syntax, edit translastion, clean
rtexelm Feb 15, 2024
b8b897c
Merge to resolve conflicts with 'master'
rtexelm Feb 15, 2024
d7b13f6
fixing tooltip to show sections with errors only
fisjac Feb 15, 2024
d22236d
Fix default panel and tests, fix panel borders
rtexelm Feb 15, 2024
1ee8969
adding builErrorTooltipMessage unit tests
fisjac Feb 16, 2024
07801bf
adding license
fisjac Feb 16, 2024
1ea30b1
test fix and lint
fisjac Feb 16, 2024
13ac2ef
Add cronpicker global styles, fix title, axe skipped tests
rtexelm Feb 16, 2024
47f85c7
Fix return after else
rtexelm Feb 16, 2024
077a979
Refactor getTitleText
rtexelm Feb 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions superset-frontend/src/GlobalStyles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 3 additions & 8 deletions superset-frontend/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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 ? (
Expand Down
115 changes: 96 additions & 19 deletions superset-frontend/src/components/CronPicker/CronPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const LOCALE: Locale = {
prefixMonths: t('in'),
prefixMonthDays: t('on'),
prefixWeekDays: t('on'),
prefixWeekDaysForMonthAndYearPeriod: t('and'),
prefixWeekDaysForMonthAndYearPeriod: t('or'),
rtexelm marked this conversation as resolved.
Show resolved Hide resolved
prefixHours: t('at'),
prefixMinutes: t(':'),
prefixMinutesForHourPeriod: t('at'),
Expand Down Expand Up @@ -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;
}
`}
`;
3 changes: 3 additions & 0 deletions superset-frontend/src/components/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export interface ModalProps {
className?: string;
children: ReactNode;
disablePrimaryButton?: boolean;
primaryTooltipMessage?: ReactNode;
primaryButtonLoading?: boolean;
onHide: () => void;
onHandledPrimaryAction?: () => void;
Expand Down Expand Up @@ -232,6 +233,7 @@ const defaultResizableConfig = (hideFooter: boolean | undefined) => ({
const CustomModal = ({
children,
disablePrimaryButton = false,
primaryTooltipMessage,
primaryButtonLoading = false,
onHide,
onHandledPrimaryAction,
Expand Down Expand Up @@ -273,6 +275,7 @@ const CustomModal = ({
key="submit"
buttonStyle={primaryButtonType}
disabled={disablePrimaryButton}
tooltip={primaryTooltipMessage}
loading={primaryButtonLoading}
onClick={onHandledPrimaryAction}
cta
Expand Down
Loading
Loading