From b2f99b759004b0adb8a5f7eff7f69e3b3d986e2d Mon Sep 17 00:00:00 2001 From: Ryan Lerch Date: Feb 07 2018 00:39:06 +0000 Subject: show descriptions of widgets in the widget select --- diff --git a/hubs/widgets/badges/__init__.py b/hubs/widgets/badges/__init__.py index a5ba49c..dba5f7f 100644 --- a/hubs/widgets/badges/__init__.py +++ b/hubs/widgets/badges/__init__.py @@ -10,10 +10,14 @@ from hubs.widgets.caching import CachedFunction class Badges(Widget): - name = "badges" position = "right" hub_types = ["stream", "user"] + description = { + "stream": "Display a summary of your Fedora Badges", + "user": "Display a summary of your Fedora Badges", + "team": "Not shown on team hub" + } def get_template_environment(self): env = super(Badges, self).get_template_environment() diff --git a/hubs/widgets/base.py b/hubs/widgets/base.py index 5997082..509853c 100644 --- a/hubs/widgets/base.py +++ b/hubs/widgets/base.py @@ -55,6 +55,7 @@ class Widget(object): name = None label = None display_css = None + description = None position = None parameters = [] views_module = None @@ -254,6 +255,7 @@ class Widget(object): param.to_dict() for param in self.get_parameters() ], hub_types=self.hub_types, + description=self.description, ) if instance is not None: props.update({ diff --git a/hubs/widgets/mailinglist/__init__.py b/hubs/widgets/mailinglist/__init__.py index 3816eda..d3b9b7c 100644 --- a/hubs/widgets/mailinglist/__init__.py +++ b/hubs/widgets/mailinglist/__init__.py @@ -15,6 +15,12 @@ class MailingList(Widget): label = "Latest Mailing List Threads" position = "right" hub_types = ["team"] + description = { + "stream": "Not shown on stream", + "user": "Not shown on user hub", + "team": ("Display the last 5 active threads in the team's " + "mailing list"), + } def get_template_environment(self): env = super(MailingList, self).get_template_environment() diff --git a/hubs/widgets/meetings/__init__.py b/hubs/widgets/meetings/__init__.py index f6fbfa8..6847df3 100644 --- a/hubs/widgets/meetings/__init__.py +++ b/hubs/widgets/meetings/__init__.py @@ -27,6 +27,12 @@ class Meetings(Widget): help="The number of meetings to display.", )] hub_types = ["team", "stream"] + description = { + "stream": ("Show upcoming meetings on all the " + "hubs you subscribe to"), + "user": "Not shown on user hub", + "team": "Show upcoming meetings for this hub ", + } def get_template_environment(self): env = super(Meetings, self).get_template_environment() diff --git a/js/app/components/AddWidget/AddWidgetDialog.js b/js/app/components/AddWidget/AddWidgetDialog.js index 2cf369b..091d580 100644 --- a/js/app/components/AddWidget/AddWidgetDialog.js +++ b/js/app/components/AddWidget/AddWidgetDialog.js @@ -38,16 +38,8 @@ class AddWidgetDialog extends React.Component { this.props.dispatch(getAvailableWidgets()); } - componentDidUpdate(prevProps, prevState) { - // Select the first available widget by default. - const widgets = this.props.availableWidgets[this.props.position]; - if (widgets.length > 0 && !this.state.tempSelectedWidget) { - this.setState({tempSelectedWidget: widgets[0]}); - } - } - - handleWidgetSelectChanged(e) { - this.setState({tempSelectedWidget: e.target.value}); + handleWidgetSelectChanged(selectedOption) { + this.setState({tempSelectedWidget: selectedOption.value}); } setWidgetConfig(name, value) { @@ -122,6 +114,7 @@ class AddWidgetDialog extends React.Component { selectedVisibility={this.state.widgetConfig.visibility} setConfig={this.setWidgetConfig} showVisibilitySelect={this.props.showVisibilitySelect} + hubType={this.props.hubType} /> ); submitButton = ( @@ -203,6 +196,7 @@ const mapStateToProps = (state) => { showVisibilitySelect: ( state.entities.hub.config.visibility === "preview" ), + hubType: state.entities.hub.type, } }; diff --git a/js/app/components/AddWidget/WidgetSelectDialog.js b/js/app/components/AddWidget/WidgetSelectDialog.js index 2b48a6f..eba068d 100644 --- a/js/app/components/AddWidget/WidgetSelectDialog.js +++ b/js/app/components/AddWidget/WidgetSelectDialog.js @@ -1,6 +1,8 @@ import React from 'react'; +import Select from 'react-select-2'; import PropTypes from 'prop-types'; import VisibilitySelect from '../VisibilitySelect'; +import 'react-select-2/dist/css/react-select-2.css'; export default class WidgetSelectDialog extends React.Component { @@ -8,6 +10,7 @@ export default class WidgetSelectDialog extends React.Component { propTypes: { availableWidgets: PropTypes.array.isRequired, showVisibilitySelect: PropTypes.bool, + hubType: PropTypes.string, handleWidgetSelectChanged: PropTypes.func.isRequired, selectedWidgetName: PropTypes.string.isRequired, selectedVisibility: PropTypes.string.isRequired, @@ -16,30 +19,37 @@ export default class WidgetSelectDialog extends React.Component { render() { const options = this.props.availableWidgets.map((widget) => { - return ( - - ); + var description = null; + if (widget.description && widget.description[this.props.hubType]){ + description = widget.description[this.props.hubType] + } + var opt = { + label: widget.label, + value: widget.name, + description: description, + } + return opt; }); + function renderValue(option) { + if (option.description){ + return
{option.label}
{option.description}
; + } else { + return {option.label} + } + }; return (
-
{ this.props.showVisibilitySelect && } - -
+ value={this.props.selectedWidgetName} + options={options} + optionRenderer={renderValue} + openOnFocus + /> { this.props.showVisibilitySelect &&