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

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

@@ -1,270 +0,0 @@
-import React, { useState } from 'react';
-import PostContext from '../post_context';
-import PostAriaLabelDiv from '../post_aria_label_div';
-import { PostPreHeader } from '../post_pre_header/post_pre_header';
-import { useSetting } from '@adminide-stack/platform-client';
-import { PostHeader } from '../post_header/post_header';
-import { PostProfilePicture } from '../post_profile_picture/post_profile_picture';
-import * as PostUtils from '../../../utils/post_utils';
-import { PostBody } from '../post_body/post_body';
-import { ThreadFooter } from '../threading/channel_threads/thread_footer';
-import { ChannelIdentifierRouter } from '../channel_layout/channel_identifier_router';
-
-export const Post = (props) => {
-    const [dropdownOpened, setDropdownOpened] = useState(false);
-    const [fileDropdownOpened, setFileDropdownOpened] = useState(false);
-    const [hover, setHover] = useState(false);
-    const [alt, setAlt] = useState(false);
-    const [a11yActive, setA11yActive] = useState(false);
-    const [ariaHidden, setAriaHidden] = useState(true);
-    const [fadeOutHighlight, setFadeOutHighlight] = useState(false);
-    const [isPinned, setIsPinned] = useState(true);
-    const [isFlagged, setIsFlagged] = useState(true);
-    // const externalResource = generateUri('posts' as any, { _id: src.id }, 'props');
-    // const { updateConfiguration, loading, } = useSetting({ configKey: 'isPinned', overrides: { externalResource: externalResource }})
-    // updateConfiguration({ updateKey: 'isPInned', value: 'false', target: ConfigureationTarget.Machine, updateOverrides: { externalResource }})
-    const post = {
-        edit_at: 0,
-        original_id: '',
-        hashtags: '',
-        pending_post_id: '',
-        reply_count: 0,
-        metadata: {
-            embeds: [],
-            emojis: [],
-            files: [],
-            images: {},
-            reactions: [],
-        },
-        channel_id: '',
-        create_at: 0,
-        delete_at: 0,
-        id: 'id',
-        is_pinned: false,
-        message: 'post message',
-        props: {
-            from_bot: {},
-            from_webhook: {},
-        },
-        root_id: '123',
-        type: 'system_add_remove',
-        update_at: 0,
-        user_id: 'user_id',
-    };
-    const { hasReplies, isCollapsedThreadsEnabled } = props;
-
-    console.log(props, 'props');
-    const isSystemMessage = PostUtils.isSystemMessage(post as any);
-    const isMeMessage = null;
-    const fromAutoResponder = PostUtils.fromAutoResponder(post as any);
-    const fromWebhook = post && post.props && post.props.from_webhook === 'true';
-    const fromBot = post && post.props && post.props.from_bot === 'true';
-
-    const handleDropdownOpened = (opened) => {
-        if (props.togglePostMenu) {
-            props.togglePostMenu(opened);
-        }
-
-        setDropdownOpened(opened);
-    };
-    const postRef = React.createRef();
-
-    const handlePostClick = (e) => {
-        console.log('handle post');
-    };
-
-    const hasSameRoot = (props) => {
-        const post = props.post;
-
-        if (props.isFirstReply) {
-            return false;
-        } else if (!post?.root_id && !props.previousPostIsComment && props.consecutivePostByUser) {
-            return true;
-        } else if (post?.root_id) {
-            return true;
-        }
-
-        return false;
-    };
-
-    let profilePic;
-    const hideProfilePicture =
-        hasSameRoot(props) && props.consecutivePostByUser && !post.root_id && !hasReplies && !fromBot;
-    if (!hideProfilePicture) {
-        profilePic = <PostProfilePicture compactDisplay={props.compactDisplay} post={post} userId={post.user_id} />;
-
-        if (fromAutoResponder) {
-            profilePic = <span className="auto-responder">{profilePic}</span>;
-        }
-    }
-
-    let centerClass;
-    if (props.center) {
-        centerClass = 'center';
-    }
-
-    const getClassName = (post, isSystemMessage, isMeMessage, fromWebhook, fromAutoResponder, fromBot) => {
-        let className = 'post';
-
-        if (post.failed || post.state === 'DELETED') {
-            className += ' post--hide-controls';
-        }
-
-        if (!fadeOutHighlight && props.shouldHighlight) {
-            className += ' post--highlight';
-            if (post.is_pinned || props.isFlagged) {
-                className += ' post--pinned-or-flagged-highlight';
-            }
-        }
-
-        let rootUser = '';
-        if (hasSameRoot(props)) {
-            rootUser = 'same--root';
-        } else {
-            rootUser = 'other--root';
-        }
-
-        if (fromBot) {
-            className += ' post--bot';
-        }
-
-        let currentUserCss = '';
-        if (props.currentUserId === post.user_id && !fromWebhook && !isSystemMessage) {
-            currentUserCss = 'current--user';
-        }
-
-        let sameUserClass = '';
-        if (props.consecutivePostByUser) {
-            sameUserClass = 'same--user';
-        }
-
-        let postType = '';
-        if (post?.root_id && post?.root_id?.length > 0) {
-            postType = 'post--comment';
-        } else if (props.hasReplies) {
-            postType = 'post--root';
-            sameUserClass = '';
-            rootUser = '';
-        }
-
-        if (isSystemMessage || isMeMessage) {
-            className += ' post--system';
-            if (isSystemMessage) {
-                currentUserCss = '';
-                postType = '';
-                rootUser = '';
-            }
-        }
-
-        if (fromAutoResponder) {
-            postType = 'post--comment same--root';
-        }
-
-        if (props.compactDisplay) {
-            className += ' post--compact';
-        }
-
-        if (dropdownOpened || fileDropdownOpened || a11yActive) {
-            className += ' post--hovered';
-        }
-
-        if (post.is_pinned || props.isFlagged) {
-            className += ' post--pinned-or-flagged';
-        }
-
-        if (
-            (alt && !(props.channelIsArchived || post.system_post_ids)) ||
-            (props.isCollapsedThreadsEnabled && (fromAutoResponder || !isSystemMessage))
-        ) {
-            className += ' cursor--pointer';
-        }
-
-        return className + ' ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss;
-    };
-    const handleCommentClick = (e) => {
-        e.preventDefault();
-
-        const post = props.post;
-        if (!post) {
-            return;
-        }
-        props.actions.selectPost(post);
-    };
-
-    const handleCardClick = (post) => {
-        if (!post) {
-            return;
-        }
-        props.actions.selectPostCard(post);
-    };
-
-    const handleFileDropdownOpened = (opened) => {
-        setFileDropdownOpened(true);
-    };
-
-    return (
-        <PostContext.Provider value={{ handlePopupOpened: handleDropdownOpened }}>
-            <PostAriaLabelDiv
-                // ref={postRef}
-                id={'post_' + post.id}
-                data-testid="postView"
-                role="listitem"
-                className={`a11y__section ${getClassName(
-                    post,
-                    isSystemMessage,
-                    isMeMessage,
-                    fromWebhook,
-                    fromAutoResponder,
-                    fromBot,
-                )}`}
-                // tabIndex="0"
-                onMouseOver={() => setHover(true)}
-                onMouseLeave={() => setHover(false)}
-                onTouchStart={() => setHover(true)}
-                onClick={handlePostClick}
-                aria-atomic={true}
-                post={post}
-            >
-                <PostPreHeader isFlagged={props.isFlagged} isPinned={post.is_pinned} channelId={post.channel_id} />
-                <div
-                    role="application"
-                    data-testid="postContent"
-                    className={'post__content ' + centerClass}
-                    aria-hidden={ariaHidden}
-                >
-                    <div className="post__img">{profilePic}</div>
-                    <div>
-                        <PostHeader
-                            post={post}
-                            handleCommentClick={handleCommentClick}
-                            handleCardClick={handleCardClick}
-                            handleDropdownOpened={handleDropdownOpened}
-                            compactDisplay={props.compactDisplay}
-                            isFirstReply={props.isFirstReply}
-                            showTimeWithoutHover={!hideProfilePicture}
-                            hover={hover || a11yActive || fileDropdownOpened}
-                            isLastPost={props.isLastPost}
-                        />
-                        <PostBody
-                            post={post}
-                            handleCommentClick={handleCommentClick}
-                            compactDisplay={props.compactDisplay}
-                            isCommentMention={props.isCommentMention}
-                            isFirstReply={props.isFirstReply}
-                            handleFileDropdownOpened={handleFileDropdownOpened}
-                        />
-                        <ThreadFooter threadId={post.id} />
-                        {/* {isCollapsedThreadsEnabled && !post.root_id && (hasReplies || post.is_following) ? (
-                            <ThreadFooter threadId={post.id} />
-                        ) : null} */}
-                        <ChannelIdentifierRouter />
-                    </div>
-                </div>
-            </PostAriaLabelDiv>
-        </PostContext.Provider>
-    );
-};
-function generateUri(arg0: any, arg1: { _id: any; }, arg2: string) {
-    throw new Error('Function not implemented.');
-}
-

