intial import of repositroy list ui

scm-ui/src/repos/components/RepositoryEntry.js

@@ -0,0 +1,121 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import type { Repository } from "../types/Repositories";
+import DateFromNow from "../../components/DateFromNow";
+import RepositoryEntryLink from "./RepositoryEntryLink";
+import classNames from "classnames";
+
+import icon from "../../images/blib.jpg";
+
+// TODO we need a variable or something central for the hover
+
+const styles = {
+  outer: {
+    position: "relative"
+  },
+  overlay: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  inner: {
+    position: "relative",
+    pointerEvents: "none",
+    zIndex: 1
+  },
+  innerLink: {
+    pointerEvents: "all"
+  }
+};
+
+type Props = {
+  repository: Repository,
+  // context props
+  classes: any
+};
+
+class RepositoryEntry extends React.Component<Props> {
+  createLink = (repository: Repository) => {
+    return `/repo/${repository.namespace}/${repository.name}`;
+  };
+
+  renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["changesets"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-code-fork"
+          to={repositoryLink + "/changesets"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["sources"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-code"
+          to={repositoryLink + "/sources"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderModifyLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["update"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-cog"
+          to={repositoryLink + "/modify"}
+        />
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { repository, classes } = this.props;
+    const repositoryLink = this.createLink(repository);
+    return (
+      <div className={classNames("box", "box-link-shadow", classes.outer)}>
+        <Link className={classes.overlay} to={repositoryLink} />
+        <article className={classNames("media", classes.inner)}>
+          <figure className="media-left">
+            <p className="image is-64x64">
+              <img src={icon} alt="Logo" />
+            </p>
+          </figure>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <strong>{repository.name}</strong>
+                <br />
+                {repository.description}
+              </p>
+            </div>
+            <nav className="level is-mobile">
+              <div className="level-left">
+                {this.renderChangesetsLink(repository, repositoryLink)}
+                {this.renderSourcesLink(repository, repositoryLink)}
+                {this.renderModifyLink(repository, repositoryLink)}
+              </div>
+              <div className="level-right is-hidden-mobile">
+                <small className="level-item">
+                  <DateFromNow date={repository.creationDate} />
+                </small>
+              </div>
+            </nav>
+          </div>
+        </article>
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryEntry);

scm-ui/src/repos/components/RepositoryEntryLink.js

@@ -0,0 +1,34 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  link: {
+    pointerEvents: "all"
+  }
+};
+
+type Props = {
+  to: string,
+  iconClass: string,
+
+  // context props
+  classes: any
+};
+
+class RepositoryEntryLink extends React.Component<Props> {
+  render() {
+    const { to, iconClass, classes } = this.props;
+    return (
+      <Link className={classNames("level-item", classes.link)} to={to}>
+        <span className="icon is-small">
+          <i className={classNames("fa", iconClass)} />
+        </span>
+      </Link>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryEntryLink);

scm-ui/src/repos/components/RepositoryGroupEntry.js

@@ -0,0 +1,64 @@
+//@flow
+import React from "react";
+import type { RepositoryGroup } from "../types/Repositories";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import RepositoryEntry from "./RepositoryEntry";
+
+const styles = {
+  pointer: {
+    cursor: "pointer"
+  }
+};
+
+type Props = {
+  group: RepositoryGroup,
+
+  // context props
+  classes: any
+};
+
+type State = {
+  collapsed: boolean
+};
+
+class RepositoryGroupEntry extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: false
+    };
+  }
+
+  toggleCollapse = () => {
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
+    }));
+  };
+
+  render() {
+    const { group, classes } = this.props;
+    const { collapsed } = this.state;
+
+    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+    let content = null;
+    if (!collapsed) {
+      content = group.repositories.map((repository, index) => {
+        return <RepositoryEntry repository={repository} key={index} />;
+      });
+    }
+    return (
+      <div>
+        <h2>
+          <span className={classes.pointer} onClick={this.toggleCollapse}>
+            <i className={classNames("fa", icon)} /> {group.name}
+          </span>
+        </h2>
+        <hr />
+        {content}
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryGroupEntry);

scm-ui/src/repos/components/RepositoryList.js

@@ -0,0 +1,28 @@
+//@flow
+import React from "react";
+
+import type { Repository } from "../types/Repositories";
+
+import groupByNamespace from "./groupByNamespace";
+import RepositoryGroupEntry from "./RepositoryGroupEntry";
+
+type Props = {
+  repositories: Repository[]
+};
+
+class RepositoryList extends React.Component<Props> {
+  render() {
+    const { repositories } = this.props;
+
+    const groups = groupByNamespace(repositories);
+    return (
+      <div className="content">
+        {groups.map(group => {
+          return <RepositoryGroupEntry group={group} key={group.name} />;
+        })}
+      </div>
+    );
+  }
+}
+
+export default RepositoryList;

scm-ui/src/repos/components/groupByNamespace.js

@@ -0,0 +1,39 @@
+// @flow
+import type { Repository, RepositoryGroup } from "../types/Repositories";
+
+export default function groupByNamespace(
+  repositories: Repository[]
+): RepositoryGroup[] {
+  let groups = {};
+  for (let repository of repositories) {
+    const groupName = repository.namespace;
+
+    let group = groups[groupName];
+    if (!group) {
+      group = {
+        name: groupName,
+        repositories: []
+      };
+      groups[groupName] = group;
+    }
+    group.repositories.push(repository);
+  }
+
+  let groupArray = [];
+  for (let groupName in groups) {
+    const group = groups[groupName];
+    group.repositories.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/src/repos/components/groupByNamespace.test.js

@@ -0,0 +1,74 @@
+// @flow
+import groupByNamespace from "./groupByNamespace";
+
+const base = {
+  type: "git",
+  _links: {}
+};
+
+const slartiBlueprintsFjords = {
+  ...base,
+  namespace: "slarti",
+  name: "fjords-blueprints"
+};
+
+const slartiFjords = {
+  ...base,
+  namespace: "slarti",
+  name: "fjords"
+};
+
+const hitchhikerRestand = {
+  ...base,
+  namespace: "hitchhiker",
+  name: "restand"
+};
+const hitchhikerPuzzle42 = {
+  ...base,
+  namespace: "hitchhiker",
+  name: "puzzle42"
+};
+
+const hitchhikerHeartOfGold = {
+  ...base,
+  namespace: "hitchhiker",
+  name: "heartOfGold"
+};
+
+const zaphodMarvinFirmware = {
+  ...base,
+  namespace: "zaphod",
+  name: "marvin-firmware"
+};
+
+it("should group the repositories by their namespace", () => {
+  const repositories = [
+    zaphodMarvinFirmware,
+    slartiBlueprintsFjords,
+    hitchhikerRestand,
+    slartiFjords,
+    hitchhikerHeartOfGold,
+    hitchhikerPuzzle42
+  ];
+
+  const expected = [
+    {
+      name: "hitchhiker",
+      repositories: [
+        hitchhikerHeartOfGold,
+        hitchhikerPuzzle42,
+        hitchhikerRestand
+      ]
+    },
+    {
+      name: "slarti",
+      repositories: [slartiFjords, slartiBlueprintsFjords]
+    },
+    {
+      name: "zaphod",
+      repositories: [zaphodMarvinFirmware]
+    }
+  ];
+
+  expect(groupByNamespace(repositories)).toEqual(expected);
+});