@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post/tutorial/tutorial_tip/tutorial_tip.tsx

@@ -1,224 +0,0 @@
-// @ts-nocheck
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import * as React from 'react';
-import {Overlay} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
-
-// import {trackEvent} from 'actions/telemetry_actions.jsx';
-// import Constants from '../../../utils/constants';
-// import PulsatingDot from 'components/widgets/pulsating_dot';
-
-// const Preferences = Constants.Preferences;
-// const TutorialSteps = Constants.TutorialSteps;
-
-type Preference = {
-    user_id: string;
-    category: string;
-    name: string;
-    value: string;
-}
-
-type Props = {
-    currentUserId: string;
-    step: number;
-    screens: JSX.Element[];
-    placement: string;
-    overlayClass: string;
-    telemetryTag?: string;
-    actions: {
-        closeRhsMenu: () => void;
-        savePreferences: (currentUserId: string, preferences: Preference[]) => void;
-    };
-}
-
-type State = {
-    currentScreen: number;
-    show: boolean;
-}
-
-export default class TutorialTip extends React.PureComponent<Props, State> {
-    public targetRef: React.RefObject<HTMLImageElement>;
-
-    public static defaultProps: Partial<Props> = {
-        overlayClass: '',
-    }
-
-    public constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            currentScreen: 0,
-            show: false,
-        };
-
-        this.targetRef = React.createRef();
-    }
-
-    private show = (): void => {
-        this.setState({show: true});
-    }
-
-    private hide = (): void => {
-        this.setState({show: false});
-    }
-
-    public handleNext = (): void => {
-        if (this.state.currentScreen < this.props.screens.length - 1) {
-            this.setState({currentScreen: this.state.currentScreen + 1});
-            return;
-        }
-
-        if (this.props.telemetryTag) {
-            let tag = this.props.telemetryTag;
-
-            if (this.props.screens.length > 1) {
-                tag += '_' + (this.state.currentScreen + 1).toString();
-            }
-
-            if (this.state.currentScreen === this.props.screens.length - 1) {
-                tag += '_okay';
-            } else {
-                tag += '_next';
-            }
-
-            // trackEvent('tutorial', tag);
-        }
-
-        const {currentUserId, actions} = this.props;
-        const {closeRhsMenu, savePreferences} = actions;
-
-        const preferences = [{
-            user_id: currentUserId,
-            // category: Preferences.TUTORIAL_STEP,
-            name: currentUserId,
-            value: (this.props.step + 1).toString(),
-        }];
-
-        closeRhsMenu();
-        this.hide();
-
-        // savePreferences(currentUserId, preferences);
-    }
-
-    public skipTutorial = (e: React.MouseEvent<HTMLAnchorElement>): void => {
-        e.preventDefault();
-
-        if (this.props.telemetryTag) {
-            let tag = this.props.telemetryTag;
-            if (this.props.screens.length > 1) {
-                tag += '_' + this.state.currentScreen;
-            }
-            tag += '_skip';
-            // trackEvent('tutorial', tag);
-        }
-
-        const {currentUserId, actions} = this.props;
-        const preferences = [{
-            user_id: currentUserId,
-            // category: Preferences.TUTORIAL_STEP,
-            name: currentUserId,
-            // value: TutorialSteps.FINISHED.toString(),
-        }];
-
-        // actions.savePreferences(currentUserId, preferences);
-    }
-
-    private handleCircleClick = (e: React.MouseEvent<HTMLAnchorElement>, screen: number): void => {
-        e.preventDefault();
-        this.setState({currentScreen: screen});
-    }
-
-    private getTarget = (): HTMLImageElement | null => {
-        return this.targetRef.current;
-    }
-
-    public render(): JSX.Element {
-        const buttonText = (
-            <FormattedMessage
-                id='tutorial_tip.ok'
-                defaultMessage='Got it'
-            />
-        );
-
-        const dots = [];
-        if (this.props.screens.length > 1) {
-            for (let i = 0; i < this.props.screens.length; i++) {
-                let className = 'circle';
-                if (i === this.state.currentScreen) {
-                    className += ' active';
-                }
-
-                dots.push(
-                    <a
-                        href='#'
-                        key={'dotactive' + i}
-                        className={className}
-                        data-screen={i}
-                        onClick={(e) => this.handleCircleClick(e, i)}
-                    />,
-                );
-            }
-        }
-
-        return (
-            <div
-                id='tipButton'
-                className={'tip-div ' + this.props.overlayClass}
-                onClick={this.show}
-            >
-                {/* <PulsatingDot
-                    onClick={this.show}
-                    targetRef={this.targetRef}
-                /> */}
-
-                <Overlay
-                    show={this.state.show}
-                >
-                    <div className='tip-backdrop'/>
-                </Overlay>
-
-                <Overlay
-                    placement={this.props.placement}
-                    show={this.state.show}
-                    rootClose={true}
-                    onHide={this.hide}
-                    target={this.getTarget}
-                >
-                    <div className={'tip-overlay ' + this.props.overlayClass}>
-                        <div className='arrow'/>
-                        {this.props.screens[this.state.currentScreen]}
-                        <div className='tutorial__footer'>
-                            <div className='tutorial__circles'>{dots}</div>
-                            <div className='text-right'>
-                                <button
-                                    id='tipNextButton'
-                                    className='btn btn-primary'
-                                    onClick={this.handleNext}
-                                >
-                                    {buttonText}
-                                </button>
-                                <div className='tip-opt'>
-                                    <FormattedMessage
-                                        id='tutorial_tip.seen'
-                                        defaultMessage='Seen this before? '
-                                    />
-                                    <a
-                                        href='#'
-                                        onClick={this.skipTutorial}
-                                    >
-                                        <FormattedMessage
-                                            id='tutorial_tip.out'
-                                            defaultMessage='Opt out of these tips.'
-                                        />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </Overlay>
-            </div>
-        );
-    }
-}

