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

package/src/components/post_view/reaction/__snapshots__/reaction.test.jsx.snap

@@ -1,339 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/Reaction should apply read-only class if user does not have permission to add reaction 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={500}
-  onEnter={[Function]}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id="post_id_1-smile-reaction"
-      placement="right"
-    >
-      <Memo(Connect(ReactionTooltip))
-        canAddReaction={false}
-        canRemoveReaction={true}
-        currentUserReacted={false}
-        emojiName="smile"
-        reactions={
-          Array [
-            Object {
-              "user_id": "user_id_2",
-            },
-            Object {
-              "user_id": "user_id_3",
-            },
-          ]
-        }
-      />
-    </Tooltip>
-  }
-  placement="top"
-  shouldUpdatePosition={true}
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
-  }
->
-  <button
-    aria-label="react with smile"
-    className="Reaction Reaction--unreacted Reaction--read-only"
-    id="postReaction-post_id_1-smile"
-    onClick={[Function]}
-  >
-    <span
-      className="d-flex align-items-center"
-    >
-      <span
-        className="Reaction__emoji emoticon"
-        style={
-          Object {
-            "backgroundImage": "url(emoji_image_url)",
-          }
-        }
-      />
-      <span
-        className="Reaction__count"
-      >
-        <span
-          className="Reaction__number"
-        >
-          <span
-            className="Reaction__number--display"
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--unreacted"
-            onAnimationEnd={[Function]}
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--reacted"
-          >
-            3
-          </span>
-        </span>
-      </span>
-    </span>
-  </button>
-</OverlayTrigger>
-`;
-
-exports[`components/post_view/Reaction should apply read-only class if user does not have permission to remove reaction 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={500}
-  onEnter={[Function]}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id="post_id_1-smile-reaction"
-      placement="right"
-    >
-      <Memo(Connect(ReactionTooltip))
-        canAddReaction={true}
-        canRemoveReaction={false}
-        currentUserReacted={true}
-        emojiName="smile"
-        reactions={
-          Array [
-            Object {
-              "user_id": "user_id_2",
-            },
-            Object {
-              "user_id": "user_id_3",
-            },
-          ]
-        }
-      />
-    </Tooltip>
-  }
-  placement="top"
-  shouldUpdatePosition={true}
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
-  }
->
-  <button
-    aria-label="react with smile"
-    className="Reaction Reaction--reacted Reaction--read-only"
-    id="postReaction-post_id_1-smile"
-    onClick={[Function]}
-  >
-    <span
-      className="d-flex align-items-center"
-    >
-      <span
-        className="Reaction__emoji emoticon"
-        style={
-          Object {
-            "backgroundImage": "url(emoji_image_url)",
-          }
-        }
-      />
-      <span
-        className="Reaction__count"
-      >
-        <span
-          className="Reaction__number"
-        >
-          <span
-            className="Reaction__number--display"
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--unreacted"
-            onAnimationEnd={[Function]}
-          >
-            1
-          </span>
-          <span
-            className="Reaction__number--reacted"
-          >
-            2
-          </span>
-        </span>
-      </span>
-    </span>
-  </button>
-</OverlayTrigger>
-`;
-
-exports[`components/post_view/Reaction should match snapshot 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={500}
-  onEnter={[Function]}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id="post_id_1-smile-reaction"
-      placement="right"
-    >
-      <Memo(Connect(ReactionTooltip))
-        canAddReaction={true}
-        canRemoveReaction={true}
-        currentUserReacted={false}
-        emojiName="smile"
-        reactions={
-          Array [
-            Object {
-              "user_id": "user_id_2",
-            },
-            Object {
-              "user_id": "user_id_3",
-            },
-          ]
-        }
-      />
-    </Tooltip>
-  }
-  placement="top"
-  shouldUpdatePosition={true}
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
-  }
->
-  <button
-    aria-label="react with smile"
-    className="Reaction Reaction--unreacted "
-    id="postReaction-post_id_1-smile"
-    onClick={[Function]}
-  >
-    <span
-      className="d-flex align-items-center"
-    >
-      <span
-        className="Reaction__emoji emoticon"
-        style={
-          Object {
-            "backgroundImage": "url(emoji_image_url)",
-          }
-        }
-      />
-      <span
-        className="Reaction__count"
-      >
-        <span
-          className="Reaction__number"
-        >
-          <span
-            className="Reaction__number--display"
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--unreacted"
-            onAnimationEnd={[Function]}
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--reacted"
-          >
-            3
-          </span>
-        </span>
-      </span>
-    </span>
-  </button>
-</OverlayTrigger>
-`;
-
-exports[`components/post_view/Reaction should match snapshot when a current user reacted to a post 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  delayShow={500}
-  onEnter={[Function]}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id="post_id_1-smile-reaction"
-      placement="right"
-    >
-      <Memo(Connect(ReactionTooltip))
-        canAddReaction={true}
-        canRemoveReaction={true}
-        currentUserReacted={true}
-        emojiName="smile"
-        reactions={
-          Array [
-            Object {
-              "user_id": "user_id_1",
-            },
-            Object {
-              "user_id": "user_id_2",
-            },
-          ]
-        }
-      />
-    </Tooltip>
-  }
-  placement="top"
-  shouldUpdatePosition={true}
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
-  }
->
-  <button
-    aria-label="remove reaction smile"
-    className="Reaction Reaction--reacted "
-    id="postReaction-post_id_1-smile"
-    onClick={[Function]}
-  >
-    <span
-      className="d-flex align-items-center"
-    >
-      <span
-        className="Reaction__emoji emoticon"
-        style={
-          Object {
-            "backgroundImage": "url(emoji_image_url)",
-          }
-        }
-      />
-      <span
-        className="Reaction__count"
-      >
-        <span
-          className="Reaction__number"
-        >
-          <span
-            className="Reaction__number--display"
-          >
-            2
-          </span>
-          <span
-            className="Reaction__number--unreacted"
-            onAnimationEnd={[Function]}
-          >
-            1
-          </span>
-          <span
-            className="Reaction__number--reacted"
-          >
-            2
-          </span>
-        </span>
-      </span>
-    </span>
-  </button>
-</OverlayTrigger>
-`;
-
-exports[`components/post_view/Reaction should return null/empty if no emojiImageUrl 1`] = `""`;

package/src/components/post_view/reaction/index.ts

@@ -1,120 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-// import {bindActionCreators, Dispatch} from 'redux';
-
-// import {createSelector} from 'reselect';
-
-// import {removeReaction} from 'mattermost-redux/actions/posts';
-// import {getMissingProfilesByIds} from 'mattermost-redux/actions/users';
-// import {getCurrentUserId, getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-// import {getChannel} from 'mattermost-redux/selectors/entities/channels';
-// import {getCustomEmojisByName} from 'mattermost-redux/selectors/entities/emojis';
-// import {getEmojiImageUrl} from 'mattermost-redux/utils/emoji_utils';
-// import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles';
-// import Permissions from 'mattermost-redux/constants/permissions';
-// import Constants from 'mattermost-redux/constants/general';
-// import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
-// import {GlobalState} from 'mattermost-redux/types/store';
-// import {ClientConfig, ClientLicense} from 'mattermost-redux/types/config';
-// import {GenericAction} from 'mattermost-redux/types/actions';
-// import {Emoji as EmojiType} from 'mattermost-redux/types/emojis';
-// import {UserProfile} from 'mattermost-redux/types/users';
-// import {Post} from 'mattermost-redux/types/posts';
-// import {Reaction as ReactionType} from 'mattermost-redux/types/reactions';
-
-// import {addReaction} from 'actions/post_actions.jsx';
-
-// import * as Emoji from 'utils/emoji.jsx';
-
-// import Reaction from './reaction';
-
-// type Props = {
-//     emojiName: string;
-//     post: Post;
-//     reactions: ReactionType[];
-// };
-
-// function makeMapStateToProps() {
-//     const didCurrentUserReact = createSelector(
-//         'didCurrentUserReact',
-//         getCurrentUserId,
-//         (state: GlobalState, reactions: ReactionType[]) => reactions,
-//         (currentUserId: string, reactions: ReactionType[]) => {
-//             return reactions.some((reaction) => reaction.user_id === currentUserId);
-//         },
-//     );
-
-//     return function mapStateToProps(state: GlobalState, ownProps: Props) {
-//         const config = getConfig(state);
-//         const license = getLicense(state);
-//         const currentUser = getCurrentUser(state);
-
-//         let emoji;
-//         if (Emoji.EmojiIndicesByAlias.has(ownProps.emojiName)) {
-//             emoji = Emoji.Emojis[Emoji.EmojiIndicesByAlias.get(ownProps.emojiName) as number];
-//         } else {
-//             const emojis = getCustomEmojisByName(state);
-//             emoji = emojis.get(ownProps.emojiName);
-//         }
-
-//         let emojiImageUrl = '';
-//         if (emoji) {
-//             emojiImageUrl = getEmojiImageUrl(emoji as EmojiType);
-//         }
-//         const channel = getChannel(state, ownProps.post.channel_id) || {};
-//         const channelIsArchived = channel.delete_at !== 0;
-//         const teamId = channel.team_id;
-//         const currentUserId = getCurrentUserId(state);
-//         let canAddReaction = false;
-//         let canRemoveReaction = false;
-
-//         if (!channelIsArchived) {
-//             canAddReaction = checkReactionAction(state, teamId, ownProps.post.channel_id, channel.name, config, license, currentUser, Permissions.REMOVE_REACTION);
-//             canRemoveReaction = checkReactionAction(state, teamId, ownProps.post.channel_id, channel.name, config, license, currentUser, Permissions.ADD_REACTION);
-//         }
-
-//         return {
-//             currentUserId,
-//             reactionCount: ownProps.reactions.length,
-//             canAddReaction,
-//             canRemoveReaction,
-//             emojiImageUrl,
-//             currentUserReacted: didCurrentUserReact(state, ownProps.reactions),
-//         };
-//     };
-// }
-
-// function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
-//     return {
-//         actions: bindActionCreators({
-//             addReaction,
-//             removeReaction,
-//             getMissingProfilesByIds,
-//         }, dispatch),
-//     };
-// }
-
-// function checkReactionAction(
-//     state: GlobalState,
-//     teamId: string,
-//     channelId: string,
-//     channelName: string,
-//     config: Partial<ClientConfig>,
-//     license: ClientLicense,
-//     user: UserProfile,
-//     permission: string,
-// ) {
-//     if (!haveIChannelPermission(state, teamId, channelId, permission)) {
-//         return false;
-//     }
-
-//     if (channelName === Constants.DEFAULT_CHANNEL && config.ExperimentalTownSquareIsReadOnly === 'true' && license.IsLicensed === 'true' && !user.roles.includes('system_admin')) {
-//         return false;
-//     }
-
-//     return true;
-// }
-
-// export default connect(makeMapStateToProps, mapDispatchToProps)(Reaction);

package/src/components/post_view/reaction/reaction.scss

@@ -1,157 +0,0 @@
-@import 'compass/utilities';
-@import 'compass/css3';
-@import 'sass/utils/mixins';
-@import 'sass/utils/functions';
-
-.Reaction {
-    @include button-style--none;
-    @include user-select(none);
-    @include border-radius(4px);
-
-    display: inline-flex;
-    min-width: 28px;
-    height: 24px;
-    align-items: center;
-    padding: 0 5px;
-    border: 1px solid transparent;
-    margin: 0 4px 4px 0;
-    background: rgba(var(--center-channel-color-rgb), 0.08);
-    color: rgba(var(--center-channel-color-rgb), 0.64);
-    cursor: pointer;
-    fill: rgba(var(--center-channel-color-rgb), 0.56);
-    font-size: 11px;
-    font-weight: 600;
-    transition:
-        border-color 100ms linear,
-        background-color 100ms linear;
-
-    &:hover {
-        border: solid 1px rgba(#3d3c40, 0.16);
-        background-color: transparent;
-        color: rgba(#3d3c40, 0.72);
-    }
-
-    &:not(.Reaction--reacted) {
-        &:hover {
-            border-color: rgba(var(--center-channel-color-rgb), 0.16);
-            background-color: v(center-channel-bg);
-            color: rgba(var(--center-channel-color-rgb), 0.72);
-            fill: rgba(var(--center-channel-color-rgb), 0.72);
-        }
-
-        &:active {
-            background-color: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
-            fill: v(button-bg);
-        }
-    }
-
-    &.Reaction--read-only {
-        cursor: default;
-    }
-
-    &__add {
-        position: relative;
-        font-size: 20px;
-        line-height: 0;
-        vertical-align: middle;
-    }
-
-    &__emoji {
-        min-width: 16px;
-        max-width: 16px;
-        min-height: 16px;
-        max-height: 16px;
-        margin: 0 2px 0 0;
-        vertical-align: middle;
-    }
-
-    &__count {
-        display: flex;
-        overflow: hidden;
-        flex-direction: row-reverse;
-        justify-content: flex-start;
-        line-height: 16px;
-        pointer-events: none;
-    }
-
-    &.Reaction--reacted,
-    &.Reaction--reacting {
-        border-color: v(button-bg);
-        background-color: rgba(var(--button-bg-rgb), 0.08);
-        color: v(button-bg);
-
-        &:hover {
-            border-color: v(button-bg);
-            background: v(center-channel-bg);
-        }
-
-        &:active {
-            background-color: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
-            fill: v(button-bg);
-        }
-    }
-
-    &.Reaction--reacting {
-        transition: border-color 200ms ease-in-out;
-
-        .Reaction__number--display {
-            visibility: hidden;
-        }
-
-        .Reaction__number--reacted,
-        .Reaction__number--unreacted {
-            display: inline-block;
-            animation-duration: 200ms;
-            animation-fill-mode: forwards;
-            animation-name: reacted-anim;
-            animation-timing-function: ease-in-out;
-        }
-    }
-
-    &.Reaction--unreacting {
-        transition: border-color 200ms ease-in-out;
-
-        .Reaction__number--display {
-            visibility: hidden;
-        }
-
-        .Reaction__number--reacted,
-        .Reaction__number--unreacted {
-            display: inline-block;
-            animation-direction: reverse;
-            animation-duration: 200ms;
-            animation-fill-mode: forwards;
-            animation-name: reacted-anim;
-            animation-timing-function: ease-in-out;
-        }
-    }
-
-    .Reaction__number {
-        position: relative;
-
-        &--display {
-            display: inline-block;
-        }
-
-        &--reacted {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            display: none;
-        }
-
-        &--unreacted {
-            position: absolute;
-            top: 0%;
-            left: 0;
-            display: none;
-        }
-    }
-}
-
-@keyframes reacted-anim {
-    from { transform: translateY(0%); }
-    to { transform: translateY(-100%); }
-}

package/src/components/post_view/reaction/reaction.test.jsx

@@ -1,80 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {shallow} from 'enzyme';
-
-// import Reaction from 'components/post_view/reaction/reaction';
-
-// describe('components/post_view/Reaction', () => {
-//     const post = {id: 'post_id_1'};
-//     const reactions = [{user_id: 'user_id_2'}, {user_id: 'user_id_3'}];
-//     const emojiName = 'smile';
-//     const actions = {
-//         addReaction: jest.fn(),
-//         getMissingProfilesByIds: jest.fn(),
-//         removeReaction: jest.fn(),
-//     };
-//     const currentUserId = 'user_id_1';
-
-//     const baseProps = {
-//         canAddReaction: true,
-//         canRemoveReaction: true,
-//         currentUserId,
-//         post,
-//         currentUserReacted: false,
-//         emojiName,
-//         reactionCount: 2,
-//         reactions,
-//         emojiImageUrl: 'emoji_image_url',
-//         actions,
-//     };
-
-//     test('should match snapshot', () => {
-//         const wrapper = shallow(<Reaction {...baseProps}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should match snapshot when a current user reacted to a post', () => {
-//         const newReactions = [{user_id: 'user_id_1'}, {user_id: 'user_id_2'}];
-//         const props = {
-//             ...baseProps,
-//             currentUserReacted: true,
-//             reactions: newReactions,
-//         };
-//         const wrapper = shallow(<Reaction {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should return null/empty if no emojiImageUrl', () => {
-//         const props = {...baseProps, emojiImageUrl: ''};
-//         const wrapper = shallow(<Reaction {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should apply read-only class if user does not have permission to add reaction', () => {
-//         const props = {...baseProps, canAddReaction: false};
-//         const wrapper = shallow(<Reaction {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should apply read-only class if user does not have permission to remove reaction', () => {
-//         const newCurrentUserId = 'user_id_2';
-//         const props = {
-//             ...baseProps,
-//             canRemoveReaction: false,
-//             currentUserId: newCurrentUserId,
-//             currentUserReacted: true,
-//         };
-//         const wrapper = shallow(<Reaction {...props}/>);
-//         expect(wrapper).toMatchSnapshot();
-//     });
-
-//     test('should have called actions.getMissingProfilesByIds when loadMissingProfiles is called', () => {
-//         const wrapper = shallow(<Reaction {...baseProps}/>);
-//         wrapper.instance().loadMissingProfiles();
-
-//         expect(actions.getMissingProfilesByIds).toHaveBeenCalledTimes(1);
-//         expect(actions.getMissingProfilesByIds).toHaveBeenCalledWith([reactions[0].user_id, reactions[1].user_id]);
-//     });
-// });