package/src/components/post/post_aria_label_div.tsx

@@ -1,43 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, { useRef } from 'react';
-// import { useSelector } from 'react-redux';
-// import { useIntl } from 'react-intl';
-
-// import {Post} from 'mattermost-redux/types/posts';
-
-// import {GlobalState} from 'types/store';
-
-// import {makeCreateAriaLabelForPost} from 'utils/post_utils';
-
-type Props = React.HTMLProps<HTMLDivElement> & {
-    labelPrefix?: string;
-    post: any;
-};
-
-const PostAriaLabelDiv = React.forwardRef((props: Props, ref: React.Ref<HTMLDivElement>) => {
-    const { children, labelPrefix, post, ...otherProps } = props;
-
-    // const intl = useIntl();
-
-    // const createAriaLabelForPost = useRef(makeCreateAriaLabelForPost());
-    // let ariaLabel = useSelector<GlobalState, string>((state) => createAriaLabelForPost.current(state, post)(intl));
-    // if (labelPrefix) {
-    //     ariaLabel = labelPrefix + ariaLabel;
-    // }
-
-    return (
-        <div
-            ref={ref}
-            // aria-label={ariaLabel}
-            {...otherProps}
-        >
-            {children}
-        </div>
-    );
-});
-
-PostAriaLabelDiv.displayName = 'PostAriaLabelDiv';
-
-export default PostAriaLabelDiv;

