MM-12449 Migrate 'components/file_upload_overlay.jsx' and associated …

…tests to TypeScript (#3919)

components/__snapshots__/file_upload_overlay.test.tsx.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/FileUploadOverlay should match snapshot when file upload is showing with no overlay type 1`] = `
+<div
+ className="file-overlay hidden"
+>
+ <div
+ className="overlay__indent"
+ >
+ <div
+ className="overlay__circle"
+ >
+ <img
+ alt="Files"
+ className="overlay__files"
+ src={null}
+ />
+ <span>
+ <FormattedMessage
+ defaultMessage="Upload Icon"
+ id="generic_icons.upload"
+ values={Object {}}
+ >
+ <Component />
+ </FormattedMessage>
+ <FormattedMessage
+ defaultMessage="Drop a file to upload it."
+ id="upload_overlay.info"
+ values={Object {}}
+ />
+ </span>
+ <img
+ alt="Logo"
+ className="overlay__logo"
+ src={null}
+ width="100"
+ />
+ </div>
+ </div>
+</div>
+`;
+
+exports[`components/FileUploadOverlay should match snapshot when file upload is showing with overlay type of center 1`] = `
+<div
+ className="file-overlay hidden center-file-overlay"
+>
+ <div
+ className="overlay__indent"
+ >
+ <div
+ className="overlay__circle"
+ >
+ <img
+ alt="Files"
+ className="overlay__files"
+ src={null}
+ />
+ <span>
+ <FormattedMessage
+ defaultMessage="Upload Icon"
+ id="generic_icons.upload"
+ values={Object {}}
+ >
+ <Component />
+ </FormattedMessage>
+ <FormattedMessage
+ defaultMessage="Drop a file to upload it."
+ id="upload_overlay.info"
+ values={Object {}}
+ />
+ </span>
+ <img
+ alt="Logo"
+ className="overlay__logo"
+ src={null}
+ width="100"
+ />
+ </div>
+ </div>
+</div>
+`;
+
+exports[`components/FileUploadOverlay should match snapshot when file upload is showing with overlay type of right 1`] = `
+<div
+ className="file-overlay hidden right-file-overlay"
+>
+ <div
+ className="overlay__indent"
+ >
+ <div
+ className="overlay__circle"
+ >
+ <img
+ alt="Files"
+ className="overlay__files"
+ src={null}
+ />
+ <span>
+ <FormattedMessage
+ defaultMessage="Upload Icon"
+ id="generic_icons.upload"
+ values={Object {}}
+ >
+ <Component />
+ </FormattedMessage>
+ <FormattedMessage
+ defaultMessage="Drop a file to upload it."
+ id="upload_overlay.info"
+ values={Object {}}
+ />
+ </span>
+ <img
+ alt="Logo"
+ className="overlay__logo"
+ src={null}
+ width="100"
+ />
+ </div>
+ </div>
+</div>
+`;

components/channel_view/channel_view.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import deferComponentRender from 'components/deferComponentRender';
 import ChannelHeader from 'components/channel_header';
 import CreatePost from 'components/create_post';
-import FileUploadOverlay from 'components/file_upload_overlay.jsx';
+import FileUploadOverlay from 'components/file_upload_overlay';
 import PostView from 'components/post_view';
 import TutorialView from 'components/tutorial';
 import {clearMarks, mark, measure, trackEvent} from 'actions/diagnostics_actions.jsx';

components/file_upload_overlay.test.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import FileUploadOverlay from 'components/file_upload_overlay';
+
+describe('components/FileUploadOverlay', () => {
+ test('should match snapshot when file upload is showing with no overlay type', () => {
+ const wrapper = shallow(
+ <FileUploadOverlay
+ overlayType=''
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot when file upload is showing with overlay type of right', () => {
+ const wrapper = shallow(
+ <FileUploadOverlay
+ overlayType='right'
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot when file upload is showing with overlay type of center', () => {
+ const wrapper = shallow(
+ <FileUploadOverlay
+ overlayType='center'
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});

components/file_upload_overlay.jsx → components/file_upload_overlay.tsx

@@ -1,15 +1,18 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import fileOverlayImage from 'images/filesOverlay.png';
 import overlayLogoImage from 'images/logoWhite.png';
 
-export default function FileUploadOverlay(props) {
- var overlayClass = 'file-overlay hidden';
+type Props = {
+ overlayType: string;
+}
+
+const FileUploadOverlay: React.FC<Props> = (props: Props) => {
+ let overlayClass = 'file-overlay hidden';
  if (props.overlayType === 'right') {
  overlayClass += ' right-file-overlay';
  } else if (props.overlayType === 'center') {
@@ -33,7 +36,7 @@ export default function FileUploadOverlay(props) {
  {(title) => (
  <i
  className='fa fa-upload'
- title={title}
+ title={title as string}
  />
  )}
  </FormattedMessage>
@@ -52,8 +55,6 @@ export default function FileUploadOverlay(props) {
  </div>
  </div>
  );
-}
-
-FileUploadOverlay.propTypes = {
- overlayType: PropTypes.string,
 };
+
+export default FileUploadOverlay;

components/sidebar_right/sidebar_right.jsx

@@ -9,7 +9,7 @@ import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import Constants from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 
-import FileUploadOverlay from 'components/file_upload_overlay.jsx';
+import FileUploadOverlay from 'components/file_upload_overlay';
 import RhsThread from 'components/rhs_thread';
 import RhsCard from 'components/rhs_card';
 import SearchBar from 'components/search_bar';