Add feature flag for polls and placeholder dialog

We're anticipating development of polls soon, so for efficiency reasons we're getting the labs flag in early. If something goes wrong with the plan, this whole change will be reverted.

res/css/views/rooms/_MessageComposer.scss

@@ -252,6 +252,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
 }
 
+.mx_MessageComposer_poll::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/poll.svg');
+}
+
 .mx_MessageComposer_voiceMessage::before {
     mask-image: url('$(res)/img/voip/mic-on-mask.svg');
 }

res/img/element-icons/room/composer/poll.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9.5C3 9.22386 3.22386 9 3.5 9H6.5C6.77614 9 7 9.22386 7 9.5V22H3V9.5Z" fill="#C1C6CD"/>
+<path d="M17 13.5C17 13.2239 17.2239 13 17.5 13H20.5C20.7761 13 21 13.2239 21 13.5V22H17V13.5Z" fill="#C1C6CD"/>
+<path d="M10 2.5C10 2.22386 10.2239 2 10.5 2H13.5C13.7761 2 14 2.22386 14 2.5V22H10V2.5Z" fill="#C1C6CD"/>
+</svg>

src/components/views/rooms/MessageComposer.tsx

@@ -52,6 +52,8 @@ import EditorModel from "../../../editor/model";
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
 import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
+import Modal from "../../../Modal";
+import InfoDialog from "../dialogs/InfoDialog";
 
 let instanceCount = 0;
 const NARROW_MODE_BREAKPOINT = 500;
@@ -193,6 +195,31 @@ class UploadButton extends React.Component<IUploadButtonProps> {
     }
 }
 
+// TODO: [polls] Make this component actually do something
+class PollButton extends React.PureComponent {
+    private onCreateClick = () => {
+        Modal.createTrackedDialog('Polls', 'Not Yet Implemented', InfoDialog, {
+            // XXX: Deliberately not translated given this dialog is meant to be replaced and we don't
+            // want to clutter the language files with short-lived strings.
+            title: "Polls are currently in development",
+            description: "" +
+                "Thanks for testing polls! We haven't quite gotten a chance to write the feature yet " +
+                "though. Check back later for updates.",
+            hasCloseButton: true,
+        });
+    };
+
+    render() {
+        return (
+            <AccessibleTooltipButton
+                className="mx_MessageComposer_button mx_MessageComposer_poll"
+                onClick={this.onCreateClick}
+                title={_t('Create poll')}
+            />
+        );
+    }
+}
+
 interface IProps {
     room: Room;
     resizeNotifier: ResizeNotifier;
@@ -432,6 +459,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
         const buttons: JSX.Element[] = [];
         if (!this.state.haveRecording) {
+            if (SettingsStore.getValue("feature_polls")) {
+                buttons.push(
+                    <PollButton key="polls" />
+                );
+            }
             buttons.push(
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
             );

src/i18n/strings/en_EN.json

@@ -823,6 +823,7 @@
     "Show message previews for reactions in all rooms": "Show message previews for reactions in all rooms",
     "Offline encrypted messaging using dehydrated devices": "Offline encrypted messaging using dehydrated devices",
     "Send pseudonymous analytics data": "Send pseudonymous analytics data",
+    "Polls (under active development)": "Polls (under active development)",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)",
     "Don't send read receipts": "Don't send read receipts",
@@ -1575,6 +1576,7 @@
     "Emoji picker": "Emoji picker",
     "Add emoji": "Add emoji",
     "Upload file": "Upload file",
+    "Create poll": "Create poll",
     "Reply to encrypted thread…": "Reply to encrypted thread…",
     "Reply to thread…": "Reply to thread…",
     "Send an encrypted reply…": "Send an encrypted reply…",

src/settings/Settings.tsx

@@ -246,6 +246,12 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: false,
         controller: new PseudonymousAnalyticsController(),
     },
+    "feature_polls": {
+        isFeature: true,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td("Polls (under active development)"),
+        default: false,
+    },
     "doNotDisturb": {
         supportedLevels: [SettingLevel.DEVICE],
         default: false,