package/src/components/post/post_body/post_body.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import { PostBodyAdditionalContent } from '../post_body_additional_content/post_body_additional_content';
-import { FailedPostOptions } from '../failed_post_options';
-import { PostMessageView } from '../post_message_view';
-
-export const PostBody = (props) => {
-    console.log({ props }, 'post body');
-
-    const post = props.post;
-    const parentPost = props.parentPost;
-    const parentPostUser = props.parentPostUser;
-
-    let comment;
-    let postClass = '';
-    let isEphemeral;
-    // const isEphemeral = Utils.isPostEphemeral(post);
-
-    // const hasPlugin =
-    //     (post.type && props.pluginPostTypes.hasOwnProperty(post.type)) ||
-    //     (post.props && post.props.type && props.pluginPostTypes.hasOwnProperty(post.props.type));
-
-    let failedOptions;
-    console.log(props.post,"failed post")
-    if (props?.post?.failed) {
-        postClass += ' post--fail';
-        failedOptions = <FailedPostOptions post={props.post} />;
-    }
-
-    const messageWrapper = (
-        <React.Fragment>
-            {failedOptions}
-            {/* {this.state.sending && <LoadingSpinner />} */}
-            <PostMessageView post={props.post} compactDisplay={props.compactDisplay} hasMention={true} />
-        </React.Fragment>
-    );
-
-    // let messageWithAdditionalContent;
-    // if (props.post.state === 'DELETED' || hasPlugin) {
-    //     messageWithAdditionalContent = messageWrapper;
-    // } else {
-    //     messageWithAdditionalContent = (
-    //         // <PostBodyAdditionalContent post={props.post} isEmbedVisible={props.isEmbedVisible}>
-    //             {messageWrapper}
-    //         // </PostBodyAdditionalContent>
-    //     );
-    // }
-
-    const messageWithAdditionalContent = (
-        <PostBodyAdditionalContent post={props.post} isEmbedVisible={props.isEmbedVisible}>
-            {messageWrapper}
-        </PostBodyAdditionalContent>
-    );
-
-    // if (PostUtils.isEdited(props.post)) {
-    //     postClass += ' post--edited';
-    // }
-
-    let mentionHighlightClass = '';
-    if (props.isCommentMention) {
-        mentionHighlightClass = 'mention-comment';
-    }
-
-    let ephemeralPostClass = '';
-    if (isEphemeral) {
-        ephemeralPostClass = 'post--ephemeral';
-    }
-    return (
-        <div>
-            {comment}
-            <div
-                id={`${post.id}_message`}
-                className={`post__body ${mentionHighlightClass} ${ephemeralPostClass} ${postClass}`}
-            >
-                {messageWithAdditionalContent}
-                {/* {fileAttachmentHolder} */}
-                {/* <ReactionList post={post} isReadOnly={props.isReadOnly} /> */}
-            </div>
-        </div>
-    );
-};

