Complete minimal version of file browser

gulpfile.js

@@ -207,7 +207,6 @@ gulp.task('minio:up', () => {
       `-e MINIO_ACCESS_KEY=${MINIO_ACCESS_KEY}`,
       `-e MINIO_SECRET_KEY=${MINIO_SECRET_KEY}`,
       '-e MINIO_BROWSER=on',
-      '-e MINIO_DOMAIN=localhost',
       `${TEST_MINIO_IMAGE} server /data`
     ].join(' '),
     afterRun: async () => {
@@ -230,6 +229,8 @@ gulp.task('serve', ['mongo:up', 'minio:up', 'build'], startServer);
 
 gulp.task('serve:restart', ['lint', 'test:changed', 'bundle:js'], restartServer);
 
+gulp.task('serve:restart:raw', ['bundle:js'], restartServer);
+
 gulp.task('ci:prepare', done => runSequence('mongo:user', 'mongo:seed', 'minio:seed', done));
 
 gulp.task('ci', done => runSequence('clean', 'lint', 'test', 'build', done));
@@ -243,4 +244,11 @@ gulp.task('watch', ['serve'], () => {
   gulp.watch(['s3-seed'], ['lint', 'minio:seed']);
 });
 
+gulp.task('watch:raw', ['serve'], () => {
+  gulp.watch(['src/**/*.{js,jsx}'], ['serve:restart:raw']);
+  gulp.watch(['src/**/*.less'], ['bundle:css']);
+  gulp.watch(['db-seed'], ['mongo:seed']);
+  gulp.watch(['s3-seed'], ['minio:seed']);
+});
+
 gulp.task('default', ['watch']);

src/bootstrap/client-settings.js

@@ -0,0 +1,24 @@
+const browserHelper = require('../ui/browser-helper');
+
+/* eslint no-process-env: off */
+
+const env = (browserHelper.isBrowser() ? window.env : process.env).ELMU_ENV || 'dev';
+
+const commonSettings = {};
+
+const overrides = {
+  dev: {
+    cdnRootURL: 'http://localhost:9000/dev-elmu-cdn/'
+  },
+  test: {
+    cdnRootURL: 'http://localhost:9000/test-elmu-cdn/'
+  },
+  stag: {
+    cdnRootURL: 'http://stag-cdn.elmu.online/'
+  },
+  prod: {
+    cdnRootURL: 'http://cdn.elmu.online/'
+  }
+};
+
+module.exports = Object.assign({}, commonSettings, overrides[env]);

src/bootstrap/server-settings.js

@@ -18,7 +18,7 @@ const overrides = {
     cdnRegion: 'eu-central-1',
     cdnAccessKey: 'UVDXF41PYEAX0PXD8826',
     cdnSecretKey: 'SXtajmM3uahrQ1ALECh3Z3iKT76s2s5GBJlbQMZx',
-    cdnBucketName: 'dev-cdn.elmu.online'
+    cdnBucketName: 'dev-elmu-cdn'
   },
   test: {
     elmuWebConnectionString: 'mongodb://elmu:elmu@localhost:27017/test-elmu-web?authSource=admin',
@@ -28,7 +28,7 @@ const overrides = {
     cdnRegion: 'eu-central-1',
     cdnAccessKey: 'UVDXF41PYEAX0PXD8826',
     cdnSecretKey: 'SXtajmM3uahrQ1ALECh3Z3iKT76s2s5GBJlbQMZx',
-    cdnBucketName: 'test-cdn.elmu.online'
+    cdnBucketName: 'test-elmu-cdn'
   },
   stag: {
     elmuWebConnectionString: process.env.ELMU_WEB_CONNECTION_STRING,

src/components/cdn-file-picker.jsx

@@ -0,0 +1,107 @@
+const React = require('react');
+const autoBind = require('auto-bind');
+const PropTypes = require('prop-types');
+const { Modal, Button } = require('antd');
+const selection = require('../ui/selection');
+const RepositoryBrowser = require('./repository-browser.jsx');
+
+const localizedStrings = {
+  MODAL_TITLE: 'Dateibrowser',
+  BTN_LABEL_SELECT: 'Auswählen',
+  BTN_LABEL_CANCEL: 'Abbrechen',
+  BTN_LABEL_APPLY: 'Übernehmen'
+};
+
+class CdnFilePicker extends React.Component {
+  constructor(props) {
+    super(props);
+
+    autoBind.react(this);
+
+    this.state = {
+      isModalVisible: false,
+      currentSelectedFile: null
+    };
+  }
+
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  handleSelectButtonClick() {
+    this.setState({ isModalVisible: true });
+  }
+
+  handleApply() {
+    const { onFileNameChanged } = this.props;
+    const { currentSelectedFile } = this.state;
+
+    this.setState({ isModalVisible: false });
+    onFileNameChanged(currentSelectedFile);
+  }
+
+  handleCancel() {
+    this.setState({ isModalVisible: false });
+  }
+
+  handleSelectionChanged(objects) {
+    const newSelectedFile = objects.length ? objects[0].name : null;
+    this.setState({ currentSelectedFile: newSelectedFile });
+  }
+
+  render() {
+    const { rootPrefix } = this.props;
+    const { isModalVisible, currentSelectedFile } = this.state;
+
+    return (
+      <div className="CdnFilePicker">
+        <Button
+          type="primary"
+          onClick={this.handleSelectButtonClick}
+          >
+          {localizedStrings.BTN_LABEL_SELECT}
+        </Button>
+        <Modal
+          width="80%"
+          visible={isModalVisible}
+          title={localizedStrings.MODAL_TITLE}
+          onOk={this.handleApply}
+          onCancel={this.handleCancel}
+          footer={[
+            <Button
+              key="back"
+              onClick={this.handleCancel}
+              >
+              {localizedStrings.BTN_LABEL_CANCEL}
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={this.handleApply}
+              disabled={!currentSelectedFile}
+              >
+              {localizedStrings.BTN_LABEL_APPLY}
+            </Button>
+          ]}
+          >
+          <RepositoryBrowser
+            rootPrefix={rootPrefix}
+            selectionMode={selection.SINGLE}
+            onSelectionChanged={this.handleSelectionChanged}
+            />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+CdnFilePicker.propTypes = {
+  onFileNameChanged: PropTypes.func,
+  rootPrefix: PropTypes.string.isRequired
+};
+
+CdnFilePicker.defaultProps = {
+  onFileNameChanged: () => {}
+};
+
+module.exports = CdnFilePicker;

src/components/page.jsx

@@ -1,4 +1,3 @@
-const RepositoryBrowser = require('./repository-browser.jsx');
 const { ContainerProvider } = require('./container-context.jsx');
 const { Container } = require('../common/di');
 const PropTypes = require('prop-types');
@@ -7,7 +6,6 @@ const React = require('react');
 function Page({ container, initialState, PageComponent }) {
   return (
     <ContainerProvider value={container}>
-      <RepositoryBrowser rootPrefix="test" selectionMode="single" />
       <PageComponent initialState={initialState} />
     </ContainerProvider>
   );