incorporate changes from https://github.com/chena11356/polis/tree/imp…

…lement-comment-prioritization-checkbox credit to https://github.com/chena11356 addresses #217
compdemocracy · May 12, 2023 · 4f65ec9 · 4f65ec9
1 parent 15dcbf7
commit 4f65ec9
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 52 deletions.
diff --git a/client-admin/src/app.js b/client-admin/src/app.js
@@ -42,9 +42,7 @@ const PrivateRoute = ({ component: Component, isLoading, authed, ...rest }) => {
         authed === true ? (
           <Component {...props} />
         ) : (
-          <Redirect
-            to={{ pathname: '/signin', state: { from: props.location } }}
-          />
+          <Redirect to={{ pathname: '/signin', state: { from: props.location } }} />
         )
       }
     />
@@ -55,7 +53,7 @@ PrivateRoute.propTypes = {
   component: PropTypes.element,
   isLoading: PropTypes.bool,
   location: PropTypes.object,
-  authed: PropTypes.bool
+  authed: PropTypes.bool,
 }
 
 @connect((state) => {
@@ -65,7 +63,7 @@ class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      sidebarOpen: false
+      sidebarOpen: false,
       // sidebarDocked: true,
     }
   }
@@ -88,10 +86,7 @@ class App extends React.Component {
       authed = true
     }
 
-    if (
-      (this.props.error && this.props.status === 401) ||
-      this.props.status === 403
-    ) {
+    if ((this.props.error && this.props.status === 401) || this.props.status === 403) {
       authed = false
     }
 
@@ -101,9 +96,7 @@ class App extends React.Component {
   isLoading() {
     const { isLoggedIn } = this.props
 
-    return _.isUndefined(
-      isLoggedIn
-    ) /* if isLoggedIn is undefined, the app is loading */
+    return _.isUndefined(isLoggedIn) /* if isLoggedIn is undefined, the app is loading */
   }
 
   componentDidMount() {
@@ -133,21 +126,9 @@ class App extends React.Component {
         <Switch>
           <Redirect from="/:url*(/+)" to={location.pathname.slice(0, -1)} />
           <Route exact path="/home" component={Home} />
-          <Route
-            exact
-            path="/signin"
-            render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
-          />
-          <Route
-            exact
-            path="/signin/*"
-            render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
-          />
-          <Route
-            exact
-            path="/signin/**/*"
-            render={() => <SignIn {...this.props} authed={this.isAuthed()} />}
-          />
+          <Route exact path="/signin" render={() => <SignIn {...this.props} authed={this.isAuthed()} />} />
+          <Route exact path="/signin/*" render={() => <SignIn {...this.props} authed={this.isAuthed()} />} />
+          <Route exact path="/signin/**/*" render={() => <SignIn {...this.props} authed={this.isAuthed()} />} />
           <Route exact path="/signout" component={SignOut} />
           <Route exact path="/signout/*" component={SignOut} />
           <Route exact path="/signout/**/*" component={SignOut} />
@@ -158,11 +139,7 @@ class App extends React.Component {
           <Route exact path="/pwreset" component={PasswordReset} />
           <Route path="/pwreset/*" component={PasswordReset} />
           <Route exact path="/pwresetinit" component={PasswordResetInit} />
-          <Route
-            exact
-            path="/pwresetinit/done"
-            component={PasswordResetInitDone}
-          />
+          <Route exact path="/pwresetinit/done" component={PasswordResetInitDone} />
           <Route exact path="/tos" component={TOS} />
           <Route exact path="/privacy" component={Privacy} />
 
@@ -196,8 +173,9 @@ class App extends React.Component {
                         p: [4],
                         flex: '0 0 auto',
                         maxWidth: '35em',
-                        mx: [4]
-                      }}>
+                        mx: [4],
+                      }}
+                    >
                       <PrivateRoute
                         isLoading={this.isLoading()}
                         authed={this.isAuthed()}
@@ -249,14 +227,14 @@ App.propTypes = {
   dispatch: PropTypes.func,
   isLoggedIn: PropTypes.bool,
   location: PropTypes.shape({
-    pathname: PropTypes.string
+    pathname: PropTypes.string,
   }),
   user: PropTypes.shape({
     uid: PropTypes.string,
     email: PropTypes.string,
     created: PropTypes.number,
-    hname: PropTypes.string
-  })
+    hname: PropTypes.string,
+  }),
 }
 
 export default App
