scm-ui: new repository layout

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

@@ -0,0 +1,181 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { Links } from "@scm-manager/ui-types";
+import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
+
+type RenderProps = {
+  readOnly: boolean,
+  initialConfiguration: ConfigurationType,
+  onConfigurationChange: (ConfigurationType, boolean) => void
+};
+
+type Props = {
+  link: string,
+  render: (props: RenderProps) => any, // ???
+
+  // context props
+  t: string => string
+};
+
+type ConfigurationType = {
+  _links: Links
+} & Object;
+
+type State = {
+  error?: Error,
+  fetching: boolean,
+  modifying: boolean,
+  contentType?: string,
+  configChanged: boolean,
+
+  configuration?: ConfigurationType,
+  modifiedConfiguration?: ConfigurationType,
+  valid: boolean
+};
+
+/**
+ * GlobalConfiguration uses the render prop pattern to encapsulate the logic for
+ * 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
+    };
+  }
+
+  componentDidMount() {
+    const { link } = this.props;
+
+    apiClient
+      .get(link)
+      .then(this.captureContentType)
+      .then(response => response.json())
+      .then(this.loadConfig)
+      .catch(this.handleError);
+  }
+
+  captureContentType = (response: Response) => {
+    const contentType = response.headers.get("Content-Type");
+    this.setState({
+      contentType
+    });
+    return response;
+  };
+
+  getContentType = (): string => {
+    const { contentType } = this.state;
+    return contentType ? contentType : "application/json";
+  };
+
+  handleError = (error: Error) => {
+    this.setState({
+      error,
+      fetching: false,
+      modifying: false
+    });
+  };
+
+  loadConfig = (configuration: ConfigurationType) => {
+    this.setState({
+      configuration,
+      fetching: false,
+      error: undefined
+    });
+  };
+
+  getModificationUrl = (): ?string => {
+    const { configuration } = this.state;
+    if (configuration) {
+      const links = configuration._links;
+      if (links && links.update) {
+        return links.update.href;
+      }
+    }
+  };
+
+  isReadOnly = (): boolean => {
+    const modificationUrl = this.getModificationUrl();
+    return !modificationUrl;
+  };
+
+  configurationChanged = (configuration: ConfigurationType, valid: boolean) => {
+    this.setState({
+      modifiedConfiguration: configuration,
+      valid
+    });
+  };
+
+  modifyConfiguration = (event: Event) => {
+    event.preventDefault();
+
+    this.setState({ modifying: true });
+
+    const { modifiedConfiguration } = this.state;
+
+    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} />;
+    } else if (fetching || !configuration) {
+      return <Loading />;
+    } else {
+      const readOnly = this.isReadOnly();
+
+      const renderProps: RenderProps = {
+        readOnly,
+        initialConfiguration: configuration,
+        onConfigurationChange: this.configurationChanged
+      };
+
+      return (
+        <>
+          {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/ui-components/src/config/ConfigurationBinder.js

@@ -0,0 +1,104 @@
+// @flow
+import React from "react";
+import { binder } from "@scm-manager/ui-extensions";
+import { NavLink } from "../navigation";
+import { Route } from "react-router-dom";
+import { translate } from "react-i18next";
+
+class ConfigurationBinder {
+
+  i18nNamespace: string = "plugins";
+
+  navLink(to: string, labelI18nKey: string, t: any){
+    return <NavLink to={to} label={t(labelI18nKey)} />;
+  }
+
+  route(path: string, Component: any){
+    return <Route path={path}
+                  render={() => Component}
+                  exact/>;
+  }
+
+  bindGlobal(to: string, labelI18nKey: string, linkName: string, ConfigurationComponent: any) {
+
+    // create predicate based on the link name of the index resource
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const configPredicate = (props: Object) => {
+      return props.links && props.links[linkName];
+    };
+
+    // create NavigationLink with translated label
+    const ConfigNavLink = translate(this.i18nNamespace)(({t}) => {
+      return this.navLink("/admin/settings" + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind("admin.setting", ConfigNavLink, configPredicate);
+
+    // route for global configuration, passes the link from the index resource to component
+    const ConfigRoute = ({ url, links, ...additionalProps }) => {
+      const link = links[linkName].href;
+      return this.route(url + "/settings" + to, <ConfigurationComponent link={link} {...additionalProps} />);
+    };
+
+    // bind config route to extension point
+    binder.bind("admin.route", ConfigRoute, configPredicate);
+  }
+
+  bindRepository(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
+
+    // create predicate based on the link name of the current repository route
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const repoPredicate = (props: Object) => {
+      return props.repository && props.repository._links && props.repository._links[linkName];
+    };
+
+    // create NavigationLink with translated label
+    const RepoNavLink = translate(this.i18nNamespace)(({t, url}) => {
+      return this.navLink(url + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind("repository.navigation", RepoNavLink, repoPredicate);
+
+
+    // route for global configuration, passes the current repository to component
+    const RepoRoute = ({url, repository, ...additionalProps}) => {
+      const link = repository._links[linkName].href;
+      return this.route(url + to, <RepositoryComponent repository={repository} link={link} {...additionalProps}/>);
+    };
+
+    // bind config route to extension point
+    binder.bind("repository.route", RepoRoute, repoPredicate);
+  }
+
+  bindRepositorySetting(to: string, labelI18nKey: string, linkName: string, RepositoryComponent: any) {
+
+    // create predicate based on the link name of the current repository route
+    // if the linkname is not available, the navigation link and the route are not bound to the extension points
+    const repoPredicate = (props: Object) => {
+      return props.repository && props.repository._links && props.repository._links[linkName];
+    };
+
+    // create NavigationLink with translated label
+    const RepoNavLink = translate(this.i18nNamespace)(({t, url}) => {
+      return this.navLink(url + "/settings" + to, labelI18nKey, t);
+    });
+
+    // bind navigation link to extension point
+    binder.bind("repository.setting", RepoNavLink, repoPredicate);
+
+
+    // route for global configuration, passes the current repository to component
+    const RepoRoute = ({url, repository, ...additionalProps}) => {
+      const link = repository._links[linkName].href;
+      return this.route(url + "/settings" + to, <RepositoryComponent repository={repository} link={link} {...additionalProps}/>);
+    };
+
+    // bind config route to extension point
+    binder.bind("repository.route", RepoRoute, repoPredicate);
+  }
+
+}
+
+export default new ConfigurationBinder();

scm-ui/ui-components/src/config/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default as ConfigurationBinder } from "./ConfigurationBinder";
+export { default as Configuration } from "./Configuration";