Updates that reflect the changes in API were made in source code preview dialog

src/components/helpers/SourceCodeViewer/SourceCodeViewer.js

@@ -32,27 +32,24 @@ const getMode = ext => {
 };
 
 const SourceCodeViewer = (
-  { name, content = '', lineNumbers = true, height },
+  { name, content = '', lineNumbers = true },
   { userSettings: { vimMode = false, darkTheme = false } }
 ) =>
-  height
-    ? <AceEditor
-        value={content}
-        mode={getMode(name.split('.').pop())}
-        keyboardHandler={vimMode ? 'vim' : undefined}
-        theme={darkTheme ? 'monokai' : 'github'}
-        name="source-code-viewer"
-        width="100%"
-        height={`${height}px`}
-        editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
-      />
-    : null;
+  <AceEditor
+    value={content}
+    mode={getMode(name.split('.').pop())}
+    keyboardHandler={vimMode ? 'vim' : undefined}
+    theme={darkTheme ? 'monokai' : 'github'}
+    name="source-code-viewer"
+    width="100%"
+    height="100%"
+    editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
+  />;
 
 SourceCodeViewer.propTypes = {
   name: PropTypes.string.isRequired,
   content: PropTypes.string,
-  lineNumbers: PropTypes.bool,
-  height: PropTypes.number
+  lineNumbers: PropTypes.bool
 };
 
 SourceCodeViewer.contextTypes = {

src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js

@@ -16,8 +16,6 @@ import SourceCodeViewer from '../../components/helpers/SourceCodeViewer';
 import styles from './sourceCode.less';
 
 class SourceCodeViewerContainer extends Component {
-  state = { height: null };
-
   componentWillMount() {
     const { fileId, loadAsync } = this.props;
     if (fileId !== null) {
@@ -31,45 +29,13 @@ class SourceCodeViewerContainer extends Component {
     }
   }
 
-  onModalEntered() {
-    if (this.state.height === null) {
-      const { headerRef, bodyRef, footerRef } = this;
-      const height =
-        window.innerHeight -
-        headerRef.clientHeight -
-        bodyRef.clientHeight -
-        footerRef.clientHeight;
-      this.setState({ height });
-    }
-  }
-
-  onModalEnteredWhileLoading() {
-    if (this.state.height === null) {
-      const { loadingHeaderRef, loadingBodyRef, loadingFooterRef } = this;
-      const height =
-        window.innerHeight -
-        loadingHeaderRef.clientHeight -
-        loadingBodyRef.clientHeight -
-        loadingFooterRef.clientHeight;
-      this.setState({ height });
-    } else {
-      // console.log('already has height', this.state.height);
-    }
-  }
-
   render() {
-    const { show, onHide, download, file, code } = this.props;
-    const { height } = this.state;
+    const { show, onHide, download, file, content } = this.props;
     return (
       <ResourceRenderer
         loading={
-          <Modal
-            show={show}
-            onHide={onHide}
-            dialogClassName={styles.modal}
-            onEntered={() => this.onModalEnteredWhileLoading()}
-          >
-            <div ref={header => (this.loadingHeaderRef = header)}>
+          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
+            <div>
               <Modal.Header closeButton>
                 <Modal.Title>
                   <LoadingIcon />{' '}
@@ -80,12 +46,14 @@ class SourceCodeViewerContainer extends Component {
                 </Modal.Title>
               </Modal.Header>
             </div>
-            <div ref={body => (this.loadingBodyRef = body)}>
+            <div>
               <Modal.Body className={styles.modalBody}>
-                <SourceCodeViewer content="" name="" />
+                <div>
+                  <SourceCodeViewer content="" name="" />
+                </div>
               </Modal.Body>
             </div>
-            <div ref={footer => (this.loadingFooterRef = footer)}>
+            <div>
               <Modal.Footer>
                 <Button disabled>
                   <DownloadIcon />{' '}
@@ -98,32 +66,45 @@ class SourceCodeViewerContainer extends Component {
             </div>
           </Modal>
         }
-        resource={[file, code]}
+        resource={[file, content]}
       >
-        {(file, code) =>
-          <Modal
-            show={show}
-            onHide={onHide}
-            dialogClassName={styles.modal}
-            onEntered={() => this.onModalEntered()}
-          >
-            <div ref={header => (this.headerRef = header)}>
+        {(file, content) =>
+          <Modal show={show} onHide={onHide} dialogClassName={styles.modal}>
+            <div>
               <Modal.Header closeButton>
                 <Modal.Title>
                   {file.name}
                 </Modal.Title>
               </Modal.Header>
             </div>
-            <div ref={body => (this.bodyRef = body)}>
+            <div>
               <Modal.Body className={styles.modalBody}>
-                <SourceCodeViewer
-                  content={code}
-                  name={file.name}
-                  height={height}
-                />
+                {(content.malformedCharacters || content.tooLarge) &&
+                  <div className="callout callout-warning">
+                    {content.malformedCharacters &&
+                      <p>
+                        <FormattedMessage
+                          id="app.sourceCodeViewer.utf8Warning"
+                          defaultMessage="The source file is not a valid UTF-8 file. Some characters may be displayed incorrectly. Use the download button to see unaltered source file."
+                        />
+                      </p>}
+                    {content.tooLarge &&
+                      <p>
+                        <FormattedMessage
+                          id="app.sourceCodeViewer.incompleteWarning"
+                          defaultMessage="The selected source file is too large. Only a leading part of the file is displayed here. Use the download button to get the whole file."
+                        />
+                      </p>}
+                  </div>}
+                <div>
+                  <SourceCodeViewer
+                    content={content.content}
+                    name={file.name}
+                  />
+                </div>
               </Modal.Body>
             </div>
-            <div ref={footer => (this.footerRef = footer)}>
+            <div>
               <Modal.Footer>
                 <Button onClick={() => download(file.id)}>
                   <DownloadIcon />{' '}
@@ -147,13 +128,13 @@ SourceCodeViewerContainer.propTypes = {
   onHide: PropTypes.func.isRequired,
   loadAsync: PropTypes.func.isRequired,
   download: PropTypes.func.isRequired,
-  code: ImmutablePropTypes.map
+  content: ImmutablePropTypes.map
 };
 
 export default connect(
   (state, { fileId }) => ({
     file: getFile(fileId)(state),
-    code: getFilesContent(fileId)(state)
+    content: getFilesContent(fileId)(state)
   }),
   (dispatch, { fileId }) => ({
     loadAsync: () =>

src/containers/SourceCodeViewerContainer/sourceCode.less

@@ -1,12 +1,38 @@
 .modal {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 1vmax;
+  bottom: 1vmax;
+  left: 1vmax;
+  right: 1vmax;
   margin: 0;
 
   & > :global(.modal-content) {
     min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & > div:nth-child(2) {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
 
 .modalBody {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  & > *:last-child {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      flex-grow: 1;
+    }
+  }
 }