From f4f420dd93305281c01a56229acce973f8062bda Mon Sep 17 00:00:00 2001 From: M-ZubairAhmed Date: Mon, 5 Jun 2023 18:40:38 +0530 Subject: [PATCH] [MM-52979]: Remove code around abandoned MUI modal migration (#23556) --- webapp/channels/package.json | 1 - .../__snapshots__/generic_modal.test.tsx.snap | 245 --------------- .../delete_workspace_modal.tsx | 6 +- .../enterprise_edition_right_panel.tsx | 4 +- .../modals/confirm_license_removal_modal.tsx | 2 +- .../modals/ee_license_modal.tsx | 2 +- .../modals/upload_license_modal.tsx | 2 +- .../starter_edition/starter_right_panel.tsx | 6 +- .../team_edition/team_edition_right_panel.tsx | 2 +- .../index.tsx | 6 +- .../no_internet_connection.tsx | 2 +- .../notification_from_members_modal.tsx | 2 +- .../request_business_email_modal.test.tsx | 2 +- .../request_business_email_modal.tsx | 2 +- .../components/cloud_usage_modal/index.tsx | 2 +- .../cloud_usage_modal/mini_modal.tsx | 2 +- .../access_problem_svg.tsx | 2 +- .../svg_images_components/bulls_eye_svg.tsx | 2 +- .../svg_images_components/clipboard_svg.tsx | 2 +- .../svg_images_components/gears_svg.tsx | 2 +- .../svg_images_components/handshake_svg.tsx | 2 +- .../svg_images_components/phone_svg.tsx | 2 +- .../svg_images_components/security_svg.tsx | 2 +- .../svg_images_components/sunglasses_svg.tsx | 2 +- .../svg_images_components/wrench_svg.tsx | 2 +- .../custom_status/custom_status_modal.tsx | 2 +- .../delete_category_modal.tsx | 12 +- .../dnd_custom_time_picker_modal.tsx | 2 +- .../delete_draft_modal.test.tsx.snap | 8 +- .../send_draft_modal.test.tsx.snap | 8 +- .../draft_actions/delete_draft_modal.test.tsx | 2 +- .../draft_actions/delete_draft_modal.tsx | 2 +- .../draft_actions/send_draft_modal.test.tsx | 2 +- .../drafts/draft_actions/send_draft_modal.tsx | 2 +- .../edit_category_modal.tsx | 2 +- .../feature_restricted_modal.tsx | 2 +- .../components/feedback_modal/feedback.tsx | 6 +- .../forward_post_modal/forward_post_modal.tsx | 2 +- .../src/components/generic_modal.test.tsx | 89 ------ .../channels/src/components/generic_modal.tsx | 18 -- .../learn_more_trial_modal.test.tsx | 2 +- .../learn_more_trial_modal.tsx | 2 +- webapp/channels/src/components/menu/menu.tsx | 2 +- .../channels/src/components/menu/sub_menu.tsx | 2 +- .../new_channel_modal/new_channel_modal.tsx | 2 +- .../persist_notification_confirm_modal.tsx | 2 +- .../plugin_marketplace/marketplace_modal.tsx | 3 +- .../post_edit_history/restore_post_modal.tsx | 2 +- ...post_reminder_custom_time_picker_modal.tsx | 2 +- .../reaction_tooltip/reaction_tooltip.tsx | 2 +- .../product_notices.test.tsx.snap | 12 +- .../product_notices.test.tsx | 2 +- .../product_notices_modal.tsx | 2 +- .../purchase_in_progress_modal/index.tsx | 8 +- .../src/components/root/root_provider.tsx | 2 +- .../screening_in_progress_modal/index.tsx | 6 +- .../index.tsx | 2 +- .../mark_all_threads_as_read_modal.tsx | 8 +- .../three_days_left_trial_modal.test.tsx | 2 +- .../three_days_left_trial_modal.tsx | 2 +- .../collapsed_reply_threads_modal.tsx | 2 +- .../trial_benefits_modal.test.tsx | 2 +- .../trial_benefits_modal.tsx | 2 +- .../work_templates/components/modal.tsx | 2 +- webapp/package-lock.json | 20 -- webapp/platform/components/package.json | 4 - .../components/src/common/constants/theme.ts | 139 --------- .../src/common/hooks/useMeasurePunchouts.ts | 4 +- .../components/base_modal/base_modal.tsx | 59 ---- .../components/base_modal/modal_title.tsx | 71 ----- .../components/button/button.overrides.ts | 173 ----------- .../src/compass/components/button/button.tsx | 39 --- .../generic_modal/generic_modal.tsx | 80 ----- .../icon_button/icon_button.overrides.ts | 206 ------------- .../components/icon_button/icon_button.tsx | 51 ---- .../src/compass/components/index.ts | 16 - .../typography/typography.overrides.ts | 285 ------------------ .../components/typography/typography.tsx | 44 --- .../platform/components/src/compass/index.ts | 10 - .../src/compass/theme_provider/overrides.ts | 23 -- .../compass/theme_provider/theme_provider.tsx | 31 -- .../src/compass/theme_provider/themes.ts | 47 --- .../components/src/compass/utils/color.ts | 32 -- .../components/src/compass/utils/font.ts | 5 - .../footer_pagination.test.tsx.snap | 0 .../footer_pagination.scss | 2 +- .../footer_pagination.test.tsx | 2 +- .../footer_pagination.tsx | 4 +- .../legacy_generic_modal.test.tsx.snap | 0 .../src/generic_modal}/generic_modal.scss | 4 +- .../generic_modal.test.tsx} | 8 +- .../generic_modal.tsx} | 3 +- webapp/platform/components/src/index.tsx | 15 +- .../footer_content/index.ts | 4 - .../components/src/tour_tip/tour_tip.tsx | 2 +- .../src/tour_tip/tour_tip_backdrop.tsx | 2 +- webapp/platform/types/src/theme.ts | 33 -- 97 files changed, 122 insertions(+), 1836 deletions(-) delete mode 100644 webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap delete mode 100644 webapp/channels/src/components/generic_modal.test.tsx delete mode 100644 webapp/channels/src/components/generic_modal.tsx delete mode 100644 webapp/platform/components/src/common/constants/theme.ts delete mode 100644 webapp/platform/components/src/compass/components/base_modal/base_modal.tsx delete mode 100644 webapp/platform/components/src/compass/components/base_modal/modal_title.tsx delete mode 100644 webapp/platform/components/src/compass/components/button/button.overrides.ts delete mode 100644 webapp/platform/components/src/compass/components/button/button.tsx delete mode 100644 webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx delete mode 100644 webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts delete mode 100644 webapp/platform/components/src/compass/components/icon_button/icon_button.tsx delete mode 100644 webapp/platform/components/src/compass/components/index.ts delete mode 100644 webapp/platform/components/src/compass/components/typography/typography.overrides.ts delete mode 100644 webapp/platform/components/src/compass/components/typography/typography.tsx delete mode 100644 webapp/platform/components/src/compass/index.ts delete mode 100644 webapp/platform/components/src/compass/theme_provider/overrides.ts delete mode 100644 webapp/platform/components/src/compass/theme_provider/theme_provider.tsx delete mode 100644 webapp/platform/components/src/compass/theme_provider/themes.ts delete mode 100644 webapp/platform/components/src/compass/utils/color.ts delete mode 100644 webapp/platform/components/src/compass/utils/font.ts rename webapp/platform/components/src/{legacy_generic_modal/footer_content => footer_pagination}/__snapshots__/footer_pagination.test.tsx.snap (100%) rename webapp/platform/components/src/{legacy_generic_modal/footer_content => footer_pagination}/footer_pagination.scss (93%) rename webapp/platform/components/src/{legacy_generic_modal/footer_content => footer_pagination}/footer_pagination.test.tsx (95%) rename webapp/platform/components/src/{legacy_generic_modal/footer_content => footer_pagination}/footer_pagination.tsx (98%) rename webapp/platform/components/src/{legacy_generic_modal => generic_modal}/__snapshots__/legacy_generic_modal.test.tsx.snap (100%) rename webapp/{channels/src/components => platform/components/src/generic_modal}/generic_modal.scss (98%) rename webapp/platform/components/src/{legacy_generic_modal/legacy_generic_modal.test.tsx => generic_modal/generic_modal.test.tsx} (81%) rename webapp/platform/components/src/{legacy_generic_modal/legacy_generic_modal.tsx => generic_modal/generic_modal.tsx} (98%) delete mode 100644 webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts delete mode 100644 webapp/platform/types/src/theme.ts diff --git a/webapp/channels/package.json b/webapp/channels/package.json index 6fe42fd9f5..fc36dd6736 100644 --- a/webapp/channels/package.json +++ b/webapp/channels/package.json @@ -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", diff --git a/webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap b/webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap deleted file mode 100644 index cf1462ee4a..0000000000 --- a/webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap +++ /dev/null @@ -1,245 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/GenericModal should match snapshot for base case 1`] = ` - - -
- - -
-

- Modal Header Text -

-
-
- -
- - -`; - -exports[`components/GenericModal should match snapshot with both buttons 1`] = ` - - -
- - -
-

- Modal Header Text -

-
-
- - - - - -
- - -`; - -exports[`components/GenericModal should match snapshot with disabled confirm button 1`] = ` - - -
- - -
-

- Modal Header Text -

-
-
- - - - -
- - -`; diff --git a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx index 1b57ecfc79..485dfad01d 100644 --- a/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx +++ b/webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx @@ -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 ( - @@ -249,6 +249,6 @@ export default function DeleteWorkspaceModal(props: Props) { />
- + ); } diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx index 08d4d48e9d..6e9fd250d1 100644 --- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx @@ -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); diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx index d80d1f9a8f..4240bcfaa9 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx index 305238af2c..da5a171844 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx index 634b030724..c9ea665d17 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx index 26b814fe86..6011923beb 100644 --- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx @@ -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); diff --git a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx index de3b1d01ae..e59d8ae680 100644 --- a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx @@ -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'; diff --git a/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx b/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx index 97b6d9222c..530902c3bb 100644 --- a/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx +++ b/webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx @@ -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 ( - {CloudLinks.SELF_HOSTED_PRICING}
- + ); } diff --git a/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx b/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx index 2401d78421..fa3a1900e2 100644 --- a/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx +++ b/webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx @@ -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'; diff --git a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx index d9e5d49439..54c94a2cdf 100644 --- a/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx +++ b/webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx index fbc435cb02..b8c98c470a 100644 --- a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx +++ b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx index 0527d4ecf1..bd40be93c5 100644 --- a/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx +++ b/webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/cloud_usage_modal/index.tsx b/webapp/channels/src/components/cloud_usage_modal/index.tsx index 09e73e0f73..6c1021f050 100644 --- a/webapp/channels/src/components/cloud_usage_modal/index.tsx +++ b/webapp/channels/src/components/cloud_usage_modal/index.tsx @@ -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'; diff --git a/webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx b/webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx index 5a6e409b8b..db8d8691a5 100644 --- a/webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx +++ b/webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx b/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx index 55443b66de..623821fa15 100644 --- a/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx @@ -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) => ( - + `; exports[`components/drafts/draft_actions/delete_draft_modal should have called onExited 1`] = ` - - + `; exports[`components/drafts/draft_actions/delete_draft_modal should match snapshot 1`] = ` diff --git a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap b/webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap index cf89abf778..548c04c4c5 100644 --- a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap +++ b/webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/drafts/draft_actions/send_draft_modal should have called onConfirm 1`] = ` - - + `; exports[`components/drafts/draft_actions/send_draft_modal should have called onExited 1`] = ` - - + `; exports[`components/drafts/draft_actions/send_draft_modal should match snapshot 1`] = ` diff --git a/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx b/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx index c297befd46..b902842fe0 100644 --- a/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx +++ b/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx b/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx index 76028b0ffa..607ee09c81 100644 --- a/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx +++ b/webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx @@ -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; diff --git a/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx b/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx index 0ceeb57fa9..863371ffd3 100644 --- a/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx +++ b/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx b/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx index 566824d831..92bea3f52a 100644 --- a/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx +++ b/webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx @@ -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; diff --git a/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx b/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx index 99c8f83381..29b02d2937 100644 --- a/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx +++ b/webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx index c86cc27e0a..96f11ad3ea 100644 --- a/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx +++ b/webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/feedback_modal/feedback.tsx b/webapp/channels/src/components/feedback_modal/feedback.tsx index 8b6c64aebe..3f612017be 100644 --- a/webapp/channels/src/components/feedback_modal/feedback.tsx +++ b/webapp/channels/src/components/feedback_modal/feedback.tsx @@ -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 ( - } - + ); } diff --git a/webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx b/webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx index 035594d1b1..67f67a7e30 100644 --- a/webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx +++ b/webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/generic_modal.test.tsx b/webapp/channels/src/components/generic_modal.test.tsx deleted file mode 100644 index de2342367d..0000000000 --- a/webapp/channels/src/components/generic_modal.test.tsx +++ /dev/null @@ -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( - , - ); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot with both buttons', () => { - const props = { - ...requiredProps, - handleConfirm: jest.fn(), - handleCancel: jest.fn(), - }; - - const wrapper = shallow( - , - ); - - 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( - , - ); - - 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( - , - ); - - 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( - , - ); - - wrapper.find('.GenericModal__button.cancel').simulate('click'); - - expect(props.handleCancel).toHaveBeenCalled(); - }); -}); diff --git a/webapp/channels/src/components/generic_modal.tsx b/webapp/channels/src/components/generic_modal.tsx deleted file mode 100644 index 5ea190f2f5..0000000000 --- a/webapp/channels/src/components/generic_modal.tsx +++ /dev/null @@ -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; diff --git a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx index 2194f15855..d8d68ff6ab 100644 --- a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx +++ b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx index c50aa6caa8..2098f3ae2d 100644 --- a/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx +++ b/webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/menu/menu.tsx b/webapp/channels/src/components/menu/menu.tsx index d41703c2a4..8ade57ffe9 100644 --- a/webapp/channels/src/components/menu/menu.tsx +++ b/webapp/channels/src/components/menu/menu.tsx @@ -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'; diff --git a/webapp/channels/src/components/menu/sub_menu.tsx b/webapp/channels/src/components/menu/sub_menu.tsx index 0a5f2061d1..1dcb79ce21 100644 --- a/webapp/channels/src/components/menu/sub_menu.tsx +++ b/webapp/channels/src/components/menu/sub_menu.tsx @@ -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'; diff --git a/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx b/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx index 9052004e60..a1b52645b1 100644 --- a/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx +++ b/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/persist_notification_confirm_modal.tsx b/webapp/channels/src/components/persist_notification_confirm_modal.tsx index 5dc8fcbb6b..87e414ac43 100644 --- a/webapp/channels/src/components/persist_notification_confirm_modal.tsx +++ b/webapp/channels/src/components/persist_notification_confirm_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx index f2de2bd2dc..23fd7a69f0 100644 --- a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx +++ b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/post_edit_history/restore_post_modal.tsx b/webapp/channels/src/components/post_edit_history/restore_post_modal.tsx index 62e1d52fe8..c8efbd9b07 100644 --- a/webapp/channels/src/components/post_edit_history/restore_post_modal.tsx +++ b/webapp/channels/src/components/post_edit_history/restore_post_modal.tsx @@ -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({ diff --git a/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx b/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx index d908ca32a5..8dd4b1f8be 100644 --- a/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx +++ b/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx index 018eaaae42..7759eb138c 100644 --- a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx +++ b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx @@ -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'; diff --git a/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap b/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap index 9efd1f6b6e..5252df431b 100644 --- a/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap +++ b/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ProductNoticesModal Match snapshot for single notice 1`] = ` - - + `; exports[`ProductNoticesModal Match snapshot for user notice 1`] = ` -
- + `; exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] = ` - - + `; exports[`ProductNoticesModal Should match snapshot when there are no notices 1`] = `""`; diff --git a/webapp/channels/src/components/product_notices_modal/product_notices.test.tsx b/webapp/channels/src/components/product_notices_modal/product_notices.test.tsx index e44c076fc8..3e250996e8 100644 --- a/webapp/channels/src/components/product_notices_modal/product_notices.test.tsx +++ b/webapp/channels/src/components/product_notices_modal/product_notices.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx b/webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx index 0fcd4590f1..28d0e819bb 100644 --- a/webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx +++ b/webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/purchase_in_progress_modal/index.tsx b/webapp/channels/src/components/purchase_in_progress_modal/index.tsx index ac1aaa9eb2..2e0483a401 100644 --- a/webapp/channels/src/components/purchase_in_progress_modal/index.tsx +++ b/webapp/channels/src/components/purchase_in_progress_modal/index.tsx @@ -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 = {}; + const genericModalProps: Partial = {}; if (sameUserAlreadyPurchasing) { description = ( } - + ); } diff --git a/webapp/channels/src/components/root/root_provider.tsx b/webapp/channels/src/components/root/root_provider.tsx index 60f78b9ca4..e52e36229b 100644 --- a/webapp/channels/src/components/root/root_provider.tsx +++ b/webapp/channels/src/components/root/root_provider.tsx @@ -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'; diff --git a/webapp/channels/src/components/screening_in_progress_modal/index.tsx b/webapp/channels/src/components/screening_in_progress_modal/index.tsx index 4a07d69475..bc3dd30147 100644 --- a/webapp/channels/src/components/screening_in_progress_modal/index.tsx +++ b/webapp/channels/src/components/screening_in_progress_modal/index.tsx @@ -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 ( - - + ); } diff --git a/webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx b/webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx index 8ffb43c0ca..2d144c5c6d 100644 --- a/webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx +++ b/webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx @@ -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'; diff --git a/webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx b/webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx index c261add247..364f22d7ab 100644 --- a/webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx +++ b/webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx @@ -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 ( - - + ); } diff --git a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx index e969ca74e4..782e461602 100644 --- a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx +++ b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx index 2c307f6a22..18b4077613 100644 --- a/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx +++ b/webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx b/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx index 106cccae55..deef0a69db 100644 --- a/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx +++ b/webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx index edcdea7d99..771a8afe93 100644 --- a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx +++ b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx @@ -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'; diff --git a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx index cd9b5da3c0..838266e99c 100644 --- a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx +++ b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx @@ -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'; diff --git a/webapp/channels/src/components/work_templates/components/modal.tsx b/webapp/channels/src/components/work_templates/components/modal.tsx index de7ea14809..7fedfd044f 100644 --- a/webapp/channels/src/components/work_templates/components/modal.tsx +++ b/webapp/channels/src/components/work_templates/components/modal.tsx @@ -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; diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 328598747f..b0308444cd 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -3390,7 +3390,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", @@ -33254,9 +33253,6 @@ "platform/components": { "name": "@mattermost/components", "version": "8.0.0", - "dependencies": { - "color-blend": "4.0.0" - }, "devDependencies": { "@babel/cli": "^7.17.6", "@babel/core": "^7.17.7", @@ -33296,7 +33292,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", "@tippyjs/react": "^4.2.6", "classnames": "^2.3.1", "lodash": "^4.17.21", @@ -33636,14 +33631,6 @@ "styled-components": ">= 2" } }, - "platform/components/node_modules/color-blend": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz", - "integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw==", - "engines": { - "node": ">=10.0.0" - } - }, "platform/components/node_modules/css-loader": { "version": "6.7.3", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", @@ -39303,7 +39290,6 @@ "babel-loader": "^8.2.3", "babel-plugin-formatjs": "10.3.14", "babel-plugin-styled-components": "^2.0.6", - "color-blend": "4.0.0", "css-loader": "^6.7.1", "rollup": "^2.75.7", "rollup-plugin-auto-external": "^2.0.0", @@ -39570,11 +39556,6 @@ "picomatch": "^2.3.0" } }, - "color-blend": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz", - "integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw==" - }, "css-loader": { "version": "6.7.3", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz", @@ -53252,7 +53233,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", "@redux-devtools/extension": "3.2.3", "@stripe/react-stripe-js": "1.13.0", "@stripe/stripe-js": "1.41.0", diff --git a/webapp/platform/components/package.json b/webapp/platform/components/package.json index 5f1daebd49..3cf49dbb1e 100644 --- a/webapp/platform/components/package.json +++ b/webapp/platform/components/package.json @@ -50,7 +50,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", "@tippyjs/react": "^4.2.6", "classnames": "^2.3.1", "lodash": "^4.17.21", @@ -61,8 +60,5 @@ "shallow-equals": "^1.0.0", "styled-components": "^5.3.5", "tippy.js": "^6.3.7" - }, - "dependencies": { - "color-blend": "4.0.0" } } diff --git a/webapp/platform/components/src/common/constants/theme.ts b/webapp/platform/components/src/common/constants/theme.ts deleted file mode 100644 index 84a5e6a258..0000000000 --- a/webapp/platform/components/src/common/constants/theme.ts +++ /dev/null @@ -1,139 +0,0 @@ -import {Theme, ThemeKey} from '@mattermost/types/theme'; - -export const THEMES: Record = { - denim: { - type: 'Denim', - sidebarBg: '#1e325c', - sidebarText: '#ffffff', - sidebarUnreadText: '#ffffff', - sidebarTextHoverBg: '#28427b', - sidebarTextActiveBorder: '#5d89ea', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#192a4d', - sidebarHeaderTextColor: '#ffffff', - sidebarTeamBarBg: '#14213e', - onlineIndicator: '#3db887', - awayIndicator: '#ffbc1f', - dndIndicator: '#d24b4e', - mentionBg: '#ffffff', - mentionColor: '#1e325c', - centerChannelBg: '#ffffff', - centerChannelColor: '#3f4350', - newMessageSeparator: '#cc8f00', - linkColor: '#386fe5', - buttonBg: '#1c58d9', - buttonColor: '#ffffff', - errorTextColor: '#d24b4e', - mentionHighlightBg: '#ffd470', - mentionHighlightLink: '#1b1d22', - codeTheme: 'github', - }, - sapphire: { - type: 'Sapphire', - sidebarBg: '#174ab5', - sidebarText: '#ffffff', - sidebarUnreadText: '#ffffff', - sidebarTextHoverBg: '#2a58ba', - sidebarTextActiveBorder: '#57b5f0', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#1542a2', - sidebarHeaderTextColor: '#ffffff', - sidebarTeamBarBg: '#133a91', - onlineIndicator: '#3db887', - awayIndicator: '#ffbc1f', - dndIndicator: '#d24b4e', - mentionBg: '#ffffff', - mentionColor: '#174ab5', - centerChannelBg: '#ffffff', - centerChannelColor: '#3f4350', - newMessageSeparator: '#15b7b7', - linkColor: '#1c58d9', - buttonBg: '#1c58d9', - buttonColor: '#ffffff', - errorTextColor: '#d24b4e', - mentionHighlightBg: '#7ff0f0', - mentionHighlightLink: '#0d6e6e', - codeTheme: 'github', - }, - quartz: { - type: 'Quartz', - sidebarBg: '#f4f4f6', - sidebarText: '#090a0b', - sidebarUnreadText: '#2d3039', - sidebarTextHoverBg: '#ebebed', - sidebarTextActiveBorder: '#32a4ec', - sidebarTextActiveColor: '#2d3039', - sidebarHeaderBg: '#e8e9ed', - sidebarHeaderTextColor: '#2d3039', - sidebarTeamBarBg: '#dddfe4', - onlineIndicator: '#3db887', - awayIndicator: '#f5ab07', - dndIndicator: '#d24b4e', - mentionBg: '#1c58d9', - mentionColor: '#ffffff', - centerChannelBg: '#ffffff', - centerChannelColor: '#3f4350', - newMessageSeparator: '#15b7b7', - linkColor: '#1c58d9', - buttonBg: '#1c58d9', - buttonColor: '#ffffff', - errorTextColor: '#d24b4e', - mentionHighlightBg: '#7ff0f0', - mentionHighlightLink: '#0d6e6e', - codeTheme: 'github', - }, - indigo: { - type: 'Indigo', - sidebarBg: '#0f1a2e', - sidebarText: '#ffffff', - sidebarUnreadText: '#ffffff', - sidebarTextHoverBg: '#222c3f', - sidebarTextActiveBorder: '#1279ba', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#152231', - sidebarHeaderTextColor: '#dddfe4', - sidebarTeamBarBg: '#05080f', - onlineIndicator: '#3db887', - awayIndicator: '#f5ab00', - dndIndicator: '#d24b4e', - mentionBg: '#1c58d9', - mentionColor: '#ffffff', - centerChannelBg: '#0a111f', - centerChannelColor: '#dddfe4', - newMessageSeparator: '#81a3ef', - linkColor: '#5d89ea', - buttonBg: '#386fe5', - buttonColor: '#ffffff', - errorTextColor: '#d24b4e', - mentionHighlightBg: '#133a91', - mentionHighlightLink: '#a4f4f4', - codeTheme: 'solarized-dark', - }, - onyx: { - type: 'Onyx', - sidebarBg: '#121317', - sidebarText: '#ffffff', - sidebarUnreadText: '#ffffff', - sidebarTextHoverBg: '#25262a', - sidebarTextActiveBorder: '#1592e0', - sidebarTextActiveColor: '#ffffff', - sidebarHeaderBg: '#1b1d22', - sidebarHeaderTextColor: '#dddfe4', - sidebarTeamBarBg: '#000000', - onlineIndicator: '#3db887', - awayIndicator: '#f5ab00', - dndIndicator: '#d24b4e', - mentionBg: '#1c58d9', - mentionColor: '#ffffff', - centerChannelBg: '#090a0b', - centerChannelColor: '#dddfe4', - newMessageSeparator: '#1adbdb', - linkColor: '#5d89ea', - buttonBg: '#386fe5', - buttonColor: '#ffffff', - errorTextColor: '#da6c6e', - mentionHighlightBg: '#0d6e6e', - mentionHighlightLink: '#a4f4f4', - codeTheme: 'monokai', - }, -}; diff --git a/webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts b/webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts index 217309314a..f1a49851c0 100644 --- a/webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts +++ b/webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts @@ -11,7 +11,7 @@ export type Coords = { y?: string; } -export type PunchOutCoordsHeightAndWidth = Coords & { +export type Props = Coords & { width: string; height: string; } @@ -23,7 +23,7 @@ type PunchOutOffset = { height: number; } -export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): PunchOutCoordsHeightAndWidth | null => { +export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): Props | null => { const elementsAvailable = useElementAvailable(elementIds); const [size, setSize] = useState({x: window.innerWidth, y: window.innerHeight}); const updateSize = throttle(() => { diff --git a/webapp/platform/components/src/compass/components/base_modal/base_modal.tsx b/webapp/platform/components/src/compass/components/base_modal/base_modal.tsx deleted file mode 100644 index 4e31b69874..0000000000 --- a/webapp/platform/components/src/compass/components/base_modal/base_modal.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {memo} from 'react'; -import {styled} from '@mui/material/styles'; -import Dialog from '@mui/material/Dialog'; -import MUIPaper, {PaperProps} from '@mui/material/Paper'; -import Slide from '@mui/material/Slide'; -import {TransitionProps} from '@mui/material/transitions'; - -const Transition = React.forwardRef(( - {children, ...props}: TransitionProps & { - children: React.ReactElement; - }, - ref: React.Ref, -) => { - return ( - - {children} - - ); -}); - -const Paper = styled(MUIPaper)(() => ({ - border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)', - borderRadius: 12, - backgroundColor: 'var(--center-channel-bg)', - boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)', - minWidth: 600, -})); - -type ModalProps = { - children: React.ReactNode | React.ReactNodeArray; - isOpen: boolean; - dialogClassName?: string; - dialogId?: string; - onClose?: () => void; -} - -const BaseModal = ({children, isOpen, onClose, dialogClassName = '', dialogId = ''}: ModalProps) => ( - {children} - -); - -export default BaseModal; diff --git a/webapp/platform/components/src/compass/components/base_modal/modal_title.tsx b/webapp/platform/components/src/compass/components/base_modal/modal_title.tsx deleted file mode 100644 index 4539671a32..0000000000 --- a/webapp/platform/components/src/compass/components/base_modal/modal_title.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {styled} from '@mui/material/styles'; -import MUIDialogTitle, {DialogTitleProps as MUIDialogTitleProps} from '@mui/material/DialogTitle'; - -import {CloseIcon} from '@mattermost/compass-icons/components'; - -import Icon_button from '../icon_button/icon_button'; - -type DialogTitleProps = MUIDialogTitleProps & { hasCloseButton: boolean }; - -const StyledModalTitle = styled(MUIDialogTitle, { - shouldForwardProp: (prop) => prop !== 'hasCloseButton', -})(({hasCloseButton}) => ({ - display: 'grid', - gridTemplateColumns: '1fr max-content max-content', - gap: 12, - fontFamily: 'Metropolis', - fontStyle: 'normal', - fontWeight: 600, - fontSize: 22, - lineHeight: '28px', - color: 'var(--center-channel-color)', - alignItems: 'center', - padding: hasCloseButton ? '22px 26px 24px 32px' : '28px 32px 24px', -})); - -const StyledModalTitleSection = styled('div')(() => ({ - padding: '0 32px 24px 32px', - borderBottom: '1px solid rgba(var(--center-channel-text-rgb), 0.12)', -})); - -type ModalTitleProps = { - title: string; - rightSection?: React.ReactNode | React.ReactNode[]; - children?: React.ReactNode | React.ReactNode[]; - onClose?: React.MouseEventHandler; -} - -const ModalTitle = ({title, onClose, children, rightSection = null}: ModalTitleProps) => { - const hasCloseButton = Boolean(onClose); - - return ( - <> - - {title} - {rightSection} - {hasCloseButton && ( - - )} - - {children && ( - - {children} - - )} - - ); -}; - -export default ModalTitle; diff --git a/webapp/platform/components/src/compass/components/button/button.overrides.ts b/webapp/platform/components/src/compass/components/button/button.overrides.ts deleted file mode 100644 index 6e79c6231e..0000000000 --- a/webapp/platform/components/src/compass/components/button/button.overrides.ts +++ /dev/null @@ -1,173 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {alpha, ComponentsProps, ComponentsVariants, emphasize, Theme} from '@mui/material'; -import {ComponentsOverrides} from '@mui/material/styles/overrides'; - -import {blend} from '../../utils/color'; - -const componentName = 'MuiButton'; - -declare module '@mui/material/Button' { - interface ButtonPropsSizeOverrides { - 'x-small': true; - } - - interface ButtonPropsVariantOverrides { - quaternary: true; - } -} - -const defaultProps: ComponentsProps[typeof componentName] = { - disableElevation: true, - disableRipple: true, - disableTouchRipple: true, - disableFocusRipple: true, -}; - -const getFocusStyles = (color: string) => ({ - '&:not(.Mui-disabled)': { - '&:focus': { - boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`, - }, - - '&:focus:not(:focus-visible)': { - boxShadow: 'none', - }, - - '&:focus:focus-visible': { - boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`, - }, - }, -}); - -const styleOverrides: ComponentsOverrides[typeof componentName] = { - containedPrimary: ({theme, ownerState}) => ({ - backgroundColor: ownerState.inverted ? theme.palette.text.primary : theme.palette.primary.main, - color: ownerState.inverted ? theme.palette.primary.main : theme.palette.primary.contrastText, - - '&:hover': { - backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.08)) : emphasize(theme.palette.primary.main, 0.1), - }, - '&:active': { - backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.16)) : emphasize(theme.palette.primary.main, 0.2), - }, - - ...getFocusStyles(theme.palette.primary.main), - }), - containedError: ({theme}) => ({ - '&:hover': { - backgroundColor: emphasize(theme.palette.error.dark, 0.1), - }, - '&:active': { - backgroundColor: emphasize(theme.palette.error.dark, 0.2), - }, - - ...getFocusStyles(theme.palette.error.main), - }), - outlinedPrimary: ({theme}) => ({ - backgroundColor: alpha(theme.palette.primary.main, 0), - - '&:hover': { - backgroundColor: alpha(theme.palette.primary.main, 0.08), - }, - - '&:active': { - backgroundColor: alpha(theme.palette.primary.main, 0.16), - }, - - ...getFocusStyles(theme.palette.primary.main), - }), - outlinedError: ({theme}) => ({ - backgroundColor: alpha(theme.palette.error.main, 0), - - '&:hover': { - backgroundColor: alpha(theme.palette.error.main, 0.08), - }, - - '&:active': { - backgroundColor: alpha(theme.palette.error.main, 0.16), - }, - - ...getFocusStyles(theme.palette.error.main), - }), - textPrimary: ({theme}) => ({ - backgroundColor: alpha(theme.palette.primary.main, 0.08), - - '&:hover': { - backgroundColor: alpha(theme.palette.primary.main, 0.12), - }, - - '&:active': { - backgroundColor: alpha(theme.palette.primary.main, 0.16), - }, - - ...getFocusStyles(theme.palette.primary.main), - }), - textError: ({theme, ownerState}) => ({ - backgroundColor: ownerState.disabled ? theme.palette.action.disabledBackground : alpha(theme.palette.error.main, 0.12), - - '&:hover': { - backgroundColor: alpha(theme.palette.error.main, 0.12), - }, - - '&:active': { - backgroundColor: alpha(theme.palette.error.main, 0.16), - }, - - ...getFocusStyles(theme.palette.error.main), - }), -}; - -const variants: ComponentsVariants[typeof componentName] = [ - { - props: {size: 'x-small'}, - style: ({theme}) => ({ - padding: '0.4rem 1rem', - ...theme.typography.b50, - margin: 0, - textTransform: 'none', - }), - }, - { - props: {size: 'small'}, - style: ({theme}) => ({ - padding: '0.8rem 1.6rem', - ...theme.typography.b75, - margin: 0, - textTransform: 'none', - }), - }, - { - props: {size: 'medium'}, - style: ({theme}) => ({ - padding: '1rem 2rem', - ...theme.typography.b100, - margin: 0, - textTransform: 'none', - }), - }, - { - props: {size: 'large'}, - style: ({theme}) => ({ - padding: '1.2rem 2.4rem', - ...theme.typography.b200, - margin: 0, - textTransform: 'none', - }), - }, - { - props: {variant: 'quaternary'}, - style: () => ({ - backgroundColor: 'red', - }), - }, -]; - -const buttonOverrides = { - variants, - defaultProps, - styleOverrides, -}; - -export default buttonOverrides; diff --git a/webapp/platform/components/src/compass/components/button/button.tsx b/webapp/platform/components/src/compass/components/button/button.tsx deleted file mode 100644 index 86658eb197..0000000000 --- a/webapp/platform/components/src/compass/components/button/button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button'; - -type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; - -const variantMap: Record> = { - primary: 'contained', - secondary: 'outlined', - tertiary: 'text', -}; - -type ExcludedMuiProps = - | 'sx' - | 'classes' - | 'variant' - | 'disableElevation' - | 'disableRipple' - | 'disableFocusRipple'; - -export type ButtonProps = Omit & { - destructive?: boolean; - disabled?: boolean; - inverted?: boolean; - variant?: ButtonVariant; - children: React.ReactNode | React.ReactNode[]; -} - -export const Button = ({variant = 'primary', destructive, ...rest}: ButtonProps) => ( - -); - -export default Button; diff --git a/webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx b/webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx deleted file mode 100644 index 1289daa4eb..0000000000 --- a/webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {memo} from 'react'; -import {styled} from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import MUIPaper, {PaperProps} from '@mui/material/Paper'; -import DialogActions from '@mui/material/DialogActions'; -import Slide from '@mui/material/Slide'; -import {TransitionProps} from '@mui/material/transitions'; -import BaseModal from "../base_modal/base_modal"; - -const Transition = React.forwardRef(( - {children, ...props}: TransitionProps & { - children: React.ReactElement; - }, - ref: React.Ref, -) => { - return ( - - {children} - - ); -}); - -const Paper = styled(MUIPaper)(() => ({ - border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)', - borderRadius: 12, - backgroundColor: 'var(--center-channel-bg)', - boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)', - minWidth: 600, -})); - -type ModalProps = { - children: React.ReactNode | React.ReactNodeArray; - isOpen: boolean; - dialogClassName?: string; - dialogId?: string; - onClose?: () => void; - onConfirm?: () => void; - onCancel?: () => void; -} - -const GenericModal = ({children, isOpen, onClose, onConfirm, onCancel, dialogClassName = '', dialogId = ''}: ModalProps) => { - const hasActions = Boolean(onConfirm || onCancel); - - const handleConfirmAction = () => { - onConfirm?.(); - onClose?.(); - }; - - const handleCancelAction = () => { - onCancel?.(); - onClose?.(); - }; - - return ( - - {children} - {hasActions && ( - - {onCancel && } - {onConfirm && } - - )} - - ); -}; - -export default memo(GenericModal); diff --git a/webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts b/webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts deleted file mode 100644 index 4ff1e38628..0000000000 --- a/webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts +++ /dev/null @@ -1,206 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {alpha, ComponentsProps, emphasize, Theme} from '@mui/material'; -import type {ComponentsVariants} from '@mui/material'; -import type {ComponentsOverrides} from '@mui/material/styles/overrides'; - -const componentName = 'MuiIconButton'; - -declare module '@mui/material/IconButton' { - interface IconButtonPropsSizeOverrides { - 'x-small': true; - } - interface IconButtonPropsOverrides { - destructive: boolean; - compact: boolean; - } -} - -const defaultProps: ComponentsProps[typeof componentName] = { - disableRipple: true, - disableTouchRipple: true, - disableFocusRipple: true, -}; - -export const getFocusStyles = (color: string) => ({ - '&:not(.Mui-disabled)': { - '&:focus': { - boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`, - }, - - '&:focus:not(:focus-visible)': { - boxShadow: 'none', - }, - - '&:focus:focus-visible': { - boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`, - }, - }, -}); - -const styleOverrides: ComponentsOverrides[typeof componentName] = { - root: ({theme, ownerState}) => ({ - backgroundColor: 'transparent', - color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.56), - borderRadius: 4, - margin: 0, - - '&:hover': { - backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.text.primary, 0.08), - color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.72), - }, - - '&:active': { - backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, 0.16), - color: ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, - }, - - svg: { - margin: 0, - fill: 'currentColor', - }, - - ...getFocusStyles(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main), - - ...(ownerState.color !== 'error' && { - '&.toggled:not(.inverted):not(.Mui-disabled)': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - - '&:hover': { - backgroundColor: alpha(theme.palette.primary.main, 0.92), - color: theme.palette.primary.contrastText, - }, - - '&:active': { - backgroundColor: alpha(theme.palette.primary.main, 0.16), - color: theme.palette.primary.main, - }, - }, - - '&.inverted:not(.Mui-disabled)': { - backgroundColor: 'transparent', - color: alpha(theme.palette.text.primary, 0.56), - - '&:hover': { - backgroundColor: alpha(theme.palette.text.primary, 0.08), - color: theme.palette.text.primary, - }, - - '&:active': { - backgroundColor: alpha(theme.palette.text.primary, 0.16), - color: theme.palette.text.primary, - }, - - '&.toggled': { - backgroundColor: theme.palette.text.primary, - color: alpha(theme.palette.background.default, 0.56), - - '&:hover': { - backgroundColor: alpha(theme.palette.text.primary, 0.92), - color: alpha(theme.palette.background.default, 0.56), - }, - - '&:active': { - backgroundColor: alpha(theme.palette.text.primary, 0.16), - color: theme.palette.text.primary, - }, - }, - }, - }), - - transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shorter}), - }), -}; - -const variants: ComponentsVariants[typeof componentName] = [ - { - props: {size: 'x-small'}, - style: ({theme}) => ({ - padding: theme.spacing(0.5), - - svg: { - width: '12px', - height: '12px', - }, - - ...theme.typography.b75, - lineHeight: 0, - fontWeight: 600, - - '.MuiGrid-container': { - gap: theme.spacing(0.25), - maxHeight: theme.spacing(1.5), - }, - }), - }, - { - props: {size: 'small'}, - style: ({theme}) => ({ - padding: theme.spacing(0.75), - - svg: { - width: '16px', - height: '16px', - }, - - ...theme.typography.b100, - lineHeight: 0, - fontWeight: 600, - - '.MuiGrid-container': { - gap: theme.spacing(0.5), - maxHeight: theme.spacing(2), - }, - }), - }, - { - props: {size: 'medium'}, - style: ({theme}) => ({ - padding: theme.spacing(1), - - svg: { - width: '20px', - height: '20px', - }, - - ...theme.typography.b200, - lineHeight: 0, - fontWeight: 600, - - '.MuiGrid-container': { - gap: theme.spacing(0.75), - maxHeight: theme.spacing(2.5), - }, - }), - }, - { - props: {size: 'large'}, - style: ({theme}) => ({ - padding: theme.spacing(1), - - svg: { - width: '28px', - height: '28px', - }, - - ...theme.typography.b300, - lineHeight: 0, - fontWeight: 600, - - '.MuiGrid-container': { - gap: theme.spacing(0.75), - maxHeight: theme.spacing(3.5), - }, - }), - }, -]; - -const overrides = { - variants, - defaultProps, - styleOverrides, -}; - -export default overrides; diff --git a/webapp/platform/components/src/compass/components/icon_button/icon_button.tsx b/webapp/platform/components/src/compass/components/icon_button/icon_button.tsx deleted file mode 100644 index 6c07ed3103..0000000000 --- a/webapp/platform/components/src/compass/components/icon_button/icon_button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {Grid} from '@mui/material'; -import classNames from 'classnames'; -import React from 'react'; -import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton'; - -type ExcludedMuiProps = 'sx' | 'disableFocusRipple' | 'disableRipple' | 'color' | 'classes'; - -type CustomProps = { - IconComponent: React.FC; - compact?: boolean; - toggled?: boolean; - inverted?: boolean; - destructive?: boolean; - label?: string; -} - -type IconButtonProps = Omit & CustomProps; - -const IconButton = ({IconComponent, label, destructive = false, compact = false, toggled = false, inverted = false, ...props}: IconButtonProps) => { - return ( - - - - - - {label && ( - - {label} - - )} - - - ); -}; - -export default IconButton; diff --git a/webapp/platform/components/src/compass/components/index.ts b/webapp/platform/components/src/compass/components/index.ts deleted file mode 100644 index 523da76dae..0000000000 --- a/webapp/platform/components/src/compass/components/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import Typography from './typography/typography'; -import Button, {ButtonProps} from './button/button'; -import IconButton from './icon_button/icon_button'; - -export { - IconButton, - Button, - Typography, -}; - -export type { - ButtonProps, -}; diff --git a/webapp/platform/components/src/compass/components/typography/typography.overrides.ts b/webapp/platform/components/src/compass/components/typography/typography.overrides.ts deleted file mode 100644 index 8771c6a35d..0000000000 --- a/webapp/platform/components/src/compass/components/typography/typography.overrides.ts +++ /dev/null @@ -1,285 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {TypographyOptions} from '@mui/material/styles/createTypography'; - -import {getFontMargin} from '../../utils/font'; - -declare module '@mui/material/styles' { - interface TypographyVariants { - - // body text variants - b25: React.CSSProperties; - b50: React.CSSProperties; - b75: React.CSSProperties; - b100: React.CSSProperties; - b200: React.CSSProperties; - b300: React.CSSProperties; - - // heading variants - h25: React.CSSProperties; - h50: React.CSSProperties; - h75: React.CSSProperties; - h100: React.CSSProperties; - h200: React.CSSProperties; - h300: React.CSSProperties; - h400: React.CSSProperties; - h500: React.CSSProperties; - h600: React.CSSProperties; - h700: React.CSSProperties; - h800: React.CSSProperties; - h900: React.CSSProperties; - h1000: React.CSSProperties; - } - - // allow configuration using `createTheme` - interface TypographyVariantsOptions { - - // body text style properties - b25?: React.CSSProperties; - b50?: React.CSSProperties; - b75?: React.CSSProperties; - b100?: React.CSSProperties; - b200?: React.CSSProperties; - b300?: React.CSSProperties; - - // heading style properties - h25?: React.CSSProperties; - h50?: React.CSSProperties; - h75?: React.CSSProperties; - h100?: React.CSSProperties; - h200?: React.CSSProperties; - h300?: React.CSSProperties; - h400?: React.CSSProperties; - h500?: React.CSSProperties; - h600?: React.CSSProperties; - h700?: React.CSSProperties; - h800?: React.CSSProperties; - h900?: React.CSSProperties; - h1000?: React.CSSProperties; - } -} - -// Update the Typography's variant prop options -declare module '@mui/material/Typography' { - interface TypographyPropsVariantOverrides { - - // enable our custom body text variants - b25: true; - b50: true; - b75: true; - b100: true; - b200: true; - b300: true; - - // enable our custom heading variants - h25: true; - h50: true; - h75: true; - h100: true; - h200: true; - h300: true; - h400: true; - h500: true; - h600: true; - h700: true; - h800: true; - h900: true; - h1000: true; - - // disable the MUI variants - h1: false; - h2: false; - h3: false; - h4: false; - h5: false; - h6: false; - body1: false; - body2: false; - button: false; - caption: false; - inherit: false; - overline: false; - subtitle1: false; - subtitle2: false; - } -} - -const baseBodyStyles = { - fontFamily: 'Open Sans, sans-serif', - fontStyle: 'normal', - fontWeight: 400, -}; - -const b25 = { - fontSize: '1rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(10, 0.75), - marginBottom: getFontMargin(10, 0.75), - ...baseBodyStyles, -}; -const b50 = { - fontSize: '1.1rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(11, 0.75), - marginBottom: getFontMargin(11, 0.75), - ...baseBodyStyles, -}; -const b75 = { - fontSize: '1.2rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(12, 0.75), - marginBottom: getFontMargin(12, 0.75), - ...baseBodyStyles, -}; -const b100 = { - fontSize: '1.4rem', - lineHeight: '2rem', - marginTop: getFontMargin(14, 0.75), - marginBottom: getFontMargin(14, 0.75), - ...baseBodyStyles, -}; -const b200 = { - fontSize: '1.6rem', - lineHeight: '2.4rem', - marginTop: getFontMargin(16, 0.75), - marginBottom: getFontMargin(16, 0.75), - ...baseBodyStyles, -}; -const b300 = { - fontSize: '1.8rem', - lineHeight: '2.8rem', - marginTop: getFontMargin(18, 0.75), - marginBottom: getFontMargin(18, 0.75), - ...baseBodyStyles, -}; - -const baseHeadingStyles = { - fontFamily: 'Metropolis, sans-serif', - fontStyle: 'normal', - fontWeight: 600, - - '&:first-of-type': { - marginTop: 0, - }, -}; - -const h25 = { - fontSize: '1rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(10, 8 / 9), - marginBottom: getFontMargin(10, 0.5), - ...baseHeadingStyles, - fontFamily: 'Open Sans, sans-serif', -}; -const h50 = { - fontSize: '1.1rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(11, 8 / 9), - marginBottom: getFontMargin(11, 0.5), - ...baseHeadingStyles, - fontFamily: 'Open Sans, sans-serif', -}; -const h75 = { - fontSize: '1.2rem', - lineHeight: '1.6rem', - marginTop: getFontMargin(12, 8 / 9), - marginBottom: getFontMargin(12, 0.5), - ...baseHeadingStyles, - fontFamily: 'Open Sans, sans-serif', -}; -const h100 = { - fontSize: '1.4rem', - lineHeight: '2rem', - marginTop: getFontMargin(14, 8 / 9), - marginBottom: getFontMargin(14, 0.5), - ...baseHeadingStyles, - fontFamily: 'Open Sans, sans-serif', -}; -const h200 = { - fontSize: '1.6rem', - lineHeight: '2.4rem', - marginTop: getFontMargin(16, 8 / 9), - marginBottom: getFontMargin(16, 0.5), - ...baseHeadingStyles, -}; -const h300 = { - fontSize: '1.8rem', - lineHeight: '2.4rem', - marginTop: getFontMargin(18, 8 / 9), - marginBottom: getFontMargin(18, 0.5), - ...baseHeadingStyles, -}; -const h400 = { - fontSize: '2rem', - lineHeight: '2.8rem', - marginTop: getFontMargin(18, 8 / 9), - marginBottom: getFontMargin(18, 0.5), - ...baseHeadingStyles, -}; -const h500 = { - fontSize: '2.2rem', - lineHeight: '2.8rem', - marginTop: getFontMargin(22, 8 / 9), - marginBottom: getFontMargin(22, 0.5), - ...baseHeadingStyles, -}; -const h600 = { - fontSize: '2.5rem', - lineHeight: '3rem', - marginTop: getFontMargin(25, 8 / 9), - marginBottom: getFontMargin(25, 0.5), - ...baseHeadingStyles, -}; -const h700 = { - fontSize: '2.8rem', - lineHeight: '3.6rem', - marginTop: getFontMargin(28, 8 / 9), - marginBottom: getFontMargin(28, 0.5), - ...baseHeadingStyles, -}; -const h800 = { - fontSize: '3.2rem', - lineHeight: '4rem', - marginTop: getFontMargin(32, 8 / 9), - marginBottom: getFontMargin(32, 0.5), - ...baseHeadingStyles, -}; -const h900 = { - fontSize: '3.6rem', - lineHeight: '4.4rem', - marginTop: getFontMargin(36, 8 / 9), - marginBottom: getFontMargin(36, 0.5), - ...baseHeadingStyles, -}; -const h1000 = { - fontSize: '4rem', - lineHeight: '4.8rem', - marginTop: getFontMargin(40, 8 / 9), - marginBottom: getFontMargin(40, 0.5), - ...baseHeadingStyles, -}; - -const typographyOverrides: TypographyOptions = { - b25, - b50, - b75, - b100, - b200, - b300, - h25, - h50, - h75, - h100, - h200, - h300, - h400, - h500, - h600, - h700, - h800, - h900, - h1000, -}; - -export default typographyOverrides; diff --git a/webapp/platform/components/src/compass/components/typography/typography.tsx b/webapp/platform/components/src/compass/components/typography/typography.tsx deleted file mode 100644 index f79c3c3e3c..0000000000 --- a/webapp/platform/components/src/compass/components/typography/typography.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {Typography as MuiTypography, TypographyProps as MuiTypographyProps} from '@mui/material'; - -type Props = Omit & { - gutterTop?: boolean; -} - -const Typography = ({variant = 'b100', ...props}: Props) => { - const variantMap = { - b25: 'p', - b50: 'p', - b75: 'p', - b100: 'p', - b200: 'p', - b300: 'p', - - h25: 'h6', - h50: 'h6', - h75: 'h6', - h100: 'h5', - h200: 'h5', - h300: 'h4', - h400: 'h4', - h500: 'h3', - h600: 'h3', - h700: 'h2', - h800: 'h2', - h900: 'h1', - h1000: 'h1', - }; - - return ( - - ); -}; - -export default Typography; diff --git a/webapp/platform/components/src/compass/index.ts b/webapp/platform/components/src/compass/index.ts deleted file mode 100644 index 3c8b39496c..0000000000 --- a/webapp/platform/components/src/compass/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -export * from './components'; - -import ThemeProvider from './theme_provider/theme_provider'; - -export { - ThemeProvider, -}; diff --git a/webapp/platform/components/src/compass/theme_provider/overrides.ts b/webapp/platform/components/src/compass/theme_provider/overrides.ts deleted file mode 100644 index 935e543fd0..0000000000 --- a/webapp/platform/components/src/compass/theme_provider/overrides.ts +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {ThemeOptions} from '@mui/material/styles/createTheme'; - -import MuiButton from '../components/button/button.overrides'; -import MuiIconButton from '../components/icon_button/icon_button.overrides'; -import typographyOverrides from '../components/typography/typography.overrides'; - -const components: ThemeOptions['components'] = { - MuiButton, - MuiIconButton, -}; - -const overrides: ThemeOptions = { - components, - typography: { - ...typographyOverrides, - htmlFontSize: 10, - }, -}; - -export default overrides; diff --git a/webapp/platform/components/src/compass/theme_provider/theme_provider.tsx b/webapp/platform/components/src/compass/theme_provider/theme_provider.tsx deleted file mode 100644 index 38394d6a80..0000000000 --- a/webapp/platform/components/src/compass/theme_provider/theme_provider.tsx +++ /dev/null @@ -1,31 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {createTheme, ThemeProvider as MUIThemeProvider} from '@mui/material/styles'; -import {Theme} from "@mattermost/types/theme"; - -import {createMUIThemeFromMMTheme} from './themes'; - -import {THEMES} from '../../common/constants/theme'; -import overrides from './overrides'; - -type Props = { - theme: Theme; -} - -const ThemeProvider = ({theme = THEMES.onyx}: Props) => { - const MUITheme = createMUIThemeFromMMTheme(theme); - const combinedTheme = createTheme({ - ...MUITheme, - ...overrides, - }); - - return ( - - ); -}; - -export default ThemeProvider; diff --git a/webapp/platform/components/src/compass/theme_provider/themes.ts b/webapp/platform/components/src/compass/theme_provider/themes.ts deleted file mode 100644 index cd65e90482..0000000000 --- a/webapp/platform/components/src/compass/theme_provider/themes.ts +++ /dev/null @@ -1,47 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {alpha} from '@mui/material'; -import {createTheme} from '@mui/material/styles'; -import {Theme} from '@mattermost/types/theme'; - -import {THEMES} from '../../common/constants/theme'; - -declare module '@mui/material/styles' { - interface Palette { - mention?: Palette['primary']; - } - interface PaletteOptions { - mention?: PaletteOptions['primary']; - } - - interface PaletteColor { - darker?: string; - } - interface SimplePaletteColorOptions { - darker?: string; - } -} - -export const createMUIThemeFromMMTheme = (theme: Theme) => createTheme({ - palette: { - primary: {main: theme.buttonBg}, - secondary: {main: theme.linkColor}, - error: {main: theme.dndIndicator}, - warning: {main: theme.awayIndicator}, - info: {main: theme.mentionHighlightBg}, - success: {main: theme.onlineIndicator}, - text: { - primary: theme.centerChannelColor, - }, - background: { - default: theme.centerChannelBg, - }, - action: { - disabled: alpha(theme.centerChannelColor, 0.32), - disabledBackground: alpha(theme.centerChannelColor, 0.08), - }, - tonalOffset: 0.05, - }, -}); - diff --git a/webapp/platform/components/src/compass/utils/color.ts b/webapp/platform/components/src/compass/utils/color.ts deleted file mode 100644 index bec38ea3a6..0000000000 --- a/webapp/platform/components/src/compass/utils/color.ts +++ /dev/null @@ -1,32 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {decomposeColor, hslToRgb} from '@mui/material'; -import {normal} from 'color-blend'; - -export const decomposeColorToRgb = (color: string) => { - if (color.startsWith('hsl')) { - return decomposeColor(hslToRgb(color)); - } - - return decomposeColor(color); -}; - -export const blend = (background: string, foreground: string) => { - const bg = decomposeColorToRgb(background); - const fg = decomposeColorToRgb(foreground); - - const blended = normal({ - r: bg.values[0], - g: bg.values[1], - b: bg.values[2], - a: bg.values[3] || 1, - }, { - r: fg.values[0], - g: fg.values[1], - b: fg.values[2], - a: fg.values[3] || 1, - }); - - return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`; -}; diff --git a/webapp/platform/components/src/compass/utils/font.ts b/webapp/platform/components/src/compass/utils/font.ts deleted file mode 100644 index e2dc37c64c..0000000000 --- a/webapp/platform/components/src/compass/utils/font.ts +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -export const getFontMargin = (fontSize: number, multiplier: number): number => - Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8); diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap b/webapp/platform/components/src/footer_pagination/__snapshots__/footer_pagination.test.tsx.snap similarity index 100% rename from webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap rename to webapp/platform/components/src/footer_pagination/__snapshots__/footer_pagination.test.tsx.snap diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss b/webapp/platform/components/src/footer_pagination/footer_pagination.scss similarity index 93% rename from webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss rename to webapp/platform/components/src/footer_pagination/footer_pagination.scss index 35594f8bc5..6bf9942421 100644 --- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss +++ b/webapp/platform/components/src/footer_pagination/footer_pagination.scss @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -@import '../../../../../channels/src/sass/utils/mixins'; +@import '../../../../channels/src/sass/utils/mixins'; .footer-pagination { display: flex; diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx b/webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx similarity index 95% rename from webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx rename to webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx index 206b9cd650..840587b0d5 100644 --- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx +++ b/webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; import {render, screen} from '@testing-library/react'; import {FooterPagination} from './footer_pagination'; -import {wrapIntl} from '../../testUtils' +import {wrapIntl} from '../testUtils' describe('LegacyGenericModal/FooterPagination', () => { const baseProps = { diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx b/webapp/platform/components/src/footer_pagination/footer_pagination.tsx similarity index 98% rename from webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx rename to webapp/platform/components/src/footer_pagination/footer_pagination.tsx index 3efd3c7a75..2d0e0ae179 100644 --- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx +++ b/webapp/platform/components/src/footer_pagination/footer_pagination.tsx @@ -11,7 +11,7 @@ import './footer_pagination.scss'; const BUTTON_ICON_SIZE = 16; -type FooterPaginationProps = { +type Props = { page: number; total: number; itemsPerPage: number; @@ -25,7 +25,7 @@ export const FooterPagination = ({ itemsPerPage, onNextPage, onPreviousPage, -}: FooterPaginationProps) => { +}: Props) => { const {formatMessage} = useIntl(); const startCount = page * itemsPerPage; diff --git a/webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap b/webapp/platform/components/src/generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap similarity index 100% rename from webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap rename to webapp/platform/components/src/generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap diff --git a/webapp/channels/src/components/generic_modal.scss b/webapp/platform/components/src/generic_modal/generic_modal.scss similarity index 98% rename from webapp/channels/src/components/generic_modal.scss rename to webapp/platform/components/src/generic_modal/generic_modal.scss index 76d0e387f3..9e70d63799 100644 --- a/webapp/channels/src/components/generic_modal.scss +++ b/webapp/platform/components/src/generic_modal/generic_modal.scss @@ -3,8 +3,8 @@ @charset 'UTF-8'; -@import 'utils/variables'; -@import 'utils/mixins'; +@import '../../../../channels/src/sass/utils/variables'; +@import '../../../../channels/src/sass/utils/mixins'; .console__body .modal .GenericModal, .app__body .modal .GenericModal { diff --git a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx b/webapp/platform/components/src/generic_modal/generic_modal.test.tsx similarity index 81% rename from webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx rename to webapp/platform/components/src/generic_modal/generic_modal.test.tsx index 2c832fc82c..3a54b8ad19 100644 --- a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx +++ b/webapp/platform/components/src/generic_modal/generic_modal.test.tsx @@ -4,10 +4,10 @@ import React from 'react'; import {render, screen} from '@testing-library/react'; -import {LegacyGenericModal} from './legacy_generic_modal'; +import {GenericModal} from './generic_modal'; import {wrapIntl} from '../testUtils'; -describe('LegacyGenericModal', () => { +describe('GenericModal', () => { const baseProps = { onExited: jest.fn(), modalHeaderText: 'Modal Header Text', @@ -16,7 +16,7 @@ describe('LegacyGenericModal', () => { test('should match snapshot for base case', () => { const wrapper = render( - wrapIntl(), + wrapIntl(), ); expect(wrapper).toMatchSnapshot(); @@ -30,7 +30,7 @@ describe('LegacyGenericModal', () => { }; render( - wrapIntl(), + wrapIntl(), ); expect(screen.getByText('Confirm')).toBeInTheDocument(); diff --git a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx b/webapp/platform/components/src/generic_modal/generic_modal.tsx similarity index 98% rename from webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx rename to webapp/platform/components/src/generic_modal/generic_modal.tsx index eaec42b8a3..11521ea565 100644 --- a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx +++ b/webapp/platform/components/src/generic_modal/generic_modal.tsx @@ -7,6 +7,7 @@ import {Modal} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; import {FocusTrap} from '../focus_trap'; +import './generic_modal.scss'; export type Props = { className?: string; @@ -53,7 +54,7 @@ type State = { isFocalTrapActive: boolean; } -export class LegacyGenericModal extends React.PureComponent { +export class GenericModal extends React.PureComponent { static defaultProps: Partial = { show: true, id: 'genericModal', diff --git a/webapp/platform/components/src/index.tsx b/webapp/platform/components/src/index.tsx index 925665a131..c4b5c4f261 100644 --- a/webapp/platform/components/src/index.tsx +++ b/webapp/platform/components/src/index.tsx @@ -2,20 +2,21 @@ // See LICENSE.txt for license information. // type -export type {Props as LegacyGenericModalProps} from './legacy_generic_modal/legacy_generic_modal'; +export type {Props as GenericModalProps} from './generic_modal/generic_modal'; export type {CircleSkeletonLoaderProps, RectangleSkeletonLoaderProps} from './skeleton_loader'; export type {Props as FocusTrapProps} from './focus_trap'; +export type {Props as PunchOutCoordsHeightAndWidth} from './common/hooks/useMeasurePunchouts'; // components -export * from './compass'; -export * from './legacy_generic_modal/footer_content'; -export {LegacyGenericModal} from './legacy_generic_modal/legacy_generic_modal'; +export {GenericModal} from './generic_modal/generic_modal'; +export {FooterPagination} from './footer_pagination/footer_pagination'; export {CircleSkeletonLoader, RectangleSkeletonLoader} from './skeleton_loader'; -export * from './tour_tip'; -export * from './pulsating_dot'; +export {TourTip} from './tour_tip/tour_tip'; +export {TourTipBackdrop} from './tour_tip/tour_tip_backdrop'; +export {PulsatingDot} from './pulsating_dot'; export {FocusTrap} from './focus_trap'; // hooks -export * from './common/hooks/useMeasurePunchouts'; +export {useMeasurePunchouts} from './common/hooks/useMeasurePunchouts'; export {useElementAvailable} from './common/hooks/useElementAvailable'; export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions'; diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts b/webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts deleted file mode 100644 index 6097345e39..0000000000 --- a/webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -export * from './footer_pagination'; diff --git a/webapp/platform/components/src/tour_tip/tour_tip.tsx b/webapp/platform/components/src/tour_tip/tour_tip.tsx index 703af5047f..7c0aecb38a 100644 --- a/webapp/platform/components/src/tour_tip/tour_tip.tsx +++ b/webapp/platform/components/src/tour_tip/tour_tip.tsx @@ -7,7 +7,7 @@ import Tippy from '@tippyjs/react'; import {Placement} from 'tippy.js'; import classNames from 'classnames'; -import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts'; +import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts'; import 'tippy.js/dist/tippy.css'; import 'tippy.js/themes/light-border.css'; diff --git a/webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx b/webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx index 5a9f78609d..6799624652 100644 --- a/webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx +++ b/webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx @@ -4,7 +4,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts'; +import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts'; type Props = { overlayPunchOut: PunchOutCoordsHeightAndWidth | null; diff --git a/webapp/platform/types/src/theme.ts b/webapp/platform/types/src/theme.ts deleted file mode 100644 index f21cd5efaf..0000000000 --- a/webapp/platform/types/src/theme.ts +++ /dev/null @@ -1,33 +0,0 @@ -export type ThemeKey = 'denim' | 'sapphire' | 'quartz' | 'indigo' | 'onyx'; - -export type LegacyThemeType = 'Mattermost' | 'Organization' | 'Mattermost Dark' | 'Windows Dark'; - -export type ThemeType = 'Denim' | 'Sapphire' | 'Quartz' | 'Indigo' | 'Onyx'; - -export type Theme = { - type?: ThemeType | 'custom'; - sidebarBg: string; - sidebarText: string; - sidebarUnreadText: string; - sidebarTextHoverBg: string; - sidebarTextActiveBorder: string; - sidebarTextActiveColor: string; - sidebarHeaderBg: string; - sidebarTeamBarBg: string; - sidebarHeaderTextColor: string; - onlineIndicator: string; - awayIndicator: string; - dndIndicator: string; - mentionBg: string; - mentionColor: string; - centerChannelBg: string; - centerChannelColor: string; - newMessageSeparator: string; - linkColor: string; - buttonBg: string; - buttonColor: string; - errorTextColor: string; - mentionHighlightBg: string; - mentionHighlightLink: string; - codeTheme: string; -};