scm-ui: new repository layout

2025-11-12 00:15:44 +01:00 · 2019-10-07 10:57:09 +02:00
parent 09c7def874
commit c05798e254
417 changed files with 3620 additions and 52971 deletions
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
@@ -0,0 +1,129 @@
+//@flow
+import React from "react";
+import type { Changeset, Repository } from "@scm-manager/ui-types";
+import { Interpolate, translate } from "react-i18next";
+import injectSheet from "react-jss";
+
+import {
+  DateFromNow,
+  ChangesetId,
+  ChangesetTag,
+  ChangesetAuthor,
+  ChangesetDiff,
+  AvatarWrapper,
+  AvatarImage,
+  changesets
+} from "@scm-manager/ui-components";
+
+import classNames from "classnames";
+import type { Tag } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+
+const styles = {
+  spacing: {
+    marginRight: "1em"
+  },
+  tags: {
+    "& .tag": {
+      marginLeft: ".25rem"
+    }
+  }
+};
+
+type Props = {
+  changeset: Changeset,
+  repository: Repository,
+  t: string => string,
+  classes: any
+};
+
+class ChangesetDetails extends React.Component<Props> {
+  render() {
+    const { changeset, repository, classes } = this.props;
+
+    const description = changesets.parseDescription(changeset.description);
+
+    const id = (
+      <ChangesetId repository={repository} changeset={changeset} link={false} />
+    );
+    const date = <DateFromNow date={changeset.date} />;
+
+    return (
+      <div>
+        <div className="content">
+          <h4>
+            <ExtensionPoint
+              name="changeset.description"
+              props={{ changeset, value: description.title }}
+              renderAll={false}
+            >
+              {description.title}
+            </ExtensionPoint>
+          </h4>
+          <article className="media">
+            <AvatarWrapper>
+              <p className={classNames("image", "is-64x64", classes.spacing)}>
+                <AvatarImage person={changeset.author} />
+              </p>
+            </AvatarWrapper>
+            <div className="media-content">
+              <p>
+                <ChangesetAuthor changeset={changeset} />
+              </p>
+              <p>
+                <Interpolate
+                  i18nKey="changeset.summary"
+                  id={id}
+                  time={date}
+                />
+              </p>
+            </div>
+            <div className="media-right">{this.renderTags()}</div>
+          </article>
+
+          <p>
+            {description.message.split("\n").map((item, key) => {
+              return (
+                <span key={key}>
+                  <ExtensionPoint
+                    name="changeset.description"
+                    props={{ changeset, value: item }}
+                    renderAll={false}
+                  >
+                    {item}
+                  </ExtensionPoint>
+                  <br />
+                </span>
+              );
+            })}
+          </p>
+        </div>
+        <div>
+          <ChangesetDiff changeset={changeset} />
+        </div>
+      </div>
+    );
+  }
+
+  getTags = () => {
+    const { changeset } = this.props;
+    return changeset._embedded.tags || [];
+  };
+
+  renderTags = () => {
+    const { classes } = this.props;
+    const tags = this.getTags();
+    if (tags.length > 0) {
+      return (
+        <div className={classNames("level-item", classes.tags)}>
+          {tags.map((tag: Tag) => {
+            return <ChangesetTag key={tag.name} tag={tag} />;
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
+}
+
+export default injectSheet(styles)(translate("repos")(ChangesetDetails));