Move Button to right side (and remove doubled note)

scm-ui/ui-components/src/forms/AddEntryToTableField.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent } from "react";
-
-import { AddButton } from "../buttons";
 import InputField from "./InputField";
+import Level from "../layout/Level";
+import { AddButton } from "../buttons";
 
 type Props = {
   addEntry: (p: string) => void;
@@ -48,10 +48,14 @@ class AddEntryToTableField extends React.Component<Props, State> {
           disabled={disabled}
           helpText={helpText}
         />
-        <AddButton
+        <Level
-          label={buttonLabel}
+          right={
-          action={this.addButtonClicked}
+            <AddButton
-          disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
+              label={buttonLabel}
+              action={this.addButtonClicked}
+              disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
+            />
+          }
         />
       </>
     );

scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent } from "react";
-
+import { SelectValue } from "@scm-manager/ui-types";
-import { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
 import Autocomplete from "../Autocomplete";
+import Level from "../layout/Level";
 import AddButton from "../buttons/AddButton";
 
 type Props = {
@@ -53,8 +53,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
           noOptionsMessage={noOptionsMessage}
           creatable={true}
         />
-
+        <Level right={<AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />} />
-        <AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />
       </div>
     );
   }

scm-ui/ui-webapp/public/locales/de/admin.json

@@ -6,7 +6,7 @@
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell"
     },
