Merge pull request #3257 from matrix-org/t3chguy/slashcommands_help

Add help slash command

res/css/_components.scss

@@ -70,6 +70,7 @@
 @import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
+@import "./views/dialogs/_SlashCommandHelpDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";

res/css/views/dialogs/_SlashCommandHelpDialog.scss

@@ -0,0 +1,24 @@
+/*
+Copyright Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
+    margin-bottom: 2px;
+}
+
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
+    margin-top: 12px;
+    margin-bottom: 34px;
+}

src/SlashCommands.js

@@ -20,11 +20,9 @@ limitations under the License.
 import React from 'react';
 import MatrixClientPeg from './MatrixClientPeg';
 import dis from './dispatcher';
-import Tinter from './Tinter';
 import sdk from './index';
 import {_t, _td} from './languageHandler';
 import Modal from './Modal';
-import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 import {MATRIXTO_URL_PATTERN} from "./linkify-matrix";
 import * as querystring from "querystring";
 import MultiInviter from './utils/MultiInviter';
@@ -54,12 +52,21 @@ const singleMxcUpload = async () => {
     });
 };
 
+export const CommandCategories = {
+    "messages": _td("Messages"),
+    "actions": _td("Actions"),
+    "admin": _td("Admin"),
+    "advanced": _td("Advanced"),
+    "other": _td("Other"),
+};
+
 class Command {
-    constructor({name, args='', description, runFn, hideCompletionAfterSpace=false}) {
+    constructor({name, args='', description, runFn, category=CommandCategories.other, hideCompletionAfterSpace=false}) {
         this.command = '/' + name;
         this.args = args;
         this.description = description;
         this.runFn = runFn;
+        this.category = category;
         this.hideCompletionAfterSpace = hideCompletionAfterSpace;
     }
 
@@ -106,6 +113,7 @@ export const CommandMap = {
             }
             return success(MatrixClientPeg.get().sendTextMessage(roomId, message));
         },
+        category: CommandCategories.messages,
     }),
 
     ddg: new Command({
@@ -121,6 +129,7 @@ export const CommandMap = {
             });
             return success();
         },
+        category: CommandCategories.actions,
         hideCompletionAfterSpace: true,
     }),
 
@@ -199,6 +208,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     nick: new Command({
@@ -211,6 +221,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     myroomnick: new Command({
@@ -229,6 +240,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     myroomavatar: new Command({
@@ -255,6 +267,7 @@ export const CommandMap = {
                 return cli.sendStateEvent(roomId, 'm.room.member', content, userId);
             }));
         },
+        category: CommandCategories.actions,
     }),
 
     myavatar: new Command({
@@ -272,31 +285,7 @@ export const CommandMap = {
                 return MatrixClientPeg.get().setAvatarUrl(url);
             }));
         },
-    }),
+        category: CommandCategories.actions,
-
-    tint: new Command({
-        name: 'tint',
-        args: '<color1> [<color2>]',
-        description: _td('Changes colour scheme of current room'),
-        runFn: function(roomId, args) {
-            if (args) {
-                const matches = args.match(/^(#([\da-fA-F]{3}|[\da-fA-F]{6}))( +(#([\da-fA-F]{3}|[\da-fA-F]{6})))?$/);
-                if (matches) {
-                    Tinter.tint(matches[1], matches[4]);
-                    const colorScheme = {};
-                    colorScheme.primary_color = matches[1];
-                    if (matches[4]) {
-                        colorScheme.secondary_color = matches[4];
-                    } else {
-                        colorScheme.secondary_color = colorScheme.primary_color;
-                    }
-                    return success(
-                        SettingsStore.setValue('roomColor', roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
-                    );
-                }
-            }
-            return reject(this.getUsage());
-        },
     }),
 
     topic: new Command({
@@ -322,6 +311,7 @@ export const CommandMap = {
             });
             return success();
         },
+        category: CommandCategories.admin,
     }),
 
     roomname: new Command({
@@ -334,6 +324,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     invite: new Command({
@@ -357,6 +348,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     join: new Command({
@@ -461,6 +453,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     part: new Command({
@@ -508,6 +501,7 @@ export const CommandMap = {
                 }),
             );
         },
+        category: CommandCategories.actions,
     }),
 
     kick: new Command({
@@ -523,6 +517,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Ban a user from the room with an optional reason
@@ -539,6 +534,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Unban a user from ythe room
@@ -556,6 +552,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     ignore: new Command({
@@ -586,6 +583,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     unignore: new Command({
@@ -617,6 +615,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.actions,
     }),
 
     // Define the power level of a user
@@ -645,6 +644,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     // Reset the power level of a user
@@ -666,6 +666,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.admin,
     }),
 
     devtools: new Command({
@@ -676,6 +677,7 @@ export const CommandMap = {
             Modal.createDialog(DevtoolsDialog, {roomId});
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 
     addwidget: new Command({
@@ -696,6 +698,7 @@ export const CommandMap = {
                 return reject(_t("You cannot modify widgets in this room."));
             }
         },
+        category: CommandCategories.admin,
     }),
 
     // Verify a user, device, and pubkey tuple
@@ -765,6 +768,7 @@ export const CommandMap = {
             }
             return reject(this.getUsage());
         },
+        category: CommandCategories.advanced,
     }),
 
     // Command definitions for autocompletion ONLY:
@@ -774,6 +778,7 @@ export const CommandMap = {
         name: 'me',
         args: '<message>',
         description: _td('Displays action'),
+        category: CommandCategories.messages,
         hideCompletionAfterSpace: true,
     }),
 
@@ -788,6 +793,7 @@ export const CommandMap = {
             }
             return success();
         },
+        category: CommandCategories.advanced,
     }),
 
     rainbow: new Command({
@@ -798,6 +804,7 @@ export const CommandMap = {
             if (!args) return reject(this.getUserId());
             return success(MatrixClientPeg.get().sendHtmlMessage(roomId, args, textToHtmlRainbow(args)));
         },
+        category: CommandCategories.messages,
     }),
 
     rainbowme: new Command({
@@ -808,6 +815,19 @@ export const CommandMap = {
             if (!args) return reject(this.getUserId());
             return success(MatrixClientPeg.get().sendHtmlEmote(roomId, args, textToHtmlRainbow(args)));
         },
+        category: CommandCategories.messages,
+    }),
+
+    help: new Command({
+        name: "help",
+        description: _td("Displays list of commands with usages and descriptions"),
+        runFn: function() {
+            const SlashCommandHelpDialog = sdk.getComponent('dialogs.SlashCommandHelpDialog');
+
+            Modal.createTrackedDialog('Slash Commands', 'Help', SlashCommandHelpDialog);
+            return success();
+        },
+        category: CommandCategories.advanced,
     }),
 };
 /* eslint-enable babel/no-invalid-this */

