Allow multiple groups which can vote when creating a poll (#10015)

* FEATURE: Allow multiple groups which can vote when creating a poll

* DEV: Fix select-kit deprecations

* DEV: Fix lint

app/assets/javascripts/admin/templates/user-index.hbs

@@ -514,7 +514,7 @@
     <div class="display-row">
       <div class="field">{{i18n "admin.groups.custom"}}</div>
       <div class="value">
-        {{admin-group-selector
+        {{group-chooser
           content=availableGroups
           value=customGroupIdsBuffer
           labelProperty="name"

app/assets/javascripts/select-kit/addon/components/group-chooser.js

@@ -1,8 +1,8 @@
 import MultiSelectComponent from "select-kit/components/multi-select";
 
 export default MultiSelectComponent.extend({
-  pluginApiIdentifiers: ["admin-group-selector"],
+  pluginApiIdentifiers: ["group-chooser"],
-  classNames: ["admin-group-selector"],
+  classNames: ["group-chooser"],
   selectKitOptions: {
     allowAny: false
   }

plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6

@@ -97,7 +97,7 @@ export default Controller.extend({
       .map(g => {
         // prevents group "everyone" to be listed
         if (g.id !== 0) {
-          return { name: g.name, value: g.name };
+          return { name: g.name };
         }
       })
       .filter(Boolean);
@@ -251,7 +251,9 @@ export default Controller.extend({
     if (publicPoll) pollHeader += ` public=true`;
     if (chartType && pollType !== "number")
       pollHeader += ` chartType=${chartType}`;
-    if (pollGroups) pollHeader += ` groups=${pollGroups}`;
+    if (pollGroups && pollGroups.length > 0) {
+      pollHeader += ` groups=${pollGroups}`;
+    }
     if (autoClose) {
       let closeDate = moment(
         date + " " + time,

plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs

@@ -2,7 +2,7 @@
   <form class="poll-ui-builder-form form-horizontal">
     <div class="options">
       <div class="input-group poll-select">
-        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
+        <label class="input-group-label">{{i18n "poll.ui_builder.poll_type.label"}}</label>
         {{combo-box
           content=pollTypes
           value=pollType
@@ -13,39 +13,43 @@
       </div>
 
       <div class="input-group poll-select">
-        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_result.label'}}</label>
+        <label class="input-group-label">{{i18n "poll.ui_builder.poll_result.label"}}</label>
         {{combo-box
           content=pollResults
           value=pollResult
           class="poll-result"
           valueProperty="value"
+          onChange=(action (mut pollResult))
         }}
       </div>
 
       <div class="input-group poll-select">
-        <label class="input-group-label">{{i18n 'poll.ui_builder.poll_groups.label'}}</label>
+        <label class="input-group-label">{{i18n "poll.ui_builder.poll_groups.label"}}</label>
-        {{combo-box content=siteGroups
+        {{group-chooser
-                    value=pollGroups
+          content=siteGroups
-                    options=(hash clearable=true)
+          value=pollGroups
-                    valueAttribute="value"}}
+          onChange=(action (mut pollGroups))
+          labelProperty="name"
+          valueProperty="name"}}
       </div>
 
       {{#unless isNumber}}
         <div class="input-group poll-select">
-          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_chart_type.label'}}</label>
+          <label class="input-group-label">{{i18n "poll.ui_builder.poll_chart_type.label"}}</label>
           {{combo-box
             class="poll-chart-type"
             content=pollChartTypes
             value=chartType
-            valueAttribute="value"
+            valueProperty="value"
+            onChange=(action (mut chartType))
           }}
         </div>
       {{/unless}}
 
       {{#if showMinMax}}
         <div class="input-group poll-number">
-          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
+          <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.min"}}</label>
-          {{input type='number'
+          {{input type="number"
                   value=pollMin
                   valueProperty="value"
                   class="poll-options-min"}}
@@ -53,8 +57,8 @@
         {{input-tip validation=minMaxValueValidation}}
 
         <div class="input-group poll-number">
-          <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.max'}}</label>
+          <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.max"}}</label>
-          {{input type='number'
+          {{input type="number"
                   value=pollMax
                   valueProperty="value"
                   class="poll-options-max"}}
@@ -62,8 +66,8 @@
 
         {{#if isNumber}}
           <div class="input-group poll-number">
-            <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.step'}}</label>
+            <label class="input-group-label">{{i18n "poll.ui_builder.poll_config.step"}}</label>
-            {{input type='number'
+            {{input type="number"
                     value=pollStep
                     valueProperty="value"
                     min="1"
@@ -75,7 +79,7 @@
 
       {{#unless isNumber}}
         <div class="input-group poll-textarea">
-          <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
+          <label>{{i18n "poll.ui_builder.poll_options.label"}}</label>
           {{textarea value=pollOptions autocomplete="discourse"}}
         </div>
         {{input-tip validation=minNumOfOptionsValidation}}
@@ -84,7 +88,7 @@
       {{#unless isPie}}
         <div class="input-group poll-checkbox">
           <label>
-            {{input type='checkbox' checked=publicPoll}}
+            {{input type="checkbox" checked=publicPoll}}
             {{i18n "poll.ui_builder.poll_public.label"}}
           </label>
         </div>
@@ -116,5 +120,5 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  {{d-button action=(action "insertPoll") icon="chart-bar" class='btn-primary' label='poll.ui_builder.insert' disabled=disableInsert}}
+  {{d-button action=(action "insertPoll") icon="chart-bar" class="btn-primary" label="poll.ui_builder.insert" disabled=disableInsert}}
 </div>

plugins/poll/assets/stylesheets/common/poll-ui-builder.scss

@@ -8,7 +8,8 @@ $poll-margin: 10px;
     flex-shrink: 0;
     width: 280px;
   }
-  .combo-box {
+  .combo-box,
+  .multi-select {
     min-width: 180px;
     width: 180px;
   }

test/javascripts/acceptance/admin-user-index-test.js

@@ -86,10 +86,10 @@ QUnit.test("will clear unsaved groups when switching user", async assert => {
     "the name should be correct"
   );
 
-  const groupSelector = selectKit(".admin-group-selector");
+  const groupChooser = selectKit(".group-chooser");
-  await groupSelector.expand();
+  await groupChooser.expand();
-  await groupSelector.selectRowByValue(42);
+  await groupChooser.selectRowByValue(42);
-  assert.equal(groupSelector.header().value(), 42, "group should be set");
+  assert.equal(groupChooser.header().value(), 42, "group should be set");
 
   await visit("/admin/users/1/eviltrout");
 
@@ -102,7 +102,7 @@ QUnit.test("will clear unsaved groups when switching user", async assert => {
   );
 
   assert.equal(
-    find('.admin-group-selector span[title="Macdonald"]').length,
+    find('.group-chooser span[title="Macdonald"]').length,
     0,
     "group should not be set"
   );