@girder/core 5.0.0-beta.1 → 5.0.0

package/dist-lib/src/views/widgets/MetadataWidget.js

@@ -0,0 +1,508 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { confirm } from '@girder/core/dialog';
+import events from '@girder/core/events';
+import { localeSort } from '@girder/core/misc';
+
+import JsonMetadatumEditWidgetTemplate from '@girder/core/templates/widgets/jsonMetadatumEditWidget.pug';
+import JsonMetadatumViewTemplate from '@girder/core/templates/widgets/jsonMetadatumView.pug';
+import MetadataWidgetTemplate from '@girder/core/templates/widgets/metadataWidget.pug';
+import MetadatumEditWidgetTemplate from '@girder/core/templates/widgets/metadatumEditWidget.pug';
+import MetadatumViewTemplate from '@girder/core/templates/widgets/metadatumView.pug';
+
+import '@girder/core/stylesheets/widgets/metadataWidget.styl';
+
+import JSONEditor from 'jsoneditor/dist/jsoneditor.js'; // can't 'jsoneditor'
+import 'jsoneditor/dist/jsoneditor.css';
+
+import 'bootstrap/js/dropdown';
+
+var MetadatumWidget = View.extend({
+    className: 'g-widget-metadata-row',
+
+    events: {
+        'click .g-widget-metadata-edit-button': 'editMetadata'
+    },
+
+    initialize: function (settings) {
+        if (!_.has(this.parentView.modes, settings.mode)) {
+            throw new Error('Unsupported metadatum mode ' + settings.mode + ' detected.');
+        }
+
+        this.mode = settings.mode;
+        this.key = settings.key;
+        this.value = settings.value;
+        this.accessLevel = settings.accessLevel;
+        this.parentView = settings.parentView;
+        this.fieldName = settings.fieldName;
+        this.apiPath = settings.apiPath;
+        this.onMetadataEdited = settings.onMetadataEdited;
+        this.onMetadataAdded = settings.onMetadataAdded;
+    },
+
+    _validate: function (from, to, value) {
+        var newMode = this.parentView.modes[to];
+
+        if (_.has(newMode, 'validation') &&
+            _.has(newMode.validation, 'from') &&
+            _.has(newMode.validation.from, from)) {
+            var validate = newMode.validation.from[from][0];
+            var msg = newMode.validation.from[from][1];
+
+            if (!validate(value)) {
+                events.trigger('g:alert', {
+                    text: msg,
+                    type: 'warning'
+                });
+                return false;
+            }
+        }
+
+        return true;
+    },
+
+    // @todo too much duplication with editMetadata
+    toggleEditor: function (event, newEditorMode, existingEditor, overrides) {
+        var fromEditorMode = (existingEditor instanceof JsonMetadatumEditWidget) ? 'json' : 'simple';
+        var newValue = (overrides || {}).value || existingEditor.$el.attr('g-value');
+        if (!this._validate(fromEditorMode, newEditorMode, newValue)) {
+            return;
+        }
+
+        var row = existingEditor.$el;
+        existingEditor.destroy();
+        row.addClass('editing').empty();
+
+        var opts = _.extend({
+            el: row,
+            item: this.parentView.item,
+            key: row.attr('g-key'),
+            value: row.attr('g-value'),
+            accessLevel: this.accessLevel,
+            newDatum: false,
+            parentView: this,
+            fieldName: this.fieldName,
+            apiPath: this.apiPath,
+            onMetadataEdited: this.onMetadataEdited,
+            onMetadataAdded: this.onMetadataAdded
+        }, overrides || {});
+
+        this.parentView.modes[newEditorMode].editor(opts).render();
+    },
+
+    editMetadata: function () {
+        this.$el.addClass('editing');
+        this.$el.empty();
+
+        var opts = {
+            item: this.parentView.item,
+            key: this.$el.attr('g-key'),
+            value: this.$el.attr('g-value'),
+            accessLevel: this.accessLevel,
+            newDatum: false,
+            parentView: this,
+            fieldName: this.fieldName,
+            apiPath: this.apiPath,
+            onMetadataEdited: this.onMetadataEdited,
+            onMetadataAdded: this.onMetadataAdded
+        };
+
+        // If they're trying to open false, null, 6, etc which are not stored as strings
+        if (this.mode === 'json') {
+            try {
+                var jsonValue = JSON.parse(this.$el.attr('g-value'));
+
+                if (jsonValue !== undefined && !_.isObject(jsonValue)) {
+                    opts.value = jsonValue;
+                }
+            } catch (e) {
+                // ignore
+            }
+        }
+
+        this.parentView.modes[this.mode].editor(opts)
+            .render()
+            .$el.appendTo(this.$el);
+    },
+
+    render: function () {
+        this.$el.attr({
+            'g-key': this.key,
+            'g-value': _.bind(this.parentView.modes[this.mode].displayValue, this)()
+        }).empty();
+
+        this.$el.html(this.parentView.modes[this.mode].template({
+            key: this.key,
+            value: _.bind(this.parentView.modes[this.mode].displayValue, this)(),
+            accessLevel: this.accessLevel,
+            AccessType: AccessType
+        }));
+
+        return this;
+    }
+});
+
+var MetadatumEditWidget = View.extend({
+    events: {
+        'click .g-widget-metadata-cancel-button': 'cancelEdit',
+        'click .g-widget-metadata-save-button': 'save',
+        'click .g-widget-metadata-delete-button': 'deleteMetadatum',
+        'click .g-widget-metadata-toggle-button': function (event) {
+            var editorType;
+            // @todo modal
+            // in the future this event will have the new editorType (assuming a dropdown)
+            if (this instanceof JsonMetadatumEditWidget) {
+                editorType = 'simple';
+            } else {
+                editorType = 'json';
+            }
+
+            this.parentView.toggleEditor(event, editorType, this, {
+                // Save state before toggling editor
+                key: this.$el.find('.g-widget-metadata-key-input').val(),
+                value: this.getCurrentValue()
+            });
+        }
+    },
+
+    initialize: function (settings) {
+        this.item = settings.item;
+        this.key = settings.key || '';
+        this.fieldName = settings.fieldName || 'meta';
+        this.value = (settings.value !== undefined) ? settings.value : '';
+        this.accessLevel = settings.accessLevel;
+        this.newDatum = settings.newDatum;
+        this.fieldName = settings.fieldName;
+        this.apiPath = settings.apiPath;
+        this.onMetadataEdited = settings.onMetadataEdited;
+        this.onMetadataAdded = settings.onMetadataAdded;
+    },
+
+    editTemplate: MetadatumEditWidgetTemplate,
+
+    getCurrentValue: function () {
+        return this.$el.find('.g-widget-metadata-value-input').val();
+    },
+
+    deleteMetadatum: function (event) {
+        event.stopImmediatePropagation();
+        const target = $(event.currentTarget);
+        var metadataList = target.parent().parent();
+        var params = {
+            text: 'Are you sure you want to delete the metadatum <b>' +
+                _.escape(this.key) + '</b>?',
+            escapedHtml: true,
+            yesText: 'Delete',
+            confirmCallback: () => {
+                this.item.removeMetadata(this.key, function () {
+                    metadataList.remove();
+                }, null, {
+                    field: this.fieldName,
+                    path: this.apiPath
+                });
+            }
+        };
+        confirm(params);
+    },
+
+    cancelEdit: function (event) {
+        event.stopImmediatePropagation();
+        const target = $(event.currentTarget);
+        var curRow = target.parent().parent();
+        if (this.newDatum) {
+            curRow.remove();
+        } else {
+            this.parentView.render();
+        }
+    },
+
+    save: function (event, value) {
+        event.stopImmediatePropagation();
+        const target = $(event.currentTarget);
+        var curRow = target.parent(),
+            tempKey = curRow.find('.g-widget-metadata-key-input').val(),
+            tempValue = (value !== undefined) ? value : curRow.find('.g-widget-metadata-value-input').val();
+
+        if (this.newDatum && tempKey === '') {
+            events.trigger('g:alert', {
+                text: 'A key is required for all metadata.',
+                type: 'warning'
+            });
+            return;
+        }
+
+        var saveCallback = () => {
+            this.key = tempKey;
+            this.value = tempValue;
+
+            this.parentView.key = this.key;
+            this.parentView.value = this.value;
+
+            if (this instanceof JsonMetadatumEditWidget) {
+                this.parentView.mode = 'json';
+            } else {
+                this.parentView.mode = 'simple';
+            }
+
+            this.parentView.render();
+
+            this.newDatum = false;
+        };
+
+        var errorCallback = function (out) {
+            events.trigger('g:alert', {
+                text: out.message,
+                type: 'danger'
+            });
+        };
+
+        if (this.newDatum) {
+            if (this.onMetadataAdded) {
+                this.onMetadataAdded(tempKey, tempValue, saveCallback, errorCallback);
+            } else {
+                this.item.addMetadata(tempKey, tempValue, saveCallback, errorCallback, {
+                    field: this.fieldName,
+                    path: this.apiPath
+                });
+            }
+        } else {
+            if (this.onMetadataEdited) {
+                this.onMetadataEdited(tempKey, this.key, tempValue, saveCallback, errorCallback);
+            } else {
+                this.item.editMetadata(tempKey, this.key, tempValue, saveCallback, errorCallback, {
+                    field: this.fieldName,
+                    path: this.apiPath
+                });
+            }
+        }
+    },
+
+    render: function () {
+        this.$el.html(this.editTemplate({
+            item: this.item,
+            key: this.key,
+            value: this.value,
+            accessLevel: this.accessLevel,
+            newDatum: this.newDatum,
+            AccessType: AccessType
+        }));
+        this.$el.find('.g-widget-metadata-key-input').trigger('focus');
+
+        return this;
+    }
+});
+
+var JsonMetadatumEditWidget = MetadatumEditWidget.extend({
+    editTemplate: JsonMetadatumEditWidgetTemplate,
+
+    getCurrentValue: function () {
+        return this.editor.getText();
+    },
+
+    save: function (event) {
+        try {
+            MetadatumEditWidget.prototype.save.call(
+                this, event, this.editor.get());
+        } catch (err) {
+            events.trigger('g:alert', {
+                text: 'The field contains invalid JSON and can not be saved.',
+                type: 'warning'
+            });
+        }
+    },
+
+    render: function () {
+        MetadatumEditWidget.prototype.render.apply(this, arguments);
+
+        const jsonEditorEl = this.$el.find('.g-json-editor');
+        this.editor = new JSONEditor(jsonEditorEl[0], {
+            mode: 'tree',
+            modes: ['code', 'tree'],
+            onError: () => {
+                events.trigger('g:alert', {
+                    text: 'The field contains invalid JSON and can not be viewed in Tree Mode.',
+                    type: 'warning'
+                });
+            }
+        });
+
+        if (this.value !== undefined) {
+            this.editor.setText(JSON.stringify(this.value));
+            this.editor.expandAll();
+        }
+
+        return this;
+    }
+});
+
+/**
+ * This widget shows a list of metadata in a given item.
+ */
+var MetadataWidget = View.extend({
+    events: {
+        'click .g-add-json-metadata': function (event) {
+            this.addMetadata(event, 'json');
+        },
+        'click .g-add-simple-metadata': function (event) {
+            this.addMetadata(event, 'simple');
+        }
+    },
+
+    /**
+     * Creates a widget to display and optionally edit metadata fields.
+     *
+     * @param settings.item {Model} The model object whose metadata to display.
+     *    Can be any model type that inherits MetadataMixin.
+     * @param [settings.fieldName='meta'] {string} The name of the model attribute
+     *    to display/edit. The model attribute with this name should be an object
+     *    whose top level keys represent metadata keys.
+     * @param [settings.title='Metadata'] {string} Title for the widget.
+     * @param [settings.apiPath] {string} The relative API path to use when editing
+     *    metadata keys for this model. Defaults to using the MetadataMixin default path.
+     * @param [settings.accessLevel=AccessType.READ] {AccessType} The
+     *    access level for this widget. Use READ for read-only, or WRITE (or greater)
+     *    for adding editing capabilities as well.
+     * @param [settings.onMetadataAdded] {Function} A custom callback for when a
+     *    new metadata key is added to the list. If passed, will override the
+     *    default behavior of calling MetadataMixin.addMetadata.
+     * @param [settings.onMetadataEdited] {Function} A custom callback for when an
+     *    existing metadata key is updated. If passed, will override the default
+     *    behavior of calling MetadataMixin.editMetadata.
+     */
+    initialize: function (settings) {
+        this.item = settings.item;
+        this.fieldName = settings.fieldName || 'meta';
+        this.title = settings.title || 'Metadata';
+        this.apiPath = settings.apiPath;
+        this.accessLevel = settings.accessLevel;
+        this.onMetadataEdited = settings.onMetadataEdited;
+        this.onMetadataAdded = settings.onMetadataAdded;
+
+        this.item.on('g:changed', function () {
+            this.render();
+        }, this);
+        this.render();
+    },
+
+    modes: {
+        simple: {
+            editor: function (args) {
+                return new MetadatumEditWidget(args);
+            },
+            displayValue: function () {
+                return this.value;
+            },
+            template: MetadatumViewTemplate
+        },
+        json: {
+            editor: function (args) {
+                if (args.value !== undefined) {
+                    args.value = JSON.parse(args.value);
+                }
+                return new JsonMetadatumEditWidget(args);
+            },
+            displayValue: function () {
+                return JSON.stringify(this.value, null, 4);
+            },
+            validation: {
+                from: {
+                    simple: [
+                        function (value) {
+                            try {
+                                JSON.parse(value);
+                                return true;
+                            } catch (e) {
+                                // ignore
+                            }
+
+                            return false;
+                        },
+                        'The simple field is not valid JSON and can not be converted.'
+                    ]
+                }
+            },
+            template: JsonMetadatumViewTemplate
+        }
+    },
+
+    setItem: function (item) {
+        this.item = item;
+        return this;
+    },
+
+    // Does not support modal editing
+    getModeFromValue: function (value) {
+        return _.isString(value) ? 'simple' : 'json';
+    },
+
+    addMetadata: function (event, mode) {
+        var EditWidget = this.modes[mode].editor;
+        var value = (mode === 'json') ? '{}' : '';
+
+        var widget = new MetadatumWidget({
+            className: 'g-widget-metadata-row editing',
+            mode: mode,
+            key: '',
+            value: value,
+            item: this.item,
+            fieldName: this.fieldName,
+            apiPath: this.apiPath,
+            accessLevel: this.accessLevel,
+            parentView: this,
+            onMetadataEdited: this.onMetadataEdited,
+            onMetadataAdded: this.onMetadataAdded
+        });
+        widget.$el.appendTo(this.$('.g-widget-metadata-container'));
+
+        new EditWidget({
+            item: this.item,
+            key: '',
+            value: value,
+            fieldName: this.fieldName,
+            apiPath: this.apiPath,
+            accessLevel: this.accessLevel,
+            newDatum: true,
+            parentView: widget,
+            onMetadataEdited: this.onMetadataEdited,
+            onMetadataAdded: this.onMetadataAdded
+        })
+            .render()
+            .$el.appendTo(widget.$el);
+    },
+
+    render: function () {
+        var metaDict = this.item.get(this.fieldName) || {};
+        var metaKeys = Object.keys(metaDict);
+        metaKeys.sort(localeSort);
+
+        // Metadata header
+        this.$el.html(MetadataWidgetTemplate({
+            item: this.item,
+            title: this.title,
+            accessLevel: this.accessLevel,
+            AccessType: AccessType
+        }));
+
+        // Append each metadatum
+        _.each(metaKeys, function (metaKey) {
+            this.$el.find('.g-widget-metadata-container').append(new MetadatumWidget({
+                mode: this.getModeFromValue(metaDict[metaKey]),
+                key: metaKey,
+                value: metaDict[metaKey],
+                accessLevel: this.accessLevel,
+                parentView: this,
+                fieldName: this.fieldName,
+                apiPath: this.apiPath,
+                onMetadataEdited: this.onMetadataEdited,
+                onMetadataAdded: this.onMetadataAdded
+            }).render().$el);
+        }, this);
+
+        return this;
+    }
+});
+
+export default MetadataWidget;