src/components/views/dialogs/InfoDialog.js

@@ -20,20 +20,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classNames from "classnames";
 
 export default React.createClass({
     displayName: 'InfoDialog',
     propTypes: {
+        className: PropTypes.string,
         title: PropTypes.string,
         description: PropTypes.node,
         button: PropTypes.string,
         onFinished: PropTypes.func,
+        hasCloseButton: PropTypes.bool,
     },
 
     getDefaultProps: function() {
         return {
             title: '',
             description: '',
+            hasCloseButton: false,
         };
     },
 
@@ -48,9 +52,9 @@ export default React.createClass({
             <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
-                hasCancel={false}
+                hasCancel={this.props.hasCloseButton}
             >
-                <div className="mx_Dialog_content" id="mx_Dialog_content">
+                <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }
                 </div>
                 <DialogButtons primaryButton={this.props.button || _t('OK')}

src/components/views/dialogs/SlashCommandHelpDialog.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {_t} from "../../../languageHandler";
+import {CommandCategories, CommandMap} from "../../../SlashCommands";
+import sdk from "../../../index";
+
+export default ({onFinished}) => {
+    const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+
+    const categories = {};
+    Object.values(CommandMap).forEach(cmd => {
+        if (!categories[cmd.category]) {
+            categories[cmd.category] = [];
+        }
+        categories[cmd.category].push(cmd);
+    });
+
+    const body = Object.values(CommandCategories).filter(c => categories[c]).map((category) => {
+        const rows = [
+            <tr key={"_category_" + category} className="mx_SlashCommandHelpDialog_headerRow">
+                <td colSpan={3}>
+                    <h2>{_t(category)}</h2>
+                </td>
+            </tr>,
+        ];
+
+        categories[category].forEach(cmd => {
+            rows.push(<tr key={cmd.command}>
+                <td><strong>{cmd.command}</strong></td>
+                <td>{cmd.args}</td>
+                <td>{cmd.description}</td>
+            </tr>);
+        });
+
+        return rows;
+    });
+
+    return <InfoDialog
+        className="mx_SlashCommandHelpDialog"
+        title={_t("Command Help")}
+        description={<table>
+            <tbody>
+                {body}
+            </tbody>
+        </table>}
+        hasCloseButton={true}
+        onFinished={onFinished} />;
+};

src/i18n/strings/en_EN.json

@@ -131,6 +131,10 @@
     "Missing room_id in request": "Missing room_id in request",
     "Room %(roomId)s not visible": "Room %(roomId)s not visible",
     "Missing user_id in request": "Missing user_id in request",
+    "Messages": "Messages",
+    "Actions": "Actions",
+    "Advanced": "Advanced",
+    "Other": "Other",
     "Usage": "Usage",
     "Prepends ¯\\_(ツ)_/¯ to a plain-text message": "Prepends ¯\\_(ツ)_/¯ to a plain-text message",
     "Searches DuckDuckGo for results": "Searches DuckDuckGo for results",
@@ -148,7 +152,6 @@
     "Changes your display nickname in the current room only": "Changes your display nickname in the current room only",
     "Changes your avatar in this current room only": "Changes your avatar in this current room only",
     "Changes your avatar in all rooms": "Changes your avatar in all rooms",
-    "Changes colour scheme of current room": "Changes colour scheme of current room",
     "Gets or sets the room topic": "Gets or sets the room topic",
     "This room has no topic.": "This room has no topic.",
     "Sets the room name": "Sets the room name",
@@ -182,6 +185,7 @@
     "Forces the current outbound group session in an encrypted room to be discarded": "Forces the current outbound group session in an encrypted room to be discarded",
     "Sends the given message coloured as a rainbow": "Sends the given message coloured as a rainbow",
     "Sends the given emote coloured as a rainbow": "Sends the given emote coloured as a rainbow",
+    "Displays list of commands with usages and descriptions": "Displays list of commands with usages and descriptions",
     "Unrecognised command:": "Unrecognised command:",
     "Reason": "Reason",
     "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
@@ -509,7 +513,6 @@
     "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> device <device></device>": "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> device <device></device>",
     "Backup is not signed by any of your devices": "Backup is not signed by any of your devices",
     "This backup is trusted because it has been restored on this device": "This backup is trusted because it has been restored on this device",
-    "Advanced": "Advanced",
     "Backup version: ": "Backup version: ",
     "Algorithm: ": "Algorithm: ",
     "Your keys are <b>not being backed up from this device</b>.": "Your keys are <b>not being backed up from this device</b>.",
@@ -1262,6 +1265,7 @@
     "Share Room Message": "Share Room Message",
     "Link to selected message": "Link to selected message",
     "COPY": "COPY",
+    "Command Help": "Command Help",
     "To help us prevent this in future, please <a>send us logs</a>.": "To help us prevent this in future, please <a>send us logs</a>.",
     "Missing session data": "Missing session data",
     "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",
@@ -1418,7 +1422,6 @@
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",
     "Premium": "Premium",
     "Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
-    "Other": "Other",
     "Find other public servers or use a custom server": "Find other public servers or use a custom server",
     "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
     "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",