path: root/qt-gerrit-ui-plugin/qt-gerrit-ui-plugin.html

//
// Copyright (C) 2019 The Qt Company
//
// This plugin provides UI customization for codereview.qt-project.org
//

<dom-module id="qt-gerrit-ui-plugin">
    <script>
        'use strict';

        var BUTTONS = {
            'gerrit-plugin-qt-workflow~abandon' : {
                header: 'Abandon the change?',
                action_name: 'abandon'
            },
            'gerrit-plugin-qt-workflow~defer' : {
                header: 'Defer the change?',
                action_name: 'defer'
            },
            'gerrit-plugin-qt-workflow~reopen' : {
                header: 'Reopen the change?',
                action_name: 'reopen'
            },
            'gerrit-plugin-qt-workflow~stage' : {
                header: 'Submit to staging?',
                action_name: 'stage'
            },
            'gerrit-plugin-qt-workflow~unstage' : {
                header: 'Unstage the change?',
                action_name: 'unstage'
            }
        };

        Gerrit.install(plugin => {

            plugin.custom_popup = null;
            plugin.custom_popup_promise = null;
            plugin.buttons = null;

            function htmlToElement(html) {
                var template = document.createElement('template');
                html = html.trim(); // No white space
                template.innerHTML = html;
                return template.content.firstChild;
            }

            // Customize header
            plugin.hook('header-title',  {replace: true} ).onAttached(element => {
                const css_str = '<style> \
                                  .titleText::before {\
                                  background-image: url("/static/logo_qt.png");\
                                  background-size: 40px 30px;\
                                  background-repeat: no-repeat;\
                                  content: "";\
                                  display: inline-block;\
                                  height: 36px;\
                                  vertical-align: text-top;\
                                  width: 46px;\
                                }\
                                </style>';
                const html_str = '<div id="qt-header"> \
                                    <div class="titleText">Code Review</div> \
                                  </div>';
                var elem = htmlToElement(css_str);
                element.appendChild(elem);
                elem = htmlToElement(html_str);
                element.appendChild(elem);
            });

            // Customize header changes dropdown menu
            plugin.hook('header-dropdown-Changes').onAttached(element => {
                // this is ugly, but there is no API for this
                var ul_elem = element.content.children[1].children[0].children[0].children[0];
                var li_elem;
                var link_elem;

                li_elem = htmlToElement(ul_elem.children[1].outerHTML);
                link_elem = li_elem.children[0].children[1];
                link_elem.text = 'Staged';
                link_elem.href = '/q/status:staged';
                ul_elem.insertBefore(li_elem, ul_elem.children[2]);

                li_elem = htmlToElement(ul_elem.children[1].outerHTML);
                link_elem = li_elem.children[0].children[1];
                link_elem.text = 'Integrating';
                link_elem.href = '/q/status:integrating';
                ul_elem.insertBefore(li_elem, ul_elem.children[3]);

                li_elem = htmlToElement(ul_elem.children[1].outerHTML);
                link_elem = li_elem.children[0].children[1];
                link_elem.text = 'Deferred';
                link_elem.href = '/q/status:deferred';
                ul_elem.insertBefore(li_elem, ul_elem.children[5]);
            });

            // Hide Sanity Bot review score row by default in reply dialog
            plugin.hook('review-label-scores-Sanity-Review').onAttached(element => {
                const html = '<div onclick="\
                                            document.getElementById(\'sanitybotreviewmorediv\').style.display=\'none\'; \
                                            document.getElementById(\'sanitybotreviewscorediv\').style.display=\'block\'; \
                                            \"> \
                                  <div id="sanitybotreviewmorediv" style="display:block;">more...</div> \
                                  <div id="sanitybotreviewscorediv" style="display:none;"></div> \
                              </div>';
                var wrapper_elem = document.createElement('div');
                wrapper_elem.innerHTML = html;
                var child_elem = element.content.children[0];
                element.content.replaceChild(wrapper_elem, child_elem);
                document.getElementById('sanitybotreviewscorediv').appendChild(child_elem);
            });

            // Customize change view
            plugin.on('labelchange', function(changeInfo) {
                plugin.ca = plugin.changeActions();

                // always hide the rebase button
                plugin.ca.setActionHidden('revision', 'rebase', true);

                // Hide 'Sanity-Review+1' button in header
                var secondaryActionsElem = document.getElementById("secondaryActions");
                if (secondaryActionsElem &&
                    secondaryActionsElem.innerHTML &&
                    secondaryActionsElem.innerHTML.indexOf('Sanity-Review+1') != -1) {
                    plugin.ca.hideQuickApproveAction();
                }

                // Remove any existing buttons
                if (plugin.buttons) {
                    for (var key in BUTTONS) {
                        if (BUTTONS.hasOwnProperty(key)) {
                            if(typeof plugin.buttons[key] !== 'undefined' && plugin.buttons[key] !== null) {
                                plugin.ca.removeTapListener(plugin.buttons[key], (param) => {} );
                                plugin.ca.remove(plugin.buttons[key]);
                                plugin.buttons[key] = null;
                            }
                        }
                    }
                } else plugin.buttons = [];

                // Add buttons based on server response
                for (var key in BUTTONS) {
                    if (BUTTONS.hasOwnProperty(key)) {
                        var action = plugin.ca.getActionDetails(key);
                        if (action) {
                            // hide dropdown action
                            plugin.ca.setActionHidden(action.__type, action.__key, true);

                            // add button
                            plugin.buttons[key] = plugin.ca.add(action.__type, action.label);
                            plugin.ca.setTitle(plugin.buttons[key], action.title);
                            plugin.ca.addTapListener(plugin.buttons[key], buttonEventCallback);
                        }
                    }
                }

                function buttonEventCallback(event) {
                    var button_key = event.type.substring(0, event.type.indexOf('-tap'));
                    var button_action = null;
                    var button_index;
                    for (var k in plugin.buttons) {
                        if (plugin.buttons[k] === button_key) {
                            button_action = plugin.ca.getActionDetails(k);
                            button_index = k;
                            break;
                        }
                    }
                    if (button_action) {
                        plugin.popup('qt-gerrit-ui-confirm-dialog').then( (param) => {
                            plugin.custom_popup_promise = param;
                            plugin.custom_popup.set('header', BUTTONS[button_index].header);
                            plugin.custom_popup.set('subject', changeInfo.subject);
                            plugin.custom_popup.set('action_name', BUTTONS[button_index].action_name);
                            plugin.custom_popup.set('api_url', button_action.__url);
                        }).catch( (param) => { console.log('unexpected error: promise failed');});
                    } else console.log('unexpected error: no action');
                }
            });
        });
    </script>
