scm-ui: new repository layout

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.js

@@ -0,0 +1,68 @@
+// @flow
+import React from "react";
+import { Button } from "@scm-manager/ui-components";
+import type { PendingPlugins } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import ExecutePendingModal from "./ExecutePendingModal";
+
+type Props = {
+  pendingPlugins: PendingPlugins,
+
+  // context props
+  t: string => string
+};
+
+type State = {
+  showModal: boolean
+};
+
+class ExecutePendingAction extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showModal: false
+    };
+  }
+
+  openModal = () => {
+    this.setState({
+      showModal: true
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      showModal: false
+    });
+  };
+
+  renderModal = () => {
+    const { showModal } = this.state;
+    const { pendingPlugins } = this.props;
+    if (showModal) {
+      return (
+        <ExecutePendingModal
+          pendingPlugins={pendingPlugins}
+          onClose={this.closeModal}
+        />
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { t } = this.props;
+    return (
+      <>
+        {this.renderModal()}
+        <Button
+          color="primary"
+          label={t("plugins.executePending")}
+          action={this.openModal}
+        />
+      </>
+    );
+  }
+}
+
+export default translate("admin")(ExecutePendingAction);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.js

@@ -0,0 +1,185 @@
+// @flow
+import React from "react";
+import {
+  apiClient,
+  Button,
+  ButtonGroup,
+  ErrorNotification,
+  Modal,
+  Notification
+} from "@scm-manager/ui-components";
+import type { PendingPlugins } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import waitForRestart from "./waitForRestart";
+import SuccessNotification from "./SuccessNotification";
+
+type Props = {
+  onClose: () => void,
+  pendingPlugins: PendingPlugins,
+
+  // context props
+  t: string => string
+};
+
+type State = {
+  loading: boolean,
+  success: boolean,
+  error?: Error
+};
+
+class ExecutePendingModal extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: false,
+      success: false
+    };
+  }
+
+  renderNotifications = () => {
+    const { t } = this.props;
+    const { error, success } = this.state;
+    if (error) {
+      return <ErrorNotification error={error} />;
+    } else if (success) {
+      return <SuccessNotification />;
+    } else {
+      return (
+        <Notification type="warning">
+          {t("plugins.modal.restartNotification")}
+        </Notification>
+      );
+    }
+  };
+
+  executeAndRestart = () => {
+    const { pendingPlugins } = this.props;
+    this.setState({
+      loading: true
+    });
+
+    apiClient
+      .post(pendingPlugins._links.execute.href)
+      .then(waitForRestart)
+      .then(() => {
+        this.setState({
+          success: true,
+          loading: false,
+          error: undefined
+        });
+      })
+      .catch(error => {
+        this.setState({
+          success: false,
+          loading: false,
+          error: error
+        });
+      });
+  };
+
+  renderInstallQueue = () => {
+    const { pendingPlugins, t } = this.props;
+    return (
+      <>
+        {pendingPlugins._embedded &&
+          pendingPlugins._embedded.new.length > 0 && (
+            <>
+              <strong>{t("plugins.modal.installQueue")}</strong>
+              <ul>
+                {pendingPlugins._embedded.new.map(plugin => (
+                  <li key={plugin.name}>{plugin.name}</li>
+                ))}
+              </ul>
+            </>
+          )}
+      </>
+    );
+  };
+
+  renderUpdateQueue = () => {
+    const { pendingPlugins, t } = this.props;
+    return (
+      <>
+        {pendingPlugins._embedded &&
+          pendingPlugins._embedded.update.length > 0 && (
+            <>
+              <strong>{t("plugins.modal.updateQueue")}</strong>
+              <ul>
+                {pendingPlugins._embedded.update.map(plugin => (
+                  <li key={plugin.name}>{plugin.name}</li>
+                ))}
+              </ul>
+            </>
+          )}
+      </>
+    );
+  };
+
+  renderUninstallQueue = () => {
+    const { pendingPlugins, t } = this.props;
+    return (
+      <>
+        {pendingPlugins._embedded &&
+          pendingPlugins._embedded.uninstall.length > 0 && (
+            <>
+              <strong>{t("plugins.modal.uninstallQueue")}</strong>
+              <ul>
+                {pendingPlugins._embedded.uninstall.map(plugin => (
+                  <li key={plugin.name}>{plugin.name}</li>
+                ))}
+              </ul>
+            </>
+          )}
+      </>
+    );
+  };
+
+  renderBody = () => {
+    const { t } = this.props;
+    return (
+      <>
+        <div className="media">
+          <div className="content">
+            <p>{t("plugins.modal.executePending")}</p>
+            {this.renderInstallQueue()}
+            {this.renderUpdateQueue()}
+            {this.renderUninstallQueue()}
+          </div>
+        </div>
+        <div className="media">{this.renderNotifications()}</div>
+      </>
+    );
+  };
+
+  renderFooter = () => {
+    const { onClose, t } = this.props;
+    const { loading, error, success } = this.state;
+    return (
+      <ButtonGroup>
+        <Button
+          color="warning"
+          label={t("plugins.modal.executeAndRestart")}
+          loading={loading}
+          action={this.executeAndRestart}
+          disabled={error || success}
+        />
+        <Button label={t("plugins.modal.abort")} action={onClose} />
+      </ButtonGroup>
+    );
+  };
+
+  render() {
+    const { onClose, t } = this.props;
+    return (
+      <Modal
+        title={t("plugins.modal.executeAndRestart")}
+        closeFunction={onClose}
+        body={this.renderBody()}
+        footer={this.renderFooter()}
+        active={true}
+      />
+    );
+  }
+}
+
+export default translate("admin")(ExecutePendingModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginAvatar.js

@@ -0,0 +1,22 @@
+//@flow
+import React from "react";
+import {ExtensionPoint} from "@scm-manager/ui-extensions";
+import type {Plugin} from "@scm-manager/ui-types";
+import {Image} from "@scm-manager/ui-components";
+
+type Props = {
+  plugin: Plugin
+};
+
+export default class PluginAvatar extends React.Component<Props> {
+  render() {
+    const { plugin } = this.props;
+    return (
+      <p className="image is-64x64">
+        <ExtensionPoint name="plugins.plugin-avatar" props={{ plugin }}>
+          <Image src={plugin.avatarUrl ? plugin.avatarUrl : "/images/blib.jpg"} alt="Logo" />
+        </ExtensionPoint>
+      </p>
+    );
+  }
+}

scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.js

@@ -0,0 +1,30 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+const styles = {
+  container: {
+    border: "2px solid #e9f7fd",
+    padding: "1em 1em",
+    marginTop: "2em",
+    display: "flex",
+    justifyContent: "center"
+  }
+};
+
+type Props = {
+  children?: React.Node,
+
+  // context props
+  classes: any
+};
+
+class PluginBottomActions extends React.Component<Props> {
+  render() {
+    const { children, classes } = this.props;
+    return <div className={classNames(classes.container)}>{children}</div>;
+  }
+}
+
+export default injectSheet(styles)(PluginBottomActions);

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js

@@ -0,0 +1,205 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import { translate } from "react-i18next";
+import type { Plugin } from "@scm-manager/ui-types";
+import { CardColumn, Icon } from "@scm-manager/ui-components";
+import PluginAvatar from "./PluginAvatar";
+import classNames from "classnames";
+import PluginModal from "./PluginModal";
+
+export const PluginAction = {
+  INSTALL: "install",
+  UPDATE: "update",
+  UNINSTALL: "uninstall"
+};
+
+type Props = {
+  plugin: Plugin,
+  refresh: () => void,
+
+  // context props
+  classes: any,
+  t: string => string
+};
+
+type State = {
+  showInstallModal: boolean,
+  showUpdateModal: boolean,
+  showUninstallModal: boolean
+};
+
+const styles = {
+  link: {
+    cursor: "pointer",
+    pointerEvents: "all",
+    marginBottom: "0 !important",
+    padding: "0.5rem",
+    border: "solid 1px #cdcdcd", // $dark-25
+    borderRadius: "4px",
+    "&:hover": {
+      borderColor: "#9a9a9a" // $dark-50
+    }
+  },
+  actionbar: {
+    display: "flex",
+    "& span + span": {
+      marginLeft: "0.5rem"
+    }
+  }
+};
+
+class PluginEntry extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showInstallModal: false,
+      showUpdateModal: false,
+      showUninstallModal: false
+    };
+  }
+
+  createAvatar = (plugin: Plugin) => {
+    return <PluginAvatar plugin={plugin} />;
+  };
+
+  toggleModal = (showModal: string) => {
+    const oldValue = this.state[showModal];
+    this.setState({ [showModal]: !oldValue });
+  };
+
+  createFooterRight = (plugin: Plugin) => {
+    return <small className="level-item">{plugin.author}</small>;
+  };
+
+  isInstallable = () => {
+    const { plugin } = this.props;
+    return plugin._links && plugin._links.install && plugin._links.install.href;
+  };
+
+  isUpdatable = () => {
+    const { plugin } = this.props;
+    return plugin._links && plugin._links.update && plugin._links.update.href;
+  };
+
+  isUninstallable = () => {
+    const { plugin } = this.props;
+    return (
+      plugin._links && plugin._links.uninstall && plugin._links.uninstall.href
+    );
+  };
+
+  createActionbar = () => {
+    const { classes, t } = this.props;
+    return (
+      <div className={classes.actionbar}>
+        {this.isInstallable() && (
+          <span
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showInstallModal")}
+          >
+            <Icon title={t("plugins.modal.install")} name="download" color="info" />
+          </span>
+        )}
+        {this.isUninstallable() && (
+          <span
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showUninstallModal")}
+          >
+            <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
+          </span>
+        )}
+        {this.isUpdatable() && (
+          <span
+            className={classNames(classes.link, "level-item")}
+            onClick={() => this.toggleModal("showUpdateModal")}
+          >
+            <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  renderModal = () => {
+    const { plugin, refresh } = this.props;
+    if (this.state.showInstallModal && this.isInstallable()) {
+      return (
+        <PluginModal
+          plugin={plugin}
+          pluginAction={PluginAction.INSTALL}
+          refresh={refresh}
+          onClose={() => this.toggleModal("showInstallModal")}
+        />
+      );
+    } else if (this.state.showUpdateModal && this.isUpdatable()) {
+      return (
+        <PluginModal
+          plugin={plugin}
+          pluginAction={PluginAction.UPDATE}
+          refresh={refresh}
+          onClose={() => this.toggleModal("showUpdateModal")}
+        />
+      );
+    } else if (this.state.showUninstallModal && this.isUninstallable()) {
+      return (
+        <PluginModal
+          plugin={plugin}
+          pluginAction={PluginAction.UNINSTALL}
+          refresh={refresh}
+          onClose={() => this.toggleModal("showUninstallModal")}
+        />
+      );
+    } else {
+      return null;
+    }
+  };
+
+  createPendingSpinner = () => {
+    const { plugin, classes } = this.props;
+    return (
+      <span className={classes.topRight}>
+        <i
+          className={classNames(
+            "fas fa-spinner fa-lg fa-spin",
+            plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
+          )}
+        />
+      </span>
+    );
+  };
+
+  render() {
+    const { plugin } = this.props;
+    const avatar = this.createAvatar(plugin);
+    const actionbar = this.createActionbar();
+    const footerRight = this.createFooterRight(plugin);
+
+    const modal = this.renderModal();
+
+    return (
+      <>
+        <CardColumn
+          action={
+            this.isInstallable()
+              ? () => this.toggleModal("showInstallModal")
+              : null
+          }
+          avatar={avatar}
+          title={plugin.displayName ? plugin.displayName : plugin.name}
+          description={plugin.description}
+          contentRight={
+            plugin.pending || plugin.markedForUninstall
+              ? this.createPendingSpinner()
+              : actionbar
+          }
+          footerRight={footerRight}
+        />
+        {modal}
+      </>
+    );
+  }
+}
+
+export default injectSheet(styles)(translate("admin")(PluginEntry));

scm-ui/ui-webapp/src/admin/plugins/components/PluginGroupEntry.js

@@ -0,0 +1,22 @@
+//@flow
+import React from "react";
+import { CardColumnGroup } from "@scm-manager/ui-components";
+import type { PluginGroup } from "@scm-manager/ui-types";
+import PluginEntry from "./PluginEntry";
+
+type Props = {
+  group: PluginGroup,
+  refresh: () => void
+};
+
+class PluginGroupEntry extends React.Component<Props> {
+  render() {
+    const { group, refresh } = this.props;
+    const entries = group.plugins.map(plugin => {
+      return <PluginEntry plugin={plugin} key={plugin.name} refresh={refresh} />;
+    });
+    return <CardColumnGroup name={group.name} elements={entries} />;
+  }
+}
+
+export default PluginGroupEntry;

scm-ui/ui-webapp/src/admin/plugins/components/PluginList.js

@@ -0,0 +1,27 @@
+//@flow
+import React from "react";
+import type { Plugin } from "@scm-manager/ui-types";
+import PluginGroupEntry from "../components/PluginGroupEntry";
+import groupByCategory from "./groupByCategory";
+
+type Props = {
+  plugins: Plugin[],
+  refresh: () => void
+};
+
+class PluginList extends React.Component<Props> {
+  render() {
+    const { plugins, refresh } = this.props;
+
+    const groups = groupByCategory(plugins);
+    return (
+      <div className="content is-plugin-page">
+        {groups.map(group => {
+          return <PluginGroupEntry group={group} key={group.name} refresh={refresh} />;
+        })}
+      </div>
+    );
+  }
+}
+
+export default PluginList;

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js

@@ -0,0 +1,339 @@
+//@flow
+import React from "react";
+import { compose } from "redux";
+import { translate } from "react-i18next";
+import injectSheet from "react-jss";
+import type { Plugin } from "@scm-manager/ui-types";
+import {
+  apiClient,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  ErrorNotification,
+  Modal,
+  Notification
+} from "@scm-manager/ui-components";
+import classNames from "classnames";
+import waitForRestart from "./waitForRestart";
+import SuccessNotification from "./SuccessNotification";
+import { PluginAction } from "./PluginEntry";
+
+type Props = {
+  plugin: Plugin,
+  pluginAction: string,
+  refresh: () => void,
+  onClose: () => void,
+
+  // context props
+  classes: any,
+  t: (key: string, params?: Object) => string
+};
+
+type State = {
+  success: boolean,
+  restart: boolean,
+  loading: boolean,
+  error?: Error
+};
+
+const styles = {
+  userLabelAlignment: {
+    textAlign: "left",
+    marginRight: 0
+  },
+  userLabelMarginSmall: {
+    minWidth: "5.5em"
+  },
+  userLabelMarginLarge: {
+    minWidth: "10em"
+  },
+  userFieldFlex: {
+    flexGrow: 4
+  }
+};
+
+class PluginModal extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      loading: false,
+      restart: false,
+      success: false
+    };
+  }
+
+  onSuccess = () => {
+    const { restart } = this.state;
+    const { refresh, onClose } = this.props;
+
+    const newState = {
+      loading: false,
+      error: undefined
+    };
+
+    if (restart) {
+      waitForRestart()
+        .then(() => {
+          this.setState({
+            ...newState,
+            success: true
+          });
+        })
+        .catch(error => {
+          this.setState({
+            loading: false,
+            success: false,
+            error
+          });
+        });
+    } else {
+      this.setState(newState, () => {
+        refresh();
+        onClose();
+      });
+    }
+  };
+
+  createPluginActionLink = () => {
+    const { plugin, pluginAction } = this.props;
+    const { restart } = this.state;
+
+    let pluginActionLink = "";
+
+    if (pluginAction === PluginAction.INSTALL) {
+      pluginActionLink = plugin._links.install.href;
+    } else if (pluginAction === PluginAction.UPDATE) {
+      pluginActionLink = plugin._links.update.href;
+    } else if (pluginAction === PluginAction.UNINSTALL) {
+      pluginActionLink = plugin._links.uninstall.href;
+    }
+    return pluginActionLink + "?restart=" + restart.toString();
+  };
+
+  handlePluginAction = (e: Event) => {
+    this.setState({
+      loading: true
+    });
+    e.preventDefault();
+    apiClient
+      .post(this.createPluginActionLink())
+      .then(this.onSuccess)
+      .catch(error => {
+        this.setState({
+          loading: false,
+          error: error
+        });
+      });
+  };
+
+  footer = () => {
+    const { pluginAction, onClose, t } = this.props;
+    const { loading, error, restart, success } = this.state;
+
+    let color = pluginAction === PluginAction.UNINSTALL ? "warning" : "primary";
+    let label = `plugins.modal.${pluginAction}`;
+    if (restart) {
+      color = "warning";
+      label = `plugins.modal.${pluginAction}AndRestart`;
+    }
+    return (
+      <ButtonGroup>
+        <Button
+          label={t(label)}
+          color={color}
+          action={this.handlePluginAction}
+          loading={loading}
+          disabled={!!error || success}
+        />
+        <Button label={t("plugins.modal.abort")} action={onClose} />
+      </ButtonGroup>
+    );
+  };
+
+  renderDependencies() {
+    const { plugin, classes, t } = this.props;
+
+    let dependencies = null;
+    if (plugin.dependencies && plugin.dependencies.length > 0) {
+      dependencies = (
+        <div className="media">
+          <Notification type="warning">
+            <strong>{t("plugins.modal.dependencyNotification")}</strong>
+            <ul className={classes.listSpacing}>
+              {plugin.dependencies.map((dependency, index) => {
+                return <li key={index}>{dependency}</li>;
+              })}
+            </ul>
+          </Notification>
+        </div>
+      );
+    }
+    return dependencies;
+  }
+
+  renderNotifications = () => {
+    const { t } = this.props;
+    const { restart, error, success } = this.state;
+    if (error) {
+      return (
+        <div className="media">
+          <ErrorNotification error={error} />
+        </div>
+      );
+    } else if (success) {
+      return (
+        <div className="media">
+          <SuccessNotification />
+        </div>
+      );
+    } else if (restart) {
+      return (
+        <div className="media">
+          <Notification type="warning">
+            {t("plugins.modal.restartNotification")}
+          </Notification>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  handleRestartChange = (value: boolean) => {
+    this.setState({
+      restart: value
+    });
+  };
+
+  render() {
+    const { restart } = this.state;
+    const { plugin, pluginAction, onClose, classes, t } = this.props;
+
+    const body = (
+      <>
+        <div className="media">
+          <div className="media-content">
+            <p>{plugin.description}</p>
+          </div>
+        </div>
+        <div className="media">
+          <div className="media-content">
+            <div className="field is-horizontal">
+              <div
+                className={classNames(
+                  classes.userLabelAlignment,
+                  pluginAction === PluginAction.INSTALL
+                    ? classes.userLabelMarginSmall
+                    : classes.userLabelMarginLarge,
+                  "field-label is-inline-flex"
+                )}
+              >
+                {t("plugins.modal.author")}:
+              </div>
+              <div
+                className={classNames(
+                  classes.userFieldFlex,
+                  "field-body is-inline-flex"
+                )}
+              >
+                {plugin.author}
+              </div>
+            </div>
+            {pluginAction === PluginAction.INSTALL && (
+              <div className="field is-horizontal">
+                <div
+                  className={classNames(
+                    classes.userLabelAlignment,
+                    classes.userLabelMarginSmall,
+                    "field-label is-inline-flex"
+                  )}
+                >
+                  {t("plugins.modal.version")}:
+                </div>
+                <div
+                  className={classNames(
+                    classes.userFieldFlex,
+                    "field-body is-inline-flex"
+                  )}
+                >
+                  {plugin.version}
+                </div>
+              </div>
+            )}
+            {(pluginAction === PluginAction.UPDATE ||
+              pluginAction === PluginAction.UNINSTALL) && (
+              <div className="field is-horizontal">
+                <div
+                  className={classNames(
+                    classes.userLabelAlignment,
+                    classes.userLabelMarginLarge,
+                    "field-label is-inline-flex"
+                  )}
+                >
+                  {t("plugins.modal.currentVersion")}:
+                </div>
+                <div
+                  className={classNames(
+                    classes.userFieldFlex,
+                    "field-body is-inline-flex"
+                  )}
+                >
+                  {plugin.version}
+                </div>
+              </div>
+            )}
+            {pluginAction === PluginAction.UPDATE && (
+              <div className="field is-horizontal">
+                <div
+                  className={classNames(
+                    classes.userLabelAlignment,
+                    classes.userLabelMarginLarge,
+                    "field-label is-inline-flex"
+                  )}
+                >
+                  {t("plugins.modal.newVersion")}:
+                </div>
+                <div
+                  className={classNames(
+                    classes.userFieldFlex,
+                    "field-body is-inline-flex"
+                  )}
+                >
+                  {plugin.newVersion}
+                </div>
+              </div>
+            )}
+            {this.renderDependencies()}
+          </div>
+        </div>
+        <div className="media">
+          <div className="media-content">
+            <Checkbox
+              checked={restart}
+              label={t("plugins.modal.restart")}
+              onChange={this.handleRestartChange}
+              disabled={false}
+            />
+          </div>
+        </div>
+        {this.renderNotifications()}
+      </>
+    );
+
+    return (
+      <Modal
+        title={t(`plugins.modal.title.${pluginAction}`, {
+          name: plugin.displayName ? plugin.displayName : plugin.name
+        })}
+        closeFunction={() => onClose()}
+        body={body}
+        footer={this.footer()}
+        active={true}
+      />
+    );
+  }
+}
+
+export default compose(
+  injectSheet(styles),
+  translate("admin")
+)(PluginModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.js

@@ -0,0 +1,32 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+const styles = {
+  container: {
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center"
+  }
+};
+
+type Props = {
+  children?: React.Node,
+
+  // context props
+  classes: any
+};
+
+class PluginTopActions extends React.Component<Props> {
+  render() {
+    const { children, classes } = this.props;
+    return (
+      <div className={classNames(classes.container, "column", "is-one-fifths", "is-mobile-action-spacing")}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(PluginTopActions);

scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.js

@@ -0,0 +1,25 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Notification } from "@scm-manager/ui-components";
+
+type Props = {
+  // context props
+  t: string => string
+};
+
+class InstallSuccessNotification extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+    return (
+      <Notification type="success">
+        {t("plugins.modal.successNotification")}{" "}
+        <a onClick={e => window.location.reload(true)}>
+          {t("plugins.modal.reload")}
+        </a>
+      </Notification>
+    );
+  }
+}
+
+export default translate("admin")(InstallSuccessNotification);

scm-ui/ui-webapp/src/admin/plugins/components/groupByCategory.js

@@ -0,0 +1,39 @@
+// @flow
+import type { Plugin, PluginGroup } from "@scm-manager/ui-types";
+
+export default function groupByCategory(
+  plugins: Plugin[]
+): PluginGroup[] {
+  let groups = {};
+  for (let plugin of plugins) {
+    const groupName = plugin.category;
+
+    let group = groups[groupName];
+    if (!group) {
+      group = {
+        name: groupName,
+        plugins: []
+      };
+      groups[groupName] = group;
+    }
+    group.plugins.push(plugin);
+  }
+
+  let groupArray = [];
+  for (let groupName in groups) {
+    const group = groups[groupName];
+    group.plugins.sort(sortByName);
+    groupArray.push(groups[groupName]);
+  }
+  groupArray.sort(sortByName);
+  return groupArray;
+}
+
+function sortByName(a, b) {
+  if (a.name < b.name) {
+    return -1;
+  } else if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+}

scm-ui/ui-webapp/src/admin/plugins/components/waitForRestart.js

@@ -0,0 +1,30 @@
+// @flow
+import { apiClient } from "@scm-manager/ui-components";
+
+const waitForRestart = () => {
+  const endTime = Number(new Date()) + 10000;
+  let started = false;
+
+  const executor = (resolve, reject) => {
+    // we need some initial delay
+    if (!started) {
+      started = true;
+      setTimeout(executor, 1000, resolve, reject);
+    } else {
+      apiClient
+        .get("")
+        .then(resolve)
+        .catch(() => {
+          if (Number(new Date()) < endTime) {
+            setTimeout(executor, 500, resolve, reject);
+          } else {
+            reject(new Error("timeout reached"));
+          }
+        });
+    }
+  };
+
+  return new Promise<void>(executor);
+};
+
+export default waitForRestart;

scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.js

@@ -0,0 +1,190 @@
+// @flow
+import * as React from "react";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+import { compose } from "redux";
+import type { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
+import {
+  ErrorNotification,
+  Loading,
+  Notification,
+  Subtitle,
+  Title
+} from "@scm-manager/ui-components";
+import {
+  fetchPendingPlugins,
+  fetchPluginsByLink,
+  getFetchPluginsFailure,
+  getPendingPlugins,
+  getPluginCollection,
+  isFetchPluginsPending
+} from "../modules/plugins";
+import PluginsList from "../components/PluginList";
+import {
+  getAvailablePluginsLink,
+  getInstalledPluginsLink,
+  getPendingPluginsLink
+} from "../../../modules/indexResource";
+import PluginTopActions from "../components/PluginTopActions";
+import PluginBottomActions from "../components/PluginBottomActions";
+import ExecutePendingAction from "../components/ExecutePendingAction";
+
+type Props = {
+  loading: boolean,
+  error: Error,
+  collection: PluginCollection,
+  baseUrl: string,
+  installed: boolean,
+  availablePluginsLink: string,
+  installedPluginsLink: string,
+  pendingPluginsLink: string,
+  pendingPlugins: PendingPlugins,
+
+  // context objects
+  t: string => string,
+
+  // dispatched functions
+  fetchPluginsByLink: (link: string) => void,
+  fetchPendingPlugins: (link: string) => void
+};
+
+class PluginsOverview extends React.Component<Props> {
+  componentDidMount() {
+    this.fetchPlugins();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { installed } = this.props;
+    if (prevProps.installed !== installed) {
+      this.fetchPlugins();
+    }
+  }
+
+  fetchPlugins = () => {
+    const {
+      installed,
+      fetchPluginsByLink,
+      availablePluginsLink,
+      installedPluginsLink,
+      pendingPluginsLink,
+      fetchPendingPlugins
+    } = this.props;
+    fetchPluginsByLink(installed ? installedPluginsLink : availablePluginsLink);
+    if (pendingPluginsLink) {
+      fetchPendingPlugins(pendingPluginsLink);
+    }
+  };
+
+  renderHeader = (actions: React.Node) => {
+    const { installed, t } = this.props;
+    return (
+      <div className="columns">
+        <div className="column">
+          <Title title={t("plugins.title")} />
+          <Subtitle
+            subtitle={
+              installed
+                ? t("plugins.installedSubtitle")
+                : t("plugins.availableSubtitle")
+            }
+          />
+        </div>
+        <PluginTopActions>{actions}</PluginTopActions>
+      </div>
+    );
+  };
+
+  renderFooter = (actions: React.Node) => {
+    if (actions) {
+      return <PluginBottomActions>{actions}</PluginBottomActions>;
+    }
+    return null;
+  };
+
+  createActions = () => {
+    const { pendingPlugins } = this.props;
+    if (
+      pendingPlugins &&
+      pendingPlugins._links &&
+      pendingPlugins._links.execute
+    ) {
+      return <ExecutePendingAction pendingPlugins={pendingPlugins} />;
+    }
+    return null;
+  };
+
+  render() {
+    const { loading, error, collection } = this.props;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (!collection || loading) {
+      return <Loading />;
+    }
+
+    const actions = this.createActions();
+    return (
+      <>
+        {this.renderHeader(actions)}
+        <hr className="header-with-actions" />
+        {this.renderPluginsList()}
+        {this.renderFooter(actions)}
+      </>
+    );
+  }
+
+  renderPluginsList() {
+    const { collection, t } = this.props;
+
+    if (collection._embedded && collection._embedded.plugins.length > 0) {
+      return (
+        <PluginsList
+          plugins={collection._embedded.plugins}
+          refresh={this.fetchPlugins}
+        />
+      );
+    }
+    return <Notification type="info">{t("plugins.noPlugins")}</Notification>;
+  }
+}
+
+const mapStateToProps = state => {
+  const collection = getPluginCollection(state);
+  const loading = isFetchPluginsPending(state);
+  const error = getFetchPluginsFailure(state);
+  const availablePluginsLink = getAvailablePluginsLink(state);
+  const installedPluginsLink = getInstalledPluginsLink(state);
+  const pendingPluginsLink = getPendingPluginsLink(state);
+  const pendingPlugins = getPendingPlugins(state);
+
+  return {
+    collection,
+    loading,
+    error,
+    availablePluginsLink,
+    installedPluginsLink,
+    pendingPluginsLink,
+    pendingPlugins
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchPluginsByLink: (link: string) => {
+      dispatch(fetchPluginsByLink(link));
+    },
+    fetchPendingPlugins: (link: string) => {
+      dispatch(fetchPendingPlugins(link));
+    }
+  };
+};
+
+export default compose(
+  translate("admin"),
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)(PluginsOverview);

scm-ui/ui-webapp/src/admin/plugins/modules/plugins.js

@@ -0,0 +1,255 @@
+// @flow
+import * as types from "../../../modules/types";
+import { isPending } from "../../../modules/pending";
+import { getFailure } from "../../../modules/failure";
+import type { Action, Plugin, PluginCollection } from "@scm-manager/ui-types";
+import { apiClient } from "@scm-manager/ui-components";
+
+export const FETCH_PLUGINS = "scm/plugins/FETCH_PLUGINS";
+export const FETCH_PLUGINS_PENDING = `${FETCH_PLUGINS}_${types.PENDING_SUFFIX}`;
+export const FETCH_PLUGINS_SUCCESS = `${FETCH_PLUGINS}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_PLUGINS_FAILURE = `${FETCH_PLUGINS}_${types.FAILURE_SUFFIX}`;
+
+export const FETCH_PLUGIN = "scm/plugins/FETCH_PLUGIN";
+export const FETCH_PLUGIN_PENDING = `${FETCH_PLUGIN}_${types.PENDING_SUFFIX}`;
+export const FETCH_PLUGIN_SUCCESS = `${FETCH_PLUGIN}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_PLUGIN_FAILURE = `${FETCH_PLUGIN}_${types.FAILURE_SUFFIX}`;
+
+export const FETCH_PENDING_PLUGINS = "scm/plugins/FETCH_PENDING_PLUGINS";
+export const FETCH_PENDING_PLUGINS_PENDING = `${FETCH_PENDING_PLUGINS}_${
+  types.PENDING_SUFFIX
+}`;
+export const FETCH_PENDING_PLUGINS_SUCCESS = `${FETCH_PENDING_PLUGINS}_${
+  types.SUCCESS_SUFFIX
+}`;
+export const FETCH_PENDING_PLUGINS_FAILURE = `${FETCH_PENDING_PLUGINS}_${
+  types.FAILURE_SUFFIX
+}`;
+
+// fetch plugins
+export function fetchPluginsByLink(link: string) {
+  return function(dispatch: any) {
+    dispatch(fetchPluginsPending());
+    return apiClient
+      .get(link)
+      .then(response => response.json())
+      .then(plugins => {
+        dispatch(fetchPluginsSuccess(plugins));
+      })
+      .catch(err => {
+        dispatch(fetchPluginsFailure(err));
+      });
+  };
+}
+
+export function fetchPluginsPending(): Action {
+  return {
+    type: FETCH_PLUGINS_PENDING
+  };
+}
+
+export function fetchPluginsSuccess(plugins: PluginCollection): Action {
+  return {
+    type: FETCH_PLUGINS_SUCCESS,
+    payload: plugins
+  };
+}
+
+export function fetchPluginsFailure(err: Error): Action {
+  return {
+    type: FETCH_PLUGINS_FAILURE,
+    payload: err
+  };
+}
+
+// fetch plugin
+export function fetchPluginByLink(plugin: Plugin) {
+  return fetchPlugin(plugin._links.self.href, plugin.name);
+}
+
+export function fetchPluginByName(link: string, name: string) {
+  const pluginUrl = link.endsWith("/") ? link : link + "/";
+  return fetchPlugin(pluginUrl + name, name);
+}
+
+function fetchPlugin(link: string, name: string) {
+  return function(dispatch: any) {
+    dispatch(fetchPluginPending(name));
+    return apiClient
+      .get(link)
+      .then(response => response.json())
+      .then(plugin => {
+        dispatch(fetchPluginSuccess(plugin));
+      })
+      .catch(err => {
+        dispatch(fetchPluginFailure(name, err));
+      });
+  };
+}
+
+export function fetchPluginPending(name: string): Action {
+  return {
+    type: FETCH_PLUGIN_PENDING,
+    payload: {
+      name
+    },
+    itemId: name
+  };
+}
+
+export function fetchPluginSuccess(plugin: Plugin): Action {
+  return {
+    type: FETCH_PLUGIN_SUCCESS,
+    payload: plugin,
+    itemId: plugin.name
+  };
+}
+
+export function fetchPluginFailure(name: string, error: Error): Action {
+  return {
+    type: FETCH_PLUGIN_FAILURE,
+    payload: {
+      name,
+      error
+    },
+    itemId: name
+  };
+}
+
+// fetch pending plugins
+export function fetchPendingPlugins(link: string) {
+  return function(dispatch: any) {
+    dispatch(fetchPendingPluginsPending());
+    return apiClient
+      .get(link)
+      .then(response => response.json())
+      .then(PendingPlugins => {
+        dispatch(fetchPendingPluginsSuccess(PendingPlugins));
+      })
+      .catch(err => {
+        dispatch(fetchPendingPluginsFailure(err));
+      });
+  };
+}
+
+export function fetchPendingPluginsPending(): Action {
+  return {
+    type: FETCH_PENDING_PLUGINS_PENDING
+  };
+}
+
+export function fetchPendingPluginsSuccess(PendingPlugins: {}): Action {
+  return {
+    type: FETCH_PENDING_PLUGINS_SUCCESS,
+    payload: PendingPlugins
+  };
+}
+
+export function fetchPendingPluginsFailure(err: Error): Action {
+  return {
+    type: FETCH_PENDING_PLUGINS_FAILURE,
+    payload: err
+  };
+}
+
+// reducer
+function normalizeByName(state: Object, pluginCollection: PluginCollection) {
+  const names = [];
+  const byNames = {};
+  for (const plugin of pluginCollection._embedded.plugins) {
+    names.push(plugin.name);
+    byNames[plugin.name] = plugin;
+  }
+  return {
+    ...state,
+    list: {
+      ...pluginCollection,
+      _embedded: {
+        plugins: names
+      }
+    },
+    byNames: byNames
+  };
+}
+
+const reducerByNames = (state: Object, plugin: Plugin) => {
+  return {
+    ...state,
+    byNames: {
+      ...state.byNames,
+      [plugin.name]: plugin
+    }
+  };
+};
+
+export default function reducer(
+  state: Object = {},
+  action: Action = { type: "UNKNOWN" }
+): Object {
+  if (!action.payload) {
+    return state;
+  }
+
+  switch (action.type) {
+    case FETCH_PLUGINS_SUCCESS:
+      return normalizeByName(state, action.payload);
+    case FETCH_PLUGIN_SUCCESS:
+      return reducerByNames(state, action.payload);
+    case FETCH_PENDING_PLUGINS_SUCCESS:
+      return { ...state, pending: action.payload };
+    default:
+      return state;
+  }
+}
+
+// selectors
+export function getPluginCollection(state: Object) {
+  if (state.plugins && state.plugins.list && state.plugins.byNames) {
+    const plugins = [];
+    for (let pluginName of state.plugins.list._embedded.plugins) {
+      plugins.push(state.plugins.byNames[pluginName]);
+    }
+    return {
+      ...state.plugins.list,
+      _embedded: {
+        plugins
+      }
+    };
+  }
+}
+
+export function isFetchPluginsPending(state: Object) {
+  return isPending(state, FETCH_PLUGINS);
+}
+
+export function getFetchPluginsFailure(state: Object) {
+  return getFailure(state, FETCH_PLUGINS);
+}
+
+export function getPlugin(state: Object, name: string) {
+  if (state.plugins && state.plugins.byNames) {
+    return state.plugins.byNames[name];
+  }
+}
+
+export function isFetchPluginPending(state: Object, name: string) {
+  return isPending(state, FETCH_PLUGIN, name);
+}
+
+export function getFetchPluginFailure(state: Object, name: string) {
+  return getFailure(state, FETCH_PLUGIN, name);
+}
+
+export function getPendingPlugins(state: Object) {
+  if (state.plugins && state.plugins.pending) {
+    return state.plugins.pending;
+  }
+}
+
+export function isFetchPendingPluginsPending(state: Object) {
+  return isPending(state, FETCH_PENDING_PLUGINS);
+}
+
+export function getFetchPendingPluginsFailure(state: Object) {
+  return getFailure(state, FETCH_PENDING_PLUGINS);
+}

scm-ui/ui-webapp/src/admin/plugins/modules/plugins.test.js

@@ -0,0 +1,353 @@
+// @flow
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import fetchMock from "fetch-mock";
+import reducer, {
+  FETCH_PLUGINS,
+  FETCH_PLUGINS_PENDING,
+  FETCH_PLUGINS_SUCCESS,
+  FETCH_PLUGINS_FAILURE,
+  FETCH_PLUGIN,
+  FETCH_PLUGIN_PENDING,
+  FETCH_PLUGIN_SUCCESS,
+  FETCH_PLUGIN_FAILURE,
+  fetchPluginsByLink,
+  fetchPluginsSuccess,
+  getPluginCollection,
+  isFetchPluginsPending,
+  getFetchPluginsFailure,
+  fetchPluginByLink,
+  fetchPluginByName,
+  fetchPluginSuccess,
+  getPlugin,
+  isFetchPluginPending,
+  getFetchPluginFailure
+} from "./plugins";
+import type { Plugin, PluginCollection } from "@scm-manager/ui-types";
+
+const groupManagerPlugin: Plugin = {
+  name: "scm-groupmanager-plugin",
+  bundles: ["/scm/groupmanager-plugin.bundle.js"],
+  type: "Administration",
+  version: "2.0.0-SNAPSHOT",
+  author: "Sebastian Sdorra",
+  description: "Notify a remote webserver whenever a plugin is pushed to.",
+  _links: {
+    self: {
+      href: "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin"
+    }
+  }
+};
+
+const scriptPlugin: Plugin = {
+  name: "scm-script-plugin",
+  bundles: ["/scm/script-plugin.bundle.js"],
+  type: "Miscellaneous",
+  version: "2.0.0-SNAPSHOT",
+  author: "Sebastian Sdorra",
+  description: "Script support for scm-manager.",
+  _links: {
+    self: {
+      href: "http://localhost:8081/api/v2/ui/plugins/scm-script-plugin"
+    }
+  }
+};
+
+const branchwpPlugin: Plugin = {
+  name: "scm-branchwp-plugin",
+  bundles: ["/scm/branchwp-plugin.bundle.js"],
+  type: "Miscellaneous",
+  version: "2.0.0-SNAPSHOT",
+  author: "Sebastian Sdorra",
+  description: "This plugin adds branch write protection for plugins.",
+  _links: {
+    self: {
+      href: "http://localhost:8081/api/v2/ui/plugins/scm-branchwp-plugin"
+    }
+  }
+};
+
+const pluginCollectionWithNames: PluginCollection = {
+  _links: {
+    self: {
+      href: "http://localhost:8081/api/v2/ui/plugins"
+    }
+  },
+  _embedded: {
+    plugins: [groupManagerPlugin.name, scriptPlugin.name, branchwpPlugin.name]
+  }
+};
+
+const pluginCollection: PluginCollection = {
+  _links: {
+    self: {
+      href: "http://localhost:8081/api/v2/ui/plugins"
+    }
+  },
+  _embedded: {
+    plugins: [groupManagerPlugin, scriptPlugin, branchwpPlugin]
+  }
+};
+
+describe("plugins fetch", () => {
+  const URL = "ui/plugins";
+  const PLUGINS_URL = "/api/v2/ui/plugins";
+  const mockStore = configureMockStore([thunk]);
+
+  afterEach(() => {
+    fetchMock.reset();
+    fetchMock.restore();
+  });
+
+  it("should successfully fetch plugins from link", () => {
+    fetchMock.getOnce(PLUGINS_URL, pluginCollection);
+
+    const expectedActions = [
+      { type: FETCH_PLUGINS_PENDING },
+      {
+        type: FETCH_PLUGINS_SUCCESS,
+        payload: pluginCollection
+      }
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should dispatch FETCH_PLUGINS_FAILURE if request fails", () => {
+    fetchMock.getOnce(PLUGINS_URL, {
+      status: 500
+    });
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginsByLink(URL)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(FETCH_PLUGINS_PENDING);
+      expect(actions[1].type).toEqual(FETCH_PLUGINS_FAILURE);
+      expect(actions[1].payload).toBeDefined();
+    });
+  });
+
+  it("should successfully fetch scm-groupmanager-plugin by name", () => {
+    fetchMock.getOnce(
+      PLUGINS_URL + "/scm-groupmanager-plugin",
+      groupManagerPlugin
+    );
+
+    const expectedActions = [
+      {
+        type: FETCH_PLUGIN_PENDING,
+        payload: {
+          name: "scm-groupmanager-plugin"
+        },
+        itemId: "scm-groupmanager-plugin"
+      },
+      {
+        type: FETCH_PLUGIN_SUCCESS,
+        payload: groupManagerPlugin,
+        itemId: "scm-groupmanager-plugin"
+      }
+    ];
+
+    const store = mockStore({});
+    return store
+      .dispatch(fetchPluginByName(URL, "scm-groupmanager-plugin"))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it("should dispatch FETCH_PLUGIN_FAILURE, if the request for scm-groupmanager-plugin by name fails", () => {
+    fetchMock.getOnce(PLUGINS_URL + "/scm-groupmanager-plugin", {
+      status: 500
+    });
+
+    const store = mockStore({});
+    return store
+      .dispatch(fetchPluginByName(URL, "scm-groupmanager-plugin"))
+      .then(() => {
+        const actions = store.getActions();
+        expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
+        expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
+        expect(actions[1].payload.name).toBe("scm-groupmanager-plugin");
+        expect(actions[1].payload.error).toBeDefined();
+        expect(actions[1].itemId).toBe("scm-groupmanager-plugin");
+      });
+  });
+
+  it("should successfully fetch scm-groupmanager-plugin", () => {
+    fetchMock.getOnce(
+      "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin",
+      groupManagerPlugin
+    );
+
+    const expectedActions = [
+      {
+        type: FETCH_PLUGIN_PENDING,
+        payload: {
+          name: "scm-groupmanager-plugin"
+        },
+        itemId: "scm-groupmanager-plugin"
+      },
+      {
+        type: FETCH_PLUGIN_SUCCESS,
+        payload: groupManagerPlugin,
+        itemId: "scm-groupmanager-plugin"
+      }
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should dispatch FETCH_PLUGIN_FAILURE, it the request for scm-groupmanager-plugin fails", () => {
+    fetchMock.getOnce(
+      "http://localhost:8081/api/v2/ui/plugins/scm-groupmanager-plugin",
+      {
+        status: 500
+      }
+    );
+
+    const store = mockStore({});
+    return store.dispatch(fetchPluginByLink(groupManagerPlugin)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(FETCH_PLUGIN_PENDING);
+      expect(actions[1].type).toEqual(FETCH_PLUGIN_FAILURE);
+      expect(actions[1].payload.name).toBe("scm-groupmanager-plugin");
+      expect(actions[1].payload.error).toBeDefined();
+      expect(actions[1].itemId).toBe("scm-groupmanager-plugin");
+    });
+  });
+});
+
+describe("plugins reducer", () => {
+  it("should return empty object, if state and action is undefined", () => {
+    expect(reducer()).toEqual({});
+  });
+
+  it("should return the same state, if the action is undefined", () => {
+    const state = { x: true };
+    expect(reducer(state)).toBe(state);
+  });
+
+  it("should return the same state, if the action is unknown to the reducer", () => {
+    const state = { x: true };
+    expect(reducer(state, { type: "EL_SPECIALE" })).toBe(state);
+  });
+
+  it("should store the plugins by it's type and name on FETCH_PLUGINS_SUCCESS", () => {
+    const newState = reducer({}, fetchPluginsSuccess(pluginCollection));
+    expect(newState.list._embedded.plugins).toEqual([
+      "scm-groupmanager-plugin",
+      "scm-script-plugin",
+      "scm-branchwp-plugin"
+    ]);
+    expect(newState.byNames["scm-groupmanager-plugin"]).toBe(
+      groupManagerPlugin
+    );
+    expect(newState.byNames["scm-script-plugin"]).toBe(scriptPlugin);
+    expect(newState.byNames["scm-branchwp-plugin"]).toBe(branchwpPlugin);
+  });
+
+  it("should store the plugin at byNames", () => {
+    const newState = reducer({}, fetchPluginSuccess(groupManagerPlugin));
+    expect(newState.byNames["scm-groupmanager-plugin"]).toBe(
+      groupManagerPlugin
+    );
+  });
+});
+
+describe("plugins selectors", () => {
+  const error = new Error("something went wrong");
+
+  it("should return the plugins collection", () => {
+    const state = {
+      plugins: {
+        list: pluginCollectionWithNames,
+        byNames: {
+          "scm-groupmanager-plugin": groupManagerPlugin,
+          "scm-script-plugin": scriptPlugin,
+          "scm-branchwp-plugin": branchwpPlugin
+        }
+      }
+    };
+
+    const collection = getPluginCollection(state);
+    expect(collection).toEqual(pluginCollection);
+  });
+
+  it("should return true, when fetch plugins is pending", () => {
+    const state = {
+      pending: {
+        [FETCH_PLUGINS]: true
+      }
+    };
+    expect(isFetchPluginsPending(state)).toEqual(true);
+  });
+
+  it("should return false, when fetch plugins is not pending", () => {
+    expect(isFetchPluginsPending({})).toEqual(false);
+  });
+
+  it("should return error when fetch plugins did fail", () => {
+    const state = {
+      failure: {
+        [FETCH_PLUGINS]: error
+      }
+    };
+    expect(getFetchPluginsFailure(state)).toEqual(error);
+  });
+
+  it("should return undefined when fetch plugins did not fail", () => {
+    expect(getFetchPluginsFailure({})).toBe(undefined);
+  });
+
+  it("should return the plugin collection", () => {
+    const state = {
+      plugins: {
+        byNames: {
+          "scm-groupmanager-plugin": groupManagerPlugin
+        }
+      }
+    };
+
+    const plugin = getPlugin(state, "scm-groupmanager-plugin");
+    expect(plugin).toEqual(groupManagerPlugin);
+  });
+
+  it("should return true, when fetch plugin is pending", () => {
+    const state = {
+      pending: {
+        [FETCH_PLUGIN + "/scm-groupmanager-plugin"]: true
+      }
+    };
+    expect(isFetchPluginPending(state, "scm-groupmanager-plugin")).toEqual(
+      true
+    );
+  });
+
+  it("should return false, when fetch plugin is not pending", () => {
+    expect(isFetchPluginPending({}, "scm-groupmanager-plugin")).toEqual(false);
+  });
+
+  it("should return error when fetch plugin did fail", () => {
+    const state = {
+      failure: {
+        [FETCH_PLUGIN + "/scm-groupmanager-plugin"]: error
+      }
+    };
+    expect(getFetchPluginFailure(state, "scm-groupmanager-plugin")).toEqual(
+      error
+    );
+  });
+
+  it("should return undefined when fetch plugin did not fail", () => {
+    expect(getFetchPluginFailure({}, "scm-groupmanager-plugin")).toBe(
+      undefined
+    );
+  });
+});