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

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

@@ -1,106 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {mount} from 'enzyme';
-import * as React from 'react';
-import {createIntl, useIntl} from 'react-intl';
-
-import enMessages from 'i18n/en.json';
-import esMessages from 'i18n/es.json';
-
-import {mockStore} from 'tests/test_store';
-
-import {TestHelper} from 'utils/test_helper';
-
-import PostAriaLabelDiv from './post_aria_label_div';
-
-jest.mock('react-intl', () => ({
-    ...jest.requireActual('react-intl'),
-    useIntl: jest.fn(),
-}));
-
-describe('PostAriaLabelDiv', () => {
-    const author = TestHelper.getUserMock({
-        username: 'some_user',
-    });
-
-    const baseState = {
-        entities: {
-            emojis: {
-                customEmoji: {},
-            },
-            general: {
-                config: {},
-            },
-            posts: {
-                reactions: {},
-            },
-            preferences: {
-                myPreferences: {},
-            },
-            users: {
-                profiles: {
-                    [author.id]: author,
-                },
-            },
-        },
-    };
-
-    const baseProps = {
-        post: TestHelper.getPostMock({
-            user_id: author.id,
-            message: 'This is a test.',
-        }),
-    };
-
-    test('should render aria-label in the given locale', () => {
-        const {mountOptions} = mockStore(baseState);
-
-        useIntl.mockImplementation(() => createIntl({locale: 'en', messages: enMessages, defaultLocale: 'en'}));
-
-        let wrapper = mount(<PostAriaLabelDiv {...baseProps}/>, mountOptions);
-        let div = wrapper.childAt(0);
-
-        expect(div.prop('aria-label')).toContain(author.username);
-        expect(div.prop('aria-label')).toContain('January');
-
-        useIntl.mockImplementation(() => createIntl({locale: 'es', messages: esMessages, defaultLocale: 'es'}));
-
-        wrapper = mount(<PostAriaLabelDiv {...baseProps}/>, mountOptions);
-        div = wrapper.childAt(0);
-
-        expect(div.prop('aria-label')).toContain(author.username);
-        expect(div.prop('aria-label')).toContain('enero');
-    });
-
-    test('should pass other props through to the rendered div', () => {
-        const {mountOptions} = mockStore(baseState);
-
-        useIntl.mockImplementation(() => createIntl({locale: 'en', messages: enMessages, defaultLocale: 'en'}));
-
-        let props = baseProps;
-
-        let wrapper = mount(<PostAriaLabelDiv {...props}/>, mountOptions);
-        let div = wrapper.childAt(0);
-
-        expect(div.prop('className')).toBeUndefined();
-        expect(div.prop('data-something')).toBeUndefined();
-        expect(div.children()).toHaveLength(0);
-
-        props = {
-            ...props,
-            children: (
-                <p>{'This is a paragraph.'}</p>
-            ),
-            className: 'some-class',
-            'data-something': 'something',
-        };
-
-        wrapper = mount(<PostAriaLabelDiv {...props}/>, mountOptions);
-        div = wrapper.childAt(0);
-
-        expect(div.prop('className')).toBe('some-class');
-        expect(div.prop('data-something')).toBe('something');
-        expect(div.children()).toHaveLength(1);
-    });
-});

package/src/components/post_view/post_aria_label_div.tsx

@@ -1,48 +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: Post;
-// }
-
-// 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_view/post_attachment_container/__snapshots__/post_attachment_container.test.tsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PostAttachmentContainer should render correctly 1`] = `
-<div
-  className="attachment attachment--permalink"
-  onClick={[Function]}
-  role="button"
->
-  <div
-    className="attachment__content attachment__content--permalink"
-  >
-    <div
-      className="clearfix attachment__container attachment__container--permalink"
-    >
-      <div
-        className="attachment__body__wrap attachment__body__wrap--permalink"
-      >
-        <p>
-          some children
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/post_view/post_attachment_container/post_attachment_container.test.tsx

@@ -1,21 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {shallow} from 'enzyme';
-
-import * as React from 'react';
-
-import PostAttachmentContainer, {Props} from './post_attachment_container';
-
-describe('PostAttachmentContainer', () => {
-    const baseProps: Props = {
-        children: <p>{'some children'}</p>,
-        className: 'permalink',
-        link: '#',
-    };
-    test('should render correctly', () => {
-        const wrapper = shallow(<PostAttachmentContainer {...baseProps}/>);
-
-        expect(wrapper).toMatchSnapshot();
-    });
-});

package/src/components/post_view/post_attachment_container/post_attachment_container.tsx

