Fix useChangesets hook limit and refactor ChangesetRow.tsx

scm-ui/ui-api/src/changesets.ts

@@ -56,11 +56,11 @@ export const useChangesets = (
 
   if (request?.page || request?.limit) {
     if (request?.page && request?.limit) {
-      link = `${link}?page=${request.page}&limit=${request.limit}`;
+      link = `${link}?page=${request.page}&pageSize=${request.limit}`;
     } else if (request.page) {
       link = `${link}?page=${request.page}`;
     } else if (request.limit) {
-      link = `${link}?limit=${request.limit}`;
+      link = `${link}?pageSize=${request.limit}`;
     }
   }
 

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -20765,7 +20765,7 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
+                  className="SingleChangeset__FixedSizedAvatar-ytpqp9-0 cFkYuh image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -20775,7 +20775,7 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                 </div>
               </figure>
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -20931,7 +20931,7 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
+                  className="SingleChangeset__FixedSizedAvatar-ytpqp9-0 cFkYuh image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -20941,7 +20941,7 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                 </div>
               </figure>
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21083,7 +21083,7 @@ exports[`Storyshots Repositories/Changesets Default 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21196,7 +21196,7 @@ exports[`Storyshots Repositories/Changesets Replacements 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21319,7 +21319,7 @@ exports[`Storyshots Repositories/Changesets With Committer 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21444,7 +21444,7 @@ exports[`Storyshots Repositories/Changesets With Committer and Co-Author 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21581,7 +21581,7 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="ChangesetRow__FixedSizedAvatar-tkpti5-1 cavgTa image"
+                  className="SingleChangeset__FixedSizedAvatar-ytpqp9-0 cFkYuh image"
                 >
                   <img
                     alt="SCM Administrator"
@@ -21591,7 +21591,7 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
                 </div>
               </figure>
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21704,7 +21704,7 @@ exports[`Storyshots Repositories/Changesets With contactless signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21827,7 +21827,7 @@ exports[`Storyshots Repositories/Changesets With invalid signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -21950,7 +21950,7 @@ exports[`Storyshots Repositories/Changesets With multiple Co-Authors 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22076,7 +22076,7 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and invalid
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22199,7 +22199,7 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and not fou
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22322,7 +22322,7 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and valid s
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22445,7 +22445,7 @@ exports[`Storyshots Repositories/Changesets With unknown signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22568,7 +22568,7 @@ exports[`Storyshots Repositories/Changesets With unowned signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"
@@ -22691,7 +22691,7 @@ exports[`Storyshots Repositories/Changesets With valid signature 1`] = `
               className="media"
             >
               <div
-                className="ChangesetRow__FullWidthDiv-tkpti5-2 fkpYZP media-right ml-0"
+                className="SingleChangeset__FullWidthDiv-ytpqp9-1 dYhvFy media-right ml-0"
               >
                 <h4
                   className="has-text-weight-bold is-ellipsis-overflow"

scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx

@@ -21,23 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
-import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Changeset, Repository } from "@scm-manager/ui-types";
-import DateFromNow from "../../DateFromNow";
-import { AvatarWrapper, AvatarImage } from "../../avatar";
-import { parseDescription } from "./changesets";
-import ChangesetId from "./ChangesetId";
-import ChangesetAuthor from "./ChangesetAuthor";
-import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
-import ChangesetDescription from "./ChangesetDescription";
+import SingleChangeset from "./SingleChangeset";
-import SignatureIcon from "./SignatureIcon";
 
-type Props = WithTranslation & {
+type Props = {
   repository: Repository;
   changeset: Changeset;
 };
@@ -52,75 +44,12 @@ const Wrapper = styled.div`
   }
 `;
 
-const FixedSizedAvatar = styled.div`
+const ChangesetRow: FC<Props> = ({ repository, changeset }) => {
-  width: 35px;
-  height: 35px;
-`;
-
-const FullWidthDiv = styled.div`
-  width: 100%;
-`;
-
-class ChangesetRow extends React.Component<Props> {
-  createChangesetId = (changeset: Changeset) => {
-    const { repository } = this.props;
-    return <ChangesetId changeset={changeset} repository={repository} />;
-  };
-
-  render() {
-    const { repository, changeset } = this.props;
-    const description = parseDescription(changeset.description);
-    const changesetId = this.createChangesetId(changeset);
-    const dateFromNow = <DateFromNow date={changeset.date} />;
-
   return (
     <Wrapper>
       <div className={classNames("columns", "is-gapless", "is-mobile")}>
         <div className={classNames("column", "is-three-fifths")}>
-            <div className={classNames("columns", "is-gapless")}>
+          <SingleChangeset repository={repository} changeset={changeset} />
-              <div className={classNames("column", "is-four-fifths")}>
-                <div className="media">
-                  <AvatarWrapper>
-                    <figure className={classNames("media-left", "mt-2", "mr-2")}>
-                      <FixedSizedAvatar className="image">
-                        <AvatarImage person={changeset.author} />
-                      </FixedSizedAvatar>
-                    </figure>
-                  </AvatarWrapper>
-                  <FullWidthDiv className={classNames("media-right", "ml-0")}>
-                    <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow")}>
-                      <ExtensionPoint
-                        name="changeset.description"
-                        props={{
-                          changeset,
-                          value: description.title,
-                        }}
-                        renderAll={false}
-                      >
-                        <ChangesetDescription changeset={changeset} value={description.title} />
-                      </ExtensionPoint>
-                    </h4>
-                    <p className="is-hidden-touch">
-                      <Trans i18nKey="repos:changeset.summary" components={[changesetId, dateFromNow]} />
-                    </p>
-                    <p className="is-hidden-desktop">
-                      <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
-                    </p>
-                    <div className="is-flex">
-                      <p className={classNames("is-size-7", "is-ellipsis-overflow", "mt-2")}>
-                        <ChangesetAuthor changeset={changeset} />
-                      </p>
-                      {changeset?.signatures && changeset.signatures.length > 0 && (
-                        <SignatureIcon className={classNames("mx-2", "pt-1")} signatures={changeset.signatures} />
-                      )}
-                    </div>
-                  </FullWidthDiv>
-                </div>
-              </div>
-              <div className={classNames("column", "is-align-self-center")}>
-                <ChangesetTags changeset={changeset} />
-              </div>
-            </div>
         </div>
         <div className={classNames("column", "is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
           <ChangesetButtonGroup repository={repository} changeset={changeset} />
@@ -136,7 +65,6 @@ class ChangesetRow extends React.Component<Props> {
       </div>
     </Wrapper>
   );
-  }
+};
-}
 
-export default withTranslation("repos")(ChangesetRow);
+export default ChangesetRow;

scm-ui/ui-components/src/repos/changesets/SingleChangeset.tsx

@@ -0,0 +1,110 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import classNames from "classnames";
+import { AvatarImage, AvatarWrapper } from "../../avatar";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import ChangesetDescription from "./ChangesetDescription";
+import { Trans } from "react-i18next";
+import ChangesetAuthor from "./ChangesetAuthor";
+import SignatureIcon from "./SignatureIcon";
+import ChangesetTags from "./ChangesetTags";
+import { parseDescription } from "./changesets";
+import DateFromNow from "../../DateFromNow";
+import { Changeset, Repository } from "@scm-manager/ui-types";
+import styled from "styled-components";
+import ChangesetId from "./ChangesetId";
+
+type Props = {
+  repository: Repository;
+  changeset: Changeset;
+};
+
+const FixedSizedAvatar = styled.div`
+  width: 35px;
+  height: 35px;
+`;
+
+const FullWidthDiv = styled.div`
+  width: 100%;
+`;
+
+const SingleChangeset: FC<Props> = ({ repository, changeset }) => {
+  const createChangesetId = () => {
+    return <ChangesetId changeset={changeset} repository={repository} />;
+  };
+
+  const description = parseDescription(changeset.description);
+  const changesetId = createChangesetId();
+  const dateFromNow = <DateFromNow date={changeset.date} />;
+
+  return (
+    <div className={classNames("columns", "is-gapless")}>
+      <div className={classNames("column", "is-four-fifths")}>
+        <div className="media">
+          <AvatarWrapper>
+            <figure className={classNames("media-left", "mt-2", "mr-2")}>
+              <FixedSizedAvatar className="image">
+                <AvatarImage person={changeset.author} />
+              </FixedSizedAvatar>
+            </figure>
+          </AvatarWrapper>
+          <FullWidthDiv className={classNames("media-right", "ml-0")}>
+            <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow")}>
+              <ExtensionPoint
+                name="changeset.description"
+                props={{
+                  changeset,
+                  value: description.title,
+                }}
+                renderAll={false}
+              >
+                <ChangesetDescription changeset={changeset} value={description.title} />
+              </ExtensionPoint>
+            </h4>
+            <p className="is-hidden-touch">
+              <Trans i18nKey="repos:changeset.summary" components={[changesetId, dateFromNow]} />
+            </p>
+            <p className="is-hidden-desktop">
+              <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
+            </p>
+            <div className="is-flex">
+              <p className={classNames("is-size-7", "is-ellipsis-overflow", "mt-2")}>
+                <ChangesetAuthor changeset={changeset} />
+              </p>
+              {changeset?.signatures && changeset.signatures.length > 0 && (
+                <SignatureIcon className={classNames("mx-2", "pt-1")} signatures={changeset.signatures} />
+              )}
+            </div>
+          </FullWidthDiv>
+        </div>
+      </div>
+      <div className={classNames("column", "is-align-self-center")}>
+        <ChangesetTags changeset={changeset} />
+      </div>
+    </div>
+  );
+};
+
+export default SingleChangeset;

scm-ui/ui-components/src/repos/changesets/index.ts

@@ -23,6 +23,7 @@
  */
 
 import * as changesets from "./changesets";
+
 export { changesets };
 
 export { default as ChangesetAuthor, SingleContributor } from "./ChangesetAuthor";
@@ -37,3 +38,4 @@ export { default as ChangesetTags } from "./ChangesetTags";
 export { default as ChangesetTagsCollapsed } from "./ChangesetTagsCollapsed";
 export { default as ContributorAvatar } from "./ContributorAvatar";
 export { default as SignatureIcon } from "./SignatureIcon";
+export { default as SingleChangeset } from "./SingleChangeset";