Merge 12eb2ea into b32499e

.editorconfig

@@ -13,8 +13,9 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,feature}]
+[*.{yml,feature,js,jsx,css,scss}]
 indent_size = 2
+indent_style = space
 
 [{.travis.yml,package.json,composer.json}]
 # The indent size used in the `package.json` file cannot be changed

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
 host-map.php
+node_modules
+client/dist/*/*.map

.nvmrc

@@ -0,0 +1 @@
+10

client/src/boot/index.js

@@ -0,0 +1,6 @@
+/* global window */
+import registerComponents from 'boot/registerComponents';
+
+window.document.addEventListener('DOMContentLoaded', () => {
+  registerComponents();
+});

client/src/boot/registerComponents.js

@@ -0,0 +1,9 @@
+import Injector from 'lib/Injector';
+import SubsiteChangeAlert from 'components/SubsiteChangeAlert/SubsiteChangeAlert';
+
+export default () => {
+  Injector.component.registerMany({
+    // List your React components here so Injector is aware of them
+    SubsiteChangeAlert
+  });
+};

client/src/bundles/bundle.js

@@ -0,0 +1,6 @@
+// Include any legacy Entwine wrappers
+
+// Include boot entrypoint
+require('legacy/entwine/LeftAndMain_Subsites.js');
+require('legacy/entwine/SubsitesTreeDropdownField.js');
+require('boot');

client/src/bundles/bundle.scss

@@ -0,0 +1,9 @@
+// Import core variables from silverstripe/admin
+// @import "variables";
+
+// Import all of your SCSS stylesheets using relative paths from "components"
+// e.g. @import '../components/MyComponent/MyComponent.scss';
+
+// Import any legacy SCSS stylesheets
+// e.g. @import '../styles/MyComponent-ModelAdmin-legacy.scss
+@import "../styles/LeftAndMain_Subsites";

client/src/components/README.md

@@ -0,0 +1,3 @@
+# React components
+
+Put any React components in here.

client/src/components/SubsiteChangeAlert/SubsiteChangeAlert.jsx

@@ -0,0 +1,59 @@
+/* global window */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import i18n from 'i18n';
+import createEvent from 'legacy/createEvent';
+
+class SubsiteChangeAlert extends Component {
+  constructor(props) {
+    super(props);
+    this.handleRevert = this.handleRevert.bind(this);
+  }
+
+  handleRevert() {
+    const { myTabSubsiteID, myTabSubsiteName, revertCallback } = this.props;
+    revertCallback(myTabSubsiteID, myTabSubsiteName);
+  }
+
+  getMessage() {
+    const { otherTabSubsiteName, myTabSubsiteName } = this.props;
+
+    return i18n.inject(
+      i18n._t(
+        'SubsiteChangeAlert.SUBSITE_CHANGED',
+        `Your current subsite has changed to {otherTabSubsiteName}, continuing to edit this content will cause problems.
+        To continue editing {myTabSubsiteName}, please change the active subsite back.`
+      ),
+      {
+        otherTabSubsiteName,
+        myTabSubsiteName
+      }
+    );
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} backdrop="static">
+        <ModalHeader>
+          {i18n._t('SubsiteChangeAlert.SUBSITE_CHANGED_TITLE', 'Subsite changed')}
+        </ModalHeader>
+        <ModalBody>{this.getMessage()}</ModalBody>
+        <ModalFooter>
+          <Button color="danger" onClick={this.handleRevert}>
+            {i18n._t(SubsiteChangeAlert.REVERT, 'Change back')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SubsiteChangeAlert.propTypes = {
+  otherTabSubsiteName: PropTypes.string,
+  myTabSubsiteID: PropTypes.string,
+  myTabSubsiteName: PropTypes.string,
+  revertCallback: PropTypes.func,
+}
+
+export default SubsiteChangeAlert;

client/src/components/SubsiteChangeAlert/tests/SubsiteChangeAlert-test.js

@@ -0,0 +1,44 @@
+/* global jest, describe, it, expect */
+import React from 'react';
+import SubsiteChangeAlert from '../SubsiteChangeAlert';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+describe('SubsiteChangeAlert', () => {
+  describe('handleRevert', () => {
+    it('delegates to the callback with relveant properties', () => {
+      const callbackFn = jest.fn();
+      const alert = shallow(
+        <SubsiteChangeAlert
+          myTabSubsiteID="1"
+          myTabSubsiteName="one"
+          revertCallback={callbackFn}
+        />
+      );
+      alert.instance().handleRevert();
+      expect(callbackFn.mock.calls).toEqual([['1', 'one']]);
+    });
+  });
+  describe('getMessage', () => {
+    it('should show the old subsite name correctly', () => {
+      const alert = shallow(
+        <SubsiteChangeAlert
+          myTabSubsiteName="oldSite"
+          otherTabSubsiteName="newSite"
+        />
+      );
+      expect(alert.instance().getMessage()).toContain('continue editing oldSite');
+    });
+    it('should show the new active subsite name', () => {
+      const alert = shallow(
+        <SubsiteChangeAlert
+          myTabSubsiteName="oldSite"
+          otherTabSubsiteName="newSite"
+        />
+      );
+      expect(alert.instance().getMessage()).toContain('changed to newSite');
+    });
+  });
+});

client/src/legacy/createEvent.js

@@ -0,0 +1,20 @@
+/* global window */
+// Polyfill IE11
+function createEvent(type, extraData) {
+  const { document, Event } = window;
+  let event;
+  if (typeof Event === 'object') {
+    event = document.createEvent('Event', true, true);
+    event.initEvent(type);
+  } else {
+    event = new Event(type);
+  }
+  if (extraData) {
+    Object.keys(extraData).forEach((key) => {
+      event[key] = extraData[key];
+    });
+  }
+  return event;
+}
+
+export default createEvent;