[MM-52979]: Remove code around abandoned MUI modal migration (#23556)

Этот коммит содержится в:
M-ZubairAhmed
2023-06-05 18:40:38 +05:30
коммит произвёл GitHub
родитель b6a407c392
Коммит f4f420dd93
97 изменённых файлов: 122 добавлений и 1836 удалений

Просмотреть файл

@@ -16,7 +16,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@stripe/react-stripe-js": "1.13.0",
"@stripe/stripe-js": "1.41.0",
"@tippyjs/react": "4.2.6",

Просмотреть файл

@@ -1,245 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/GenericModal should match snapshot for base case 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
</div>
</FocusTrap>
</Modal>
`;
exports[`components/GenericModal should match snapshot with both buttons 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
<ModalFooter
bsClass="modal-footer"
className=""
componentClass="div"
>
<button
className="GenericModal__button cancel"
onClick={[Function]}
type="button"
>
<MemoizedFormattedMessage
defaultMessage="Cancel"
id="generic_modal.cancel"
/>
</button>
<button
className="GenericModal__button confirm"
onClick={[Function]}
type="submit"
>
<MemoizedFormattedMessage
defaultMessage="Confirm"
id="generic_modal.confirm"
/>
</button>
</ModalFooter>
</div>
</FocusTrap>
</Modal>
`;
exports[`components/GenericModal should match snapshot with disabled confirm button 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
<ModalFooter
bsClass="modal-footer"
className=""
componentClass="div"
>
<button
className="GenericModal__button confirm disabled"
disabled={true}
onClick={[Function]}
type="submit"
>
<MemoizedFormattedMessage
defaultMessage="Confirm"
id="generic_modal.confirm"
/>
</button>
</ModalFooter>
</div>
</FocusTrap>
</Modal>
`;

Просмотреть файл

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import LaptopAlertSVG from 'components/common/svg_images_components/laptop_alert_svg';
import {closeModal, openModal} from 'actions/views/modals';
@@ -180,7 +180,7 @@ export default function DeleteWorkspaceModal(props: Props) {
}
return (
<LegacyGenericModal
<GenericModal
className='DeleteWorkspaceModal'
onExited={handleClickCancel}
>
@@ -249,6 +249,6 @@ export default function DeleteWorkspaceModal(props: Props) {
/>
</button>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import {ClientLicense} from '@mattermost/types/config';
@@ -160,4 +160,4 @@ const EnterpriseEditionRightPanel = ({
);
};
export default React.memo(EnterpriseEditionRightPanel);
export default memo(EnterpriseEditionRightPanel);

Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import AlertSvg from 'components/common/svg_images_components/alert_svg';
import {ModalIdentifiers} from 'utils/constants';

Просмотреть файл

@@ -10,7 +10,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {ModalIdentifiers} from 'utils/constants';

Просмотреть файл

@@ -19,7 +19,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import WomanArmOnTable from 'components/common/svg_images_components/woman_arm_on_table_svg';
import HandsSvg from 'components/common/svg_images_components/hands_svg';
import FileSvg from 'components/common/svg_images_components/file_svg';

Просмотреть файл

@@ -1,14 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import WomanUpArrowsAndCloudsSvg from 'components/common/svg_images_components/woman_up_arrows_and_clouds_svg';
import PurchaseLink from 'components/announcement_bar/purchase_link/purchase_link';
import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us';
const StarterRightPanel: React.FC = () => {
const StarterRightPanel = () => {
const upgradeAdvantages = [
'OneLogin/ADFS SAML 2.0',
'OpenID Connect',
@@ -61,4 +61,4 @@ const StarterRightPanel: React.FC = () => {
);
};
export default React.memo(StarterRightPanel);
export default memo(StarterRightPanel);

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';

Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import {CloudLinks} from 'utils/constants';
import CreditCardSvg from 'components/common/svg_images_components/credit_card_svg';
import {useControlAirGappedSelfHostedPurchaseModal} from 'components/common/hooks/useControlModal';
@@ -15,7 +15,7 @@ export default function AirGappedSelfHostedPurhcaseModal() {
const {close} = useControlAirGappedSelfHostedPurchaseModal();
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
className='air-gapped-purchase-modal'
@@ -39,6 +39,6 @@ export default function AirGappedSelfHostedPurhcaseModal() {
</span>
<a href={CloudLinks.SELF_HOSTED_PRICING}>{CloudLinks.SELF_HOSTED_PRICING}</a>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import './no_internet_connection.scss';
import NoInternetConnectionSvg from './no-internet-connection-svg';

Просмотреть файл

@@ -25,7 +25,7 @@ import {mapFeatureIdToTranslation} from 'utils/notify_admin_utils';
import {ModalIdentifiers} from 'utils/constants';
import {ListItemType} from 'components/channel_members_rhs/channel_members_rhs';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import MemberList from '../channel_members_rhs/member_list';
import {ChannelMembership} from '@mattermost/types/channels';

Просмотреть файл

@@ -10,7 +10,7 @@ import {shallow} from 'enzyme';
import * as cloudActions from 'actions/cloud';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -16,7 +16,7 @@ import {validateBusinessEmail} from 'actions/cloud';
import {ItemStatus, TELEMETRY_CATEGORIES, ModalIdentifiers, LicenseLinks, AboutLinks} from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {CustomMessageInputType} from 'components/widgets/inputs/input/input';
import ExternalLink from 'components/external_link';

Просмотреть файл

@@ -10,7 +10,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {Message} from 'utils/i18n';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import useGetLimits from 'components/common/hooks/useGetLimits';
import useGetUsage from 'components/common/hooks/useGetUsage';

Просмотреть файл

@@ -10,7 +10,7 @@ import {Limits, CloudUsage} from '@mattermost/types/cloud';
import {Message} from 'utils/i18n';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import WorkspaceLimitsPanel, {messageToElement} from './workspace_limits_panel';

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
<svg

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

Просмотреть файл

@@ -15,7 +15,7 @@ import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
import {loadCustomEmojisIfNeeded} from 'actions/emoji_actions';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import EmojiIcon from 'components/widgets/icons/emoji_icon';
import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay';
import RenderEmoji from 'components/emoji/render_emoji';

Просмотреть файл

@@ -6,10 +6,12 @@ import {FormattedMessage} from 'react-intl';
import {ChannelCategory} from '@mattermost/types/channel_categories';
import {GenericModal} from '@mattermost/components';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import GenericModal from 'components/generic_modal';
import {localizeMessage} from 'utils/utils';
import {t} from 'utils/i18n';
import '../category_modal.scss';
@@ -72,3 +74,11 @@ export default class DeleteCategoryModal extends React.PureComponent<Props, Stat
);
}
}
// TODO MM-52680 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
// find them there, so we've had to redefine them here
t('generic_modal.cancel');
t('generic_modal.confirm');
t('footer_pagination.count');
t('footer_pagination.prev');
t('footer_pagination.next');

Просмотреть файл

@@ -14,7 +14,7 @@ import {DateTime} from 'luxon';
import {ActionFunc} from 'mattermost-redux/types/actions';
import {UserStatus} from '@mattermost/types/users';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import Constants, {A11yCustomEventTypes, A11yFocusEventDetail, UserStatuses} from 'utils/constants';

Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/drafts/draft_actions/delete_draft_modal should have called onConfirm 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -39,11 +39,11 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/delete_draft_modal should have called onExited 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -81,7 +81,7 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/delete_draft_modal should match snapshot 1`] = `

Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/drafts/draft_actions/send_draft_modal should have called onConfirm 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onC
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/send_draft_modal should have called onExited 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -79,7 +79,7 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onE
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/send_draft_modal should match snapshot 1`] = `

Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {shallow} from 'enzyme';
import {Provider} from 'react-redux';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
type Props = {
displayName: string;

Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {shallow} from 'enzyme';
import {Provider} from 'react-redux';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
type Props = {
displayName: string;

Просмотреть файл

@@ -9,7 +9,7 @@ import {ChannelCategory} from '@mattermost/types/channel_categories';
import {trackEvent} from 'actions/telemetry_actions';
import QuickInput, {MaxLengthInput} from 'components/quick_input';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {localizeMessage} from 'utils/utils';

Просмотреть файл

@@ -17,7 +17,7 @@ import {deprecateCloudFree} from 'mattermost-redux/selectors/entities/preference
import CloudStartTrialButton from 'components/cloud_start_trial/cloud_start_trial_btn';
import StartTrialBtn from 'components/learn_more_trial_modal/start_trial_btn';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {NotifyStatus} from 'components/common/hooks/useGetNotifyAdmin';
import {useNotifyAdmin} from 'components/notify_admin_cta/notify_admin_cta';

Просмотреть файл

@@ -6,7 +6,7 @@ import React, {useState} from 'react';
import {injectIntl, WrappedComponentProps} from 'react-intl';
import {useDispatch} from 'react-redux';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import {Feedback} from '@mattermost/types/cloud';
import {closeModal} from 'actions/views/modals';
import RadioButtonGroup from 'components/common/radio_group';
@@ -59,7 +59,7 @@ function FeedbackModal(props: Props) {
};
return (
<LegacyGenericModal
<GenericModal
compassDesign={true}
onExited={handleCancel}
className='FeedbackModal__Container'
@@ -102,7 +102,7 @@ function FeedbackModal(props: Props) {
</span>
</>
}
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -26,7 +26,7 @@ import {General, Permissions} from 'mattermost-redux/constants';
import Constants from 'utils/constants';
import PostMessagePreview from 'components/post_view/post_message_preview';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {PostPreviewMetadata} from '@mattermost/types/posts';
import {getSiteURL} from '../../utils/url';

Просмотреть файл

@@ -1,320 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
@charset 'UTF-8';
@import 'utils/variables';
@import 'utils/mixins';
.console__body .modal .GenericModal,
.app__body .modal .GenericModal {
&.modal-dialog {
margin-top: calc(50vh - 240px);
}
&.modal-overflow {
.modal-body {
overflow: visible;
}
}
.modal-body {
max-height: 100%;
padding: 0;
.form-control {
height: 40px;
box-sizing: border-box;
border: 2px solid var(--button-bg);
border-radius: 4px;
&.has-error {
border-color: var(--error-text);
}
}
.MaxLengthInput {
&.form-control.has-error {
padding-right: 66px;
}
&__validation {
position: absolute;
top: 12px;
right: 56px;
color: var(--error-text);
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 16px;
}
}
.input-clear {
top: 12px;
right: 36px;
width: 16px;
height: 16px;
color: var(--center-channel-color);
font-size: 18px;
font-style: normal;
font-weight: normal;
line-height: 16px;
opacity: 0.48;
}
}
.modal-content {
padding: 16px 15px;
border-radius: 8px;
}
.modal-header {
min-height: 0;
padding: 0;
border: none;
background: transparent;
.close {
top: 6px;
right: 6px;
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 32px;
font-weight: 400;
&:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background-color: rgba(var(--button-bg-rgb), 0.08);
color: v(button-bg);
}
}
}
.modal-footer {
padding: 12px 24px 24px 24px;
border: none;
border-radius: 4px;
&.divider {
border-top: 1px solid rgba(63, 67, 80, 0.08);
}
}
&.GenericModal__compassDesign {
.modal-content {
padding: 0;
border-radius: 12px;
.modal-header {
flex-direction: column;
padding: 26px 32px 7px;
.close {
top: 22px;
right: 18px;
width: 40px;
height: 40px;
box-shadow: none;
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
&:focus {
box-sizing: border-box;
border: 2px solid var(--sidebar-text-active-border);
}
}
.GenericModal__header {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0;
margin-right: 32px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
h1 {
color: var(--center-channel-color);
font-size: 22px;
}
}
}
.modal-body {
.GenericModal__body {
padding: 0;
&.padding {
padding: 15px 32px 0;
}
}
}
.modal-footer {
padding: 24px 32px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.genericModalError {
display: flex;
box-sizing: border-box;
flex: 1;
padding: 14px;
border: 1px solid rgba(var(--dnd-indicator-rgb), 0.16);
margin-bottom: 24px;
background: rgba(var(--dnd-indicator-rgb), 0.08);
border-radius: 4px;
span {
color: var(--center-channel-color);
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
i {
margin-right: 8px;
color: var(--error-text);
font-size: 24px;
line-height: 24px;
&::before {
margin: 0;
}
}
}
.GenericModal__button {
padding: 13px 20px;
border: none;
border-radius: 4px;
box-shadow: none;
@include button-medium;
&.cancel {
margin-right: 8px;
background: var(--center-channel-bg);
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
&:hover {
background: rgba(var(--button-bg-rgb), 0.12);
}
&:active {
background: rgba(var(--button-bg-rgb), 0.16);
}
&:focus {
box-sizing: border-box;
padding: 11px 18px;
border: 2px solid var(--sidebar-text-active-border);
}
}
&.delete {
@include primary-button;
border-color: transparent;
background: var(--dnd-indicator);
&:focus {
padding: 11px 18px;
}
&:hover,
&:focus,
&:active {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--dnd-indicator) !important;
}
}
&.confirm {
@include primary-button;
@include button-medium;
&:focus {
padding: 11px 18px;
}
}
}
}
@media screen and (max-width: 640px) {
margin: 0;
.modal-header {
box-shadow: var(--elevation-2);
}
}
}
&__wrapper-enter-key-press-catcher {
width: 100%;
height: 100%;
}
}
.GenericModal__header {
padding: 28px 24px 16px 24px;
h1 {
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 28px;
}
}
.GenericModal__body {
position: relative;
width: 100%;
padding: 0 24px;
color: rgba(var(--center-channel-color-rgb), 0.72);
font-family: Open Sans;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 20px;
}
.GenericModal__button {
padding: 12px 16px;
border: none;
font-size: 14px;
font-weight: 600;
line-height: 12px;
&.cancel {
background: var(--center-channel-bg);
color: var(--button-bg);
}
&.confirm {
background: var(--button-bg);
border-radius: 4px;
color: var(--button-color);
&.disabled {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.32);
}
}
}

Просмотреть файл

@@ -1,89 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import GenericModal from 'components/generic_modal';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
describe('components/GenericModal', () => {
const requiredProps = {
onExited: jest.fn(),
modalHeaderText: 'Modal Header Text',
children: <></>,
};
test('should match snapshot for base case', () => {
const wrapper = shallow(
<GenericModal {...requiredProps}/>,
);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot with both buttons', () => {
const props = {
...requiredProps,
handleConfirm: jest.fn(),
handleCancel: jest.fn(),
};
const wrapper = shallow(
<GenericModal {...props}/>,
);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.GenericModal__button.confirm')).toHaveLength(1);
expect(wrapper.find('.GenericModal__button.cancel')).toHaveLength(1);
});
test('should match snapshot with disabled confirm button', () => {
const props = {
...requiredProps,
handleConfirm: jest.fn(),
isConfirmDisabled: true,
};
const wrapper = shallow(
<GenericModal {...props}/>,
);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.GenericModal__button.confirm.disabled')).toHaveLength(1);
});
test('should hide and run handleConfirm on confirm button click', (done) => {
requiredProps.onExited.mockImplementation(() => done());
const props = {
...requiredProps,
handleConfirm: jest.fn(),
};
const wrapper = mountWithIntl(
<GenericModal {...props}/>,
);
wrapper.find('.GenericModal__button.confirm').simulate('click');
expect(props.handleConfirm).toHaveBeenCalled();
});
test('should hide and run handleCancel on cancel button click', (done) => {
requiredProps.onExited.mockImplementation(() => done());
const props = {
...requiredProps,
handleCancel: jest.fn(),
};
const wrapper = mountWithIntl(
<GenericModal {...props}/>,
);
wrapper.find('.GenericModal__button.cancel').simulate('click');
expect(props.handleCancel).toHaveBeenCalled();
});
});

Просмотреть файл

@@ -1,18 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {LegacyGenericModal} from '@mattermost/components';
import {t} from 'utils/i18n';
import './generic_modal.scss';
// TODO MM-51399 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
// find them there, so we've had to redefine them here
t('generic_modal.cancel');
t('generic_modal.confirm');
t('footer_pagination.count');
t('footer_pagination.prev');
t('footer_pagination.next');
export default LegacyGenericModal;

Просмотреть файл

@@ -9,7 +9,7 @@ import {shallow} from 'enzyme';
import Carousel from 'components/common/carousel/carousel';
import LearnMoreTrialModal from 'components/learn_more_trial_modal/learn_more_trial_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions';
import {ConsolePages, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
import Carousel from 'components/common/carousel/carousel';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

Просмотреть файл

@@ -25,7 +25,7 @@ import {isKeyPressed} from 'utils/keyboard';
import CompassDesignProvider from 'components/compass_design_provider';
import Tooltip from 'components/tooltip';
import OverlayTrigger from 'components/overlay_trigger';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {MuiMenuStyled} from './menu_styled';

Просмотреть файл

@@ -17,7 +17,7 @@ import Constants, {A11yClassNames} from 'utils/constants';
import {isKeyPressed} from 'utils/keyboard';
import CompassDesignProvider from 'components/compass_design_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {MuiMenuStyled} from './menu_styled';
import {MenuItem as ParentMenuItem, Props as MenuItemProps} from './menu_item';

Просмотреть файл

@@ -10,7 +10,7 @@ import classNames from 'classnames';
import crypto from 'crypto';
import OverlayTrigger from 'components/overlay_trigger';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import Input from 'components/widgets/inputs/input/input';
import PublicPrivateSelector from 'components/widgets/public-private-selector/public-private-selector';
import URLInput from 'components/widgets/inputs/url_input/url_input';

Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {makeGetUserOrGroupMentionCountFromMessage} from 'utils/post_utils';
import Constants from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {UserProfile} from '@mattermost/types/users';
import {Channel} from '@mattermost/types/channels';

Просмотреть файл

@@ -10,7 +10,7 @@ import debounce from 'lodash/debounce';
import {MagnifyIcon} from '@mattermost/compass-icons/components';
import {FooterPagination} from '@mattermost/components';
import {FooterPagination, GenericModal} from '@mattermost/components';
import {getPluginStatuses} from 'mattermost-redux/actions/admin';
import {setFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/actions/general';
import {getFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/selectors/entities/general';
@@ -20,7 +20,6 @@ import {fetchListing, filterListing} from 'actions/marketplace';
import {trackEvent} from 'actions/telemetry_actions.jsx';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import LoadingScreen from 'components/loading_screen';
import Input, {SIZE} from 'components/widgets/inputs/input/input';

Просмотреть файл

@@ -6,7 +6,7 @@ import {defineMessages, useIntl} from 'react-intl';
import {Post} from '@mattermost/types/posts';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import PostMessageView from 'components/post_view/post_message_view';
const modalMessages = defineMessages({

Просмотреть файл

@@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useState} from 'react';
import {FormattedMessage} from 'react-intl';
import {Moment} from 'moment-timezone';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {isKeyPressed} from 'utils/keyboard';
import {localizeMessage} from 'utils/utils';
import DateTimeInput, {getRoundedTime} from 'components/custom_status/date_time_input';

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {Reaction as ReactionType} from '@mattermost/types/reactions';

Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
<div
className="productNotices__info"
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -117,11 +117,11 @@ exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
/>
</span>
</div>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={false}
bodyPadding={true}
@@ -200,7 +200,7 @@ exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] =
id="inProduct_notices.adminOnlyMessage"
/>
</div>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Should match snapshot when there are no notices 1`] = `""`;

Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {shallow} from 'enzyme';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {isDesktopApp, getDesktopVersion} from 'utils/user_agent';
import ProductNoticesModal from './product_notices_modal';

