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,
+  hgBinary: string,
-  "pythonBinary": string,
+  pythonBinary: string,
-  "pythonPath"?: string,
+  pythonPath?: string,
-  "encoding": string,
+  encoding: string,
-  "useOptimizedBytecode": boolean,
+  useOptimizedBytecode: boolean,
-  "showRevisionInId": boolean,
+  showRevisionInId: boolean,
-  "disableHookSSLValidation": boolean,
+  disableHookSSLValidation: boolean,
-  "enableHttpPostArgs": boolean,
+  enableHttpPostArgs: boolean,
-  "_links": Links
+  _links: Links
 };
 
 type Props = {
@@ -23,29 +23,26 @@ 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 = [
+    const requiredFields = ["hgBinary", "pythonBinary", "encoding"];
-      "hgBinary", "pythonBinary", "encoding"
-    ];
 
     const validationErrors = [];
     for (let field of requiredFields) {
       if (!this.state[field]) {
-        validationErrors.push( field );
+        validationErrors.push(field);
       }
     }
 
@@ -56,58 +53,73 @@ 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()));
+        [name]: value
+      },
+      () =>
+        this.props.onConfigurationChange(
+          this.state,
+          this.updateValidationStatus()
+        )
+    );
   };
 
   inputField = (name: string) => {
     const { readOnly, t } = this.props;
-    return <InputField
+    return (
-      name={ name }
+      <div className="column is-half">
-      label={t("scm-hg-plugin.config." + name)}
+        <InputField
-      helpText={t("scm-hg-plugin.config." + name + "HelpText")}
+          name={name}
-      value={this.state[name]}
+          label={t("scm-hg-plugin.config." + name)}
-      onChange={this.handleChange}
+          helpText={t("scm-hg-plugin.config." + name + "HelpText")}
-      validationError={this.hasValidationError(name)}
+          value={this.state[name]}
-      errorMessage={t("scm-hg-plugin.config.required")}
+          onChange={this.handleChange}
-      disabled={readOnly}
+          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 (
-      name={ name }
+      <Checkbox
-      label={t("scm-hg-plugin.config." + name)}
+        name={name}
-      helpText={t("scm-hg-plugin.config." + name + "HelpText")}
+        label={t("scm-hg-plugin.config." + name)}
-      checked={this.state[name]}
+        helpText={t("scm-hg-plugin.config." + name + "HelpText")}
-      onChange={this.handleChange}
+        checked={this.state[name]}
-      disabled={readOnly}
+        onChange={this.handleChange}
-    />;
+        disabled={readOnly}
+      />
+    );
   };
 
   render() {
     return (
-      <>
+      <div className="columns is-multiline">
         {this.inputField("hgBinary")}
         {this.inputField("pythonBinary")}
         {this.inputField("pythonPath")}
         {this.inputField("encoding")}
-        {this.checkbox("useOptimizedBytecode")}
+        <div className="column is-half">
-        {this.checkbox("showRevisionInId")}
+          {this.checkbox("useOptimizedBytecode")}
-        {this.checkbox("disableHookSSLValidation")}
+          {this.checkbox("showRevisionInId")}
-        {this.checkbox("enableHttpPostArgs")}
+        </div>
-      </>
+        <div className="column is-half">
+          {this.checkbox("disableHookSSLValidation")}
+          {this.checkbox("enableHttpPostArgs")}
+        </div>
+      </div>
     );
   }
-
 }
 
 export default translate("plugins")(HgConfigurationForm);