Build FeedbackDialog and FeedbackDialogModel into XH, Fixes #379 (#414)

admin/AppComponent.js

@@ -55,6 +55,7 @@ export class AppComponent extends Component {
                 })
             ],
             hideAdminButton: true,
+            hideFeedbackButton: true,
             refreshButtonProps: {
                 onClick: this.onRefreshClick
             }

app/AppContainer.js

@@ -17,6 +17,7 @@ import {logoutButton} from '@xh/hoist/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 
 import {
+    feedbackDialog,
     aboutDialog,
     exceptionDialog,
     impersonationBar,
@@ -86,6 +87,7 @@ export class AppContainer extends Component {
                     ),
                     loadMask({model: XH.appLoadModel}),
                     messageSource({model: XH.messageSourceModel}),
+                    feedbackDialog({model: XH.feedbackDialogModel}),
                     aboutDialog()
                 );
             default:

app/impl/AboutDialog.js

@@ -20,9 +20,12 @@ import './AboutDialog.scss';
  */
 @HoistComponent()
 export class AboutDialog extends Component {
+
     render() {
+        if (!XH.aboutIsOpen) return null;
+
         return dialog({
-            isOpen: XH.aboutIsOpen,
+            isOpen: true,
             isCloseButtonShown: false,
             icon: Icon.info({size: 'lg'}),
             cls: 'xh-about-dialog',

cmp/feedback/FeedbackDialog.js → app/impl/FeedbackDialog.js

@@ -6,10 +6,11 @@
  */
 import {Component} from 'react';
 import {button, dialog} from '@xh/hoist/kit/blueprint';
-import {HoistComponent, elemFactory} from '@xh/hoist/core';
+import {HoistComponent, elemFactory, XH} from '@xh/hoist/core';
 import {filler} from '@xh/hoist/cmp/layout';
 import {textAreaField} from '@xh/hoist/cmp/form';
 import {toolbar} from '@xh/hoist/cmp/toolbar';
+import {FeedbackDialogModel} from './FeedbackDialogModel';
 
 /**
  * A simple dialog component to collect user feedback from directly within the application.
@@ -18,12 +19,16 @@ import {toolbar} from '@xh/hoist/cmp/toolbar';
 @HoistComponent()
 export class FeedbackDialog extends Component {
 
+    localModel = new FeedbackDialogModel();
+
     render() {
+        if (!XH.feedbackIsOpen) return null;
+
         const model = this.model;
         return dialog({
             title: 'Submit Feedback',
             style: {width: 450},
-            isOpen: model.isOpen,
+            isOpen: true,
             onClose: this.onCloseClick,
             canOutsideClickClose: false,
             items: [

cmp/feedback/FeedbackDialogModel.js → app/impl/FeedbackDialogModel.js

@@ -13,7 +13,6 @@ import {ToastManager} from '@xh/hoist/toast';
 /** Model for a FeedbackDialog, managing its open/close state and feedback string. */
 export class FeedbackDialogModel {
 
-    @observable isOpen = false;
     @setter @observable feedback = null;
 
     submitFeedback() {
@@ -31,14 +30,10 @@ export class FeedbackDialogModel {
             .catchDefault();
     }
 
-    @action
-    open() {
-        this.isOpen = true;
-    }
 
     @action
     close() {
-        this.isOpen = false;
+        XH.feedbackIsOpen = false;
         this.feedback = null;
     }
 

app/impl/VersionBar.js

@@ -17,20 +17,18 @@ export class VersionBar extends Component {
     render() {
         const env = XH.getEnv('appEnvironment'),
             version = XH.getEnv('clientVersion'),
-            isVisible = (env !== 'Production' || XH.getPref('xhForceEnvironmentFooter')),
-            cls = `xh-version-bar xh-version-bar-${env.toLowerCase()}`,
-            info = Icon.info({onClick: this.showAbout});
+            isVisible = (env !== 'Production' || XH.getPref('xhForceEnvironmentFooter'));
 
         if (!isVisible) return null;
 
         return box({
             justifyContent: 'center',
             alignItems: 'center',
             flex: 'none',
-            cls,
+            cls: `xh-version-bar xh-version-bar-${env.toLowerCase()}`,
             items: [
                 [XH.appName, env, version].join(' • '),
-                info
+                Icon.info({onClick: this.showAbout})
             ]
         });
     }

app/impl/index.js

@@ -11,3 +11,4 @@ export * from './ImpersonationBar';
 export * from './LoginPanel';
 export * from './UpdateBar';
 export * from './VersionBar';
+export * from './FeedbackDialog';

cmp/appbar/AppBar.js

@@ -9,12 +9,11 @@ import {Component} from 'react';
 import {PropTypes as PT} from 'prop-types';
 import {elemFactory, HoistComponent, XH} from '@xh/hoist/core';
 import {navbar, navbarGroup} from '@xh/hoist/kit/blueprint';
-import {launchAdminButton, logoutButton, themeToggleButton} from '@xh/hoist/cmp/button';
+import {feedbackButton, launchAdminButton, logoutButton, refreshButton, themeToggleButton} from '@xh/hoist/cmp/button';
 import {span} from '@xh/hoist/cmp/layout';
 import {appBarSeparator} from '@xh/hoist/cmp/appbar';
 import {isEmpty} from 'lodash';
 import './AppBar.scss';
-import {refreshButton} from '../button/RefreshButton';
 
 /**
  * A standard application navigation bar which displays the application name and a standard set of
@@ -37,6 +36,8 @@ export class AppBar extends Component {
         rightItems: PT.node,
         /** Set to true to hide the Launch Admin button. Will be automatically hidden for users without the HOIST_ADMIN role. */
         hideAdminButton: PT.bool,
+        /** Set to true to hide the Feedback button. */
+        hideFeedbackButton: PT.bool,
         /** Set to true to hide the Theme Toggle button. */
         hideThemeButton: PT.bool,
         /** Set to true to hide the Logout button. Will be automatically hidden for applications with logout disabled. */
@@ -48,7 +49,7 @@ export class AppBar extends Component {
     };
 
     render() {
-        const {icon, title, leftItems, rightItems, hideAdminButton, hideThemeButton, hideLogoutButton, hideRefreshButton, refreshButtonProps = {}} = this.props;
+        const {icon, title, leftItems, rightItems, hideAdminButton, hideFeedbackButton, hideThemeButton, hideLogoutButton, hideRefreshButton, refreshButtonProps = {}} = this.props;
         return navbar({
             cls: 'xh-appbar',
             items: [
@@ -65,6 +66,7 @@ export class AppBar extends Component {
                     align: 'right',
                     items: [
                         ...rightItems || [],
+                        feedbackButton({omit: hideFeedbackButton}),
                         themeToggleButton({omit: hideThemeButton}),
                         launchAdminButton({omit: hideAdminButton}),
                         logoutButton({omit: hideLogoutButton}),

cmp/button/FeedbackButton.js

@@ -0,0 +1,47 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | [email protected])
+ *
+ * Copyright © 2018 Extremely Heavy Industries Inc.
+ */
+
+import {Component} from 'react';
+import {PropTypes as PT} from 'prop-types';
+import {elemFactory, HoistComponent, XH} from '@xh/hoist/core';
+import {button} from '@xh/hoist/kit/blueprint';
+import {Icon} from '@xh/hoist/icon';
+
+/**
+ * Convenience Button preconfigured for use as a trigger for the XH feedback dialog
+ * Accepts props documented below as well as any supported by Blueprint's Button.
+ *
+ * Can be provided an onClick handler, otherwise will call XH.showFeedbackDialog.
+ */
+@HoistComponent()
+export class FeedbackButton extends Component {
+
+    static propTypes = {
+        icon: PT.element,
+        title: PT.string,
+        onClick: PT.func
+    };
+
+    render() {
+        const {icon, onClick, ...rest} = this.props;
+        return button({
+            icon: icon || Icon.comment(),
+            title: this.title || 'Feedback',
+            onClick: onClick || this.onFeedbackClick,
+            ...rest
+        });
+    }
+
+    //---------------------------
+    // Implementation
+    //---------------------------
+    onFeedbackClick = () => {
+        XH.showFeedbackDialog();
+    }
+
+}
+export const feedbackButton = elemFactory(FeedbackButton);

cmp/button/index.js

@@ -8,4 +8,5 @@ export * from './ThemeToggleButton';
 export * from './LaunchAdminButton';
 export * from './LogoutButton';
 export * from './RefreshButton';
-export * from './ExportButton';
+export * from './ExportButton';
+export * from './FeedbackButton';

core/XH.js

@@ -109,6 +109,9 @@ class XHClass {
     /** Show about dialog? */
     @observable aboutIsOpen = false;
 
+    /** Show feedback dialog? */
+    @observable feedbackIsOpen = false;
+
     /** Updated App version available, as reported by server. */
     @observable updateVersion = null;
 
@@ -245,6 +248,17 @@ class XHClass {
         this.messageSourceModel.show(config);
     }
 
+    //-------------------
+    // Feedback Support
+    //-------------------
+    /**
+     * Show a modal 'feedback' dialog.
+     */
+    @action
+    showFeedbackDialog() {
+        this.feedbackIsOpen = true;
+    }
+
     //---------------------------------
     // Framework Methods
     //---------------------------------