package/dist-lib/src/views/widgets/NewAssetstoreWidget.js

@@ -0,0 +1,72 @@
+import AssetstoreModel from '@girder/core/models/AssetstoreModel';
+import View from '@girder/core/views/View';
+import { AssetstoreType } from '@girder/core/constants';
+
+import NewAssetstoreTemplate from '@girder/core/templates/widgets/newAssetstore.pug';
+
+import 'bootstrap/js/collapse';
+import 'bootstrap/js/transition';
+
+import '@girder/core/utilities/jquery/girderEnable';
+
+/**
+ * This widget is for creating new assetstores. The parent view is responsible
+ * for checking admin privileges before rendering this widget.
+ */
+var NewAssetstoreWidget = View.extend({
+    events: {
+        'submit #g-new-fs-form': function (e) {
+            this.createAssetstore(e, this.$('#g-new-fs-error'), {
+                type: AssetstoreType.FILESYSTEM,
+                name: this.$('#g-new-fs-name').val(),
+                root: this.$('#g-new-fs-root').val()
+            });
+        },
+
+        'submit #g-new-s3-form': function (e) {
+            this.createAssetstore(e, this.$('#g-new-s3-error'), {
+                type: AssetstoreType.S3,
+                name: this.$('#g-new-s3-name').val(),
+                bucket: this.$('#g-new-s3-bucket').val(),
+                prefix: this.$('#g-new-s3-prefix').val(),
+                accessKeyId: this.$('#g-new-s3-access-key-id').val(),
+                secret: this.$('#g-new-s3-secret').val(),
+                service: this.$('#g-new-s3-service').val(),
+                region: this.$('#g-new-s3-region').val(),
+                readOnly: this.$('#g-new-s3-readonly').is(':checked'),
+                inferCredentials: this.$('#g-new-s3-infercredentials').is(':checked'),
+                serverSideEncryption: this.$('#g-new-s3-sse').is(':checked'),
+                allowS3AcceleratedTransfer: this.$('#g-new-s3-accelerated-endpoint').is(':checked')
+            });
+        }
+    },
+
+    render: function () {
+        this.$el.html(NewAssetstoreTemplate());
+        return this;
+    },
+
+    /**
+     * Call this to make the request to the server to create the assetstore.
+     * @param e The submit event from the form.
+     * @param container The element to write the error message into.
+     * @param data The form data to POST to /assetstore
+     */
+    createAssetstore: function (e, container, data) {
+        e.preventDefault();
+        this.$('.g-new-assetstore-submit').girderEnable(false);
+        container.empty();
+
+        var assetstore = new AssetstoreModel();
+        assetstore.set(data);
+        assetstore.on('g:saved', function () {
+            this.$('.g-new-assetstore-submit').girderEnable(true);
+            this.trigger('g:created', assetstore);
+        }, this).on('g:error', function (err) {
+            this.$('.g-new-assetstore-submit').girderEnable(true);
+            container.text(err.responseJSON.message);
+        }, this).save();
+    }
+});
+
+export default NewAssetstoreWidget;