diff --git a/client-admin/src/components/conversation-admin/conversation-config.js b/client-admin/src/components/conversation-admin/conversation-config.js
@@ -144,6 +144,10 @@ class ConversationConfig extends React.Component {
           Customize the user interface
         </Heading>
 
+        <CheckboxField field="priority_type" label="Weight">
+          [EXPERIMENTAL FEATURE] Participants can see the "This comment is important" checkbox
+        </CheckboxField>
+
         <CheckboxField field="vis_type" label="Visualization" isIntegerBool>
           Participants can see the visualization
         </CheckboxField>

diff --git a/client-participation/css/polis_main.scss b/client-participation/css/polis_main.scss
@@ -46,3 +46,17 @@ textarea {
     display: block;
   }
 }
+
+// for screen-reader accessibility, hide elements visually but still discoverable by screen reader
+.visually-hidden {
+  position: absolute;
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
diff --git a/client-participation/js/main.js b/client-participation/js/main.js
@@ -48,6 +48,7 @@ var IconFaAngleRight = require("./templates/icon_fa_angle_right.handlebars");
 var IconFaAsterisk = require("./templates/icon_fa_asterisk.handlebars");
 var IconFaBan = require("./templates/icon_fa_ban.handlebars");
 var IconFaCircleCheckPartial = require("./templates/icon_fa_check_circle.handlebars");
+var IconFaCircleQuestion = require("./templates/icon_fa_question_circle.handlebars");
 var iconFaFacebookSquare16 = require("./templates/icon_fa_facebook_square_16.handlebars");
 var iconFaFacebookSquare25 = require("./templates/icon_fa_facebook_square_25.handlebars");
 var IconFaLightBulb = require("./templates/icon_fa_lightbulb_o.handlebars");
@@ -320,6 +321,7 @@ Handlebars.registerPartial("linkTos", LinkTosPartial);
 Handlebars.registerPartial("linkPrivacy", LinkPrivacyPartial);
 Handlebars.registerPartial("linkAddPolis", LinkAddPolisPartial);
 Handlebars.registerPartial("iconFaCircleCheck", IconFaCircleCheckPartial);
+Handlebars.registerPartial("iconFaCircleQuestion", IconFaCircleQuestion);
 Handlebars.registerPartial("iconFaBan", IconFaBan);
 Handlebars.registerPartial("iconFaLightBulb", IconFaLightBulb);
 Handlebars.registerPartial("iconFaAsterisk", IconFaAsterisk);

diff --git a/client-participation/js/strings/en_us.js b/client-participation/js/strings/en_us.js
@@ -7,6 +7,8 @@ s.disagree = "Disagree";
 s.pass = "Pass / Unsure";
 
 s.importantCheckbox = "This comment is important";
+s.importantCheckboxDesc =
+  "Check this box if you believe this comment is especially important or relevant to the conversation, whether you agree with it, disagree with it, or are unsure about it.";
 s.howImportantPrompt = "How important is this statement?";
 s.howImportantLow = "Low";
 s.howImportantMedium = "Medium";

diff --git a/client-participation/js/templates/icon_fa_question_circle.handlebars b/client-participation/js/templates/icon_fa_question_circle.handlebars
@@ -0,0 +1,10 @@
+{{! Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>. }}
+
+<svg
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+  height="17px"
+  width="17px"
+><path
+    d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM256 336c-18 0-32 14-32 32s13.1 32 32 32c17.1 0 32-14 32-32S273.1 336 256 336zM289.1 128h-51.1C199 128 168 159 168 198c0 13 11 24 24 24s24-11 24-24C216 186 225.1 176 237.1 176h51.1C301.1 176 312 186 312 198c0 8-4 14.1-11 18.1L244 251C236 256 232 264 232 272V288c0 13 11 24 24 24S280 301 280 288V286l45.1-28c21-13 34-36 34-60C360 159 329 128 289.1 128z"
+  ></path></svg>
diff --git a/client-participation/js/templates/vote-view.handlebars b/client-participation/js/templates/vote-view.handlebars
@@ -330,9 +330,23 @@
     <div style="text-align: center; margin-bottom: 20px">
       <label class="weight-label">
         <span class="weight-radio"></span>
-        <input type="checkbox" name="checkbox" id="weight_high">
+        <input type="checkbox" name="checkbox" id="weight_high" aria-describedby="importantCheckboxDesc">
         {{s.importantCheckbox}}
+        <span id="importantCheckboxDesc" class="visually-hidden">
+          {{s.importantCheckboxDesc}}
+        </span>
       </label>
+      <i class="svgIcon" style="
+        display: inline-block;
+        position: relative;
+        top: 2px;
+        width: 17px;
+        fill: #8a8a8a;
+        " 
+        data-text="{{s.importantCheckboxDesc}}"
+        onclick="alert(this.dataset.text)"
+        aria-hidden="true"
+        >{{> iconFaCircleQuestion}}</i>
     </div>
     {{/if}}
 

diff --git a/client-participation/js/views/vote-view.js b/client-participation/js/views/vote-view.js
@@ -111,6 +111,7 @@ module.exports = Handlebones.ModelView.extend({
       }
 
     }
+    ctx.showImportantCheckbox = preload.conversation.priority_type; // TODO: set up feature flagging
     ctx.social = socialCtx;
     ctx.noModSet = !ctx.spamOn && !ctx.otOn && !ctx.importantOn;
     ctx.canSubscribe = !!preload.firstPtpt || this.votesByMe.size() > 0;
@@ -484,13 +485,13 @@ module.exports = Handlebones.ModelView.extend({
       });
       return false;
     };