-    "info":  {
+    "info": {
       "currentAppVersion": "Aktuelle Software-Versionsnummer",
       "communityTitle": "Community Support",
       "communityIconAlt": "Community Support Icon",
@@ -91,8 +91,7 @@
       "submit": "Speichern"
     },
     "delete": {
-      "button": "Löschen",
+      "button": "Berechtigungsrolle löschen",
-      "subtitle": "Berechtigungsrolle löschen",
       "confirmAlert": {
         "title": "Berechtigungsrolle löschen?",
         "message": "Wollen Sie diese Rolle wirklich löschen? Alle Benutzer mit dieser Rolle verlieren die entsprechenden Berechtigungen.",

scm-ui/ui-webapp/public/locales/de/groups.json

@@ -60,8 +60,7 @@
     }
   },
   "deleteGroup": {
-    "subtitle": "Gruppe löschen",
+    "button": "Gruppe löschen",
-    "button": "Löschen",
     "confirmAlert": {
       "title": "Gruppe löschen",
       "message": "Soll die Gruppe wirklich gelöscht werden?",

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -114,7 +114,7 @@
       "size": "Größe"
     },
     "noSources": "Keine Sources in diesem Branch gefunden.",
-    "extension" : {
+    "extension": {
       "notBound": "Keine Erweiterung angebunden."
     }
   },
@@ -166,8 +166,7 @@
     }
   },
   "deleteRepo": {
-    "subtitle": "Repository löschen",
+    "button": "Repository löschen",
-    "button": "Löschen",
     "confirmAlert": {
       "title": "Repository löschen",
       "message": "Soll das Repository wirklich gelöscht werden?",

scm-ui/ui-webapp/public/locales/de/users.json

@@ -45,8 +45,7 @@
     "subtitle": "Erstellen eines neuen Benutzers"
   },
   "deleteUser": {
-    "subtitle": "Benutzer löschen",
+    "button": "Benutzer löschen",
-    "button": "Löschen",
     "confirmAlert": {
       "title": "Benutzer löschen",
       "message": "Soll der Benutzer wirklich gelöscht werden?",

scm-ui/ui-webapp/public/locales/en/admin.json

@@ -11,7 +11,7 @@
       "communityTitle": "Community Support",
       "communityIconAlt": "Community Support Icon",
       "communityInfo": "Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request features through the official channels.",
-      "communityButton": "Contact our team",
+      "communityButton": "Contact our Team",
       "enterpriseTitle": "Enterprise Support",
       "enterpriseIconAlt": "Enterprise Support Icon",
       "enterpriseInfo": "You require support with the integration of SCM-Manager into your processes, with the customization of the tool or simply a service level agreement (SLA)?",
@@ -76,8 +76,8 @@
     "createSubtitle": "Create Permission Role",
     "editSubtitle": "Edit Permission Role",
     "overview": {
-      "title": "Overview of all permission roles",
+      "title": "Overview of all Permission Roles",
-      "noPermissionRoles": "No permission roles found.",
+      "noPermissionRoles": "No Permission Roles found.",
       "createButton": "Create Permission Role"
     },
     "editButton": "Edit",
@@ -91,10 +91,9 @@
       "submit": "Save"
     },
     "delete": {
-      "button": "Delete",
+      "button": "Delete Permission Role",
-      "subtitle": "Delete permission role",
       "confirmAlert": {
-        "title": "Delete permission role",
+        "title": "Delete Permission Role",
         "message": "Do you really want to delete this permission role? All users will lose their corresponding permissions.",
         "submit": "Yes",
         "cancel": "No"

scm-ui/ui-webapp/public/locales/en/groups.json

@@ -60,8 +60,7 @@
     }
   },
   "deleteGroup": {
-    "subtitle": "Delete Group",
+    "button": "Delete Group",
-    "button": "Delete",
     "confirmAlert": {
       "title": "Delete Group",
       "message": "Do you really want to delete the group?",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -114,7 +114,7 @@
       "size": "Size"
     },
     "noSources": "No sources found for this branch.",
-    "extension" : {
+    "extension": {
       "notBound": "No extension bound."
     }
   },
@@ -166,8 +166,7 @@
     }
   },
   "deleteRepo": {
-    "subtitle": "Delete Repository",
+    "button": "Delete Repository",
-    "button": "Delete",
     "confirmAlert": {
       "title": "Delete repository",
       "message": "Do you really want to delete the repository?",
@@ -178,7 +177,7 @@
   "diff": {
     "changes": {
       "add": "added",
-      "delete":  "deleted",
+      "delete": "deleted",
       "modify": "modified",
       "rename": "renamed",
       "copy": "copied"

scm-ui/ui-webapp/public/locales/en/users.json

@@ -45,17 +45,16 @@
     "subtitle": "Create a new user"
   },
   "deleteUser": {
-    "subtitle": "Delete User",
+    "button": "Delete User",
-    "button": "Delete",
     "confirmAlert": {
-      "title": "Delete user",
+      "title": "Delete User",
       "message": "Do you really want to delete the user?",
       "submit": "Yes",
       "cancel": "No"
     }
   },
   "singleUserPassword": {
-    "button": "Set password",
+    "button": "Set Password",
     "setPasswordSuccessful": "Password successfully set"
   },
   "userForm": {

scm-ui/ui-webapp/public/locales/es/admin.json

@@ -86,8 +86,7 @@
       "submit": "Guardar"
     },
     "delete": {
-      "button": "Borrar",
+      "button": "Eliminar el rol",
-      "subtitle": "Eliminar el rol",
       "confirmAlert": {
         "title": "Eliminar el rol",
         "message": "¿Realmente desea borrar el rol? Todos los usuarios de este rol perderń sus permisos.",

scm-ui/ui-webapp/public/locales/es/groups.json

@@ -60,8 +60,7 @@
     }
   },
   "deleteGroup": {
-    "subtitle": "Borrar grupo",
+    "button": "Borrar grupo",
-    "button": "Borrar",
     "confirmAlert": {
       "title": "Borrar grupo",
       "message": "¿Realmente desea borrar el grupo?",

scm-ui/ui-webapp/public/locales/es/repos.json

@@ -114,7 +114,7 @@
       "size": "tamaño"
     },
     "noSources": "No se han encontrado fuentes para esta rama.",
-    "extension" : {
+    "extension": {
       "notBound": "Sin extensión conectada."
     }
   },
@@ -166,8 +166,7 @@
     }
   },
   "deleteRepo": {
-    "subtitle": "Borrar repositorio",
+    "button": "Borrar repositorio",
-    "button": "Borrar",
     "confirmAlert": {
       "title": "Borrar repositorio",
       "message": "¿Realmente desea borrar el repositorio?",
@@ -178,7 +177,7 @@
   "diff": {
     "changes": {
       "add": "añadido",
-      "delete":  "borrado",
+      "delete": "borrado",
       "modify": "modificado",
       "rename": "renombrado",
       "copy": "copiado"

scm-ui/ui-webapp/public/locales/es/users.json

@@ -45,8 +45,7 @@
     "subtitle": "Crear un nuevo usuario"
   },
   "deleteUser": {
-    "subtitle": "Borrar usuario",
+    "button": "Borrar usuario",
-    "button": "Borrar",
     "confirmAlert": {
       "title": "Borrar usuario",
       "message": "¿Realmente desea borrar el usuario?",

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";
 
 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ class DeleteRepositoryRole extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("repositoryRole.delete.subtitle")} />
+        <hr />
-        <div className="columns">
+        <ErrorNotification error={error} />
-          <div className="column">
+        <Level right={<DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />} />
-            <ErrorNotification error={error} />
-            <DeleteButton label={t("repositoryRole.delete.button")} action={action} loading={loading} />
-          </div>
-        </div>
       </>
     );
   }

scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx

@@ -44,7 +44,6 @@ class EditRepositoryRole extends React.Component<Props> {
       <>
         <Subtitle subtitle={t("repositoryRole.editSubtitle")} />
         <RepositoryRoleForm role={this.props.role} submitForm={role => this.updateRepositoryRole(role)} />
-        <hr />
         <DeleteRepositoryRole role={this.props.role} />
       </>
     );

scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx

@@ -4,6 +4,7 @@ import {
   InputField,
   Notification,
   PasswordConfirmation,
+  Level,
   SubmitButton
 } from "@scm-manager/ui-components";
 import { WithTranslation, withTranslation } from "react-i18next";
@@ -124,11 +125,7 @@ class ChangeUserPassword extends React.Component<Props, State> {
           passwordChanged={this.passwordChanged}
           key={this.state.passwordChanged ? "changed" : "unchanged"}
         />
-        <div className="columns">
+        <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("password.submit")} />} />
-          <div className="column">
-            <SubmitButton disabled={!this.isValid()} loading={loading} label={t("password.submit")} />
-          </div>
-        </div>
       </form>
     );
   }

scm-ui/ui-webapp/src/groups/components/GroupForm.tsx

@@ -8,9 +8,9 @@ import {
   InputField,
   SubmitButton,
   Textarea,
+  Level,
   Checkbox
 } from "@scm-manager/ui-components";
-
 import * as validator from "./groupValidation";
 
 type Props = WithTranslation & {
@@ -154,7 +154,7 @@ class GroupForm extends React.Component<Props, State> {
           />
           {this.renderExternalField(group)}
           {this.renderMemberfields(group)}
-          <SubmitButton disabled={!this.isValid()} label={t("groupForm.submit")} loading={loading} />
+          <Level right={<SubmitButton disabled={!this.isValid()} label={t("groupForm.submit")} loading={loading} />} />
         </form>
       </>
     );

scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx

@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Group } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteGroup, getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
 
 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ export class DeleteGroup extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("deleteGroup.subtitle")} />
+        <hr />
         <ErrorNotification error={error} />
-        <div className="columns">
+        <Level right={<DeleteButton label={t("deleteGroup.button")} action={action} loading={loading} />} />
-          <div className="column">
-            <DeleteButton label={t("deleteGroup.button")} action={action} loading={loading} />
-          </div>
-        </div>
       </>
     );
   }