package/dist-lib/src/views/widgets/PaginateWidget.js

@@ -0,0 +1,37 @@
+import View from '@girder/core/views/View';
+
+import PaginateWidgetTemplate from '@girder/core/templates/widgets/paginateWidget.pug';
+
+/**
+ * This widget is used to provide a consistent widget for iterating amongst
+ * pages of a Collection.
+ */
+var PaginateWidget = View.extend({
+    events: {
+        'click .g-page-next:not(.disabled)': function () {
+            this.collection.fetchNextPage();
+        },
+        'click .g-page-prev:not(.disabled)': function () {
+            this.collection.fetchPreviousPage();
+        }
+    },
+
+    initialize: function (settings) {
+        this.collection = settings.collection;
+    },
+
+    /**
+     * Do not call render() until the collection has been fetched once.
+     */
+    render: function () {
+        this.$el.html(PaginateWidgetTemplate({
+            collection: this.collection
+        }));
+
+        this.$('.g-page-next').girderEnable(this.collection.hasNextPage());
+        this.$('.g-page-prev').girderEnable(this.collection.hasPreviousPage());
+        return this;
+    }
+});
+
+export default PaginateWidget;

package/dist-lib/src/views/widgets/PluginConfigBreadcrumbWidget.js

@@ -0,0 +1,33 @@
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+
+import PluginConfigBreadcrumbTemplate from '@girder/core/templates/widgets/pluginConfigBreadcrumb.pug';
+
+/**
+ * This widget provides a consistent breadcrumb to be displayed on the admin
+ * configuration pages for plugins.
+ */
+var PluginConfigBreadcrumbWidget = View.extend({
+    events: {
+        'click a.g-admin-console-link': function () {
+            router.navigate('admin', { trigger: true });
+        },
+        'click a.g-plugins-link': function () {
+            router.navigate('plugins', { trigger: true });
+        }
+    },
+
+    initialize: function (settings) {
+        this.pluginName = settings.pluginName;
+    },
+
+    render: function () {
+        this.$el.html(PluginConfigBreadcrumbTemplate({
+            pluginName: this.pluginName
+        }));
+
+        return this;
+    }
+});
+
+export default PluginConfigBreadcrumbWidget;