migrate Collapse

src/client/js/components/PageComment/Comment.jsx

@@ -6,10 +6,10 @@ import { format, formatDistanceStrict } from 'date-fns';
 // TODO: GW-333
 // import Tooltip from 'react-bootstrap/es/Tooltip';
 // import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
-// import Collapse from 'react-bootstrap/es/Collapse';
 
 import {
   Button,
+  Collapse,
 } from 'reactstrap';
 
 import AppContainer from '../../services/AppContainer';
@@ -229,7 +229,7 @@ class Comment extends React.Component {
       <React.Fragment>
         { areThereHiddenReplies && (
           <div className="page-comments-hidden-replies">
-            <Collapse in={this.state.isOlderRepliesShown}>
+            <Collapse isOpen={this.state.isOlderRepliesShown}>
               <div>{hiddenElements}</div>
             </Collapse>
             <div className="text-center">{toggleButton}</div>

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// TODO: GW-333
-// import ButtonGroup from 'react-bootstrap/es/ButtonGroup';
-// import Collapse from 'react-bootstrap/es/Collapse';
-
 import {
-  Button,
+  Button, ButtonGroup,
+  Collapse,
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
@@ -434,7 +431,7 @@ export default class HandsontableModal extends React.PureComponent {
               <Button onClick={() => { this.alignButtonHandler('c') }}><i className="ti-align-center"></i></Button>
               <Button onClick={() => { this.alignButtonHandler('r') }}><i className="ti-align-right"></i></Button>
             </ButtonGroup>
-            <Collapse in={this.state.isDataImportAreaExpanded}>
+            <Collapse isOpen={this.state.isDataImportAreaExpanded}>
               <div> {/* This div is necessary for smoothing animations. (https://react-bootstrap.github.io/utilities/transitions/#transitions-collapse) */}
                 <MarkdownTableDataImportForm onCancel={this.toggleDataImportArea} onImport={this.importData} />
               </div>

src/client/js/components/PageEditor/MarkdownTableDataImportForm.jsx

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 // import FormGroup from 'react-bootstrap/es/FormGroup';
 // import ControlLabel from 'react-bootstrap/es/ControlLabel';
 // import FormControl from 'react-bootstrap/es/FormControl';
-// import Collapse from 'react-bootstrap/es/Collapse';
 
 import {
   Button,
+  Collapse,
 } from 'reactstrap';
 
 import MarkdownTable from '../../models/MarkdownTable';
@@ -79,7 +79,7 @@ export default class MarkdownTableDataImportForm extends React.Component {
             onChange={(e) => { return this.setState({ data: e.target.value }) }}
           />
         </FormGroup>
-        <Collapse in={this.state.parserErrorMessage != null}>
+        <Collapse isOpen={this.state.parserErrorMessage != null}>
           <FormGroup>
             <ControlLabel>Parse Error</ControlLabel>
             <FormControl componentClass="textarea" style={{ height: 100 }} value={this.state.parserErrorMessage || ''} readOnly />