@scm-manager/ui-components 4.0.0-REACT18-20250701-125025 → 4.0.0-REACT18-20250824-143504

package/src/Paginator.test.tsx

@@ -15,16 +15,23 @@
  */
 
 import React from "react";
-import { mount, shallow } from "@scm-manager/ui-tests/enzyme-router";
-import "@scm-manager/ui-tests/i18n";
+import { render, screen } from "@testing-library/react";
 import Paginator from "./Paginator";
 
-xdescribe("paginator rendering tests", () => {
+describe("Temporary test to be removed", () => {
+  it("true", () => {
+    expect(true).toBe(true);
+  });
+});
+
+//TODO Fix jest preset to include TextEncoder in its environment
+/*
+describe("paginator rendering tests", () => {
   const dummyLink = {
     href: "https://dummy",
   };
 
-  it("should render all buttons but disabled, without links", () => {
+  it("should render all buttons but disabled, without links", async () => {
     const collection = {
       page: 10,
       pageTotal: 20,
@@ -32,16 +39,18 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(7);
     buttons.forEach((button) => {
-      // @ts-ignore ???
-      expect(button.props.disabled).toBeTruthy();
+      // @ts-ignore
+      expect(button).toBeDisabled();
     });
   });
 
-  it("should render buttons for first page", () => {
+  it("should render buttons for first page", async () => {
     const collection = {
       page: 0,
       pageTotal: 148,
@@ -53,31 +62,33 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(5);
 
     // previous button
-    expect(buttons.get(0).props.disabled).toBeTruthy();
+    expect(buttons[0]).toBeDisabled();
     // last button
-    expect(buttons.get(1).props.disabled).toBeFalsy();
+    expect(buttons[1]).toBeEnabled();
     // first button
-    const firstButton = buttons.get(2).props;
-    expect(firstButton.disabled).toBeTruthy();
-    expect(firstButton.label).toBe(1);
+    const firstButton = buttons[2];
+    expect(firstButton).toBeDisabled();
+    expect(firstButton).toHaveTextContent("1");
 
     // next button
-    const nextButton = buttons.get(3).props;
-    expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe("2");
+    const nextButton = buttons[3];
+    expect(nextButton).toBeEnabled();
+    expect(nextButton).toHaveTextContent("2");
 
     // last button
-    const lastButton = buttons.get(4).props;
-    expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe("148");
+    const lastButton = buttons[4];
+    expect(lastButton).toBeEnabled();
+    expect(lastButton).toHaveTextContent("148");
   });
 
-  it("should render buttons for second page", () => {
+  it("should render buttons for second page", async () => {
     const collection = {
       page: 1,
       pageTotal: 148,
@@ -90,36 +101,38 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(6);
 
     // previous button
-    expect(buttons.get(0).props.disabled).toBeFalsy();
+    expect(buttons[0]).toBeEnabled();
     // last button
-    expect(buttons.get(1).props.disabled).toBeFalsy();
+    expect(buttons[1]).toBeEnabled();
     // first button
-    const firstButton = buttons.get(2).props;
-    expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe("1");
+    const firstButton = buttons[2];
+    expect(firstButton).toBeEnabled();
+    expect(firstButton).toHaveTextContent("1");
 
     // current button
-    const currentButton = buttons.get(3).props;
-    expect(currentButton.disabled).toBeTruthy();
-    expect(currentButton.label).toBe(2);
+    const currentButton = buttons[3];
+    expect(currentButton).toBeDisabled();
+    expect(currentButton).toHaveTextContent("2");
 
     // next button
-    const nextButton = buttons.get(4).props;
-    expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe("3");
+    const nextButton = buttons[4];
+    expect(nextButton).toBeEnabled();
+    expect(nextButton).toHaveTextContent("3");
 
     // last button
-    const lastButton = buttons.get(5).props;
-    expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe("148");
+    const lastButton = buttons[5];
+    expect(lastButton).toBeEnabled();
+    expect(lastButton).toHaveTextContent("148");
   });
 
-  it("should render buttons for last page", () => {
+  it("should render buttons for last page", async () => {
     const collection = {
       page: 147,
       pageTotal: 148,
@@ -130,31 +143,33 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(5);
 
     // previous button
-    expect(buttons.get(0).props.disabled).toBeFalsy();
+    expect(buttons[0]).toBeEnabled();
     // last button
-    expect(buttons.get(1).props.disabled).toBeTruthy();
+    expect(buttons[1]).toBeDisabled();
     // first button
-    const firstButton = buttons.get(2).props;
-    expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe("1");
+    const firstButton = buttons[2];
+    expect(firstButton).toBeEnabled();
+    expect(firstButton).toHaveTextContent("1");
 
     // next button
-    const nextButton = buttons.get(3).props;
-    expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe("147");
+    const nextButton = buttons[3];
+    expect(nextButton).toBeEnabled();
+    expect(nextButton).toHaveTextContent("147");
 
     // last button
-    const lastButton = buttons.get(4).props;
-    expect(lastButton.disabled).toBeTruthy();
-    expect(lastButton.label).toBe(148);
+    const lastButton = buttons[4];
+    expect(lastButton).toBeDisabled();
+    expect(lastButton).toHaveTextContent("148");
   });
 
-  it("should render buttons for penultimate page", () => {
+  it("should render buttons for penultimate page", async () => {
     const collection = {
       page: 146,
       pageTotal: 148,
@@ -167,36 +182,38 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(6);
 
     // previous button
-    expect(buttons.get(0).props.disabled).toBeFalsy();
+    expect(buttons[0]).toBeEnabled();
     // last button
-    expect(buttons.get(1).props.disabled).toBeFalsy();
+    expect(buttons[1]).toBeEnabled();
 
     // first button
-    const firstButton = buttons.get(2).props;
-    expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe("1");
+    const firstButton = buttons[2];
+    expect(firstButton).toBeEnabled();
+    expect(firstButton).toHaveTextContent("1");
 
-    const currentButton = buttons.get(3).props;
-    expect(currentButton.disabled).toBeFalsy();
-    expect(currentButton.label).toBe("146");
+    const currentButton = buttons[3];
+    expect(currentButton).toBeEnabled();
+    expect(currentButton).toHaveTextContent("146");
 
     // current button
-    const nextButton = buttons.get(4).props;
-    expect(nextButton.disabled).toBeTruthy();
-    expect(nextButton.label).toBe(147);
+    const nextButton = buttons[4];
+    expect(nextButton).toBeDisabled();
+    expect(nextButton).toHaveTextContent("147");
 
     // last button
-    const lastButton = buttons.get(5).props;
-    expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe("148");
+    const lastButton = buttons[5];
+    expect(lastButton).toBeEnabled();
+    expect(lastButton).toHaveTextContent("148");
   });
 
-  it("should render buttons for a page in the middle", () => {
+  it("should render buttons for a page in the middle", async () => {
     const collection = {
       page: 41,
       pageTotal: 148,
@@ -209,42 +226,44 @@ xdescribe("paginator rendering tests", () => {
       _embedded: {},
     };
 
-    const paginator = shallow(<Paginator collection={collection} />);
-    const buttons = paginator.find("Button");
+    render(<Paginator collection={collection} />);
+
+    const buttons = await screen.findAllByRole("button");
+
     expect(buttons.length).toBe(7);
 
     // previous button
-    expect(buttons.get(0).props.disabled).toBeFalsy();
+    expect(buttons[0]).toBeEnabled();
     // next button
-    expect(buttons.get(1).props.disabled).toBeFalsy();
+    expect(buttons[1]).toBeEnabled();
 
     // first button
-    const firstButton = buttons.get(2).props;
-    expect(firstButton.disabled).toBeFalsy();
-    expect(firstButton.label).toBe("1");
+    const firstButton = buttons[2];
+    expect(firstButton).toBeEnabled();
+    expect(firstButton).toHaveTextContent("1");
 
     // previous Button
-    const previousButton = buttons.get(3).props;
-    expect(previousButton.disabled).toBeFalsy();
-    expect(previousButton.label).toBe("41");
+    const previousButton = buttons[3];
+    expect(previousButton).toBeEnabled();
+    expect(previousButton).toHaveTextContent("41");
 
     // current button
-    const currentButton = buttons.get(4).props;
-    expect(currentButton.disabled).toBeTruthy();
-    expect(currentButton.label).toBe(42);
+    const currentButton = buttons[4];
+    expect(currentButton).toBeDisabled();
+    expect(currentButton).toHaveTextContent("42");
 
     // next button
-    const nextButton = buttons.get(5).props;
-    expect(nextButton.disabled).toBeFalsy();
-    expect(nextButton.label).toBe("43");
+    const nextButton = buttons[5];
+    expect(nextButton).toBeEnabled();
+    expect(nextButton).toHaveTextContent("43");
 
     // last button
-    const lastButton = buttons.get(6).props;
-    expect(lastButton.disabled).toBeFalsy();
-    expect(lastButton.label).toBe("148");
+    const lastButton = buttons[6];
+    expect(lastButton).toBeEnabled();
+    expect(lastButton).toHaveTextContent("148");
   });
 
-  it("should call the function with the last previous url", () => {
+  it("should call the function with the last previous url", async () => {
     const collection = {
       page: 41,
       pageTotal: 148,
@@ -264,9 +283,11 @@ xdescribe("paginator rendering tests", () => {
       urlToOpen = url;
     };
 
-    const paginator = mount(<Paginator collection={collection} onPageChange={callMe} />);
-    paginator.find("Button.pagination-previous").simulate("click");
+    render(<Paginator collection={collection} onPageChange={callMe} />);
+
+    const previousButton = await screen.getByRole("button", { name: /paginator.previous/i });
+    previousButton.click();
 
     expect(urlToOpen).toBe("https://www.scm-manager.org");
   });
-});
+});*/

package/src/PdfViewer.stories.tsx

@@ -14,13 +14,91 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+// import React from "react";
+// import PdfViewer from "./PdfViewer";
+// // @ts-ignore no need to declare module for a single import
+// import pdf from "./__resources__/doc.pdf";
+// import { storiesOf } from "@storybook/react";
+//
+// storiesOf("PdfViewer", module)
+//   .add("Simple", () => <PdfViewer src={pdf} />)
+//   .add("Error", () => <PdfViewer src="/does/not/exists" />)
+//   .add("Error with download URL", () => <PdfViewer src="/does/not/exists" download={pdf} />);import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react";
+//
+// import PdfViewer from "./PdfViewer";
+// // @ts-ignore no need to declare module for a single import
+// import pdf from "./__resources__/doc.pdf";
+//
+// const meta: Meta<typeof PdfViewer> = {
+//   title: "Components/PdfViewer",
+//   component: PdfViewer,
+//   parameters: {
+//     layout: "fullscreen",
+//   },
+//   tags: ["autodocs"],
+// };
+//
+// export default meta;
+//
+// type Story = StoryObj<typeof meta>;
+//
+// export const Simple: Story = {
+//   args: {
+//     src: pdf,
+//   },
+// };
+//
+// export const Error: Story = {
+//   args: {
+//     src: "/does/not/exist.pdf",
+//   },
+// };
+//
+// export const ErrorWithDownloadUrl: Story = {
+//   name: "Error With Download URL",
+//   args: {
+//     src: "/does/not/exist.pdf",
+//     download: pdf,
+//   },
+// };
+
 import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import PdfViewer from "./PdfViewer";
 // @ts-ignore no need to declare module for a single import
 import pdf from "./__resources__/doc.pdf";
-import { storiesOf } from "@storybook/react";
 
-storiesOf("PdfViewer", module)
-  .add("Simple", () => <PdfViewer src={pdf} />)
-  .add("Error", () => <PdfViewer src="/does/not/exists" />)
-  .add("Error with download URL", () => <PdfViewer src="/does/not/exists" download={pdf} />);
+const meta: Meta<typeof PdfViewer> = {
+  title: "Components/PdfViewer",
+  component: PdfViewer,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    src: pdf,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    src: "/does/not/exist.pdf",
+  },
+};
+
+export const ErrorWithDownloadUrl: Story = {
+  name: "Error With Download URL",
+  args: {
+    src: "/does/not/exist.pdf",
+    download: pdf,
+  },
+};

package/src/PreformattedCodeBlock.stories.tsx

@@ -14,39 +14,109 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
+// import * as React from "react";
+// import { storiesOf } from "@storybook/react";
+// import styled from "styled-components";
+// import PreformattedCodeBlock from "./PreformattedCodeBlock";
+// import { SubSubtitle } from "./layout";
+//
+// const Wrapper = styled.div``;
+//
+// const longContent =
+//   "#!/bin/bash\n" +
+//   "\n" +
+//   "### For this hook to work you need the SCM CLI client (https://scm-manager.org/cli/)\n" +
+//   "### installed and connected to your SCM Server.\n" +
+//   "\n" +
+//   "BRANCH_NAME=$(git symbolic-ref --short HEAD)\n" +
+//   "COMMIT_MSG_FILE=`cat $1`\n" +
+//   "\n" +
+//   'scm repo commit-message-check aaa/ultimate-repo $BRANCH_NAME "$COMMIT_MSG_FILE"';
+//
+// storiesOf("PreformattedCodeBlock", module)
+//   .addDecorator((storyFn) => <Wrapper className="m-6">{storyFn()}</Wrapper>)
+//   .add("Default", () => <PreformattedCodeBlock>git checkout main</PreformattedCodeBlock>)
+//   .add("With scrollbar", () => (
+//     <PreformattedCodeBlock>
+//       git remote add origin
+//       https://scm-manager-instance4.example.org:8081/scm/repo/my-new-namespace/LoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitametLoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitamet
+//     </PreformattedCodeBlock>
+//   ))
+//   .add("Long content", () => <PreformattedCodeBlock>{longContent}</PreformattedCodeBlock>)
+//   .add("Combination", () => (
+//     <div className="content">
+//       <SubSubtitle>Clone the Repository</SubSubtitle>
+//       <PreformattedCodeBlock>git clone https://fancy-scm.url/scm/repo/test/scmm\n cd scmm</PreformattedCodeBlock>
+//       <SubSubtitle>Git hook for commit message validation</SubSubtitle>
+//       <PreformattedCodeBlock>{longContent}</PreformattedCodeBlock>
+//       <SubSubtitle>Get Remote Changes</SubSubtitle>
+//       <PreformattedCodeBlock>git fetch</PreformattedCodeBlock>
+//       <SubSubtitle>Switch Branch</SubSubtitle>
+//       <PreformattedCodeBlock>git checkout feature/something</PreformattedCodeBlock>
+//     </div>
+//   ));
+
+import React from "react";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
 import PreformattedCodeBlock from "./PreformattedCodeBlock";
 import { SubSubtitle } from "./layout";
 
+// --- Helper Components & Mock Data (preserved from your original story) ---
+
 const Wrapper = styled.div``;
 
-const longContent =
-  "#!/bin/bash\n" +
-  "\n" +
-  "### For this hook to work you need the SCM CLI client (https://scm-manager.org/cli/)\n" +
-  "### installed and connected to your SCM Server.\n" +
-  "\n" +
-  "BRANCH_NAME=$(git symbolic-ref --short HEAD)\n" +
-  "COMMIT_MSG_FILE=`cat $1`\n" +
-  "\n" +
-  'scm repo commit-message-check aaa/ultimate-repo $BRANCH_NAME "$COMMIT_MSG_FILE"';
-
-storiesOf("PreformattedCodeBlock", module)
-  .addDecorator((storyFn) => <Wrapper className="m-6">{storyFn()}</Wrapper>)
-  .add("Default", () => <PreformattedCodeBlock>git checkout main</PreformattedCodeBlock>)
-  .add("With scrollbar", () => (
-    <PreformattedCodeBlock>
-      git remote add origin
-      https://scm-manager-instance4.example.org:8081/scm/repo/my-new-namespace/LoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitametLoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitamet
-    </PreformattedCodeBlock>
-  ))
-  .add("Long content", () => <PreformattedCodeBlock>{longContent}</PreformattedCodeBlock>)
-  .add("Combination", () => (
+const longContent = `#!/bin/bash
+
+### For this hook to work you need the SCM CLI client (https://scm-manager.org/cli/)
+### installed and connected to your SCM Server.
+
+BRANCH_NAME=$(git symbolic-ref --short HEAD)
+COMMIT_MSG_FILE=$(cat $1)
+
+scm repo commit-message-check aaa/ultimate-repo $BRANCH_NAME "$COMMIT_MSG_FILE"`;
+
+// --- Storybook Metadata ---
+
+const meta: Meta<typeof PreformattedCodeBlock> = {
+  title: "Components/PreformattedCodeBlock",
+  component: PreformattedCodeBlock,
+  decorators: [(Story) => <Wrapper className="m-6">{Story()}</Wrapper>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+// --- Story Definitions ---
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "git checkout main",
+  },
+};
+
+export const WithScrollbar: Story = {
+  args: {
+    children:
+      "git remote add origin https://scm-manager-instance4.example.org:8081/scm/repo/my-new-namespace/LoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitametLoremipsumdolorsitametconsetetursadipscingelitrseddiamnonumyeirmodtemporinviduntutlaboreetdoloremagnaaliquyameratseddiamvoluptuaAtveroeosetaccusametjustoduodoloresetearebumStetclitakasdgubergrennoseatakimatasanctusestLoremipsumdolorsitamet",
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    children: longContent,
+  },
+};
+
+export const Combination: Story = {
+  // A custom `render` function is used for stories with a complex layout.
+  render: () => (
     <div className="content">
       <SubSubtitle>Clone the Repository</SubSubtitle>
-      <PreformattedCodeBlock>git clone https://fancy-scm.url/scm/repo/test/scmm\n cd scmm</PreformattedCodeBlock>
+      <PreformattedCodeBlock>git clone https://fancy-scm.url/scm/repo/test/scmm cd scmm</PreformattedCodeBlock>
       <SubSubtitle>Git hook for commit message validation</SubSubtitle>
       <PreformattedCodeBlock>{longContent}</PreformattedCodeBlock>
       <SubSubtitle>Get Remote Changes</SubSubtitle>
@@ -54,4 +124,5 @@ storiesOf("PreformattedCodeBlock", module)
       <SubSubtitle>Switch Branch</SubSubtitle>
       <PreformattedCodeBlock>git checkout feature/something</PreformattedCodeBlock>
     </div>
-  ));
+  ),
+};

package/src/ProtectedRoute.tsx

@@ -14,47 +14,22 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { Component } from "react";
-import { Redirect, Route, RouteComponentProps, RouteProps, withRouter } from "react-router-dom";
+import React from "react";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 
-type Props = RouteComponentProps &
-  RouteProps & {
-    authenticated?: boolean;
-  };
+type Props = {
+  authenticated?: boolean;
+};
 
-class ProtectedRoute extends Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      error: undefined,
-    };
-  }
-
-  renderRoute = (Component: any) => {
-    const { authenticated } = this.props;
+const ProtectedRoute: React.FC<Props> = ({ authenticated }) => {
+  const location = useLocation();
 
-    return (routeProps: any) => {
-      if (authenticated) {
-        return <Component {...routeProps} />;
-      } else {
-        return (
-          <Redirect
-            to={{
-              pathname: "/login",
-              state: {
-                from: routeProps.location,
-              },
-            }}
-          />
-        );
-      }
-    };
-  };
-
-  render() {
-    const { component, ...routeProps } = this.props;
-    return <Route {...routeProps} render={this.renderRoute(component)} />;
+  if (authenticated === undefined) {
+    // Optional: Render a loading indicator while checking auth status
+    return null; // or <Loading />
   }
-}
 
-export default withRouter(ProtectedRoute);
+  return authenticated ? <Outlet /> : <Navigate to="/login" replace state={{ from: location }} />;
+};
+
+export default ProtectedRoute;