add columns for hg configuration page

scm-plugins/scm-hg-plugin/src/main/js/HgConfigurationForm.js

@@ -5,15 +5,15 @@ import { translate } from "react-i18next";
 import { InputField, Checkbox } from "@scm-manager/ui-components";
 
 type Configuration = {
-  "hgBinary": string,
-  "pythonBinary": string,
-  "pythonPath"?: string,
-  "encoding": string,
-  "useOptimizedBytecode": boolean,
-  "showRevisionInId": boolean,
-  "disableHookSSLValidation": boolean,
-  "enableHttpPostArgs": boolean,
-  "_links": Links
+  hgBinary: string,
+  pythonBinary: string,
+  pythonPath?: string,
+  encoding: string,
+  useOptimizedBytecode: boolean,
+  showRevisionInId: boolean,
+  disableHookSSLValidation: boolean,
+  enableHttpPostArgs: boolean,
+  _links: Links
 };
 
 type Props = {
@@ -23,24 +23,21 @@ type Props = {
   onConfigurationChange: (Configuration, boolean) => void,
 
   // context props
-  t: (string) => string
-}
+  t: string => string
+};
 
 type State = Configuration & {
   validationErrors: string[]
 };
 
 class HgConfigurationForm extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
     this.state = { ...props.initialConfiguration, validationErrors: [] };
   }
 
   updateValidationStatus = () => {
-    const requiredFields = [
-      "hgBinary", "pythonBinary", "encoding"
-    ];
+    const requiredFields = ["hgBinary", "pythonBinary", "encoding"];
 
     const validationErrors = [];
     for (let field of requiredFields) {
@@ -56,20 +53,28 @@ class HgConfigurationForm extends React.Component<Props, State> {
     return validationErrors.length === 0;
   };
 
-
   hasValidationError = (name: string) => {
     return this.state.validationErrors.indexOf(name) >= 0;
   };
 
   handleChange = (value: any, name: string) => {
-    this.setState({
+    this.setState(
+      {
         [name]: value
-    }, () => this.props.onConfigurationChange(this.state, this.updateValidationStatus()));
+      },
+      () =>
+        this.props.onConfigurationChange(
+          this.state,
+          this.updateValidationStatus()
+        )
+    );
   };
 
   inputField = (name: string) => {
     const { readOnly, t } = this.props;
-    return <InputField
+    return (
+      <div className="column is-half">
+        <InputField
           name={name}
           label={t("scm-hg-plugin.config." + name)}
           helpText={t("scm-hg-plugin.config." + name + "HelpText")}
@@ -78,36 +83,43 @@ class HgConfigurationForm extends React.Component<Props, State> {
           validationError={this.hasValidationError(name)}
           errorMessage={t("scm-hg-plugin.config.required")}
           disabled={readOnly}
-    />;
+        />
+      </div>
+    );
   };
 
   checkbox = (name: string) => {
     const { readOnly, t } = this.props;
-    return <Checkbox
+    return (
+      <Checkbox
         name={name}
         label={t("scm-hg-plugin.config." + name)}
         helpText={t("scm-hg-plugin.config." + name + "HelpText")}
         checked={this.state[name]}
         onChange={this.handleChange}
         disabled={readOnly}
-    />;
+      />
+    );
   };
 
   render() {
     return (
-      <>
+      <div className="columns is-multiline">
         {this.inputField("hgBinary")}
         {this.inputField("pythonBinary")}
         {this.inputField("pythonPath")}
         {this.inputField("encoding")}
+        <div className="column is-half">
           {this.checkbox("useOptimizedBytecode")}
           {this.checkbox("showRevisionInId")}
+        </div>
+        <div className="column is-half">
           {this.checkbox("disableHookSSLValidation")}
           {this.checkbox("enableHttpPostArgs")}
-      </>
+        </div>
+      </div>
     );
   }
-
 }
 
 export default translate("plugins")(HgConfigurationForm);