Add FilePreviewOverride component (#105)

webapp/README.md

@@ -127,6 +127,11 @@ This plugin registers a file upload action that, when clicked, triggers the root
 This plugin registers a link tooltip component, whose content is fully customizable. It is displayed when the mouse cursor hovers over a link in a post.
 ![link tooltip](docs/link_tooltip.png)
 
+## File Preview Override
+
+This plugin registers a file preview component, which is rendered when the user clicks on a post's file attachment. You can apply any logic necessary to determine whether or not the preview should be overridden. In the case of this plugin's implementation, the file must have the extension `demo`.
+![file preview override](docs/file_preview_override.png)
+
 ## Right-Hand Sidebar
 
 This plugin registers a right-hand sidebar component, whose content is fully customizable and it is triggered by calling an action where required. In this demo plugin, it is triggered by the Channel Header Action Button.

webapp/src/components/file_preview_override/file_preview_override.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {FileInfo} from 'mattermost-redux/types/files';
+import {Theme} from 'mattermost-redux/types/preferences';
+
+type Props = {
+    fileInfo: FileInfo;
+    onModalDismissed: () => void;
+    theme: Theme;
+};
+
+export default function FilePreviewOverride(props: Props) {
+    const {theme} = props;
+
+    const style = {
+        backgroundColor: theme.centerChannelBg,
+        color: theme.centerChannelColor,
+        paddingTop: '10px',
+        paddingBottom: '10px',
+    };
+
+    const buttonStyle = {
+        backgroundColor: theme.buttonBg,
+        color: theme.buttonColor,
+    };
+
+    return (
+        <div style={style}>
+            <h3>{props.fileInfo.name}</h3>
+            <button
+                className={'save-button btn'}
+                style={buttonStyle}
+                onClick={props.onModalDismissed}
+            >
+                {'Close'}
+            </button>
+        </div>
+    );
+}

webapp/src/components/file_preview_override/index.ts

@@ -0,0 +1,12 @@
+import {connect} from 'react-redux';
+
+import {GlobalState} from 'mattermost-redux/types/store';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
+
+import FilePreviewOverride from './file_preview_override';
+
+const mapStateToProps = (state: GlobalState) => ({
+    theme: getTheme(state),
+});
+
+export default connect(mapStateToProps)(FilePreviewOverride);

webapp/src/plugin.jsx

@@ -17,6 +17,7 @@ import UserActions from './components/user_actions';
 import RHSView from './components/right_hand_sidebar';
 import SecretMessageSetting from './components/admin_settings/secret_message_setting';
 import CustomSetting from './components/admin_settings/custom_setting';
+import FilePreviewOverride from './components/file_preview_override';
 
 import PostType from './components/post_type';
 import EphemeralPostType from './components/ephemeral_post_type';
@@ -192,6 +193,8 @@ export default class DemoPlugin {
         registry.registerAdminConsoleCustomSetting('SecretMessage', SecretMessageSetting, {showTitle: true});
         registry.registerAdminConsoleCustomSetting('CustomSetting', CustomSetting);
 
+        registry.registerFilePreviewComponent((fileInfo) => fileInfo.extension === 'demo', FilePreviewOverride);
+
         registry.registerReducer(reducer);
 
         // Immediately fetch the current plugin status.