package/src/components/post/post_body_additional_content/post_body_additional_content.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-
-export const PostBodyAdditionalContent = (props) => {
-    console.log({ props }, 'PostBodyAdditionalContent');
-    return props.children;
-};

package/src/components/post/post_context.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-const PostContext = React.createContext({
-    // Post component event handler that should be
-    // called when any child component opens/closes a
-    // popup type component.
-    handlePopupOpened: null,
-});
-
-export default PostContext;

package/src/components/post/post_header/index.ts

@@ -1,38 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {getConfig} from 'mattermost-redux/selectors/entities/general';
-// import {getUser} from 'mattermost-redux/selectors/entities/users';
-
-// import {Client4} from 'mattermost-redux/client';
-
-// import {GlobalState} from 'types/store';
-// import {isGuest} from 'utils/utils.jsx';
-
-// import PostHeader, {Props} from './post_header';
-
-// function mapStateToProps(state: GlobalState, ownProps: Props) {
-//     const config = getConfig(state);
-//     const enablePostUsernameOverride = config.EnablePostUsernameOverride === 'true';
-//     const enablePostIconOverride = config.EnablePostIconOverride === 'true';
-
-//     const overrideIconUrl = enablePostIconOverride && ownProps.post?.props?.override_icon_url;
-//     let overwriteIcon;
-//     if (overrideIconUrl) {
-//         overwriteIcon = Client4.getAbsoluteUrl(overrideIconUrl);
-//     }
-
-//     const user = getUser(state, ownProps.post.user_id);
-//     const isBot = Boolean(user && user.is_bot);
-
-//     return {
-//         enablePostUsernameOverride,
-//         isBot,
-//         overwriteIcon,
-//         isGuest: Boolean(user && isGuest(user)),
-//     };
-// }
-
-// export default connect(mapStateToProps)(PostHeader);

package/src/components/post/post_header/post_header.scss

@@ -1,53 +0,0 @@
-.post__header-set-custom-status {
-    display: none;
-}
-
-.post.current--user {
-    &.other--root,
-    &.post--root,
-    &.post--comment {
-        .post__header-set-custom-status {
-            display: block;
-            padding: 0 6px;
-            margin-left: 8px;
-            background: rgba(var(--center-channel-color-rgb), 0.08);
-            border-radius: 4px;
-
-            &-icon > svg {
-                width: 12px;
-                height: 12px;
-                margin-right: 4px;
-                margin-bottom: 2px;
-                background: inherit;
-                fill: rgba(var(--center-channel-color-rgb), 0.56);
-                vertical-align: middle;
-
-                &:hover {
-                    fill: rgba(var(--center-channel-color-rgb), 0.72);
-                }
-            }
-
-            &-text {
-                color: rgba(var(--center-channel-color-rgb), 0.56);
-                font-size: 12px;
-                font-weight: normal;
-
-                &:hover {
-                    color: rgba(var(--center-channel-color-rgb), 0.72);
-                }
-            }
-
-            &:active {
-                background: rgba(var(--button-bg-rgb), 0.08);
-
-                &-icon > svg {
-                    fill: var(--button-bg);
-                }
-
-                &-text {
-                    color: var(--button-bg);
-                }
-            }
-        }
-    }
-}

