MM-29948 Display error msg when pasting files and uploads are disabled (#4927) (#4930)

* MM-29948 Display error msg when pasting files and uploads are disabled

* Remove unnecessary ref and Animated.View

Co-authored-by: Miguel Alatzar <this.migbot@gmail.com>
(cherry picked from commit f73db6e51c)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/post_draft/__snapshots__/post_draft.test.js.snap

@@ -368,8 +368,6 @@ exports[`PostDraft Should render the DraftInput 1`] = `
             }
           >
             <View
-              forwardedRef={[Function]}
-              isInteraction={true}
               style={
                 Object {
                   "flex": 1,

app/components/post_draft/uploads/index.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {handleRemoveLastFile, initUploadFiles} from '@actions/views/file_upload';
 import {getCurrentChannelId} from '@mm-redux/selectors/entities/channels';
-import {getConfig} from '@mm-redux/selectors/entities/general';
+import {canUploadFilesOnMobile, getConfig} from '@mm-redux/selectors/entities/general';
 import {getDimensions} from '@selectors/device';
 import {checkForFileUploadingInChannel} from '@selectors/file';
 import {getAllowedServerMaxFileSize} from '@utils/file';
@@ -18,6 +18,7 @@ function mapStateToProps(state, ownProps) {
     const config = getConfig(state);
 
     return {
+        canUploadFiles: canUploadFilesOnMobile(state),
         channelId,
         channelIsLoading: state.views.channel.loading,
         deviceHeight,

app/components/post_draft/uploads/uploads.js

@@ -30,6 +30,7 @@ const hideError = {height: 0};
 
 export default class Uploads extends PureComponent {
     static propTypes = {
+        canUploadFiles: PropTypes.bool.isRequired,
         channelId: PropTypes.string.isRequired,
         channelIsLoading: PropTypes.bool,
         files: PropTypes.array.isRequired,
@@ -55,7 +56,6 @@ export default class Uploads extends PureComponent {
         showFileMaxWarning: false,
     };
 
-    errorRef = React.createRef();
     errorContainerRef = React.createRef();
     containerRef = React.createRef();
 
@@ -123,7 +123,7 @@ export default class Uploads extends PureComponent {
 
     handleFileMaxWarning = () => {
         this.setState({showFileMaxWarning: true});
-        if (this.errorRef.current) {
+        if (this.errorContainerRef.current) {
             this.makeErrorVisible(true, 20);
             setTimeout(() => {
                 this.makeErrorVisible(false, 20);
@@ -132,7 +132,7 @@ export default class Uploads extends PureComponent {
     };
 
     handleFileSizeWarning = () => {
-        if (this.errorRef.current) {
+        if (this.errorContainerRef.current) {
             const {formatMessage} = this.context.intl;
             const message = formatMessage({
                 id: 'file_upload.fileAbove',
@@ -159,8 +159,14 @@ export default class Uploads extends PureComponent {
             return;
         }
 
-        const {maxFileSize} = this.props;
+        const {canUploadFiles, maxFileSize} = this.props;
         const availableCount = MAX_FILE_COUNT - this.props.files.length;
+
+        if (!canUploadFiles) {
+            this.handleUploadDisabled();
+            return;
+        }
+
         if (files.length > availableCount) {
             this.handleFileMaxWarning();
             return;
@@ -175,6 +181,24 @@ export default class Uploads extends PureComponent {
         this.handleUploadFiles(files);
     };
 
+    handleUploadDisabled = () => {
+        if (this.errorContainerRef.current) {
+            const {formatMessage} = this.context.intl;
+            const message = formatMessage({
+                id: 'mobile.file_upload.disabled2',
+                defaultMessage: 'File uploads from mobile are disabled.',
+            }, {
+                max: getFormattedFileSize({size: this.props.maxFileSize}),
+            });
+
+            this.setState({fileSizeWarning: message});
+            this.makeErrorVisible(true, 20);
+            setTimeout(() => {
+                this.makeErrorVisible(false, 20);
+            }, 5000);
+        }
+    };
+
     handleUploadFiles = async (files) => {
         if (this.props.screenId !== EphemeralStore.getNavigationTopComponentId()) {
             return;
@@ -286,12 +310,7 @@ export default class Uploads extends PureComponent {
                     style={style.errorContainer}
                     isInteraction={true}
                 >
-                    <Animatable.View
-                        ref={this.errorRef}
-                        isInteraction={true}
-                        style={style.errorTextContainer}
-                        useNativeDriver={true}
-                    >
+                    <View style={style.errorTextContainer}>
                         {showFileMaxWarning && (
                             <FormattedText
                                 style={style.warning}
@@ -304,7 +323,7 @@ export default class Uploads extends PureComponent {
                                 {fileSizeWarning}
                             </Text>
                         }
-                    </Animatable.View>
+                    </View>
                 </Animatable.View>
             </View>
         );

app/components/post_draft/uploads/uploads.test.js

@@ -10,6 +10,7 @@ import Uploads from './uploads';
 
 describe('Uploads', () => {
     const baseProps = {
+        canUploadFiles: true,
         channelId: 'channel-id',
         files: [],
         filesUploadingForCurrentChannel: true,
@@ -37,4 +38,25 @@ describe('Uploads', () => {
         expect(instance.handleFileSizeWarning).not.toHaveBeenCalled();
         expect(props.initUploadFiles).not.toHaveBeenCalled();
     });
+
+    test('handlePasteFiles should display an error if uploads are disabled', () => {
+        const topScreenId = 'top-screen';
+        EphemeralStore.getNavigationTopComponentId = jest.fn(() => (topScreenId));
+
+        const props = {
+            ...baseProps,
+            canUploadFiles: false,
+            screenId: topScreenId,
+        };
+        const wrapper = shallow(
+            <Uploads {...props}/>,
+        );
+        const instance = wrapper.instance();
+        instance.showPasteFilesErrorDialog = jest.fn();
+        instance.handleUploadDisabled = jest.fn();
+
+        instance.handlePasteFiles(undefined, []);
+        expect(instance.showPasteFilesErrorDialog).not.toHaveBeenCalled();
+        expect(instance.handleUploadDisabled).toHaveBeenCalled();
+    });
 });

assets/base/i18n/en.json

@@ -277,6 +277,7 @@
   "mobile.file_upload.camera_photo": "Take Photo",
   "mobile.file_upload.camera_video": "Take Video",
   "mobile.file_upload.disabled": "File uploads from mobile are disabled. Please contact your System Admin for more details.",
+  "mobile.file_upload.disabled2": "File uploads from mobile are disabled.",
   "mobile.file_upload.library": "Photo Library",
   "mobile.file_upload.max_warning": "Uploads limited to 5 files maximum.",
   "mobile.file_upload.unsupportedMimeType": "Only BMP, JPG or PNG images may be used for profile pictures.",