MM-62060/MM-62276 Remove video from onboarding checklist and turn iframe-has-title ESLint rule to error (#29634)

* MM-62276 Remove video from onboarding checklist

* MM-62060 Turn jsx-a11y/iframe-has-title ESLint rule to an error

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx

@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled, {css} from 'styled-components';
 
-import {CloseIcon, PlayIcon, PlaylistCheckIcon} from '@mattermost/compass-icons/components';
+import {CloseIcon, PlaylistCheckIcon} from '@mattermost/compass-icons/components';
 
 import {getPrevTrialLicense} from 'mattermost-redux/actions/admin';
 import {getMyPreferences, savePreferences} from 'mattermost-redux/actions/preferences';
@@ -19,7 +19,6 @@ import {
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {trackEvent} from 'actions/telemetry_actions';
-import {openModal} from 'actions/views/modals';
 import {getShowTaskListBool} from 'selectors/onboarding';
 
 import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
@@ -30,9 +29,7 @@ import {
     OnboardingTaskList,
 } from 'components/onboarding_tasks';
 import {useHandleOnBoardingTaskTrigger} from 'components/onboarding_tasks/onboarding_tasks_manager';
-import OnBoardingVideoModal from 'components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal';
 
-import checklistImg from 'images/onboarding-checklist.svg';
 import {Preferences, RecommendedNextStepsLegacy} from 'utils/constants';
 
 import type {GlobalState} from 'types/store';
@@ -126,40 +123,6 @@ const Button = styled.button<{open: boolean}>(({open}) => {
     `;
 });
 
-const PlayButton = styled.button`
-    padding: 10px 0;
-    max-width: 175px;
-    background: var(--button-bg);
-    border-radius: var(--radius-s);
-    color: var(--button-color);
-    border: none;
-    font-weight: bold;
-    position: absolute;
-    z-index: 1;
-    margin-left: auto;
-    margin-right: auto;
-    left: 0;
-    right: 0;
-    top: 48px;
-
-    &:hover {
-        border-color: rgba(var(--center-channel-color-rgb), 0.24);
-        box-shadow: var(--elevation-4);
-    }
-
-    svg {
-        margin-right: 6px;
-        vertical-align: middle;
-    }
-`;
-
-const Skeleton = styled.div`
-    height: auto;
-    margin: 0 auto;
-    padding: 0 20px;
-    position: relative;
-`;
-
 const OnBoardingTaskList = (): JSX.Element | null => {
     const hasPreferences = useSelector((state: GlobalState) => Object.keys(getMyPreferencesSelector(state)).length !== 0);
 
@@ -278,15 +241,6 @@ const OnBoardingTaskList = (): JSX.Element | null => {
         trackEvent(OnboardingTaskCategory, open ? OnboardingTaskList.ONBOARDING_TASK_LIST_CLOSE : OnboardingTaskList.ONBOARDING_TASK_LIST_OPEN);
     }, [open, currentUserId]);
 
-    const openVideoModal = useCallback(() => {
-        toggleTaskList();
-        dispatch(openModal({
-            modalId: OnboardingTaskList.ONBOARDING_VIDEO_MODAL,
-            dialogType: OnBoardingVideoModal,
-            dialogProps: {},
-        }));
-    }, []);
-
     if (!hasPreferences || !showTaskList || !isEnableOnboardingFlow) {
         return null;
     }
@@ -329,22 +283,6 @@ const OnBoardingTaskList = (): JSX.Element | null => {
                                     defaultMessage="Let's get up and running."
                                 />
                             </p>
-                            <Skeleton>
-                                <img
-                                    src={checklistImg}
-                                    alt={'On Boarding video'}
-                                    style={{display: 'block', margin: '1rem auto', borderRadius: '4px'}}
-                                />
-                                <PlayButton
-                                    onClick={openVideoModal}
-                                >
-                                    <PlayIcon size={18}/>
-                                    <FormattedMessage
-                                        id='onboardingTask.checklist.video_title'
-                                        defaultMessage='Watch overview'
-                                    />
-                                </PlayButton>
-                            </Skeleton>
                             {tasksList.map((task) => (
                                 <Task
                                     key={OnboardingTaskCategory + task.name}

webapp/channels/src/components/onboarding_tasks/constants.ts

@@ -19,7 +19,6 @@ export const OnboardingTaskList = {
     ONBOARDING_TASK_LIST_OPEN: 'onboarding_task_list_open',
     ONBOARDING_TASK_LIST_SHOW: 'onboarding_task_list_show',
     ONBOARDING_TASK_LIST_CLOSE: 'onboarding_task_list_close',
-    ONBOARDING_VIDEO_MODAL: 'onboarding_video_modal',
     DECLINED_ONBOARDING_TASK_LIST: 'declined_onboarding_task_list',
 };
 

webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss

@@ -1,61 +0,0 @@
-.on-boarding-video_modal {
-    .modal & {
-        width: 100%;
-        max-width: 899px;
-        height: unset;
-        margin-top: calc(50vh - 252px);
-        box-shadow: var(--elevation-6);
-    }
-
-    .wistia_embed {
-        width: 100%;
-        max-width: 899px;
-        height: 100%;
-        max-height: 506px;
-    }
-
-    .modal-header {
-        min-height: 0;
-        padding: 0;
-        border: none;
-
-        .close {
-            z-index: 1;
-            top: -12px;
-            right: -12px;
-            border-radius: var(--radius-full);
-            opacity: 0.8;
-
-            :hover {
-                opacity: 1;
-            }
-
-            .app__body .modal & {
-                background: var(--center-channel-bg);
-                color: var(--center-channel-color);
-            }
-        }
-    }
-
-    .modal-content {
-        height: 100vh;
-        max-height: 506px;
-        padding: 0;
-
-        .app__body .modal & {
-            border: none;
-        }
-    }
-
-    .modal-body {
-        overflow: hidden;
-        height: 100%;
-        padding: 0;
-        border-radius: var(--radius-l);
-        margin: 0;
-    }
-
-    .modal-footer {
-        display: none;
-    }
-}

webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.tsx

@@ -1,64 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useCallback, useState} from 'react';
-import {Modal} from 'react-bootstrap';
-import {useDispatch, useSelector} from 'react-redux';
-
-import {savePreferences} from 'mattermost-redux/actions/preferences';
-import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
-
-import {OnboardingTaskCategory, OnboardingTaskList} from '../constants';
-import './onboarding_video_modal.scss';
-
-type Props = {
-    onExited: () => void;
-}
-
-const OnBoardingVideoModal = ({onExited}: Props) => {
-    const [show, setShow] = useState(true);
-    const dispatch = useDispatch();
-    const currentUserId = useSelector(getCurrentUserId);
-
-    const handleHide = useCallback(() => {
-        setShow(false);
-        const preferences = [{
-            user_id: currentUserId,
-            category: OnboardingTaskCategory,
-            name: OnboardingTaskList.ONBOARDING_TASK_LIST_OPEN,
-            value: 'true',
-        }];
-        dispatch(savePreferences(currentUserId, preferences));
-    }, [currentUserId]);
-
-    return (
-        <Modal
-            id={OnboardingTaskList.ONBOARDING_VIDEO_MODAL}
-            dialogClassName='a11y__modal on-boarding-video_modal'
-            show={show}
-            onHide={handleHide}
-            onExited={onExited}
-            enforceFocus={false}
-            role='none'
-            aria-labelledby='onBoardingVideoModal'
-        >
-            <Modal.Header
-                closeButton={true}
-            />
-            <Modal.Body>
-                <iframe
-                    src='//fast.wistia.net/embed/iframe/y4jbcyd7ej'
-                    // eslint-disable-next-line react/no-unknown-property
-                    allowTransparency={true}
-                    frameBorder='0'
-                    scrolling='no'
-                    className='wistia_embed'
-                    name='wistia_embed'
-                    allowFullScreen={true}
-                />
-            </Modal.Body>
-        </Modal>
-    );
-};
-
-export default OnBoardingVideoModal;

webapp/channels/src/i18n/en.json

@@ -4562,7 +4562,6 @@
   "onboardingTask.checklist.task_learn_more_about_messaging": "Take a tour of Channels.",
   "onboardingTask.checklist.task_start_enterprise_trial": "Learn more about Enterprise-level high-security features.",
   "onboardingTask.checklist.task_visit_system_console": "Visit the System Console to configure your workspace.",
-  "onboardingTask.checklist.video_title": "Watch overview",
   "onboardingTask.completeYourProfileTour.Description": "Use this menu item to update your profile details and security settings.",
   "onboardingTask.completeYourProfileTour.title": "Edit your profile",
   "onboardingTask.visitSystemConsole.Description": "More detailed configuration settings for your workspace can be accessed here.",

webapp/platform/eslint-plugin/configs/.eslintrc-react.json

@@ -26,7 +26,7 @@
     "jsx-a11y/click-events-have-key-events": "warn",
     "jsx-a11y/heading-has-content": "error",
     "jsx-a11y/html-has-lang": "error",
-    "jsx-a11y/iframe-has-title": "warn",
+    "jsx-a11y/iframe-has-title": "error",
     "jsx-a11y/img-redundant-alt": "warn",
     "jsx-a11y/interactive-supports-focus": "warn",
     "jsx-a11y/label-has-associated-control": "error",