pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: icon to icons for toasts component (#15579)

Browse Source 
* initial commit

* remove code

* fix test

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/messageToasts/components/Toast.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
Phillip Kelley-Dotson 2021-07-09 10:50:48 -07:00 committed by GitHub
parent f67e40236d
commit 600473ff72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx
View File

@ -18,6 +18,7 @@
*/ */
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
import Toast from 'src/messageToasts/components/Toast'; import Toast from 'src/messageToasts/components/Toast';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import mockMessageToasts from '../mockMessageToasts'; import mockMessageToasts from '../mockMessageToasts';
@ -27,7 +28,11 @@ const props = {
onCloseToast() {}, onCloseToast() {},
}; };
const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />); const setup = overrideProps =>
mount(<Toast {...props} {...overrideProps} />, {
wrappingComponent: ThemeProvider,
wrappingComponentProps: { theme: supersetTheme },
});
describe('Toast', () => { describe('Toast', () => {
it('should render', () => { it('should render', () => {

20
superset-frontend/src/messageToasts/components/Toast.tsx
View File

@ -16,11 +16,11 @@
* specific language governing permissions and limitations * specific language governing permissions and limitations
* under the License. * under the License.
*/ */
import { styled } from '@superset-ui/core'; import { styled, css, SupersetTheme } from '@superset-ui/core';
import cx from 'classnames'; import cx from 'classnames';
import Interweave from 'interweave'; import Interweave from 'interweave';
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import Icon, { IconName } from 'src/components/Icon'; import Icons from 'src/components/Icons';
import { ToastType } from 'src/messageToasts/constants'; import { ToastType } from 'src/messageToasts/constants';
import { ToastMeta } from '../types'; import { ToastMeta } from '../types';
@ -34,8 +34,9 @@ const ToastContainer = styled.div`
} }
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = (theme: SupersetTheme) => css`
min-width: ${({ theme }) => theme.gridUnit * 5}px; min-width: ${theme.gridUnit * 5}px;
color: ${theme.colors.grayscale.base};
`; `;
interface ToastPresenterProps { interface ToastPresenterProps {
@ -76,16 +77,17 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
}; };
}, [handleClosePress, toast.duration]); }, [handleClosePress, toast.duration]);
let iconName: IconName = 'circle-check-solid';
let className = 'toast--success'; let className = 'toast--success';
let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
if (toast.toastType === ToastType.WARNING) { if (toast.toastType === ToastType.WARNING) {
iconName = 'warning-solid'; icon = <Icons.WarningSolid css={StyledIcon} />;
className = 'toast--warning'; className = 'toast--warning';
} else if (toast.toastType === ToastType.DANGER) { } else if (toast.toastType === ToastType.DANGER) {
iconName = 'error-solid'; icon = <Icons.ErrorSolid css={StyledIcon} />;
className = 'toast--danger'; className = 'toast--danger';
} else if (toast.toastType === ToastType.INFO) { } else if (toast.toastType === ToastType.INFO) {
iconName = 'info-solid'; icon = <Icons.InfoSolid css={StyledIcon} />;
className = 'toast--info'; className = 'toast--info';
} }
@ -95,7 +97,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
data-test="toast-container" data-test="toast-container"
role="alert" role="alert"
> >
<StyledIcon name={iconName} /> {icon}
<Interweave content={toast.text} /> <Interweave content={toast.text} />
<i <i
className="fa fa-close pull-right pointer" className="fa fa-close pull-right pointer"