package/src/components/post/user_profile/index.tsx

@@ -1,6 +0,0 @@
-// import React, { useState } from 'react';
-
-// export const profileData = () => {
-//     const [profileDetails, setProfileDetails] = useState({ displayName: 'nickname' });
-//     return <div>{profileDetails} </div>;
-// };

package/src/components/post/user_profile/user_profile.tsx

@@ -1,114 +0,0 @@
-// @ts-nocheck
-import React, { useState } from 'react';
-import OverlayTrigger, { BaseOverlayTrigger } from '../../../widgets/overlay_trigger';
-import { isMobile, isGuest } from '../../../utils/utils';
-// import ProfilePopover from 'components/profile_popover';
-
-import BotBadge from '../../../widgets/badges/bot_badge';
-import GuestBadge from '../../../widgets/badges/guest_badge';
-import SharedUserIndicator from '../../../widgets/shared_user_indicator';
-
-export type UserProfileProps = {
-    userId: string;
-    displayName?: string;
-    isBusy?: boolean;
-    isShared?: boolean;
-    overwriteName?: React.ReactNode;
-    overwriteIcon?: string;
-    user?: any;
-    disablePopover?: boolean;
-    displayUsername?: boolean;
-    hasMention?: boolean;
-    hideStatus?: boolean;
-    isRHS?: boolean;
-    overwriteImage?: React.ReactNode;
-    channelId?: string;
-};
-
-export const UserProfile: React.FC<UserProfileProps> = (props) => {
-    const [profileDetails, setProfileDetails] = useState({
-        displayName: 'nickname',
-        isBusy: false,
-        user: { username: 'Admin' },
-        isShared: true,
-        disablePopover: true,
-        displayUsername: true,
-        hasMention: false,
-        hideStatus: false,
-    });
-    const {
-        // disablePopover,
-        // displayName,
-        // displayUsername,
-        // isBusy,
-        isRHS,
-        // isShared,
-        // hasMention,
-        // hideStatus,
-        overwriteName,
-        overwriteIcon,
-        // user,
-        userId,
-        channelId,
-    } = props;
-
-    const { displayName, isBusy, user, isShared, displayUsername, disablePopover } = profileDetails;
-    console.log(profileDetails, 'user profile page');
-
-    let name: React.ReactNode;
-    if (user && displayUsername) {
-        name = `${user.username}`;
-    } else {
-        name = overwriteName || displayName || '...';
-    }
-
-    const ariaName: string = typeof name === 'string' ? name.toLowerCase() : '';
-
-    const setOverlaynRef = (ref: BaseOverlayTrigger): void => {
-        // overlay = ref;
-    };
-
-    let placement = 'right';
-    if (isRHS && !isMobile()) {
-        placement = 'left';
-    }
-
-    let sharedIcon;
-    if (isShared) {
-        sharedIcon = <SharedUserIndicator className="shared-user-icon" withTooltip={true} />;
-    }
-
-    return (
-        <React.Fragment>
-            <OverlayTrigger
-                // ref={setOverlaynRef}
-                trigger="click"
-                placement={placement}
-                rootClose={true}
-                overlay={
-                    <h1>title image</h1>
-                    // <ProfilePopover
-                    //     className="user-profile-popover"
-                    //     userId={userId}
-                    //     channelId={channelId}
-                    //     src={profileImg}
-                    //     isBusy={isBusy}
-                    //     hide={this.hideProfilePopover}
-                    //     hideStatus={hideStatus}
-                    //     isRHS={isRHS}
-                    //     hasMention={hasMention}
-                    //     overwriteName={overwriteName}
-                    //     overwriteIcon={overwriteIcon}
-                    // />
-                }
-            >
-                <button aria-label={ariaName} className="user-popover style--none">
-                    {name}
-                </button>
-            </OverlayTrigger>
-            {sharedIcon}
-            <BotBadge show={Boolean()} className="badge-popoverlist" />
-            <GuestBadge show={Boolean()} className="badge-popoverlist" />
-        </React.Fragment>
-    );
-};

