@girder/core 5.0.0-beta.1 → 5.0.0

package/dist-lib/src/views/body/PluginsView.js

@@ -0,0 +1,73 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { getPluginConfigRoute } from '@girder/core/utilities/PluginUtils';
+import { restRequest, cancelRestRequests } from '@girder/core/rest';
+
+import PluginsTemplate from '@girder/core/templates/body/plugins.pug';
+
+import '@girder/core/stylesheets/body/plugins.styl';
+
+/**
+ * This is the plugin management page for administrators.
+ */
+var PluginsView = View.extend({
+    events: {
+        'click a.g-plugin-config-link': function (evt) {
+            var route = $(evt.currentTarget).attr('g-route');
+            router.navigate(route, { trigger: true });
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        if (settings.all) {
+            this.allPlugins = settings.all;
+            this.render();
+        } else {
+            // Fetch the plugin list
+            restRequest({
+                url: 'system/plugins',
+                method: 'GET'
+            })
+                .done((resp) => {
+                    this.allPlugins = resp.all;
+                    this.render();
+                }).fail(() => {
+                    router.navigate('/', { trigger: true });
+                });
+        }
+    },
+
+    render: function () {
+        _.each(this.allPlugins, function (info, name) {
+            info.configRoute = getPluginConfigRoute(name);
+        }, this);
+
+        this.$el.html(PluginsTemplate({
+            allPlugins: this._sortPlugins(this.allPlugins)
+        }));
+
+        return this;
+    },
+
+    _sortPlugins: function (plugins) {
+        /* Sort a dictionary of plugins alphabetically so that the appear in a
+         * predictable order to the user.
+         *
+         * @param plugins: a dictionary to sort.  Each entry has a .name
+         *                 attribute used for sorting.
+         * @returns sortedPlugins: the sorted list. */
+        var sortedPlugins = _.map(plugins, function (value, key) {
+            return { key: key, value: value };
+        });
+        sortedPlugins.sort(function (a, b) {
+            return a.value.name.localeCompare(b.value.name);
+        });
+        return sortedPlugins;
+    }
+});
+
+export default PluginsView;

package/dist-lib/src/views/body/S3ImportView.js

@@ -0,0 +1,80 @@
+import $ from 'jquery';
+
+import BrowserWidget from '@girder/core/views/widgets/BrowserWidget';
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { restRequest } from '@girder/core/rest';
+
+import S3ImportTemplate from '@girder/core/templates/body/s3Import.pug';
+
+var S3ImportView = View.extend({
+    events: {
+        'submit .g-s3-import-form': function (e) {
+            e.preventDefault();
+
+            var destId = this.$('#g-s3-import-dest-id').val().trim().split(/\s/)[0],
+                destType = this.$('#g-s3-import-dest-type').val();
+
+            this.$('.g-validation-failed-message').empty();
+
+            this.assetstore.off('g:imported').on('g:imported', function () {
+                router.navigate(destType + '/' + destId, { trigger: true });
+            }, this).on('g:error', function (resp) {
+                this.$('.g-validation-failed-message').text(resp.responseJSON.message);
+            }, this).import({
+                importPath: this.$('#g-s3-import-path').val().trim(),
+                destinationId: destId,
+                destinationType: destType,
+                progress: true
+            });
+        },
+        'click .g-open-browser': '_openBrowser'
+    },
+
+    initialize: function (settings) {
+        this._browserWidgetView = new BrowserWidget({
+            parentView: this,
+            titleText: 'Destination',
+            helpText: 'Browse to a location to select it as the destination.',
+            submitText: 'Select Destination',
+            validate: function (model) {
+                const isValid = $.Deferred();
+                if (!model) {
+                    isValid.reject('Please select a valid root.');
+                } else {
+                    isValid.resolve();
+                }
+                return isValid.promise();
+            }
+        });
+        this.listenTo(this._browserWidgetView, 'g:saved', function (val) {
+            this.$('#g-s3-import-dest-id').val(val.id);
+            this.$('#g-s3-import-dest-type').val(val.get('_modelType'));
+            restRequest({
+                url: `resource/${val.id}/path`,
+                method: 'GET',
+                data: { type: val.get('_modelType') }
+            }).done((result) => {
+                // Only add the resource path if the value wasn't altered
+                if (this.$('#g-s3-import-dest-id').val() === val.id) {
+                    this.$('#g-s3-import-dest-id').val(`${val.id} (${result})`);
+                }
+            });
+        });
+        this.assetstore = settings.assetstore;
+        this.render();
+    },
+
+    render: function () {
+        this.$el.html(S3ImportTemplate({
+            assetstore: this.assetstore
+        }));
+        return this;
+    },
+
+    _openBrowser: function () {
+        this._browserWidgetView.setElement($('#g-dialog-container')).render();
+    }
+});
+
+export default S3ImportView;

package/dist-lib/src/views/body/SearchResultsView.js

@@ -0,0 +1,162 @@
+import _ from 'underscore';
+
+import View from '@girder/core/views/View';
+import { restRequest } from '@girder/core/rest';
+import SearchPaginateWidget from '@girder/core/views/widgets/SearchPaginateWidget';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+
+import SearchResultsTemplate from '@girder/core/templates/body/searchResults.pug';
+import SearchResultsTypeTemplate from '@girder/core/templates/body/searchResultsType.pug';
+import '@girder/core/stylesheets/body/searchResultsList.styl';
+
+/**
+ * This view display all the search results by instantiating a subview
+ * per each type found.
+ */
+var SearchResultsView = View.extend({
+    initialize: function (settings) {
+        this._query = settings.query || '';
+        this._mode = settings.mode || 'text';
+
+        this._sizeOneElement = 28;
+        this.pageLimit = 10;
+
+        this._request = restRequest({
+            url: 'resource/search',
+            data: {
+                q: this._query,
+                mode: this._mode,
+                types: JSON.stringify(SearchFieldWidget.getModeTypes(this._mode)),
+                limit: this.pageLimit
+            }
+        });
+        this.render();
+    },
+
+    /**
+     * Return a consistent and semantically-meaningful type ordering.
+     */
+    _getTypeOrdering: function (resultTypes) {
+        // This ordering places hopefully-more relevant types first
+        const builtinOrdering = ['collection', 'folder', 'item', 'group', 'user'];
+
+        // _.intersection will use the ordering of its first argument
+        const orderedKnownTypes = _.intersection(builtinOrdering, resultTypes);
+        const orderedUnknownTypes =  _.difference(resultTypes, builtinOrdering).sort();
+
+        return orderedKnownTypes.concat(orderedUnknownTypes);
+    },
+
+    render: function () {
+        this.$el.html(SearchResultsTemplate({
+            query: this._query
+        }));
+        this._subviews = {};
+
+        this._request
+            .done((results) => {
+                this.$('.g-search-pending').hide();
+
+                const resultTypes =  _.keys(results);
+                const orderedTypes = this._getTypeOrdering(resultTypes);
+                _.each(orderedTypes, (type) => {
+                    if (results[type].length) {
+                        this._subviews[type] = new SearchResultsTypeView({
+                            parentView: this,
+                            query: this._query,
+                            mode: this._mode,
+                            type: type,
+                            limit: this.pageLimit,
+                            initResults: results[type],
+                            sizeOneElement: this._sizeOneElement
+                        })
+                            .render();
+                        this._subviews[type].$el
+                            .appendTo(this.$('.g-search-results-container'));
+                    }
+                });
+
+                if (_.isEmpty(this._subviews)) {
+                    this.$('.g-search-no-results').show();
+                }
+            });
+
+        return this;
+    }
+});
+
+/**
+ * This subview display all the search results for one type.
+ * It also contain a pagination widget that provide a consistent widget
+ * for iterating amongst pages of a list of search results.
+ */
+var SearchResultsTypeView = View.extend({
+    className: 'g-search-results-type-container',
+
+    initialize: function (settings) {
+        this._query = settings.query;
+        this._mode = settings.mode;
+        this._type = settings.type;
+        this._initResults = settings.initResults || [];
+        this._pageLimit = settings.limit || 10;
+        this._sizeOneElement = settings.sizeOneElement || 30;
+
+        this._paginateWidget = new SearchPaginateWidget({
+            parentView: this,
+            type: this._type,
+            query: this._query,
+            mode: this._mode,
+            limit: this._pageLimit
+        })
+            .on('g:changed', () => {
+                this._results = this._paginateWidget.results;
+                this.render();
+            });
+
+        this._results = this._initResults;
+    },
+
+    _getTypeName: function (type) {
+        const names = {
+            collection: 'Collections',
+            group: 'Groups',
+            user: 'Users',
+            folder: 'Folders',
+            item: 'Items'
+        };
+        return names[type] || type;
+    },
+
+    _getTypeIcon: function (type) {
+        const icons = {
+            user: 'user',
+            group: 'users',
+            collection: 'sitemap',
+            folder: 'folder',
+            item: 'doc-text-inv'
+        };
+        return icons[type] || 'icon-attention-alt';
+    },
+
+    render: function () {
+        this.$el.html(SearchResultsTypeTemplate({
+            results: this._results,
+            collectionName: this._getTypeName(this._type),
+            type: this._type,
+            icon: this._getTypeIcon(this._type)
+        }));
+
+        /* This size of the results list cannot be known until after the fetch completes. And we don't want to set
+        the 'min-height' to the max results size, because we'd frequently have lots of whitespace for short result
+        lists. Do not try to move that set in stylesheet.
+        */
+        this.$('.g-search-results-type').css('min-height', `${this._initResults.length * this._sizeOneElement}px`);
+        this._paginateWidget
+            .setElement(this.$(`#${this._type}Paginate`))
+            .render();
+
+        return this;
+    }
+});
+
+export default SearchResultsView;

package/dist-lib/src/views/body/SystemConfigurationView.js

@@ -0,0 +1,177 @@
+import _ from 'underscore';
+
+import AccessWidget from '@girder/core/views/widgets/AccessWidget';
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { restRequest, cancelRestRequests } from '@girder/core/rest';
+import CollectionCreationPolicyModel from '@girder/core/models/CollectionCreationPolicyModel';
+
+import SystemConfigurationTemplate from '@girder/core/templates/body/systemConfiguration.pug';
+
+import '@girder/core/stylesheets/body/systemConfig.styl';
+
+import 'bootstrap/js/collapse';
+import 'bootstrap/js/transition';
+import 'bootstrap-switch'; // /dist/js/bootstrap-switch.js',
+import 'bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css';
+
+/**
+ * The system config page for administrators.
+ */
+var SystemConfigurationView = View.extend({
+    events: {
+        'submit .g-settings-form': function (event) {
+            event.preventDefault();
+            this.$('.g-submit-settings').girderEnable(false);
+            this.$('#g-settings-error-message').empty();
+
+            this.$('#g-core-collection-create-policy').val(JSON.stringify(this._covertCollectionCreationPolicy()));
+            var settings = _.map(this.settingsKeys, (key) => {
+                const element = this.$('#g-' + key.replace(/[_.]/g, '-'));
+
+                if (_.contains(
+                    [
+                        'core.api_keys',
+                        'core.enable_password_login',
+                    ],
+                    key
+                )) { // booleans via checkboxes
+                    return {
+                        key,
+                        value: element.is(':checked')
+                    };
+                } else { // all other settings use $.fn.val()
+                    return {
+                        key,
+                        value: element.val() || null
+                    };
+                }
+            });
+
+            restRequest({
+                method: 'PUT',
+                url: 'system/setting',
+                data: {
+                    list: JSON.stringify(settings)
+                },
+                error: null
+            }).done(() => {
+                this.$('.g-submit-settings').girderEnable(true);
+                events.trigger('g:alert', {
+                    icon: 'ok',
+                    text: 'Settings saved.',
+                    type: 'success',
+                    timeout: 4000
+                });
+            }).fail((resp) => {
+                this.$('.g-submit-settings').girderEnable(true);
+                this.$('#g-settings-error-message').text(resp.responseJSON.message);
+            });
+        },
+    },
+
+    initialize: function () {
+        cancelRestRequests('fetch');
+
+        var keys = [
+            'core.api_keys',
+            'core.contact_email_address',
+            'core.brand_name',
+            'core.banner_color',
+            'core.privacy_notice',
+            'core.cookie_lifetime',
+            'core.enable_password_login',
+            'core.email_from_address',
+            'core.email_host',
+            'core.registration_policy',
+            'core.email_verification',
+            'core.server_root',
+            'core.smtp_host',
+            'core.smtp.port',
+            'core.smtp.encryption',
+            'core.smtp.username',
+            'core.smtp.password',
+            'core.upload_minimum_chunk_size',
+            'core.cors.allow_origin',
+            'core.cors.allow_methods',
+            'core.cors.allow_headers',
+            'core.add_to_group_policy',
+            'core.collection_create_policy',
+            'core.user_default_folders',
+        ];
+        this.settingsKeys = keys;
+        restRequest({
+            url: 'system/setting',
+            method: 'GET',
+            data: {
+                list: JSON.stringify(keys)
+            }
+        }).done((resp) => {
+            this.settings = resp;
+            this.render();
+        });
+    },
+
+    render: function () {
+        this.$el.html(SystemConfigurationTemplate({
+            settings: this.settings,
+            JSON: window.JSON
+        }));
+
+        var enableCollectionCreationPolicy = this.settings['core.collection_create_policy'] ? this.settings['core.collection_create_policy'].open : false;
+
+        this.$('.g-setting-switch')
+            .bootstrapSwitch()
+            .bootstrapSwitch('state', enableCollectionCreationPolicy)
+            .off('switchChange.bootstrapSwitch')
+            .on('switchChange.bootstrapSwitch', (event, state) => {
+                if (state) {
+                    this._renderCollectionCreationPolicyAccessWidget();
+                } else {
+                    this.accessWidget.destroy();
+                    this.accessWidget = null;
+                }
+            });
+
+        if (enableCollectionCreationPolicy) {
+            this._renderCollectionCreationPolicyAccessWidget();
+        }
+
+        return this;
+    },
+
+    _renderCollectionCreationPolicyAccessWidget: function () {
+        var collectionCreationPolicyModel = new CollectionCreationPolicyModel();
+
+        this.accessWidget = new AccessWidget({
+            el: this.$('.g-collection-create-policy-container .access-widget-container'),
+            modelType: 'collection_creation_policy',
+            model: collectionCreationPolicyModel,
+            parentView: this,
+            modal: false,
+            hideRecurseOption: true,
+            hideSaveButton: true,
+            hidePrivacyEditor: true,
+            hideAccessType: true,
+            noAccessFlag: true
+        });
+    },
+
+    _covertCollectionCreationPolicy: function () {
+        // get collection creation policy from AccessWidget and format the result properly
+        var settingValue = null;
+        if (this.$('.g-setting-switch').bootstrapSwitch('state') && this.accessWidget) {
+            settingValue = { open: this.$('.g-setting-switch').bootstrapSwitch('state') };
+            var accessList = this.accessWidget.getAccessList();
+            _.each(_.keys(accessList), (key) => {
+                settingValue[key] = _.pluck(accessList[key], 'id');
+            });
+        } else {
+            settingValue = this.settings['core.collection_create_policy'];
+            settingValue.open = false;
+        }
+        return settingValue;
+    }
+});
+
+export default SystemConfigurationView;

package/dist-lib/src/views/body/UserAccountView.js

@@ -0,0 +1,179 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import ApiKeyListWidget from '@girder/core/views/widgets/ApiKeyListWidget';
+import UserOtpManagementWidget from '@girder/core/views/widgets/UserOtpManagementWidget';
+import router from '@girder/core/router';
+import UserModel from '@girder/core/models/UserModel';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import events from '@girder/core/events';
+import { getCurrentUser } from '@girder/core/auth';
+import { cancelRestRequests } from '@girder/core/rest';
+
+import UserAccountTemplate from '@girder/core/templates/body/userAccount.pug';
+
+import '@girder/core/stylesheets/body/userAccount.styl';
+
+import 'bootstrap/js/tab';
+
+/**
+ * This is the view for the user account (profile) page.
+ */
+var UserAccountView = View.extend({
+    events: {
+        'submit #g-user-info-form': function (event) {
+            event.preventDefault();
+            this.$('#g-user-info-error-msg').empty();
+
+            var params = {
+                email: this.$('#g-email').val(),
+                firstName: this.$('#g-firstName').val(),
+                lastName: this.$('#g-lastName').val()
+            };
+
+            if (this.$('#g-admin').length > 0) {
+                params.admin = this.$('#g-admin').is(':checked');
+            }
+
+            this.user.set(params);
+
+            this.user.off('g:error').on('g:error', function (err) {
+                var msg = err.responseJSON.message;
+                this.$('#g-' + err.responseJSON.field).trigger('focus');
+                this.$('#g-user-info-error-msg').text(msg);
+            }, this).off('g:saved')
+                .on('g:saved', function () {
+                    events.trigger('g:alert', {
+                        icon: 'ok',
+                        text: 'Info saved.',
+                        type: 'success',
+                        timeout: 4000
+                    });
+                }, this).save();
+        },
+        'submit #g-password-change-form': function (event) {
+            event.preventDefault();
+            this.$('#g-password-change-error-msg').empty();
+
+            if (this.$('#g-password-new').val() !==
+                    this.$('#g-password-retype').val()) {
+                this.$('#g-password-change-error-msg').text(
+                    'Passwords do not match, try again.'
+                );
+                this.$('#g-password-retype,#g-password-new').val('');
+                this.$('#g-password-new').trigger('focus');
+                return;
+            }
+
+            this.user.off('g:error').on('g:error', function (err) {
+                var msg = err.responseJSON.message;
+                this.$('#g-password-change-error-msg').text(msg);
+            }, this).off('g:passwordChanged')
+                .on('g:passwordChanged', function () {
+                    events.trigger('g:alert', {
+                        icon: 'ok',
+                        text: 'Password changed.',
+                        type: 'success',
+                        timeout: 4000
+                    });
+                    this.$('#g-password-old,#g-password-new,#g-password-retype').val('');
+                }, this);
+
+            // here and in the template, an admin user who wants to change their
+            //   own password is intentionally forced to re-enter their old
+            //   password
+            if (this.isCurrentUser) {
+                this.user.changePassword(
+                    this.$('#g-password-old').val(),
+                    this.$('#g-password-new').val()
+                );
+            } else {
+                this.user.adminChangePassword(this.$('#g-password-new').val());
+            }
+        }
+    },
+
+    initialize: function (settings) {
+        this.tab = settings.tab || 'info';
+        this.user = settings.user || getCurrentUser();
+        this.isCurrentUser = getCurrentUser() &&
+            settings.user.id === getCurrentUser().id;
+
+        this.model = this.user;
+        this.temporary = settings.temporary;
+
+        if (!this.user || this.user.getAccessLevel() < AccessType.WRITE) {
+            router.navigate('', { trigger: true });
+            return;
+        }
+
+        cancelRestRequests('fetch');
+
+        this.apiKeyListWidget = new ApiKeyListWidget({
+            user: this.user,
+            parentView: this
+        });
+
+        this.userOtpManagementWidget = new UserOtpManagementWidget({
+            user: this.user,
+            parentView: this
+        });
+
+        this.render();
+    },
+
+    render: function () {
+        if (getCurrentUser() === null) {
+            router.navigate('', { trigger: true });
+            return;
+        }
+
+        this.$el.html(UserAccountTemplate({
+            user: this.model,
+            isCurrentUser: this.isCurrentUser,
+            getCurrentUser: getCurrentUser,
+            temporaryToken: this.temporary
+        }));
+
+        _.each($('.g-account-tabs>li>a'), function (el) {
+            var tabLink = $(el);
+            tabLink.tab().on('shown.bs.tab', (e) => {
+                this.tab = $(e.currentTarget).attr('name');
+                router.navigate('useraccount/' + this.model.id + '/' + this.tab);
+
+                if (this.tab === 'apikeys') {
+                    this.apiKeyListWidget.setElement(
+                        this.$('.g-api-keys-list-container')).render();
+                } else if (this.tab === 'otp') {
+                    this.userOtpManagementWidget
+                        .setElement(this.$('.g-account-otp-container'))
+                        .render();
+                }
+            });
+
+            if (tabLink.attr('name') === this.tab) {
+                tabLink.tab('show');
+            }
+        }, this);
+
+        return this;
+    }
+}, {
+    /**
+     * Helper function for fetching the user by id, then render the view.
+     */
+    fetchAndInit: function (id, tab) {
+        var user = new UserModel();
+        user.set({ _id: id }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', UserAccountView, {
+                user: user,
+                tab: tab
+            });
+        }, this).on('g:error', function () {
+            router.navigate('', { trigger: true });
+        }, this).fetch();
+    }
+});
+
+export default UserAccountView;