package/src/components/post/post_header/post_header.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { PostInfo } from '../post_info/post_info';
-import { PostHeaderCustomStatus } from './post_header_custom_status';
-import * as PostUtils from '../../../utils/post_utils';
-import Constants from '../../../packages/constants/constants';
-import { UserProfile } from '../user_profile/user_profile';
-
-import Badge from '../../../widgets/badges/badge';
-import BotBadge from '../../../widgets/badges/bot_badge';
-
-export const PostHeader = (props) => {
-    const { showTimeWithoutHover, hover, post } = props;
-
-    const isSystemMessage = PostUtils.isSystemMessage(post);
-    const fromAutoResponder = PostUtils.fromAutoResponder(post);
-    const fromWebhook = post?.props?.from_webhook === 'true';
-
-    console.log({props}, 'post header');
-
-    let userProfile = <UserProfile userId={post.user_id} hasMention={true} />;
-    let indicator;
-    let colon;
-
-    if (fromWebhook) {
-        if (post.props.override_username && props.enablePostUsernameOverride) {
-            userProfile = (
-                <UserProfile
-                    userId={post.user_id}
-                    hideStatus={true}
-                    overwriteName={post.props.override_username}
-                    overwriteIcon={props.overwriteIcon}
-                />
-            );
-        } else {
-            userProfile = <UserProfile userId={post.user_id} hideStatus={true} />;
-        }
-
-        if (!props.isBot) {
-            indicator = <BotBadge />;
-        }
-    } else if (fromAutoResponder) {
-        userProfile = <UserProfile userId={post.user_id} hideStatus={true} hasMention={true} />;
-
-        indicator = (
-            <Badge>
-                <FormattedMessage id="post_info.auto_responder" defaultMessage="AUTOMATIC REPLY" />
-            </Badge>
-        );
-    } else if (isSystemMessage && props.isBot) {
-        userProfile = <UserProfile userId={post.user_id} hideStatus={true} />;
-    } else if (isSystemMessage) {
-        userProfile = (
-            <UserProfile
-                userId=""
-                overwriteName={<FormattedMessage id="post_info.system" defaultMessage="System" />}
-                overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
-                disablePopover={true}
-            />
-        );
-    }
-
-    console.log(props.compactDispaly, "compact display")
-    if (props.compactDisplay) {
-        colon = <strong className="colon">{':'}</strong>;
-    }
-
-    const customStatus = (
-        <PostHeaderCustomStatus
-            userId={props.post.user_id}
-            isBot={props.isBot || fromWebhook}
-            isSystemMessage={isSystemMessage}
-        />
-    );
-    return (
-        <div className="post__header">
-            <div className="col col__name">
-                {userProfile}
-                {colon}
-                {indicator}
-                {customStatus}
-            </div>
-            <div className="col">
-                <PostInfo
-                    post={post}
-                    handleCommentClick={props.handleCommentClick}
-                    handleCardClick={props.handleCardClick}
-                    handleDropdownOpened={props.handleDropdownOpened}
-                    compactDisplay={props.compactDisplay}
-                    isFirstReply={props.isFirstReply}
-                    showTimeWithoutHover={showTimeWithoutHover}
-                    hover={hover}
-                    isLastPost={props.isLastPost}
-                />
-            </div>
-        </div>
-    );
-};

package/src/components/post/post_header/post_header_custom_status.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import EmojiIcon from '../../../widgets/icons/emoji_icon';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
-
-export const PostHeaderCustomStatus = (props) => {
-    const { userId, isSystemMessage, isBot } = props;
-
-    // const isCustomStatusSet = userCustomStatus && userCustomStatus.emoji;
-    // if (!customStatusEnabled || isSystemMessage || isBot) {
-    //     return null;
-    // }
-
-    // if (isCustomStatusSet) {
-    //     return (
-    //         <h1>here yysssssss</h1>
-    //         // <CustomStatusEmoji
-    //         //     userID={userId}
-    //         //     showTooltip={true}
-    //         //     emojiStyle={{
-    //         //         marginLeft: 4,
-    //         //         marginTop: 2,
-    //         //     }}
-    //         // />
-    //     );
-    // }
-
-    // This must be checked after checking that custom status is not null
-    // if (!showUpdateStatusButton) {
-    //     return null;
-    // }
-
-    const updateStatus = (event: React.MouseEvent) => {
-        console.log(event, 'post header button');
-        // event.preventDefault();
-        // dispatch(setStatusDropdown(true));
-    };
-    return (
-        <div className={css(styleSheet.postHeaderStyle)}>
-            <button onClick={updateStatus} className="post__header-set-custom-status cursor--pointer style--none">
-                <EmojiIcon className="post__header-set-custom-status-icon" />
-                <span className="post__header-set-custom-status-text">
-                    <FormattedMessage id="post_header.update_status" defaultMessage="Update your status" />
-                </span>
-            </button>
-        </div>
-    );
-};