package/src/components/post_view/__snapshots__/post_view.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/post_view should match snapshot for channel loading 1`] = `
-<div
-  id="post-list"
->
-  <LoadingScreen
-    key="loading"
-    position="absolute"
-    style={Object {}}
-  />
-</div>
-`;
-
-exports[`components/post_view/post_view should match snapshot for loaderForChangeOfPostsChunk 1`] = `
-<div
-  id="post-list"
->
-  <LoadingScreen
-    key="loading"
-    position="absolute"
-    style={Object {}}
-  />
-</div>
-`;

package/src/components/post_view/channel_intro_message/add_members_button.scss

@@ -1,72 +0,0 @@
-.LessThanMaxFreeUsers,
-.MoreThanMaxFreeUsers {
-    display: flex;
-    flex-direction: row;
-    margin-top: 10px;
-
-    .titleAndButton {
-        display: flex;
-        flex-direction: column;
-        padding: 20px 5px;
-        margin-left: 20px;
-
-        > span {
-            margin-bottom: 15px;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 24px;
-        }
-    }
-
-    button {
-        width: fit-content;
-        padding: 8px 16px;
-        border: none;
-        background-color: var(--button-bg);
-        border-radius: 4px;
-        color: var(--button-color);
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 16px;
-
-        span {
-            color: var(--button-color);
-        }
-
-        i {
-            color: var(--button-color);
-            font-size: 14px;
-        }
-
-        &:hover:not(.disabled) {
-            background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
-            color: var(--button-color);
-            text-decoration: none;
-        }
-    }
-}
-
-.MoreThanMaxFreeUsersWrapper {
-    display: flex;
-    flex-direction: row;
-
-    .setHeaderButton {
-        margin-top: 10px;
-    }
-}
-
-.setHeaderButton {
-    border-radius: 4px;
-    color: var(--button-bg);
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 16px;
-
-    i {
-        font-size: 14px;
-    }
-
-    &:hover {
-        background-color: rgba(var(--button-bg-rgb), 0.04);
-    }
-}

package/src/components/post_view/channel_intro_message/add_members_button.tsx

@@ -1,152 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-// import * as React from 'react';
-
-// import {useSelector} from 'react-redux';
-
-// import {FormattedMessage} from 'react-intl';
-
-// import {Channel} from 'mattermost-redux/types/channels';
-// import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-// import {Permissions} from 'mattermost-redux/constants';
-
-// import ToggleModalButtonRedux from 'components/toggle_modal_button_redux';
-// import ToggleModalButton from 'components/toggle_modal_button.jsx';
-// import InvitationModal from 'components/invitation_modal';
-// import ChannelInviteModal from 'components/channel_invite_modal';
-// import AddGroupsToChannelModal from 'components/add_groups_to_channel_modal';
-// import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-// import EmptyStateThemeableSvg from 'components/common/svg_images_components/empty_state_themeable.svg';
-// import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
-
-// import {Constants, ModalIdentifiers} from 'utils/constants';
-// import {localizeMessage} from 'utils/utils';
-
-// import './add_members_button.scss';
-
-// import LoadingSpinner from 'components/widgets/loading/loading_spinner';
-
-// export interface AddMembersButtonProps {
-//     totalUsers?: number;
-//     usersLimit: number;
-//     channel: Channel;
-//     setHeader: React.ReactNode;
-// }
-
-// const AddMembersButton: React.FC<AddMembersButtonProps> = ({totalUsers, usersLimit, channel, setHeader}: AddMembersButtonProps) => {
-//     if (!totalUsers) {
-//         return (<LoadingSpinner/>);
-//     }
-
-//     const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
-//     const inviteUsers = totalUsers < usersLimit;
-//     const currentTeamId = useSelector(getCurrentTeamId);
-
-//     return (
-//         <TeamPermissionGate
-//             teamId={currentTeamId}
-//             permissions={[Permissions.ADD_USER_TO_TEAM, Permissions.INVITE_GUEST]}
-//         >
-//             {inviteUsers && !isPrivate ? lessThanMaxFreeUsers(setHeader) : moreThanMaxFreeUsers(channel, setHeader)}
-//         </TeamPermissionGate>
-//     );
-// };
-
-// const lessThanMaxFreeUsers = (setHeader: React.ReactNode) => {
-//     return (
-//         <>
-//             {setHeader}
-//             <div className='LessThanMaxFreeUsers'>
-//                 <EmptyStateThemeableSvg
-//                     width={128}
-//                     height={113}
-//                 />
-//                 <div className='titleAndButton'>
-//                     <FormattedMessage
-//                         id='intro_messages.inviteOthersToWorkspace.title'
-//                         defaultMessage='Let’s add some people to the workspace!'
-//                     />
-//                     <ToggleModalButtonRedux
-//                         accessibilityLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
-//                         id='introTextInvite'
-//                         className='intro-links color--link cursor--pointer'
-//                         modalId={ModalIdentifiers.INVITATION}
-//                         dialogType={InvitationModal}
-//                     >
-//                         <FormattedMessage
-//                             id='generic_icons.add'
-//                             defaultMessage='Add Icon'
-//                         >
-//                             {(title: string) => (
-//                                 <i
-//                                     className='icon-email-plus-outline'
-//                                     title={title}
-//                                 />
-//                             )}
-//                         </FormattedMessage>
-//                         <FormattedMessage
-//                             id='intro_messages.inviteOthersToWorkspace.button'
-//                             defaultMessage='Invite others to the workspace'
-//                         />
-//                     </ToggleModalButtonRedux>
-//                 </div>
-//             </div>
-//         </>
-//     );
-// };
-
-// const moreThanMaxFreeUsers = (channel: Channel, setHeader: React.ReactNode) => {
-//     const modal = channel.group_constrained ? AddGroupsToChannelModal : ChannelInviteModal;
-//     const channelIsArchived = channel.delete_at !== 0;
-//     if (channelIsArchived) {
-//         return null;
-//     }
-//     const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
-//     return (
-//         <div className='MoreThanMaxFreeUsersWrapper'>
-//             <div className='MoreThanMaxFreeUsers'>
-//                 <ChannelPermissionGate
-//                     channelId={channel.id}
-//                     teamId={channel.team_id}
-//                     permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_MEMBERS : Permissions.MANAGE_PUBLIC_CHANNEL_MEMBERS]}
-//                 >
-//                     <ToggleModalButton
-//                         className='intro-links color--link'
-//                         dialogType={modal}
-//                         dialogProps={{channel}}
-//                     >
-//                         <FormattedMessage
-//                             id='generic_icons.add'
-//                             defaultMessage='Add Icon'
-//                         >
-//                             {(title: string) => (
-//                                 <i
-//                                     className='icon-account-plus-outline'
-//                                     title={title}
-//                                 />
-//                             )}
-//                         </FormattedMessage>
-//                         {isPrivate && channel.group_constrained &&
-//                             <FormattedMessage
-//                                 id='intro_messages.inviteGropusToChannel.button'
-//                                 defaultMessage='Add groups to this private channel'
-//                             />}
-//                         {isPrivate && !channel.group_constrained &&
-//                             <FormattedMessage
-//                                 id='intro_messages.inviteMembersToPrivateChannel.button'
-//                                 defaultMessage='Add members to this private channel'
-//                             />}
-//                         {!isPrivate &&
-//                             <FormattedMessage
-//                                 id='intro_messages.inviteMembersToChannel.button'
-//                                 defaultMessage='Add members to this channel'
-//                             />}
-//                     </ToggleModalButton>
-//                 </ChannelPermissionGate>
-//             </div>
-//             {setHeader}
-//         </div>
-//     );
-// };
-
-// export default React.memo(AddMembersButton);