-    this.getWeight = function() {
-      if ($("#weight_low").prop("checked")) {
-        return -1;
-      } else if ($("#weight_high").prop("checked")) {
-        return 1;
+
+    // note: instead of -1/1/0, weight is now the boolean high_priority
+    this.highPriority = function () {
+      if ($("#weight_high").prop("checked")) {
+        return true;
       }
-      return 0;
+      return false;
     };
     this.participantAgreed = function(e) {
       this.mostRecentVoteType = "agree";
@@ -502,7 +503,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: -1,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(),
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);
@@ -517,7 +518,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: 1,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(),
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);
@@ -532,7 +533,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: 0,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(), // TODO: specify in help text that this is for "important but unsure"
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);

diff --git a/server/app.ts b/server/app.ts
@@ -27,7 +27,6 @@ app.use(morgan('dev'));
 // See: https://expressjs.com/en/guide/behind-proxies.html
 app.set("trust proxy", "uniquelocal");
 
-
 var helpersInitialized = new Promise(function (resolve, reject) {
   resolve(server.initializePolisHelpers());
 });
@@ -1004,6 +1003,7 @@ helpersInitialized.then(
       want("strict_moderation", getBool, assignToP),
       want("topic", getOptionalStringLimitLength(1000), assignToP),
       want("description", getOptionalStringLimitLength(50000), assignToP),
+      want("priority_type", getBool, assignToP),
       want("vis_type", getInt, assignToP),
       want("help_type", getInt, assignToP),
       want("write_type", getInt, assignToP),

diff --git a/server/postgres/migrations/000003_add_comment_priority.sql b/server/postgres/migrations/000003_add_comment_priority.sql
@@ -0,0 +1,7 @@
+ALTER TABLE conversations
+  ADD priority_type BOOLEAN NOT NULL
+    DEFAULT (false);
+
+ALTER TABLE votes 
+  ADD high_priority BOOLEAN NOT NULL 
+    DEFAULT (false);
diff --git a/server/postgres/migrations/temp.sql b/server/postgres/migrations/temp.sql
@@ -0,0 +1,13 @@
+ALTER TABLE conversations
+  DROP COLUMN priority_type;
+
+ALTER TABLE votes
+  DROP COLUMN high_priority;
+
+ALTER TABLE conversations
+  ADD priority_type BOOLEAN NOT NULL
+    DEFAULT (false);
+
+ALTER TABLE votes 
+  ADD high_priority BOOLEAN NOT NULL 
+    DEFAULT (false);
diff --git a/server/src/d.ts b/server/src/d.ts
@@ -140,6 +140,7 @@ export type ConversationType = {
   help_bgcolor?: any;
   style_btn?: any;
   write_type?: any;
+  priority_type?: any;
   owner_sees_participation_stats?: any;
   link_url?: any;
   course_invite?: any;

diff --git a/server/src/db/sql.ts b/server/src/db/sql.ts
@@ -27,6 +27,7 @@ const sql_conversations: any = sql.define({
     "parent_url",
     "vis_type",
     "write_type",
+    "priority_type",
     "help_type",
     "socialbtn_type",
     "subscribe_type",
@@ -74,7 +75,7 @@ const sql_comments = sql.define({
 
 const sql_votes_latest_unique = sql.define({
   name: "votes_latest_unique",
-  columns: ["zid", "tid", "pid", "modified", "vote"],
+  columns: ["zid", "tid", "pid", "modified", "vote", "weight"],
 });
 
 const sql_participant_metadata_answers = sql.define({

diff --git a/server/src/server.ts b/server/src/server.ts
@@ -8546,6 +8546,7 @@ Email verified! You can close this tab or hit the back button.
         help_bgcolor: string;
         style_btn: any;
         write_type: any;
+        priority_type: any;
         owner_sees_participation_stats: any;
         launch_presentation_return_url_hex: any;
         link_url: any;
@@ -8637,6 +8638,9 @@ Email verified! You can close this tab or hit the back button.
         if (!_.isUndefined(req.p.write_type)) {
           fields.write_type = req.p.write_type;
         }
+        if (!_.isUndefined(req.p.priority_type)) {
+          fields.priority_type = req.p.priority_type;
+        }
         ifDefinedSet("auth_needed_to_vote", req.p, fields);
         ifDefinedSet("auth_needed_to_write", req.p, fields);
         ifDefinedSet("auth_opt_fb", req.p, fields);
@@ -8662,7 +8666,7 @@ Email verified! You can close this tab or hit the back button.
           function () {
             pgQuery(q.toString(), function (err: any, result: { rows: any[] }) {
               if (err) {
-                fail(res, 500, "polis_err_update_conversation", err);
+                fail(res, 500, "polis_err_update_conversation_1", err);
                 return;
               }
               let conv = result && result.rows && result.rows[0];
@@ -8720,7 +8724,7 @@ Email verified! You can close this tab or hit the back button.
                   updateConversationModifiedTime(req.p.zid);
                 })
                 .catch(function (err: any) {
-                  fail(res, 500, "polis_err_update_conversation", err);
+                  fail(res, 500, "polis_err_update_conversation_2", err);
                 });
             });
           },
@@ -8730,7 +8734,7 @@ Email verified! You can close this tab or hit the back button.
         );
       })
       .catch(function (err: any) {
-        fail(res, 500, "polis_err_update_conversation", err);
+        fail(res, 500, "polis_err_update_conversation_3", err);
       });
   }
 
@@ -13058,6 +13062,7 @@ Thanks for using Polis!
           parent_url: conv.parent_url,
           vis_type: conv.vis_type,
           write_type: conv.write_type,
+          priority_type: conv.priority_type,
           help_type: conv.help_type,
           socialbtn_type: conv.socialbtn_type,
           bgcolor: conv.bgcolor,