Просмотреть файл

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
import ExternalLink from 'components/external_link';
import Markdown from 'components/markdown';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import NextIcon from 'components/widgets/icons/fa_next_icon';
import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
import AdminEyeIcon from 'components/widgets/icons/admin_eye_icon';

Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {useSelector} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal, LegacyGenericModalProps} from '@mattermost/components';
import {GenericModal, GenericModalProps} from '@mattermost/components';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
import {getUserByEmail} from 'mattermost-redux/selectors/entities/users';
@@ -48,7 +48,7 @@ export default function PurchaseInProgressModal(props: Props) {
/>
);
let actionToTake;
const genericModalProps: Partial<LegacyGenericModalProps> = {};
const genericModalProps: Partial<GenericModalProps> = {};
if (sameUserAlreadyPurchasing) {
description = (
<FormattedMessage
@@ -76,7 +76,7 @@ export default function PurchaseInProgressModal(props: Props) {
);
}
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
modalHeaderText={header}
@@ -98,6 +98,6 @@ export default function PurchaseInProgressModal(props: Props) {
</div>
}
</div>
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import WebSocketClient from 'client/web_websocket_client';

Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import AccessDeniedHappySvg from 'components/common/svg_images_components/access_denied_happy_svg';
import {useControlScreeningInProgressModal} from 'components/common/hooks/useControlModal';
@@ -14,7 +14,7 @@ export default function ScreeningInProgressModal() {
const {close} = useControlScreeningInProgressModal();
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
className='ScreeningInProgressModal'
@@ -49,6 +49,6 @@ export default function ScreeningInProgressModal() {
/>
</div>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import Svg from 'components/common/svg_images_components/woman_credit_card_and_laptop_svg';
import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';

Просмотреть файл

@@ -1,10 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {useIntl} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import './mark_all_threads_as_read_modal.scss';
@@ -20,7 +20,7 @@ function MarkAllThreadsAsReadModal({
const {formatMessage} = useIntl();
return (
<LegacyGenericModal
<GenericModal
className='mark-all-threads-as-read'
id='mark-all-threads-as-read-modal'
compassDesign={true}
@@ -48,7 +48,7 @@ function MarkAllThreadsAsReadModal({
})}
</span>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

Просмотреть файл

@@ -8,7 +8,7 @@ import {Provider} from 'react-redux';
import {shallow} from 'enzyme';
import ThreeDaysLeftTrialModal from 'components/three_days_left_trial_modal/three_days_left_trial_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -14,7 +14,7 @@ import {DispatchFunc} from 'mattermost-redux/types/actions';
import {ConsolePages, DocLinks, ModalIdentifiers} from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

Просмотреть файл

@@ -9,7 +9,7 @@ import crtInProductImg from 'images/crt-in-product.gif';
import {savePreferences} from 'mattermost-redux/actions/preferences';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import NextIcon from 'components/widgets/icons/fa_next_icon';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import {Constants, ModalIdentifiers, Preferences} from 'utils/constants';

Просмотреть файл

@@ -11,7 +11,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
import Carousel from 'components/common/carousel/carousel';
import TrialBenefitsModal from 'components/trial_benefits_modal/trial_benefits_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

Просмотреть файл

@@ -19,7 +19,7 @@ import {isModalOpen} from 'selectors/views/modals';
import {GlobalState} from 'types/store';
import Carousel from 'components/common/carousel/carousel';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import HandsSvg from 'components/common/svg_images_components/hands_svg';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';

Просмотреть файл

@@ -3,7 +3,7 @@
import styled from 'styled-components';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
const Modal = styled(GenericModal)`
width: 960px;