</dom-module>

<dom-module id="qt-gerrit-ui-confirm-dialog">
    <template>
        <style include="shared-styles">
            #dialog {
                min-width: 40em;
            }
            p {
                margin-bottom: 1em;
            }
            @media screen and (max-width: 50em) {
                #dialog {
                      min-width: inherit;
                      width: 100%;
                }
            }
        </style>
        <gr-dialog
            id="dialog"
            confirm-label="Continue"
            confirm-on-enter
            on-cancel="_handleCancelTap"
            on-confirm="_handleConfirmTap">
            <div class="header" slot="header">[[header]]</div>
            <div class="main" slot="main">
                <p>Ready to [[action_name]] &ldquo;<strong>[[subject]]</strong>&rdquo;?</p>
                <p class="main" style="color: red;font-weight: bold;">[[errorMessage]]</p>
            </div>
        </gr-dialog>
    </template>
    <script>
        'use strict';

        var qtgerrituiconfirmdialog = Polymer({
            is: 'qt-gerrit-ui-confirm-dialog',

            properties: {
                header: {
                    type: String,
                    value: '...wait...'
                },
                action_name: {
                    type: String,
                    value: ''
                },
                api_url: {
                    type: String,
                    value: ''
                },
                subject: {
                    type: String,
                    value: ''
                },
                errorMessage: {
                    type: String,
                    value: ''
                }
            },

            attached: function() {
                this.plugin.custom_popup = this;
            },

            resetFocus(e) {
                this.$.dialog.resetFocus();
            },

            _handleConfirmTap(e) {
                this.$.dialog.disabled = true;
                e.preventDefault();
                this.plugin.restApi().post(this.get('api_url'), {})
                    .then((ok_resp) => {
                        this.$.dialog.disabled = false;
                        this.plugin.custom_popup_promise.close();
                        this.plugin.custom_popup_promise = null;
                        window.location.reload(true);
                    }).catch((failed_resp) => {
                        this.$.dialog.disabled = false;
                        this.set('errorMessage', 'FAILED: ' + failed_resp);
                    });
            },

            _handleCancelTap(e) {
                e.preventDefault();
                this.plugin.custom_popup_promise.close();
                this.plugin.custom_popup_promise = null;
            },
        });
    </script>
</dom-module>