merge

scm-ui-components/packages/ui-components/src/config/Configuration.js

@@ -2,12 +2,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { Links } from "@scm-manager/ui-types";
-import {
-  apiClient,
-  SubmitButton,
-  Loading,
-  ErrorNotification
-} from "../";
+import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
 
 type RenderProps = {
   readOnly: boolean,
@@ -20,10 +15,10 @@ type Props = {
   render: (props: RenderProps) => any, // ???
 
   // context props
-  t: (string) => string
+  t: string => string
 };
 
-type ConfigurationType =  {
+type ConfigurationType = {
   _links: Links
 } & Object;
 
@@ -32,6 +27,7 @@ type State = {
   fetching: boolean,
   modifying: boolean,
   contentType?: string,
+  configChanged: boolean,
 
   configuration?: ConfigurationType,
   modifiedConfiguration?: ConfigurationType,
@@ -43,12 +39,12 @@ type State = {
  * synchronizing the configuration with the backend.
  */
 class Configuration extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
     this.state = {
       fetching: true,
       modifying: false,
+      configChanged: false,
       valid: false
     };
   }
@@ -56,7 +52,8 @@ class Configuration extends React.Component<Props, State> {
   componentDidMount() {
     const { link } = this.props;
 
-    apiClient.get(link)
+    apiClient
+      .get(link)
       .then(this.captureContentType)
       .then(response => response.json())
       .then(this.loadConfig)
@@ -119,19 +116,39 @@ class Configuration extends React.Component<Props, State> {
 
     this.setState({ modifying: true });
 
-    const {modifiedConfiguration} = this.state;
+    const { modifiedConfiguration } = this.state;
 
-    apiClient.put(this.getModificationUrl(), modifiedConfiguration, this.getContentType())
-      .then(() => this.setState({ modifying: false }))
+    apiClient
+      .put(
+        this.getModificationUrl(),
+        modifiedConfiguration,
+        this.getContentType()
+      )
+      .then(() => this.setState({ modifying: false, configChanged: true, valid: false }))
       .catch(this.handleError);
   };
 
+  renderConfigChangedNotification = () => {
+    if (this.state.configChanged) {
+      return (
+        <div className="notification is-primary">
+          <button
+            className="delete"
+            onClick={() => this.setState({ configChanged: false })}
+          />
+          {this.props.t("config-form.submit-success-notification")}
+        </div>
+      );
+    }
+    return null;
+  };
+
   render() {
     const { t } = this.props;
     const { fetching, error, configuration, modifying, valid } = this.state;
 
     if (error) {
-      return <ErrorNotification error={error}/>;
+      return <ErrorNotification error={error} />;
     } else if (fetching || !configuration) {
       return <Loading />;
     } else {
@@ -144,19 +161,21 @@ class Configuration extends React.Component<Props, State> {
       };
 
       return (
-        <form onSubmit={this.modifyConfiguration}>
-          { this.props.render(renderProps) }
-          <hr/>
-          <SubmitButton
-            label={t("config-form.submit")}
-            disabled={!valid || readOnly}
-            loading={modifying}
-          />
-        </form>
+        <>
+          {this.renderConfigChangedNotification()}
+          <form onSubmit={this.modifyConfiguration}>
+            {this.props.render(renderProps)}
+            <hr />
+            <SubmitButton
+              label={t("config-form.submit")}
+              disabled={!valid || readOnly}
+              loading={modifying}
+            />
+          </form>
+        </>
       );
     }
   }
-
 }
 
 export default translate("config")(Configuration);

scm-ui-components/packages/ui-components/src/forms/DropDown.js

@@ -7,17 +7,19 @@ type Props = {
   options: string[],
   optionSelected: string => void,
   preselectedOption?: string,
-  className: any
+  className: any,
+  disabled?: boolean
 };
 
 class DropDown extends React.Component<Props> {
   render() {
-    const { options, preselectedOption, className } = this.props;
+    const { options, preselectedOption, className, disabled } = this.props;
     return (
       <div className={classNames(className, "select")}>
         <select
           value={preselectedOption ? preselectedOption : ""}
           onChange={this.change}
+          disabled={disabled}
         >
           <option key="" />
           {options.map(option => {

scm-ui-components/packages/ui-components/src/forms/MemberNameTable.js

@@ -0,0 +1,48 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import RemoveEntryOfTableButton from "../buttons/RemoveEntryOfTableButton";
+
+type Props = {
+  members: string[],
+  t: string => string,
+  memberListChanged: (string[]) => void
+};
+
+type State = {};
+
+class MemberNameTable extends React.Component<Props, State> {
+  render() {
+    const { t } = this.props;
+    return (
+      <div>
+        <table className="table is-hoverable is-fullwidth">
+          <tbody>
+            {this.props.members.map(member => {
+              return (
+                <tr key={member}>
+                  <td key={member}>{member}</td>
+                  <td>
+                    <RemoveEntryOfTableButton
+                      entryname={member}
+                      removeEntry={this.removeEntry}
+                      disabled={false}
+                      label={t("remove-member-button.label")}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  removeEntry = (membername: string) => {
+    const newMembers = this.props.members.filter(name => name !== membername);
+    this.props.memberListChanged(newMembers);
+  };
+}
+
+export default translate("groups")(MemberNameTable);

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -2,6 +2,7 @@
 
 export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
 export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField.js";
+export { default as MemberNameTable } from "./MemberNameTable.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";

scm-ui-components/packages/ui-components/src/navigation/PrimaryNavigation.js

@@ -2,60 +2,81 @@
 import React from "react";
 import { translate } from "react-i18next";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
+import type { Links } from "@scm-manager/ui-types";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = {
   t: string => string,
-  repositoriesLink: string,
-  usersLink: string,
-  groupsLink: string,
-  configLink: string,
-  logoutLink: string
+  links: Links,
 };
 
 class PrimaryNavigation extends React.Component<Props> {
-  render() {
-    const { t, repositoriesLink, usersLink, groupsLink, configLink, logoutLink } = this.props;
 
-    const links = [
-      repositoriesLink ? (
-        <PrimaryNavigationLink
-          to="/repos"
-          match="/(repo|repos)"
-          label={t("primary-navigation.repositories")}
-          key={"repositoriesLink"}
-        />): null,
-      usersLink ? (
-        <PrimaryNavigationLink
-          to="/users"
-          match="/(user|users)"
-          label={t("primary-navigation.users")}
-          key={"usersLink"}
-        />) : null,
-      groupsLink ? (
-        <PrimaryNavigationLink
-          to="/groups"
-          match="/(group|groups)"
-          label={t("primary-navigation.groups")}
-          key={"groupsLink"}
-        />) : null,
-      configLink ? (
-        <PrimaryNavigationLink
-          to="/config"
-          label={t("primary-navigation.config")}
-          key={"configLink"}
-        />) : null,
-      logoutLink ? (
-        <PrimaryNavigationLink
-          to="/logout"
-          label={t("primary-navigation.logout")}
-          key={"logoutLink"}
-        />) : null
-    ];
+  createNavigationAppender = (navigationItems) => {
+    const { t, links } = this.props;
+
+    return (to: string, match: string, label: string, linkName: string) => {
+      const link = links[linkName];
+      if (link) {
+        const navigationItem = (
+          <PrimaryNavigationLink
+            to={to}
+            match={match}
+            label={t(label)}
+            key={linkName}
+          />)
+        ;
+        navigationItems.push(navigationItem);
+      }
+    };
+  };
+
+  appendLogout = (navigationItems, append) => {
+    const { t, links } = this.props;
+
+    const props = {
+      links,
+      label: t("primary-navigation.logout")
+    };
+
+    if (binder.hasExtension("primary-navigation.logout", props)) {
+      navigationItems.push(
+        <ExtensionPoint name="primary-navigation.logout" props={props} />
+      );
+    } else {
+      append("/logout", "/logout", "primary-navigation.logout", "logout");
+    }
+  };
+
+  createNavigationItems = () => {
+    const navigationItems = [];
+
+    const append = this.createNavigationAppender(navigationItems);
+    append("/repos", "/(repo|repos)", "primary-navigation.repositories", "repositories");
+    append("/users", "/(user|users)", "primary-navigation.users", "users");
+    append("/groups", "/(group|groups)", "primary-navigation.groups", "groups");
+    append("/config", "/config", "primary-navigation.config", "config");
+
+    navigationItems.push(
+      <ExtensionPoint
+        name="primary-navigation"
+        renderAll={true}
+        props={{links: this.props.links}}
+      />
+    );
+
+    this.appendLogout(navigationItems, append);
+
+    return navigationItems;
+  };
+
+  render() {
+    const navigationItems = this.createNavigationItems();
 
     return (
       <nav className="tabs is-boxed">
         <ul>
-          {links}
+          {navigationItems}
         </ul>
       </nav>
     );