@@ -1,40 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useCallback} from 'react';
-import {useNavigate} from '@remix-run/react';
-
-export type Props = {
-    className?: string;
-    children?: JSX.Element;
-    link: string;
-};
-const PostAttachmentContainer = (props: Props) => {
-    const {children, className, link} = props;
-    const navigate = useNavigate();
-    const handleOnClick = useCallback((e) => {
-        const {tagName} = e.target;
-        e.stopPropagation();
-        const elements = ['A', 'IMG', 'BUTTON'];
-        if (!elements.includes(tagName) && (e.target.getAttribute('role') !== 'button' && e.target.className !== `attachment attachment--${className}`)) {
-            navigate(link);
-        }
-    }, [navigate]);
-    return (
-        <div
-            className={`attachment attachment--${className}`}
-            role={'button'}
-            onClick={handleOnClick}
-        >
-            <div className={`attachment__content attachment__content--${className}`}>
-                <div className={`clearfix attachment__container attachment__container--${className}`}>
-                    <div className={`attachment__body__wrap attachment__body__wrap--${className}`}>
-                        {children}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default PostAttachmentContainer;

package/src/components/post_view/post_attachment_opengraph/get_nearest_point.test.ts

@@ -1,55 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {getNearestPoint} from './get_nearest_point';
-
-describe('getNearestPoint', () => {
-    test('should return nearest point', () => {
-        for (const data of [
-            {
-                points: [
-                    {width: 30, height: 40},
-                    {width: 50, height: 50},
-                    {width: 100, height: 2},
-                    {width: 500, height: 200},
-                    {width: 110, height: 20},
-                    {width: 10, height: 20},
-                ],
-                pivotPoint: {width: 10, height: 20},
-                nearestPoint: {width: 10, height: 20},
-                nearestPointLte: {width: 10, height: 20},
-            },
-            {
-                points: [
-                    {width: 50, height: 50},
-                    {width: 100, height: 2},
-                    {width: 500, height: 200},
-                    {width: 110, height: 20},
-                    {width: 100, height: 90},
-                    {width: 30, height: 40},
-                ],
-                pivotPoint: {width: 10, height: 20},
-                nearestPoint: {width: 30, height: 40},
-                nearestPointLte: {},
-            },
-            {
-                points: [
-                    {width: 50, height: 50},
-                    {width: 1, height: 1},
-                    {width: 15, height: 25},
-                    {width: 100, height: 2},
-                    {width: 500, height: 200},
-                    {width: 110, height: 20},
-                ],
-                pivotPoint: {width: 10, height: 20},
-                nearestPoint: {width: 15, height: 25},
-                nearestPointLte: {width: 1, height: 1},
-            },
-        ]) {
-            const nearestPoint = getNearestPoint(data.pivotPoint, data.points);
-
-            expect(nearestPoint.width).toEqual(data.nearestPoint.width);
-            expect(nearestPoint.height).toEqual(data.nearestPoint.height);
-        }
-    });
-});

package/src/components/post_view/post_attachment_opengraph/get_nearest_point.ts

@@ -1,31 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-type Point = {
-    height: number;
-    width: number;
-};
-
-type PartialPoint = Partial<Point>;
-
-function isPointDefined(point: PartialPoint): point is Point {
-    return point.height !== undefined && point.width !== undefined;
-}
-
-export function getDistanceBW2Points(point1: Point, point2: Point) {
-    return Math.sqrt(Math.pow(point1.width - point2.width, 2) + Math.pow(point1.height - point2.height, 2));
-}
-
-/**
- * Funtion to return nearest point of given pivot point.
- * It return two points one nearest and other nearest but having both coorditanes smaller than the given point's coordinates.
- */
-export function getNearestPoint<T extends PartialPoint>(pivot: Point, points: T[]): T {
-    return points.reduce((nearest, point) => {
-        if (isPointDefined(nearest) && isPointDefined(point) &&
-            getDistanceBW2Points(point, pivot) >= getDistanceBW2Points(nearest, pivot)) {
-            return nearest;
-        }
-        return point;
-    }, {} as T);
-}

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

@@ -1,48 +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 {getConfig} from 'mattermost-redux/selectors/entities/general';
-// import {getOpenGraphMetadataForUrl} from 'mattermost-redux/selectors/entities/posts';
-// import {getBool} from 'mattermost-redux/selectors/entities/preferences';
-// import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
-// import {GenericAction} from 'mattermost-redux/types/actions';
-
-// import {editPost} from 'actions/views/posts';
-// import {GlobalState} from 'types/store';
-// import {Preferences} from 'utils/constants';
-
-// import PostAttachmentOpenGraph, {Props} from './post_attachment_opengraph';
-
-// type OwnProps = Pick<Props, 'postId' | 'link'>;
-
-// function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
-//     const config = getConfig(state);
-
-//     return {
-//         currentUserId: getCurrentUserId(state),
-//         enableLinkPreviews: config.EnableLinkPreviews === 'true',
-//         openGraphData: getOpenGraphMetadataForUrl(
-//             state,
-//             ownProps.postId,
-//             ownProps.link,
-//         ),
-//         previewEnabled: getBool(
-//             state,
-//             Preferences.CATEGORY_DISPLAY_SETTINGS,
-//             Preferences.LINK_PREVIEW_DISPLAY,
-//             true,
-//         ),
-//     };
-// }
-
-// function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
-//     return {
-//         actions: bindActionCreators({editPost}, dispatch),
-//     };
-// }
-
-// export default connect(mapStateToProps, mapDispatchToProps)(PostAttachmentOpenGraph);

package/src/components/post_view/post_attachment_opengraph/post_attachment_opengraph.test.tsx

@@ -1,264 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {shallow} from 'enzyme';
-// import * as React from 'react';
-
-// import {OpenGraphMetadata, Post} from 'mattermost-redux/types/posts';
-
-// import ExternalImage from 'components/external_image';
-
-// import PostAttachmentOpenGraph, {getBestImageUrl} from './post_attachment_opengraph';
-
-// describe('PostAttachmentOpenGraph', () => {
-//     const imageUrl = 'http://mattermost.com/OpenGraphImage.jpg';
-//     const post = {
-//         id: 'post_id_1',
-//         root_id: 'root_id',
-//         channel_id: 'channel_id',
-//         create_at: 1,
-//         message: 'https://mattermost.com',
-//         metadata: {
-//             images: {
-//                 [imageUrl]: {
-//                     format: 'png',
-//                     frameCount: 0,
-//                     height: 100,
-//                     width: 100,
-//                 },
-//             },
-//         },
-//     } as unknown as Post;
-
-//     const baseProps = {
-//         post,
-//         postId: '',
-//         link: 'http://mattermost.com',
-//         previewEnabled: true,
-//         isEmbedVisible: true,
-//         enableLinkPreviews: true,
-//         currentUserId: '1234',
-//         openGraphData: {
-//             description: 'description',
-//             images: [{
-//                 secure_url: '',
-//                 url: imageUrl,
-//             }],
-//             site_name: 'Mattermost',
-//             title: 'Mattermost Private Cloud Messaging',
-//         },
-//         toggleEmbedVisibility: jest.fn(),
-//         actions: {
-//             editPost: jest.fn(),
-//         },
-//     };
-
-//     test('should render nothing without any data', () => {
-//         const props = {
-//             ...baseProps,
-//             openGraphData: undefined,
-//         };
-
-//         const wrapper = shallow(<PostAttachmentOpenGraph {...props}/>);
-
-//         expect(wrapper).toEqual({});
-//     });
-
-//     test('should render nothing when link previews are disabled on the server', () => {
-//         const props = {
-//             ...baseProps,
-//             enableLinkPreviews: false,
-//         };
-
-//         const wrapper = shallow(<PostAttachmentOpenGraph {...props}/>);
-
-//         expect(wrapper).toEqual({});
-//     });
-
-//     test('should render nothing when link previews are disabled by the user', () => {
-//         const props = {
-//             ...baseProps,
-//             previewEnabled: false,
-//         };
-
-//         const wrapper = shallow(<PostAttachmentOpenGraph {...props}/>);
-
-//         expect(wrapper).toEqual({});
-//     });
-
-//     describe('isLargeImage', () => {
-//         test('should be a large image', () => {
-//             const wrapper = shallow<PostAttachmentOpenGraph>(<PostAttachmentOpenGraph {...baseProps}/>);
-
-//             expect(wrapper.instance().isLargeImage({
-//                 format: 'png',
-//                 frameCount: 0,
-//                 height: 180,
-//                 width: 400,
-//             })).toBe(true);
-//         });
-
-//         test('should not be a large image', () => {
-//             const wrapper = shallow<PostAttachmentOpenGraph>(<PostAttachmentOpenGraph {...baseProps}/>);
-
-//             expect(wrapper.instance().isLargeImage({
-//                 format: 'png',
-//                 frameCount: 0,
-//                 height: 100,
-//                 width: 100,
-//             })).toBe(false);
-//         });
-//     });
-
-//     describe('image', () => {
-//         test('should use an ExternalImage for a small image', () => {
-//             const wrapper = shallow(<PostAttachmentOpenGraph {...baseProps}/>);
-
-//             expect(wrapper.find(ExternalImage).exists()).toBe(true);
-//             expect(wrapper.find('.post__embed-visibility').exists()).toBe(false);
-//         });
-
-//         test('should render with large image and toggle', () => {
-//             const props = {
-//                 ...baseProps,
-//                 post: {
-//                     ...post,
-//                     metadata: {
-//                         ...post.metadata,
-//                         images: {
-//                             [imageUrl]: {
-//                                 format: 'png',
-//                                 frameCount: 0,
-//                                 height: 180,
-//                                 width: 400,
-//                             },
-//                         },
-//                     },
-//                 },
-//             };
-
-//             const wrapper = shallow(<PostAttachmentOpenGraph {...props}/>);
-
-//             expect(wrapper.find(ExternalImage).exists()).toBe(true);
-//             expect(wrapper.find('.post__embed-visibility').exists()).toBe(true);
-//         });
-//     });
-
-//     describe('remove preview button', () => {
-//         test('should not show button to remove preview for post made by another user', () => {
-//             const wrapper = shallow(<PostAttachmentOpenGraph {...baseProps}/>);
-
-//             expect(wrapper.find('.btn-close').exists()).toBe(false);
-//         });
-
-//         test('should show button to remove preview for post made by current user', () => {
-//             const props = {
-//                 ...baseProps,
-//                 post: {
-//                     ...post,
-//                     user_id: baseProps.currentUserId,
-//                 },
-//             };
-
-//             const wrapper = shallow(<PostAttachmentOpenGraph {...props}/>);
-
-//             expect(wrapper.find('.btn-close').exists()).toBe(true);
-//         });
-//     });
-// });
-
-// describe('getBestImageUrl', () => {
-//     test('should return nothing with no OpenGraph metadata or dimensions', () => {
-//         expect(getBestImageUrl()).toBeFalsy();
-//     });
-
-//     test('should return nothing with missing OpenGraph images', () => {
-//         const openGraphData = {} as OpenGraphMetadata;
-
-//         expect(getBestImageUrl(openGraphData)).toBeFalsy();
-//     });
-
-//     test('should return nothing with no OpenGraph images', () => {
-//         const openGraphData = {
-//             images: [],
-//         };
-
-//         expect(getBestImageUrl(openGraphData)).toBeFalsy();
-//     });
-
-//     test('should return secure_url if specified', () => {
-//         const openGraphData = {
-//             images: [{
-//                 secure_url: 'https://example.com/image.png',
-//                 url: 'http://example.com/image.png',
-//             }],
-//         };
-
-//         expect(getBestImageUrl(openGraphData)).toEqual(openGraphData.images[0].secure_url);
-//     });
-
-//     test('should return url if secure_url is not specified', () => {
-//         const openGraphData = {
-//             images: [{
-//                 secure_url: '',
-//                 url: 'http://example.com/image.png',
-//             }],
-//         };
-
-//         expect(getBestImageUrl(openGraphData)).toEqual(openGraphData.images[0].url);
-//     });
-
-//     test('should pick the last image if no dimensions are specified', () => {
-//         const openGraphData = {
-//             images: [{
-//                 url: 'http://example.com/image.png',
-//             }, {
-//                 url: 'http://example.com/image2.png',
-//             }],
-//         };
-
-//         expect(getBestImageUrl(openGraphData)).toEqual(openGraphData.images[1].url);
-//     });
-
-//     test('should prefer images with dimensions closer to 80 by 80', () => {
-//         const openGraphData = {
-//             images: [{
-//                 url: 'http://example.com/image.png',
-//                 height: 100,
-//                 width: 100,
-//             }, {
-//                 url: 'http://example.com/image2.png',
-//                 height: 1000,
-//                 width: 1000,
-//             }],
-//         };
-
-//         expect(getBestImageUrl(openGraphData)).toEqual(openGraphData.images[0].url);
-//     });
-
-//     test('should use dimensions from post metadata if necessary', () => {
-//         const openGraphData = {
-//             images: [{
-//                 url: 'http://example.com/image.png',
-//             }, {
-//                 url: 'http://example.com/image2.png',
-//             }],
-//         };
-//         const imagesMetadata = {
-//             'http://example.com/image.png': {
-//                 format: 'png',
-//                 frameCount: 0,
-//                 height: 100,
-//                 width: 100,
-//             },
-//             'http://example.com/image2.png': {
-//                 format: 'png',
-//                 frameCount: 0,
-//                 height: 1000,
-//                 width: 1000,
-//             },
-//         };
-
-//         expect(getBestImageUrl(openGraphData, imagesMetadata)).toEqual(openGraphData.images[0].url);
-//     });
-// });