scm-ui/ui-webapp/src/groups/containers/EditGroup.tsx

@@ -61,7 +61,6 @@ class EditGroup extends React.Component<Props> {
           loading={loading}
           loadUserSuggestions={this.loadUserAutocompletion}
         />
-        <hr />
         <DeleteGroup group={group} />
       </div>
     );

scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository, RepositoryType } from "@scm-manager/ui-types";
-import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
+import { Subtitle, InputField, Select, Textarea, Level, SubmitButton } from "@scm-manager/ui-components";
 import * as validator from "./repositoryValidation";
 
 type Props = WithTranslation & {
@@ -54,7 +54,6 @@ class RepositoryForm extends React.Component<Props, State> {
 
   isFalsy(value) {
     return !value;
-
   }
 
   isValid = () => {
@@ -91,7 +90,7 @@ class RepositoryForm extends React.Component<Props, State> {
     const disabled = !this.isModifiable() && !this.isCreateMode();
 
     const submitButton = disabled ? null : (
-      <SubmitButton disabled={!this.isValid()} loading={loading} label={t("repositoryForm.submit")} />
+      <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("repositoryForm.submit")} />} />
     );
 
     let subtitle = null;

scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx

@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Repository } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
 
 type Props = WithTranslation & {
@@ -65,13 +65,8 @@ class DeleteRepo extends React.Component<Props> {
     return (
       <>
         <hr />
-        <Subtitle subtitle={t("deleteRepo.subtitle")} />
         <ErrorNotification error={error} />
-        <div className="columns">
+        <Level right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />} />
-          <div className="column">
-            <DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />
-          </div>
-        </div>
       </>
     );
   }

scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx

@@ -6,6 +6,7 @@ import {
   GroupAutocomplete,
   LabelWithHelpIcon,
   Radio,
+  Level,
   SubmitButton,
   Subtitle,
   UserAutocomplete
@@ -141,8 +142,8 @@ class CreatePermissionForm extends React.Component<Props, State> {
             </div>
           </div>
           <div className="columns">
-            <div className="column is-three-fifths">{this.renderAutocompletionField()}</div>
+            <div className="column is-half">{this.renderAutocompletionField()}</div>
-            <div className="column is-two-fifths">
+            <div className="column is-half">
               <div className="columns">
                 <div className="column is-narrow">
                   <RoleSelector
@@ -163,15 +164,15 @@ class CreatePermissionForm extends React.Component<Props, State> {
               </div>
             </div>
           </div>
-          <div className="columns">
+          <Level
-            <div className="column">
+            right={
               <SubmitButton
                 label={t("permission.add-permission.submit-button")}
                 loading={loading}
                 disabled={!this.state.valid || this.state.name === ""}
               />
-            </div>
+            }
-          </div>
+          />
         </form>
       </>
     );

scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
-import { SubmitButton, Notification, ErrorNotification, PasswordConfirmation } from "@scm-manager/ui-components";
+import { Level, SubmitButton, Notification, ErrorNotification, PasswordConfirmation } from "@scm-manager/ui-components";
 import { setPassword } from "./setPassword";
 
 type Props = WithTranslation & {
@@ -98,15 +98,15 @@ class SetUserPassword extends React.Component<Props, State> {
           passwordChanged={this.passwordChanged}
           key={this.state.passwordChanged ? "changed" : "unchanged"}
         />
-        <div className="columns">
+        <Level
-          <div className="column">
+          right={
             <SubmitButton
               disabled={!this.state.passwordValid}
               loading={loading}
               label={t("singleUserPassword.button")}
             />
-          </div>
+          }
-        </div>
+        />
       </form>
     );
   }

scm-ui/ui-webapp/src/users/components/UserForm.tsx

@@ -6,6 +6,7 @@ import {
   Checkbox,
   InputField,
   PasswordConfirmation,
+  Level,
   SubmitButton,
   validation as validator
 } from "@scm-manager/ui-components";
@@ -166,11 +167,7 @@ class UserForm extends React.Component<Props, State> {
               />
             </div>
           </div>
-          <div className="columns">
+          <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("userForm.button")} />} />
-            <div className="column">
-              <SubmitButton disabled={!this.isValid()} loading={loading} label={t("userForm.button")} />
-            </div>
-          </div>
         </form>
       </>
     );

scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx

@@ -4,7 +4,7 @@ import { withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { User } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
+import { Level, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteUser, getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
 
 type Props = WithTranslation & {
@@ -64,13 +64,9 @@ class DeleteUser extends React.Component<Props> {
 
     return (
       <>
-        <Subtitle subtitle={t("deleteUser.subtitle")} />
+        <hr />
         <ErrorNotification error={error} />
-        <div className="columns">
+        <Level right={<DeleteButton label={t("deleteUser.button")} action={action} loading={loading} />} />
-          <div className="column">
-            <DeleteButton label={t("deleteUser.button")} action={action} loading={loading} />
-          </div>
-        </div>
       </>
     );
   }

scm-ui/ui-webapp/src/users/containers/EditUser.tsx

@@ -41,7 +41,6 @@ class EditUser extends React.Component<Props> {
       <div>
         <ErrorNotification error={error} />
         <UserForm submitForm={user => this.modifyUser(user)} user={user} loading={loading} />
-        <hr />
         <DeleteUser user={user} />
       </div>
     );