Merge pull request #2859 from jryans/redesign-debug-logs

Use Field component in bug report dialog

res/css/views/dialogs/_BugReportDialog.scss

@@ -14,39 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BugReportDialog_field_container {
-    display: flex;
-}
-
-.mx_BugReportDialog_field_label {
-    flex-basis: 150px;
-
-    text-align: right;
-
-    padding-top: 9px;
-    padding-right: 4px;
-
-    line-height: 18px;
+.mx_BugReportDialog .mx_Field {
+    flex: 1;
 }
 
 .mx_BugReportDialog_field_input {
-    flex-grow: 1;
-
-    /* taken from mx_ChatInviteDialog_inputContainer */
-    border-radius: 3px;
-    border: solid 1px $input-border-color;
-
-    font-size: 14px;
-
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 7px;
-    padding-bottom: 7px;
-
-    margin-bottom: 4px;
-}
-
-.mx_BugReportDialog_field_input[type="text" i] {
-    padding-top: 9px;
-    padding-bottom: 9px;
+    // TODO: We should really apply this to all .mx_Field inputs.
+    // See https://github.com/vector-im/riot-web/issues/9344.
+    flex: 1;
 }

src/components/views/dialogs/BugReportDialog.js

@@ -108,6 +108,7 @@ export default class BugReportDialog extends React.Component {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Field = sdk.getComponent('elements.Field');
 
         let error = null;
         if (this.state.err) {
@@ -154,36 +155,29 @@ export default class BugReportDialog extends React.Component {
                             },
                         ) }
                     </b></p>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_issueUrl"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("What GitHub issue are these logs for?") }
-                        </label>
-                        <input
-                            id="mx_BugReportDialog_issueUrl"
-                            type="text"
-                            className="mx_BugReportDialog_field_input"
-                            onChange={this._onIssueUrlChange}
-                            value={this.state.issueUrl}
-                            placeholder="https://github.com/vector-im/riot-web/issues/..."
-                        />
-                    </div>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_notes_label"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("Notes:") }
-                        </label>
-                        <textarea
-                            className="mx_BugReportDialog_field_input"
-                            rows={5}
-                            onChange={this._onTextChange}
-                            value={this.state.text}
-                        />
-                    </div>
+                    <Field
+                        id="mx_BugReportDialog_issueUrl"
+                        type="text"
+                        className="mx_BugReportDialog_field_input"
+                        label={_t("GitHub issue")}
+                        onChange={this._onIssueUrlChange}
+                        value={this.state.issueUrl}
+                        placeholder="https://github.com/vector-im/riot-web/issues/..."
+                    />
+                    <Field
+                        className="mx_BugReportDialog_field_input"
+                        element="textarea"
+                        label={_t("Notes")}
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder={_t(
+                            "If there is additional context that would help in " +
+                            "analysing the issue, such as what you were doing at " +
+                            "the time, room IDs, user IDs, etc., " +
+                            "please include those things here.",
+                        )}
+                    />
                     {progress}
                     {error}
                 </div>

src/i18n/strings/en_EN.json

@@ -1042,8 +1042,9 @@
     "Failed to send logs: ": "Failed to send logs: ",
     "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
     "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.",
-    "What GitHub issue are these logs for?": "What GitHub issue are these logs for?",
-    "Notes:": "Notes:",
+    "GitHub issue": "GitHub issue",
+    "Notes": "Notes",
+    "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.": "If there is additional context that would help in analysing the issue, such as what you were doing at the time, room IDs, user IDs, etc., please include those things here.",
     "Send logs": "Send logs",
     "Unable to load commit detail: %(msg)s": "Unable to load commit detail: %(msg)s",
     "Unavailable": "Unavailable",